@charset "UTF-8"; /* character set. don't worry about it. evidently shouldmust be absolutely first.*/

/* we've got _normalize, _reset, and _sanitize. try them all if you want to see the difference. */
@import url("_normalize.css");

/* everything needs boxing. the default is to pad on the outside; this pads on the inside. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* design tokens. aliases for future use so future use is more uniform. let's try it and see how it works... prolly better for larger efforts. but if you wanted simple you'd've used crayons. */
/* the '--' is required for custom attributes; the rest is all you. this is a 'come back to it' section i think. follow the steps and prune the tree if winds up unused. */
:root {
    /* colors - can be W3C words - v1: basic-basics and the original callback script */
    --color-text: white;
    --color-text-contrast: snow;
    --color-text-nav: whitesmoke;
    --color-background: black;
    --color-background-contrast: #220000;
    --color-background-zebra: maroon;
    --color-background-rouge-1: transparent;
    --color-background-rouge-2: transparent;
    --color-background-nav: #110000;
    --color-rocky: red;
    --color-accent: gold;
    --color-guidance: #555500;
    --color-response: khaki;
    --color-participation: yellowgreen;
    --color-overlay: aqua;
    --color-discuss-a: fuchsia;
    --color-discuss-b: hotpink;
    --color-chant: darkorange;
    --color-timed: tomato;
    --color-screenfuck: gold;
    --color-regional: bisque;
    --color-popbox-bg: #220000;
    --color-popbox-text: white;
    --color-popbox-border: gold;
    --popbox-border-width: 1px;
    /** typography */
    /* font face - because faces are good */
    --font-sans: sans-serif;    /* this needs to be played with! */
    --font-rocky: "Double Feature", "Double Feature Normal", system-ui, sans-serif;
    /* font size - rems are relative to the html font-size, not the parent */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    /* line height - it's a scalar on purpose, no units - mess with it later to make yourself feel better */
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-wide: 1.75;
    /* spacing */
    --flush: 0;
    --spacing-0: 0;
    --spacing-half: 0.25rem;
    --spacing-1: 0.5rem;
    --spacing-2: 1rem;
    --spacing-3: 1.5rem;
    --spacing-4: 2rem;
    /* breakpoints - for mobile scaling; the numbers are cuz default font-size makes 1em = 16px */
    --breakpoint-mobile: 30em;
    --breakpoint-tablet: 48em;
    --breakpoint-laptop: 62em;
    --breakpoint-desktop: 75em;
    /* z-indexes - because at some point element drawing order might make a difference */
    --zindex-default: auto;
    --zindex-dropdown: 1000;
    --zindex-sticky: 1020;
    --zindex-modal: 1100;
    --zindex-tooltip: 1200;    
    /* added after initial build - stuff that GPT threw out when i asked for new functionality */
    --nav-height: 3rem;
}

/* base tags. all the yummy good stuff that you can screw up by not thinking it through completely. Whee! */
html {
    text-rendering: optimizeLegibility; /* we want smooth displays. this is my fault. */
    -webkit-font-smoothing: antialiased;    /* disables subpixel AA in WebKit */
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale; /* simpler AA in Firefox on macOS */
    color-scheme: light dark;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: var(--nav-height) 0 var(--spacing-2) 0; /* the padding is hypothetically for the nav bar */
    font-family: var(--font-sans, system-ui, sans-serif);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: var(--line-height-base);
}
p {
    margin-block-start: var(--flush);
    margin-block-end: var(--spacing-2);
    margin-inline: var(--flush); /* order-independent version of 'margin: 0 0 var(--spacing-3) 0;' */
}
h1, h2, h3, h4, h5, h6 {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-2);
    font-family: var(--font-header, var(--font-sans));
    font-weight: normal;
    line-height: var(--line-height-tight);
}
h1 { font-size: var(--font-size-xxl); }
h2 { font-size: var(--font-size-xl);  }
h3 { font-size: var(--font-size-lg);  }
h4 { font-size: var(--font-size-md);  }
h5 { font-size: var(--font-size-sm);  }
h6 { font-size: var(--font-size-xs);  }
a {
    color: var(--color-rocky);
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: underline;
}
ul, ol {
    margin-top: var(--flush);
    margin-bottom: var(--spacing-2);
    padding-left: var(--spacing-3);
}
li {
    margin-top: var(--flush);
    margin-bottom: var(--spacing-half);
}

