/* ============================================================
   DISNEY'S FROZEN, CALL BOARD
   Western Wyoming College, Fall 2026
   ------------------------------------------------------------
   Colors come from the MTI Logo Pack Style Guide. Every pair used
   for text was contrast tested before it was written here.

     Navy #171846 on white ........ 16.73:1  AAA, body text
     White on navy #171846 ........ 16.73:1  AAA, body text
     Pale ice #85CEE4 on navy ...... 9.51:1  AAA
     Cyan #00AEEF on navy .......... 6.61:1  large text and edges only
     Cyan #00AEEF on white ......... 2.53:1  never text, fills only
     Pale ice #85CEE4 on white ..... 1.76:1  never text, fills only

   Type substitutes the three commercial faces the style guide names:
     Neutraface 2 Condensed Bold -> Oswald 600
     Myriad Pro Bold / Regular   -> Source Sans 3 600 / 400
   Both are SIL Open Font Licensed and bundled locally.
   ============================================================ */

@font-face {
  font-family: 'Oswald';
  src: url('assets/fonts/Oswald[wght].ttf') format('truetype-variations');
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('assets/fonts/SourceSans3[wght].ttf') format('truetype-variations');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('assets/fonts/SourceSans3-Italic[wght].ttf') format('truetype-variations');
  font-weight: 200 900; font-style: italic; font-display: swap;
}

:root {
  --navy: #171846;
  --ice:  #85CEE4;
  --cyan: #00AEEF;

  --surface-deep: var(--navy);
  --surface-page: #FFFFFF;
  --surface-raised: #F4FAFD;
  --surface-sunken: #E3F1F8;

  --text: var(--navy);
  --text-on-deep: #FFFFFF;
  --text-2: #4A4C6B;
  --text-soft-on-deep: var(--ice);

  --line: #D5E4EE;
  --line-strong: #A9C6D8;

  --ok: #1F7A4D;   --ok-bg: #E6F4EC;
  --warn: #8A5A00; --warn-bg: #FBF1DC;
  --stop: #A32A2A; --stop-bg: #FBE9E9;

  --p-music: #D6EDF8;  --p-music-e: #00AEEF;
  --p-choreo:#FFF1D6;  --p-choreo-e:#C8912B;
  --p-stage: #FFFFFF;  --p-stage-e: #85CEE4;
  --p-run:   #E2F3E4;  --p-run-e:   #3D8B4A;
  --p-media: #EDDFF5;  --p-media-e: #7A4E9C;
  --p-tech:  #FBDEDE;  --p-tech-e:  #B03A3A;
  --p-dark:  #E9E9EC;  --p-dark-e:  #8A8A93;

  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --track: 0.045em;
  --track-eyebrow: 0.14em;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;
  --r-sm:2px; --r-md:4px; --r-lg:8px;
  --tap:44px;
  --max:1180px;
  --gutter: var(--s4);
  --shadow: 0 2px 8px rgba(23,24,70,.10);
}
@media (min-width:768px){ :root{ --gutter: var(--s6); } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--surface-page); color:var(--text);
  font-family:var(--body); font-size:1.0625rem; line-height:1.55;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--navy); text-underline-offset:3px }
a:hover{ text-decoration-thickness:2px }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter) }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }
.sr{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap }

/* Focus is always visible. Cyan is a non text indicator here, which
   needs 4.5:1 rather than 7:1, and it clears that on both surfaces. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(0,174,239,.55); border-radius:var(--r-sm);
}
.on-deep :where(a,button,select,[tabindex]):focus-visible{
  box-shadow:0 0 0 3px rgba(133,206,228,.8);
}

h1,h2,h3{ font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--track); line-height:1.1; margin:0 }
h1{ font-size:2.25rem } h2{ font-size:1.625rem } h3{ font-size:1.25rem }
@media (max-width:640px){ h1{font-size:1.75rem} h2{font-size:1.375rem} }

.eyebrow{ font-family:var(--body); font-weight:600; font-size:.75rem;
  text-transform:uppercase; letter-spacing:var(--track-eyebrow); line-height:1.2;
  color:var(--text-2); margin:0 }
.small{ font-size:.9375rem } .caption{ font-size:.8125rem; color:var(--text-2) }

/* ---------- header ----------
   The banner artwork carries the logo and nothing else. No type is ever
   set on it: its lightest patches put white text at 1.37:1, and there is
   no region of it that supports white text at AAA. All wording sits in
   the solid navy strip underneath, where white measures 16.73:1. This
   matches how the printed calendar is built. */
.masthead{ background:var(--surface-deep); color:var(--text-on-deep) }
.masthead .art{
  background-image:url('assets/backgrounds/banner.jpg');
  background-size:cover; background-position:center;
  background-repeat:no-repeat; background-color:var(--navy);
}
.masthead .art .wrap{ display:flex; align-items:center;
  min-height:132px; padding-top:var(--s4); padding-bottom:var(--s4) }
