/* Recital Order - mobile first, black and gold, zero external resources.

   Two locks hold this file together:

   1. RADIUS LOCK. Two values, used everywhere, no exceptions:
        --r-lg 16px  containers (cards, panels, modals)
        --r-md 12px  controls (buttons, inputs, selects, chips, tiles)
      Nothing in this file hard-codes another radius.

   2. COLOUR LOCK. One accent family (--gold / --gold-hi / --gold-dim) carries
      every highlight, focus ring and active state. The ok / flag / danger
      colours are desaturated state colours and never appear as decoration.

   Layout: `.shell` is one column on phones and a content column plus a side
   rail from 1040px up. Every responsive rule below is written out explicitly;
   nothing is left to a framework. */

:root{
  --bg:#09090b;
  --bg-2:#0e0e11;
  --surface:#141417;
  --surface-2:#1a1a1f;
  --surface-3:#22222a;
  --line:#2f2f39;
  --line-soft:#23232b;

  --text:#f2f1ee;
  --muted:#a4a4ad;
  --muted-2:#84848e;

  --gold:#c9a558;
  --gold-hi:#e3c27c;
  --gold-dim:#8b7845;
  --gold-ink:#160f02;

  --off-white:#f7f5f0;
  --ink:#0b0b0c;

  --flag:#d3a274;
  --flag-bg:#251a11;
  --flag-line:#4d3823;
  --ok:#93bda3;
  --ok-bg:#131d16;
  --ok-line:#2f4a39;
  --danger:#d99a9a;
  --danger-bg:#241618;
  --danger-line:#4e2c2e;

  --r-lg:16px;
  --r-md:12px;

  --tap:44px;
  --gap:14px;
  --pad:18px;
  --shell:1280px;
  --rail:340px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;}

/* app.js shows and hides half the page through the `hidden` attribute, and an
   author `display` (grid, flex) silently beats the browser's own
   `[hidden]{display:none}` rule. One `!important` here is worth it: without it
   a hidden loading line or an empty state stays on screen, which is exactly the
   bug class this file has to be immune to. */
[hidden]{display:none !important;}

/* The header is two rows on a phone (brand row + progress rail) and one row
   from 640px up, so anchored jumps clear it in both cases. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:112px;}
@media (min-width:640px){html{scroll-padding-top:76px;}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

h1,h2,h3,p,dl,dd,dt,ol,ul,figure{margin:0;}
ol,ul{padding:0;list-style:none;}
button{font:inherit;color:inherit;}
b,strong{font-weight:640;}

/* One focus treatment for every interactive element. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.skiplink{
  position:absolute;left:8px;top:-48px;z-index:40;
  background:var(--gold);color:var(--gold-ink);
  font-size:13px;font-weight:640;
  padding:10px 14px;border-radius:var(--r-md);
  text-decoration:none;
}
.skiplink:focus{top:8px;}

/* ================================================================ top bar */

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  padding:8px 16px;
  background:rgba(9,9,11,.94);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(10px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:4px 6px 4px 0;
  border-radius:var(--r-md);
  color:var(--off-white);
  text-decoration:none;
  font-weight:660;
  letter-spacing:.2px;
  min-height:var(--tap);
}
.brand:link,.brand:visited,.brand:hover,.brand:active{color:var(--off-white);text-decoration:none;}
.brand__mark{display:block;flex:none;}
.brand__name{font-size:16.5px;}