/**** utility and layout. classes for spacing and grids; i'm copying verbatim because it's easier and i'm lazy and also i don't think i'll be able to custom poke them til i try using them.*/

/* Flexbox Helpers - okay, so in short, does all that spacing stuff you always did with tables and makes it more universally applicable; probably best to poke at it with GPT or another guide by your side */
.flex               { display: flex; }
.flex-row           { flex-direction: row; }
.flex-col           { flex-direction: column; }
.flex-wrap          { flex-wrap: wrap; }
.justify-start      { justify-content: flex-start; }
.justify-center     { justify-content: center; }
.justify-between    { justify-content: space-between; }
.justify-around     { justify-content: space-around; }
.justify-evenly     { justify-content: space-evenly; }
.align-start        { align-items: flex-start; }
.align-center       { align-items: center; }
.align-end          { align-items: flex-end; }
.align-stretch      { align-items: stretch; }
.flex-1             { flex: 1; }
.flex-none          { flex: 0 0 auto; }

/* Gap Utilities (uses your spacing scale) - used with the flexbox stuff */
.gap-1              { gap: var(--spacing-half); }
.gap-2              { gap: var(--spacing-1); }
.gap-3              { gap: var(--spacing-2); }

/* Grid Helpers - grids ain't tables, but they have some shared visual results */
.grid               { display: grid; gap: var(--spacing-1); }
.grid-cols-2        { grid-template-columns: repeat(2, 1fr); } /* 'fr' is 'fraction', as in 'fraction of the remaining space in the container' */
.grid-cols-3        { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4        { grid-template-columns: repeat(4, 1fr); }
/* Auto-fit grid with a minimum column width */
.grid-cols-auto     { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Visually Hidden (Screen-Reader Only) - maybe later we make a hearing-assistance thing, this'll be what we use to keep bits off the visual version */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Clearfix for floated children - when items jump out of their parents' boxes; likely won't be needed, but better to have it...*/
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/**** responsive breakpoints (mobile-first). okay, this is after you've got a core site going. seems like you can work on the sizings to go from small to large, making sure to only include stuff once the screen is large enough to properly use it. another one that'll require a second pass to use well. */ 
.container {
	width: 100%;
	max-width: 30rem;
	margin: 0 auto;
	padding: var(--spacing-half);
}
@media (min-width: 30rem) {
  .container {
    max-width: 30rem;         /* 480px */
  }
}
@media (min-width: 48rem) {
  .container {
    max-width: 48rem;         /* 768px */
  }
  /* example: switch nav layout from vertical to horizontal */
  .menu {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-2);
  }
}
@media (min-width: 62rem) {
  .container {
    max-width: 62rem;         /* 992px */
  }
}
@media (min-width: 75rem) {
  .container {
    max-width: 75rem;         /* 1200px */
  }
}

/* table layouts. don't know if this was originally on the menu, but here we go. */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    padding: var(--spacing-1);
    text-align: left;
    border: 1px solid var(--color-rocky);
}
thead {
	background-color: var(--color-background-contrast);
	color: var(--color-text-contrast);
}
/* use this class in the <table> tag to give some zebra love */
.zebra tbody tr:nth-child(even) {
	background-color: var(--color-background-zebra);
}
.table-fixed {	/* uniform column widths */
	table-layout: fixed;
}
.table-responsive {	/* prevent tiny screens from getting splatted, force 'em to scroll instead of smushing up */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;	/* ios smoothing */
}