.masthead img.title{ width:min(340px,62vw) }
.masthead .strip{ background:var(--surface-deep) }
.masthead .strip .wrap{ display:flex; align-items:baseline; gap:var(--s3);
  flex-wrap:wrap; padding-top:var(--s3); padding-bottom:var(--s3) }
.masthead .strip .name{ font-family:var(--display); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track); font-size:1.125rem;
  color:#FFFFFF }
.masthead .strip .place{ color:var(--text-soft-on-deep); font-size:.9375rem }
.masthead .strip .place::before{ content:''; }
@media (max-width:700px){
  .masthead .art .wrap{ min-height:104px }
  .masthead .strip .wrap{ display:block }
  .masthead .strip .place{ display:block; margin-top:2px }
}
.accent-rule{ height:3px; background:var(--cyan) }

/* ---------- nav ---------- */
nav.board{ background:var(--surface-deep); border-top:1px solid rgba(255,255,255,.14) }
nav.board ul{ list-style:none; margin:0; padding:0; display:flex; gap:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch }
nav.board a{ display:flex; align-items:center; min-height:var(--tap);
  padding:0 var(--s4); color:#FFFFFF; text-decoration:none; white-space:nowrap;
  font-family:var(--body); font-weight:600; font-size:.75rem;
  text-transform:uppercase; letter-spacing:var(--track-eyebrow);
  border-bottom:3px solid transparent }
nav.board a:hover{ background:rgba(255,255,255,.09) }
nav.board a[aria-current="page"]{ border-bottom-color:var(--cyan) }

/* ---------- layout ---------- */
main{ padding:var(--s6) 0 var(--s8) }
section{ margin-bottom:var(--s7) }
.section-head{ display:flex; align-items:baseline; gap:var(--s3);
  margin-bottom:var(--s4); flex-wrap:wrap }
.grid{ display:grid; gap:var(--s4) }
.g2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.g3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }

/* ---------- card ---------- */
.card{ background:var(--surface-raised); border:1px solid var(--line);
  border-left:3px solid var(--cyan); border-radius:var(--r-md); padding:var(--s4) }
.card.plain{ border-left-color:var(--line) }
.card h3{ margin-bottom:var(--s2) }
.card p:last-child{ margin-bottom:0 }

/* ---------- today panel ---------- */
.today{ background:var(--surface-deep); color:var(--text-on-deep);
  border-radius:var(--r-lg); padding:var(--s5); }