.account{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  margin-left:auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.account__email{
  font-size:12.5px;
  color:var(--muted);
  max-width:34vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.steps{display:flex;align-items:center;gap:4px;}

.steps__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--muted-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:5px 10px;
  white-space:nowrap;
}
.steps__num{
  display:grid;
  place-items:center;
  width:18px;height:18px;
  border-radius:var(--r-md);
  background:var(--surface-2);
  font-size:11px;
  font-weight:700;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.steps__item.is-active{color:var(--text);border-color:var(--gold-dim);background:var(--surface);}
.steps__item.is-active .steps__num{background:var(--gold);color:var(--gold-ink);}
.steps__item.is-done{color:var(--muted);border-color:var(--line);}
.steps__item.is-done .steps__num{color:var(--gold);}
.steps__label{display:none;}

/* Phone: the progress rail takes its own row and only the current step spells
   its name out, so the strip stays readable at 390px. */
@media (max-width:639px){
  .steps{order:3;flex:1 0 100%;gap:6px;}
  .steps__item{flex:1;justify-content:center;padding:7px 4px;min-height:36px;}
  .steps__item.is-active .steps__label{display:inline;}
}
@media (min-width:640px){
  .steps__item.is-active .steps__label{display:inline;}
}
@media (min-width:1000px){
  .steps__label{display:inline;}
}

/* ================================================================ layout */

#main{
  max-width:var(--shell);
  margin:0 auto;
  padding:20px 16px 64px;
}

@media (min-width:700px){
  .topbar{padding:10px 24px;}
  #main{padding:28px 24px 72px;}
  .account__email{max-width:40vw;}
}

@media (min-width:1040px){
  #main{padding-top:40px;}
}

@keyframes screenIn{
  from{opacity:0;transform:translate3d(0,8px,0);}
  to{opacity:1;transform:none;}
}
.screen:not([hidden]){animation:screenIn .24s cubic-bezier(.22,.68,.34,1) both;}

/* Content column plus side rail. Mobile is a plain stack in DOM order. */
.shell{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);}
.shell__main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);align-content:start;min-width:0;}
.shell__side{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);align-content:start;min-width:0;}

@media (min-width:1040px){
  .shell{grid-template-columns:minmax(0,1fr) var(--rail);gap:24px;align-items:start;}
  .shell__side{position:sticky;top:84px;}
  .card{margin-bottom:0;}
}

/* ================================================================ hero */

.hero{padding:4px 0 20px;max-width:660px;}
.hero--tight{padding-bottom:16px;}
.hero h1{
  font-size:clamp(27px,5.2vw,34px);
  line-height:1.14;
  font-weight:700;
  letter-spacing:-.024em;
  color:var(--off-white);
  margin-bottom:10px;
}
.hero__lead{color:var(--muted);font-size:15px;line-height:1.6;}

/* ================================================================ cards */

.card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:var(--pad);
  min-width:0;
}
.card--lead{
  background:
    linear-gradient(180deg,rgba(201,165,88,.055),rgba(201,165,88,0) 132px),
    var(--surface-2);
  border-color:var(--line);
  padding:20px;
}
.card--quiet{background:var(--bg-2);padding:16px;}
.card--flush{padding:0;}
.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.card__title{
  font-size:16.5px;
  font-weight:660;
  letter-spacing:-.012em;
  color:var(--off-white);
  margin-bottom:12px;
}
.card--flush .card__title{padding:18px 20px 0;margin-bottom:14px;}

/* A rail block: hairlines instead of nested boxes. */
.panel__block + .panel__block{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
}

.muted{color:var(--muted);font-size:14.5px;line-height:1.6;}
.hint{color:var(--muted-2);font-size:12.5px;line-height:1.5;margin-top:8px;}
.counter{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:3px 10px;
  white-space:nowrap;
  flex:none;
  font-variant-numeric:tabular-nums;
}
.counter.is-over{color:var(--danger);border-color:var(--danger-line);background:var(--danger-bg);}

.skeleton{display:grid;gap:9px;margin:12px 0;}
.skeleton span{
  display:block;
  height:11px;
  border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--surface-3) 0%,#2c2c36 50%,var(--surface-3) 100%);
  background-size:200% 100%;
  animation:sweep 1.35s linear infinite;
}
.skeleton span:nth-child(2){width:78%;}
.skeleton span:nth-child(3){width:54%;}
@keyframes sweep{from{background-position:200% 0;}to{background-position:-200% 0;}}

/* ================================================================ forms */

.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field__label{
  display:block;
  font-size:13px;
  font-weight:620;
  letter-spacing:.005em;
  color:var(--text);
  margin-bottom:7px;
}
.field__sub{font-weight:450;color:var(--muted-2);font-size:12px;}