/**** printing stuff. i asked, it delivered; this seems important if we're gonna create a printoutable version at some soon point. */
@media print {
	@page {
		margin: 1in;	/* Page margin for print */
		size: letter portrait;
	}
  body {	  /* Ensure background is white and text is black */
    background: #fff !important;
    color: #000 !important;
    font-size: 9pt !important;
  }
  p { orphans: 2; widows: 2; }	/* widow 'n orphan control! neat! if you disregard the naming convention which is kind of depressing anyway! */
  h1, h2, h3, h4, h5, h6 { page-break-before: always; } /* section breaks become new pages! yay! */
  nav,
  .no-print {	/* Hide navigation and any element you mark as non-printable */
    display: none !important;
  }
	table,
	img {		/* Prevent tables and images from breaking across pages */
	/*	page-break-inside: avoid;	/* this seems to have negative effects in big ol' script tables... */
    /* break-inside: avoid;	/* and here too - i'm debugging i hope... */
  }
  table,
  th,
  td {	/* Print-friendly table borders */
    border: 1px solid #000 !important;
  }
  /* classes only stuff */
  .no-break { page-break-inside: avoid; }	/* might need to be put elsewhere - but this attribute seems useful for the script tables, if i use it right, to keep dialogue from running to other pages */
}

/***** THIS IS WHERE I ACTUALLY WORK. no, seriously though, much of this will/should be individual classes; if i have to keep going back and working the core CSS, i've made a mistake and should reconsider my method. */
.response {
  color: var(--color-response);
  /* might not be called for - save for debugging and poking
  position: relative; cursor: help; */
}
.response:hover::after {
  content: "Audience response - shout at the screen";
  /* the hovery version
  position: absolute; top: 100%; left: 0; */
  /* the absolute version */
  position: fixed; top: var(--nav-height); right: 1rem;
  white-space: nowrap;
  background: var(--color-popbox-bg);
  color: var(--color-popbox-text);
  padding: var(--spacing-half) var(--spacing-1);
  border-radius: var(--spacing-half);
  z-index: var(--z-index-tooltip, 1000);
  pointer-events: none;
  transform: translateY(var(--spacing-half));
  box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
  border-width: var(--popbox-border-width); border-style: solid; border-color: var(--color-popbox-border);
}
.participation { color: var(--color-participation); }
.participation:hover::after {
  content: "Audience participation - join in or take cover";
  position: fixed; top: var(--nav-height); right: 1rem;
  white-space: nowrap;
  background: var(--color-popbox-bg);
  color: var(--color-popbox-text);
  padding: var(--spacing-half) var(--spacing-1);
  border-radius: var(--spacing-half);
  z-index: var(--z-index-tooltip, 1000);
  pointer-events: none;
  transform: translateY(var(--spacing-half));
  box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
  border-width: var(--popbox-border-width); border-style: solid; border-color: var(--color-popbox-border);
}
.overlay { color: var(--color-overlay); }
.overlay:hover::after {
  content: "Simultaneous - timed to overlay the movie track";
  position: fixed; top: var(--nav-height); right: 1rem;
  white-space: nowrap;
  background: var(--color-popbox-bg);
  color: var(--color-popbox-text);
  padding: var(--spacing-half) var(--spacing-1);
  border-radius: var(--spacing-half);
  z-index: var(--z-index-tooltip, 1000);
  pointer-events: none;
  transform: translateY(var(--spacing-half));
  box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
  border-width: var(--popbox-border-width); border-style: solid; border-color: var(--color-popbox-border);
}
.discuss-a { color: var(--color-discuss-a); }
.discuss-a:hover::after {
  content: "Call/Answer - half of you say one thing, half t'other";
  position: fixed; top: var(--nav-height); right: 1rem;
  white-space: nowrap;
  background: var(--color-popbox-bg);
  color: var(--color-popbox-text);
  padding: var(--spacing-half) var(--spacing-1);
  border-radius: var(--spacing-half);
  z-index: var(--z-index-tooltip, 1000);
  pointer-events: none;
  transform: translateY(var(--spacing-half));
  box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
  border-width: var(--popbox-border-width); border-style: solid; border-color: var(--color-popbox-border);
}
.discuss-b { color: var(--color-discuss-b); }
.discuss-b:hover::after {
  content: "Call/Answer - half of you say one thing, half t'other";
  position: fixed; top: var(--nav-height); right: 1rem;
  white-space: nowrap;
  background: var(--color-popbox-bg);
  color: var(--color-popbox-text);
  padding: var(--spacing-half) var(--spacing-1);
  border-radius: var(--spacing-half);
  z-index: var(--z-index-tooltip, 1000);
  pointer-events: none;
  transform: translateY(var(--spacing-half));
  box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
  border-width: var(--popbox-border-width); border-style: solid; border-color: var(--color-popbox-border);
}
.chant { color: var(--color-chant); }
.chant:hover::after {
  content: "Chant - repeat until unnecessary";
  position: fixed; top: var(--nav-height); right: 1rem;
  white-space: nowrap;
  background: var(--color-popbox-bg);
  color: var(--color-popbox-text);
  padding: var(--spacing-half) var(--spacing-1);
  border-radius: var(--spacing-half);
  z-index: var(--z-index-tooltip, 1000);
  pointer-events: none;
  transform: translateY(var(--spacing-half));
  box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
  border-width: var(--popbox-border-width); border-style: solid; border-color: var(--color-popbox-border);
}
.timed { color: var(--color-timed); }
.timed:hover::after {
  content: "Event timing - the callback is shaped by this bit of the movie";
  position: fixed; top: var(--nav-height); right: 1rem;
  white-space: nowrap;
  background: var(--color-popbox-bg);
  color: var(--color-popbox-text);
  padding: var(--spacing-half) var(--spacing-1);
  border-radius: var(--spacing-half);
  z-index: var(--z-index-tooltip, 1000);
  pointer-events: none;
  transform: translateY(var(--spacing-half));
  box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
  border-width: var(--popbox-border-width); border-style: solid; border-color: var(--color-popbox-border);
}
.screenfuck { color: var(--color-screenfuck); }
.screenfuck:hover::after {
  content: "Screen interactions - DO NOT DO WITHOUT THE PERFORMERS' PERMISSION";
  position: fixed; top: var(--nav-height); right: 1rem;
  white-space: nowrap;
  background: var(--color-popbox-bg);
  color: var(--color-popbox-text);
  padding: var(--spacing-half) var(--spacing-1);
  border-radius: var(--spacing-half);
  z-index: var(--z-index-tooltip, 1000);
  pointer-events: none;
  transform: translateY(var(--spacing-half));
  box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
  border-width: var(--popbox-border-width); border-style: solid; border-color: var(--color-popbox-border);
}
.regional { color: var(--color-regional); }
.regional:hover::after {
  content: "Regional - if you know the club, you'll get the reference";
  position: fixed; top: var(--nav-height); right: 1rem;
  white-space: nowrap;
  background: var(--color-popbox-bg);
  color: var(--color-popbox-text);
  padding: var(--spacing-half) var(--spacing-1);
  border-radius: var(--spacing-half);
  z-index: var(--z-index-tooltip, 1000);
  pointer-events: none;
  transform: translateY(var(--spacing-half));
  box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
  border-width: var(--popbox-border-width); border-style: solid; border-color: var(--color-popbox-border);
}