.today h2{ color:#FFFFFF }
.today .span{ color:var(--text-soft-on-deep); margin:var(--s2) 0 var(--s4) }
.today table{ background:transparent }
.today th{ background:rgba(255,255,255,.10); color:#FFFFFF }
.today td{ border-bottom-color:rgba(255,255,255,.16); color:#FFFFFF }
.today tbody tr:nth-child(even){ background:rgba(255,255,255,.05) }
.today tr.brk td{ background:rgba(133,206,228,.22); font-weight:600 }

/* ---------- tables ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-md) }
table{ width:100%; border-collapse:collapse; font-size:.9375rem; background:#FFFFFF }
th{ background:var(--surface-deep); color:#FFFFFF; text-align:left;
  padding:var(--s2) var(--s3); font-weight:600; font-size:.75rem;
  text-transform:uppercase; letter-spacing:var(--track-eyebrow); white-space:nowrap }
td{ padding:var(--s3); border-bottom:1px solid var(--line); vertical-align:top }
tbody tr:last-child td{ border-bottom:0 }
tbody tr:nth-child(even){ background:var(--surface-raised) }
tr.brk td{ background:var(--ice); font-weight:600 }

/* ---------- phase chip ---------- */
.phase{ display:inline-block; padding:2px var(--s3); border-radius:var(--r-sm);
  border-left:3px solid var(--line-strong); font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; background:var(--surface-raised) }
.ph-music{background:var(--p-music);border-left-color:var(--p-music-e)}
.ph-choreo{background:var(--p-choreo);border-left-color:var(--p-choreo-e)}
.ph-stage{background:var(--p-stage);border-left-color:var(--p-stage-e)}
.ph-run{background:var(--p-run);border-left-color:var(--p-run-e)}
.ph-media{background:var(--p-media);border-left-color:var(--p-media-e)}
.ph-tech{background:var(--p-tech);border-left-color:var(--p-tech-e)}
.ph-dark{background:var(--p-dark);border-left-color:var(--p-dark-e)}

/* ---------- pinned ---------- */
.pin{ border-left-color:var(--warn) }
.pin .eyebrow{ color:var(--warn) }

/* ---------- countdown ---------- */
.count{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap }
.count .n{ font-family:var(--display); font-size:3rem; line-height:1;
  letter-spacing:var(--track); color:#FFFFFF }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s5); border-radius:var(--r-md);
  font-family:var(--body); font-weight:600; font-size:.75rem;
  text-transform:uppercase; letter-spacing:var(--track-eyebrow);
  cursor:pointer; border:2px solid transparent; text-decoration:none;
  transition:background 120ms ease, border-color 120ms ease }
.btn-primary{ background:var(--navy); color:#FFFFFF }
.btn-primary:hover{ background:#20214f }
.btn-secondary{ background:transparent; color:var(--navy); border-color:var(--line-strong) }
.btn-secondary:hover{ border-color:var(--cyan); background:var(--surface-raised) }
.btn-danger{ background:transparent; color:var(--stop); border-color:var(--stop) }
.btn-danger:hover{ background:var(--stop-bg) }
.btn[disabled]{ opacity:.55; cursor:not-allowed }

/* ---------- forms ---------- */
label{ display:block; font-weight:600; font-size:.8125rem; text-transform:uppercase;
  letter-spacing:var(--track-eyebrow); margin-bottom:var(--s1); color:var(--text-2) }
input,select,textarea{ width:100%; min-height:var(--tap); padding:var(--s2) var(--s3);
  font-family:var(--body); font-size:1rem; color:var(--text);
  background:#FFFFFF; border:1px solid var(--line-strong); border-radius:var(--r-md) }
textarea{ min-height:120px; resize:vertical; line-height:1.5 }
.field{ margin-bottom:var(--s4) }
.row2{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.check{ display:flex; align-items:center; gap:var(--s2) }
.check input{ width:auto; min-height:auto; width:20px; height:20px }
.check label{ margin:0; text-transform:none; letter-spacing:0; font-size:1rem }

/* ---------- notices ---------- */
.notice{ padding:var(--s3) var(--s4); border-radius:var(--r-md);
  border-left:3px solid var(--line-strong); background:var(--surface-raised);
  margin-bottom:var(--s4) }
.notice.ok{ background:var(--ok-bg); border-left-color:var(--ok); color:var(--ok) }
.notice.bad{ background:var(--stop-bg); border-left-color:var(--stop); color:var(--stop) }
.notice.warn{ background:var(--warn-bg); border-left-color:var(--warn); color:var(--warn) }

.status{ display:inline-block; padding:1px var(--s2); border-radius:var(--r-sm);
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em }
.st-open{ background:var(--warn-bg); color:var(--warn) }
.st-closed{ background:var(--ok-bg); color:var(--ok) }

.empty{ padding:var(--s6); text-align:center; color:var(--text-2);
  background:var(--surface-raised); border-radius:var(--r-md) }

/* ---------- footer ---------- */
footer.board{ margin-top:var(--s8); color:var(--text-soft-on-deep) }
footer.board .art{
  background-image:url('assets/backgrounds/banner.jpg');
  background-size:cover; background-position:center;
  background-repeat:no-repeat; background-color:var(--navy);
  padding:var(--s6) 0;
}
footer.board .art img{ width:190px }
footer.board .strip{ background:var(--surface-deep); padding:var(--s4) 0 var(--s6) }
footer.board p{ margin:0 0 var(--s1); font-size:.9375rem }

/* ---------- call tables on a phone ----------
   Four columns squeezed into 390px forces "4:30-5:20" to wrap onto two
   lines, which is unusable on the surface this board is actually read on.
   Below 640px the rows stack, each cell keeping its column name. Only the
   call tables do this; they are the ones carrying long work descriptions. */
@media (max-width:640px){
  table.stack thead{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap }
  table.stack, table.stack tbody, table.stack tr, table.stack td{ display:block; width:100% }
  table.stack tr{ padding:var(--s3) var(--s3) var(--s2);
    border-bottom:1px solid var(--line) }
  table.stack tr:last-child{ border-bottom:0 }
  table.stack td{ padding:0 0 var(--s2); border:0;
    display:grid; grid-template-columns:64px 1fr; gap:var(--s3); align-items:baseline }
  table.stack td:empty{ display:none }
  table.stack td::before{ content:attr(data-l); font-size:.6875rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.1em; color:var(--text-2) }
  table.stack td[data-l="Call"]{ font-family:var(--display); font-size:1.125rem;
    letter-spacing:var(--track) }
  table.stack tr.brk td[colspan]{ grid-template-columns:1fr; font-weight:600 }
  table.stack tr.brk td[colspan]::before{ content:'' ; display:none }
  .today table.stack td::before{ color:var(--ice) }
  .today table.stack tr{ border-bottom-color:rgba(255,255,255,.18) }
}

/* Print the call sheet cleanly if someone wants paper. */
@media print{
  nav.board, footer.board, .no-print{ display:none }
  body{ font-size:11pt }
  .today{ background:#FFF; color:#000; border:1px solid #000 }
  .today h2, .today td{ color:#000 }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}