.input{
  width:100%;
  min-width:0;
  background:var(--bg-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:11px 13px;
  font:inherit;
  font-size:15px;
  min-height:var(--tap);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input::placeholder{color:var(--muted-2);opacity:1;}
.input:hover{border-color:#3a3a45;}
.input:focus{outline:none;border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(201,165,88,.18);}
.input--narrow{max-width:110px;}
/* A drawn chevron, so the control looks the same in every browser instead of
   borrowing whatever native select chrome the platform ships. */
select.input{
  appearance:none;
  padding-right:38px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 1px),calc(100% - 15px) calc(50% - 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:0;}
@media (min-width:620px){.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;}}

.formerror{
  color:var(--danger);
  background:var(--danger-bg);
  border:1px solid var(--danger-line);
  border-radius:var(--r-md);
  padding:10px 12px;
  font-size:13.5px;
  margin-bottom:14px;
}

/* The real <input type="file"> stays in the DOM so the visible button can open
   it, but it is clipped out of sight so the browser's own light "No file
   chosen" control never shows against the dark theme. `display:none` would make
   the picker impossible to open, so it is hidden with a 1px clip instead. */
.fileinput{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  opacity:0;
}

/* The three ways in sit in one left-aligned row, so the labelled button reads
   as an action rather than as an input field the way a lone full-width box
   does. The file button carries the fill and the icon because it is the way in
   that most schools use. */
.wayrow{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
.wayrow .btn{justify-content:flex-start;text-align:left;padding-left:15px;}
.btn--file{
  background:var(--surface-3);
  color:var(--text);
  border-color:var(--gold-dim);
}
.btn--file .btn__icon{color:var(--gold);flex:none;}
.btn--file:hover{background:var(--surface-2);border-color:var(--gold);}

@media (min-width:760px){
  .wayrow{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ================================================================ buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--tap);
  padding:11px 16px;
  border-radius:var(--r-md);
  border:1px solid transparent;
  font-size:14.5px;
  font-weight:640;
  letter-spacing:.005em;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition:transform .07s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
a.btn:link,a.btn:visited,a.btn:hover,a.btn:active{text-decoration:none;}
.btn:active{transform:translateY(1px) scale(.994);}
.btn:disabled{cursor:not-allowed;}

.btn--primary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);}
.btn--primary:hover:not(:disabled){background:var(--gold-hi);border-color:var(--gold-hi);}
.btn--primary:disabled{background:var(--surface-3);color:var(--muted-2);border-color:var(--line);}

.btn--ghost{background:transparent;color:var(--text);border-color:var(--line);}
.btn--ghost:hover:not(:disabled){border-color:var(--gold-dim);background:var(--surface-2);color:var(--off-white);}
.btn--ghost:disabled{color:var(--muted-2);border-color:var(--line-soft);}

.btn--gold{background:transparent;color:var(--gold);border-color:var(--gold-dim);}
.btn--gold:hover{background:rgba(201,165,88,.12);border-color:var(--gold);color:var(--gold-hi);}

.btn--block{width:100%;}
.btn--small{min-height:38px;padding:7px 13px;font-size:13.5px;}

.row-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.row-actions:first-child{margin-top:0;}

.linkbtn{
  background:none;border:none;
  padding:10px 2px;
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  font-size:14px;
  min-height:var(--tap);
}
.linkbtn:hover{color:var(--gold-hi);}

.iconbtn{
  background:none;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  cursor:pointer;
  color:var(--muted);
  flex:none;
  transition:border-color .15s ease,color .15s ease;
}
.iconbtn:hover{color:var(--text);border-color:var(--gold-dim);}

/* ======================================================== notices / errors */

.notice{
  position:relative;
  border-radius:var(--r-md);
  padding:12px 14px 12px 16px;
  font-size:13.5px;
  line-height:1.55;
  margin:16px 0 0;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  overflow:hidden;
}
.notice::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--muted-2);
}
.notice__title{font-weight:660;margin-bottom:4px;color:var(--off-white);}
.notice--warn{border-color:var(--flag-line);background:var(--flag-bg);color:#eadcc8;}
.notice--warn::before{background:var(--flag);}
.notice--warn .notice__title{color:#f0e2cd;}
.notice--bad{border-color:var(--danger-line);background:var(--danger-bg);color:#eed3d3;}
.notice--bad::before{background:var(--danger);}
.notice--bad .notice__title{color:#f4dcdc;}
.notice--good{border-color:var(--ok-line);background:var(--ok-bg);color:#d2e2d7;}
.notice--good::before{background:var(--ok);}
.notice--good .notice__title{color:#dcebe1;}
/* Inside a grid the column gap already spaces blocks, so a notice that is a
   direct child of a column must not add a second, larger gap of its own. */
.shell__main > .notice,.shell__side > .notice{margin-top:0;}
.card > .notice:first-child{margin-top:0;}

.errors{margin-top:16px;}
.errors__list{margin-top:10px;font-size:13px;color:var(--muted);display:grid;gap:0;}
.errors__list li{
  padding:7px 0;
  border-top:1px solid var(--line-soft);
  overflow-wrap:anywhere;
}
.errors__list li:first-child{border-top:0;}

/* ============================================================== import: AI */

.aimport{margin-top:20px;border-top:1px solid var(--line-soft);padding-top:20px;}
.aimport__title{font-size:15px;font-weight:660;color:var(--off-white);margin-bottom:8px;}
.aimport__checking{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  font-size:13.5px;
  color:var(--muted-2);
}
.aimport__checking::before{
  content:"";
  width:12px;height:12px;flex:none;
  border-radius:50%;
  border:2px solid var(--line);
  border-top-color:var(--gold);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.aimport__gate,.authgate{
  display:grid;
  gap:12px;
  justify-items:start;
  margin-top:16px;
  padding:16px;
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  background:var(--bg-2);
}
.authgate{margin-top:14px;}

.textarea{min-height:140px;resize:vertical;line-height:1.55;font-size:14.5px;}
#aiPanel > .field:first-child{margin-top:18px;}
.aimport__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;}
/* Busy state: the button is the only thing that changes, driven by the
   aria-busy attribute app.js already sets. */
#aiParseBtn[aria-busy="true"]{position:relative;padding-left:40px;}
/* While the request is in flight the button is disabled by app.js. It should
   still read as "working", not as "unavailable", so it keeps the accent fill. */
.btn--primary[aria-busy="true"]:disabled{background:var(--gold-dim);color:var(--gold-ink);border-color:var(--gold-dim);}
#aiParseBtn[aria-busy="true"]::before{
  content:"";
  position:absolute;
  left:15px;
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid rgba(22,15,2,.28);
  border-top-color:var(--gold-ink);
  animation:spin .8s linear infinite;
}
.quotanote{
  font-size:12.5px;
  font-weight:620;
  color:var(--gold);
  border:1px solid var(--gold-dim);
  border-radius:var(--r-md);
  padding:4px 10px;
  font-variant-numeric:tabular-nums;
}
.detected{margin-top:16px;}
.detected .chips{margin-top:8px;}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.chip{
  font-size:12px;
  border:1px solid var(--line);
  background:var(--bg-2);
  border-radius:var(--r-md);
  padding:4px 10px;
  color:var(--muted);
  max-width:100%;
  overflow-wrap:anywhere;
}

.mapping{margin-top:20px;border-top:1px solid var(--line-soft);padding-top:20px;}
.mapping__title{font-size:15px;font-weight:660;color:var(--off-white);margin-bottom:8px;}
.mapping__grid{display:grid;gap:14px;margin:16px 0 4px;}
.mapping__row{display:grid;gap:7px;}
.mapping__label{font-size:13px;font-weight:620;}
.mapping__req{
  color:var(--gold);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-left:7px;
}
@media (min-width:620px){
  .mapping__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .mapping__row{grid-template-columns:120px minmax(0,1fr);align-items:center;gap:12px;}
}

/* ============================================================ routine list */

.routinelist{margin:14px 0 20px;border-top:1px solid var(--line-soft);}
.routinerow{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--line-soft);
  flex-wrap:wrap;
}
.routinerow__num{
  flex:none;
  width:28px;height:28px;
  border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:12.5px;font-weight:650;color:var(--muted);
  font-variant-numeric:tabular-nums;
  margin-top:1px;
}
.routinerow__body{flex:1 1 200px;min-width:0;}
.routinerow__name{font-weight:640;font-size:15px;overflow-wrap:anywhere;}
.routinerow__meta{font-size:13px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere;line-height:1.55;}
.routinerow__meta b{color:#c6c6cf;font-weight:620;}
.routinerow__locktag{
  display:inline-block;
  font-size:11px;
  font-weight:620;
  color:var(--gold);
  border:1px solid var(--gold-dim);
  border-radius:var(--r-md);
  padding:2px 8px;
  margin-top:7px;
}
.routinerow__actions{display:flex;gap:8px;flex:none;align-items:center;}
.routinerow__actions .btn{min-height:var(--tap);padding:8px 14px;font-size:13.5px;}

@media (max-width:719px){
  .routinerow__actions{width:100%;padding-left:40px;}
  .routinerow__actions .btn{flex:1 1 auto;}
}

.emptystate{
  display:grid;
  justify-items:start;
  gap:8px;
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  background:var(--bg-2);
  padding:20px 18px;
  margin:16px 0 20px;
}
.emptystate__icon{
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--gold);
}
.emptystate__title{font-weight:640;font-size:15px;color:var(--off-white);}

.entryform{border-top:1px solid var(--line-soft);padding-top:18px;}
.entryform__title{font-size:15px;font-weight:660;color:var(--off-white);margin-bottom:16px;}

/* ================================================================ facts */

.facts{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:6px;}
.facts__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line-soft);
  padding:10px 0;
  font-size:14px;
}
.facts dt{color:var(--muted);}
.facts dd{font-weight:660;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}

.details{padding:0;}
.details__summary{
  padding:16px 18px;
  cursor:pointer;
  font-weight:660;
  font-size:15px;
  color:var(--off-white);
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:var(--tap);
  border-radius:var(--r-lg);
}
.details__summary::-webkit-details-marker{display:none;}
.details__summary::after{
  content:"";
  width:9px;height:9px;flex:none;
  border-right:1.7px solid var(--muted);
  border-bottom:1.7px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.details[open] .details__summary::after{transform:rotate(-135deg) translateY(-2px);}
.details__body{padding:0 18px 18px;border-top:1px solid var(--line-soft);margin-top:2px;padding-top:16px;}
.details__body .field:last-child{margin-bottom:0;}
/* Collapsed content must be gone, not merely unpainted: a real browser still
   lays out the body of a closed <details>, so without this rule the hidden
   card keeps a phantom box that reaches past the card and lands under the
   footer on a narrow screen. */
.details:not([open]) > .details__body{display:none;}

/* ====================================================== action bar (in flow)
   Deliberately NOT sticky. A floating bar covers whatever sits behind it at
   the bottom of the viewport at some scroll position, which is exactly how the
   old #importBar ended up hiding the AI buttons on a 390x640 screen. Keeping
   it in the flow means nothing on this page is ever covered. */

.actionbar{display:grid;gap:10px;padding-top:4px;}
@media (min-width:720px){
  .actionbar{grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start;}
  .actionbar .btn--block{width:auto;min-width:220px;}
}

/* ================================================================ unlock */

.unlock{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--gold-dim);
  background:linear-gradient(180deg,rgba(201,165,88,.10),rgba(201,165,88,.02));
  border-radius:var(--r-lg);
  padding:16px 18px;
}
.unlock__text{min-width:0;flex:1 1 220px;}
.unlock__title{font-weight:660;font-size:15px;color:#eddcb5;}
.unlock__sub{font-size:13px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere;}
.unlock .btn{flex:0 1 auto;}

/* ======================================================== results: plan tabs */

.plantabs{
  display:flex;
  gap:6px;
  border-bottom:1px solid var(--line-soft);
  padding:12px 14px 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.plantabs::-webkit-scrollbar{display:none;}
.plantab{
  flex:1 1 0;
  min-width:96px;
  background:transparent;
  border:1px solid transparent;
  border-bottom:none;
  border-radius:var(--r-md) var(--r-md) 0 0;
  padding:10px 8px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:var(--muted);
  min-height:var(--tap);
  transition:background .15s ease,color .15s ease;
}
.plantab:hover{color:var(--off-white);background:var(--surface);}
.plantab__name{font-size:12.5px;font-weight:620;}
.plantab__score{font-size:12px;color:var(--muted-2);font-variant-numeric:tabular-nums;}
.plantab.is-active{
  background:var(--surface-3);
  border-color:var(--line-soft);
  color:var(--off-white);
}
.plantab.is-active .plantab__name{color:var(--off-white);}
.plantab.is-active .plantab__score{color:var(--gold);}
.plantab:focus-visible{outline-offset:-3px;}

.scoreboard{padding:20px;display:grid;gap:12px;}
.scoreboard__row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.scoreboard__value{
  font-size:38px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--off-white);
  font-variant-numeric:tabular-nums;
}
.scoreboard__label{font-size:13px;color:var(--muted);}
.scoreboard__summary{font-size:14px;color:var(--muted);overflow-wrap:anywhere;max-width:64ch;}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:640;
  border-radius:var(--r-md);
  padding:4px 11px;
  border:1px solid var(--line);
  color:var(--muted);
  white-space:nowrap;
}
.badge--ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg);}
.badge--flag{color:var(--flag);border-color:var(--flag-line);background:var(--flag-bg);}
.badge svg{flex:none;display:block;}