.performer { vertical-align: top; text-align: right; }
.script-lines { }

.verse {
  table-layout: auto;	/* use automatic column widths based on content */
  width: auto;
  border-collapse: collapse;
  margin: 0;
}
.verse th,
.verse td {
  border: none;
  background: transparent;
  padding: 0 0.25em 0 0;  /* small right-hand space */
}
.verse tbody tr:nth-child(odd) { vertical-align:bottom; background-color: var(--color-background-rouge-1); }
.verse tbody tr:nth-child(even) { vertical-align:top; background-color: var(--color-background-rouge-2); }

/* Invisible spacer HR */
.invisible {
  border: none;           /* remove the line */
  height: var(--spacing-4);
  margin: 0;              /* no extra gap beyond the height */
  padding: 0;             /* ensure no padding */
  background: transparent;/* no background color */
}

/* nav-bar classing */
.site-nav {
  /* first version
  position: fixed; top: 0; left: 0;
  width: 100%; height: var(--nav-height);
  background: var(--color-background-nav); color: var(--color-text-nav, var(--color-text));
  z-index: var(--z-index-sticky);
  display: flex; align-items:center;
  padding: 0 var(--spacing-2);
  */
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: max-content; height: var(--nav-height);
  background: var(--color-background-nav); color: var(--color-text-nav, var(--color-text));
  z-index: var(--z-index-sticky);
  display: flex; align-items:center;
  padding: 0 var(--spacing-2);
}
.site-nav a { color: inherit; text-decoration: none; padding: 0.5em; }
.site-nav a:hover { text-decoration: underline; }
.site-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-2);
}