/* ===================================================== results: view toggle */

.viewtoggle{display:flex;gap:8px;padding:0 14px 14px;}
.viewtoggle__btn{
  flex:1;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:10px 12px;
  min-height:var(--tap);
  font-size:13.5px;
  font-weight:640;
  color:var(--muted);
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.viewtoggle__btn:hover{color:var(--off-white);border-color:#3a3a45;}
.viewtoggle__btn.is-active{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);}

/* ======================================================= results: the order */

.orderlist{border-top:1px solid var(--line-soft);}
.orderrow{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:8px 14px;
  padding:15px 18px;
  border-bottom:1px solid var(--line-soft);
}
.orderrow:last-child{border-bottom:none;}
.orderrow__pos{
  width:32px;height:32px;
  border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--surface-3);
  border:1px solid var(--line);
  font-size:13.5px;font-weight:680;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.orderrow__body{min-width:0;}
.orderrow__name{font-weight:640;font-size:15.5px;overflow-wrap:anywhere;color:var(--off-white);}
.orderrow__meta{font-size:13px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere;line-height:1.55;}
.orderrow__meta b{color:#c6c6cf;font-weight:620;}
.orderrow__lock{grid-column:2 / -1;margin-top:10px;max-width:260px;}
.orderrow__lock select{font-size:13.5px;min-height:var(--tap);padding:9px 34px 9px 12px;}
.orderrow__locklabel{font-size:12px;color:var(--muted-2);display:block;margin-bottom:6px;}

@media (min-width:820px){
  .orderrow{grid-template-columns:32px minmax(0,1fr) 210px;align-items:start;}
  .orderrow__lock{grid-column:auto;margin-top:2px;max-width:none;}
}

/* ============================================================ conflicts */

.conflicts{margin-top:12px;display:grid;gap:8px;}
.conflict{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:10px;
  border:1px solid var(--flag-line);
  background:var(--flag-bg);
  border-radius:var(--r-md);
  padding:11px 12px;
}
.conflict__icon{color:var(--flag);line-height:0;margin-top:2px;}
.conflict__body{min-width:0;}
.conflict__kind{
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--flag);
  display:block;
  margin-bottom:4px;
}
.conflict__detail{font-size:13.5px;color:#ecdcc9;overflow-wrap:anywhere;line-height:1.55;}
.conflict__who{font-size:12px;color:#bdae9a;margin-top:5px;overflow-wrap:anywhere;}
.conflict__report{
  margin-top:9px;
  background:transparent;
  border:1px solid var(--flag-line);
  border-radius:var(--r-md);
  padding:8px 12px;
  font-size:12.5px;
  font-weight:620;
  color:#e6c79c;
  cursor:pointer;
  min-height:var(--tap);
  transition:border-color .15s ease,background .15s ease;
}
.conflict__report:hover{border-color:var(--flag);background:rgba(211,162,116,.10);}

/* ============================================================ by dancer */

.dressing{padding:0 0 10px;}
.dressing__person{border-top:1px solid var(--line-soft);padding:15px 18px;}
.dressing__name{font-weight:640;font-size:14.5px;color:var(--off-white);overflow-wrap:anywhere;}
.dressing__chain{margin-top:9px;display:grid;gap:9px;}
.dressing__entry{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:10px;
  font-size:13.5px;
  align-items:baseline;
}
.dressing__idx{color:var(--muted-2);font-size:12px;font-variant-numeric:tabular-nums;}
.dressing__what{overflow-wrap:anywhere;}
.dressing__gap{color:var(--muted);font-size:12.5px;display:block;margin-top:3px;}
.dressing__gap.is-tight{color:var(--flag);font-weight:600;}

.emptyresult{padding:18px 20px;color:var(--muted);font-size:14px;}
#recitalEmpty{margin-top:14px;}

/* ================================================================ footer */

.sitefoot{
  max-width:var(--shell);
  margin:0 auto;
  padding:18px 16px calc(32px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-soft);
  text-align:center;
}
@media (min-width:700px){.sitefoot{padding-left:24px;padding-right:24px;}}
.sitefoot__note{font-size:12px;color:var(--muted-2);margin-top:4px;max-width:70ch;margin-inline:auto;line-height:1.6;}
.sitefoot__links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ================================================================ modal */

.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:end center;}
.modal__scrim{position:absolute;inset:0;background:rgba(6,6,8,.72);}
.modal__panel{
  position:relative;
  width:100%;
  max-width:560px;
  max-height:88vh;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:20px 18px calc(22px + env(safe-area-inset-bottom,0px));
  animation:sheetIn .22s cubic-bezier(.22,.68,.34,1) both;
}
@keyframes sheetIn{from{opacity:0;transform:translate3d(0,18px,0);}to{opacity:1;transform:none;}}
@media (min-width:620px){
  .modal{place-items:center;}
  .modal__panel{border-radius:var(--r-lg);}
}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.modal__title{font-size:19px;font-weight:680;letter-spacing:-.015em;color:var(--off-white);}
.modal__body{font-size:14.5px;color:var(--text);}
.modal__body p{margin-bottom:12px;color:var(--muted);line-height:1.6;}
.modal__body p strong{color:var(--text);}
.modal__body ul{margin:0 0 15px;padding-left:0;display:grid;gap:9px;}
.modal__body li{position:relative;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.6;}
.modal__body li::before{
  content:"";
  position:absolute;left:2px;top:9px;
  width:5px;height:5px;
  border-radius:1px;
  background:var(--gold-dim);
}
.modal__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.modal__actions .btn{flex:1 1 auto;}

.copybox{
  width:100%;
  min-height:160px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--text);
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.6;
  padding:12px;
  resize:vertical;
  margin-bottom:14px;
}
.copybox:focus{outline:none;border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(201,165,88,.18);}

/* ================================================================ toast */

.toast{
  position:fixed;
  left:50%;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  z-index:80;
  background:var(--surface-3);
  color:var(--off-white);
  border:1px solid var(--gold-dim);
  font-size:13.5px;
  font-weight:620;
  padding:12px 18px;
  border-radius:var(--r-md);
  max-width:min(92vw,440px);
  text-align:center;
  box-shadow:0 14px 36px rgba(4,4,6,.62);
  animation:toastIn .2s cubic-bezier(.22,.68,.34,1) both;
  /* A status message must never swallow the tap that was aimed at the control
     underneath it. */
  pointer-events:none;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

/* ==================================================== saved recitals list */

.recital-list{display:grid;gap:0;margin:16px 0 0;}
.recital-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid var(--line-soft);
  padding:13px 0;
}
.recital-row__body{flex:1 1 160px;min-width:0;}
.recital-row__name{font-weight:640;overflow-wrap:anywhere;}
.recital-row.is-current .recital-row__name{color:var(--gold);}
.recital-row__tag{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold);
  margin-left:8px;
  white-space:nowrap;
}
.recital-row__meta{font-size:12px;color:var(--muted-2);margin-top:3px;}
.recital-row__actions{display:flex;gap:8px;flex-wrap:wrap;}

@media (max-width:460px){
  .recital-row__actions{width:100%;}
  .recital-row__actions .btn{flex:1 1 auto;}
  .authgate .btn,.aimport__gate .btn{width:100%;}
}

.linkbtn--inline{min-height:0;padding:0;font-size:inherit;}

/* ============================================== reduced motion (respected) */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn:active{transform:none;}
}

/* ================================================================ print */

@media print{
  .topbar,.sitefoot,.actionbar,.modal,.toast,.viewtoggle,.row-actions,
  .conflict__report,.skiplink,.unlock .btn{display:none !important;}
  body{background:var(--off-white);color:var(--ink);}
  #main{padding:0;max-width:none;}
  .shell{display:block;}
  .card{border-color:#c9c4ba;background:transparent;}
  .card--lead{background:transparent;}
  .screen:not([hidden]){animation:none;}
}