/* 7-22: lets make this song stuff look better; use ONLY in spans - this pair should make each line alternate colors, so long as things are updated and wrapped in 'spans' instead of using 'br' tags */
.songline {
  display: block;
  margin: 0;              /* reset any default spacing */
  padding: var(--spacing-half) 0;
}
.prose::first-line { background-color: var(--color-background-zebra); }
/* Two‑color zebra in any .script‑lines or .verse cell */
/* 7-22: this is the original version of the class; keep it for future nifty */
/* .script-lines .songline:nth-child(even), .verse .line:nth-child(even) { */
.script-lines .songline:nth-child(even) {
  background-color: var(--color-background-nav);
}
/* 7-22: this is an artificial zebra that might be usable in the prose parts of the script. straight copied from GPT - don't use without going back and understanding wtf is going on. */
.notzebra {
  /* ensure your line‑height is a known value */
  line-height: 1.5;       /* for example */
  /* stripe height = line-height × font-size */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent               0,
    transparent               calc(1.5em),
    var(--color-background-zebra) calc(1.5em),
    var(--color-background-zebra) calc(3em)
  );
  background-attachment: local; /* ensures stripes scroll with text */
}

/* 7-22: for the opening page. i'm wondering if 'double feature' will register */
.rocky-font { font-family: var(--font-rocky); color: red; font-size: bigger; } /* the font needs to be bigger cuz it seems the original font is relatively smaller than comparable pt sizes */
.rocky-font strong { font-size: 1.2em; }

/* 7-22: starting on the prime page... gpt says i need this. i'll digest later. */
.form-control {
  padding: var(--spacing-1);
  border: 1px solid var(--color-accent);
  border-radius: var(--spacing-half);
  font-size: var(--font-size-md);
  width: 100%;
  box-sizing: border-box;
}
.btn {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border: none;
  border-radius: var(--spacing-half);
  cursor: pointer;
  font-size: var(--font-size-md);
  text-align: center;
}
.btn-primary {
  background-color: var(--color-rocky);
  color: var(--color-text);
}
.btn-secondary {
  background-color: var(--color-background-contrast);
  color: var(--color-text);
}
.btn-group { display: flex; gap: var(--spacing-2); }
.btn-submit { flex: 3; }    /* takes 3 parts */
.btn-reset  { flex: 1; }    /* takes 1 part */
.form-control-textarea {
  width: 100%;
  min-height: 6rem;
  box-sizing: border-box;
  padding: var(--spacing-1);
  border: 1px solid var(--color-accent);
  border-radius: var(--spacing-half);
  font-size: var(--font-size-md);
  font-family: inherit;
  resize: vertical; /* allow vertical resizing */
}
form {
  max-width: 40rem;
  margin: 0 auto;
}
form > label + input { margin: 0; }
label { display: block; margin: 0; padding: 0; }
@font-face {
  font-family: "Double Feature";
  src: url("fonts/DoubleFeature20.woff2") format("woff2"),  /* if you add a converted file later */
       url("fonts/DoubleFeature20.ttf")  format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.text-center { text-align: center; }
.form-row { width: 100%; max-width: 40rem; margin-bottom: var(--spacing-2); gap: var(--spacing-0); }
.guidance { color: var(--color-guidance); }
.to-the-right { text-align: right; line-height: var(--line-height-tight); }

#cb-form > .form-row,
#cb-form > .flex.gap-3,
#cb-form > input {
  margin-bottom: var(--spacing-0); /* adjust this to taste (e.g. 0 for no gap) */
}
.parenthetical { font-size: smaller; }