/* Miracue design system v2 (TEST, 28 Sept 2026): the tool pages (call sheet, shot list)
   and the printed sheet. STAGING ONLY (see v2-fonts.css). Loaded after miracue.css,
   tool.css and sheet.css and overrides them; those files are untouched, so live keeps v1.
   The page's site chrome (nav, the Free tools row, the questions, the footer) is restyled
   here to match the v2 site at /mock/v2/. Colours come from css/v2-tokens.css only. */

/* ---------- the site and tool tokens, re-pointed at v2 ----------
   miracue.css, tool.css and sheet.css paint from these. The paper, the grain and the
   lift are retired with the paper look. */
:root{
  --page:var(--tint); --sheet:var(--white); --sheet-2:var(--calm-2); --card:var(--white);
  --faint:var(--ink-3); --edge:var(--line);
  --paper:var(--white); --paper-ink:var(--ink); --paper-ink-2:var(--ink-2);
  --paper-faint:var(--ink-3); --paper-edge:var(--field-edge);
  --nav-bg:rgba(255,255,255,.96); --btn-fg:var(--accent);
  --lift:none; --lift-in:none;
  --mono:var(--sans); --dot:currentColor;
  /* the darkroom (footer, demos, closing chapters) in palette C, not v1's brown-black */
  --d-bg:var(--ink); --d-bg-2:color-mix(in srgb, var(--ink) 88%, var(--white));
  --d-hair:rgba(255,255,255,.12); --d-hair-2:rgba(255,255,255,.2);
  --d-s1:rgba(255,255,255,.06); --d-s2:rgba(255,255,255,.1);
  --d-fg:var(--on-ink); --d-fg-2:rgba(255,255,255,.72); --d-muted:rgba(255,255,255,.55);
}
body{font-family:var(--sans);font-weight:400;background:var(--tint);color:var(--ink)}
/* Tabular figures on the body made a 1 read like a lowercase l in prose. They stay on the numbers
   that tick or line up: call times, the schedule, phone numbers, shot numbers, the rail's counts. */
.tnum,.desk-rail small,.fact .v,table.cs-tab td.t,table.cs-tab td.n,span[data-row$=":mobile"],.shotchip b,
.wx-sun,.wx-hours,table.d-tab td.c,table.d-tab td.t,.d-time .v,.d-wx .sun,.d-shot b{font-variant-numeric:tabular-nums}
/* The grain was a full-screen layer, and it printed over every page of the sheet: that is
   why a saved call sheet PDF came out at 13 to 22 MB. */
body::before{display:none}
.wordmark{font-family:var(--sans);font-weight:700;letter-spacing:0}
:focus-visible,a:focus-visible,summary:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- type ---------- */
h1{font-weight:500;letter-spacing:0;line-height:1.2}
h2,h3{letter-spacing:0}
h2{font-weight:500}
.eyebrow{font-family:var(--sans);font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;color:var(--ink-2)}
.lede,.standfirst{font-weight:400;color:var(--ink-2)}
.section-head h2{font-size:clamp(26px,3.4vw,44px);font-weight:400;letter-spacing:0;line-height:1.2}
.stamp{font-family:var(--sans);letter-spacing:0}

/* ---------- buttons: ink with accent text is the one primary ---------- */
.btn{border-radius:var(--r-s);font-weight:700;transition:opacity var(--v2-ease),transform var(--v2-ease)}
.btn:hover{transform:none}
.btn-light{background:var(--ink);color:var(--accent)}
.btn-ghost-d{background:var(--calm-2);color:var(--ink);box-shadow:none}

/* ---------- nav ---------- */
.nav,body .nav{background:var(--white);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom:1px solid var(--line)}
.nav .wrap{min-height:72px}
.nav-brand b{font-weight:700;font-size:19px;letter-spacing:0}
.nav-links a{color:var(--ink);font-size:var(--fs-ui)}
.nav-links a:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}
.nav-links a[aria-current="page"]{box-shadow:none;font-weight:700}
.nav-login{color:var(--ink);font-size:var(--fs-ui)}
.nav-login:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}
.nav .btn{border-radius:var(--r-s);min-height:48px;padding:0 22px;font-size:15px}
:is(.nav-brand,.nav .brand) .plan-tag{font-family:var(--sans);font-weight:700;letter-spacing:.06em;border-radius:6px;font-size:10.5px}
:is(.nav-brand,.nav .brand) .plan-tag.pro,:is(.nav-brand,.nav .brand) .plan-tag.studio{background:var(--ink);color:var(--accent);box-shadow:none;margin-right:0}

/* As the v2 site: below 980px the bar keeps the logo, Pricing (Luke, 4 Oct 2026: "add the
   pricing on the menu") and the main button; the Free tools row under it is the way
   between the tools. */
@media (max-width:980px){
  .nav-links{order:0;width:auto;margin-left:auto;overflow:visible;padding:0;gap:0}
  .nav-links a:not([href$="pricing.html"]){display:none}
  .nav .wrap{flex-wrap:nowrap}
  .nav-login{margin-left:0}
}
@media (max-width:480px){
  .nav-links a{padding:8px 4px}
  .nav .btn{padding:0 14px;white-space:nowrap}
}
@media (max-width:340px){.nav-brand b{display:none}}
@media (max-width:640px){
  .nav .wrap{min-height:64px}
  .nav .btn{min-height:44px;padding:0 18px}
  .cs-label{flex-wrap:wrap;row-gap:10px}
  .cs-eg{justify-content:flex-start}
  .band{flex-wrap:wrap;row-gap:8px}
  .band .hint{margin-left:0}
}
/* the Free tools row: a pill track, the page you are on in white */
.tool-switch{background:var(--white);border-bottom:1px solid var(--line)}
.tool-switch .wrap{padding-top:10px;padding-bottom:10px;gap:6px}
.tool-switch a{min-height:40px;padding:0 16px;border-radius:var(--pill);font-size:var(--fs-ui);color:var(--ink)}
.tool-switch a:hover{background:var(--calm-2)}
.tool-switch a[aria-current="page"]{background:var(--calm-2);box-shadow:none;font-weight:700}
.tool-switch .tool-switch-lab{font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;color:var(--ink-2)}

/* ---------- the questions, as chat on calm ---------- */
.faq details{background:var(--white);border-radius:var(--r-m);box-shadow:none;border:1px solid var(--line)}
.faq summary{font-weight:600;font-size:16.5px}
.faq summary::after{color:var(--ink-2)}
.faq details p{color:var(--ink-2);font-size:16px}

/* ---------- footer: ink, a rounded top, accent on the wordmark ---------- */
.site-foot{background:var(--ink);border-top:0;border-radius:40px 40px 0 0;color:rgba(255,255,255,.72)}
.foot-h{font-family:var(--sans);font-size:var(--fs-ui);font-weight:700;letter-spacing:0;text-transform:none;color:var(--on-ink)}
.site-foot a{color:rgba(255,255,255,.85)}
.site-foot a:hover{color:var(--on-ink)}
.site-foot a:focus-visible{outline-color:var(--accent)}
.foot-base .wordmark{color:var(--accent)}
@media (min-width:761px){.site-foot{border-radius:100px 100px 0 0}}

/* ================= the tool ================= */
/* the Edit / Sheet switch: a pill track, the chosen view in white */
.viewbar{background:var(--tint);box-shadow:none;border-bottom:1px solid var(--line)}
.seg{background:var(--calm-2);border:0;border-radius:var(--pill);padding:4px;gap:2px}
.seg button{border-radius:var(--pill);padding:0 18px;min-height:40px;font-size:var(--fs-ui);color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--white);color:var(--ink);font-weight:700;box-shadow:none}
.viewbar-acts .btn{border-radius:var(--r-s);min-height:40px;padding:0 16px}
.morebox-menu{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--float)}
.morebox-menu > *:hover{background:var(--tint) !important}

/* the card the form sits in: white, a line, radius 16, no shadow */
.cs{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.cs-label{background:var(--white);border-bottom:1px solid var(--line);font-family:var(--sans);font-size:var(--fs-body);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink);padding:16px 20px}
.cs-label button{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);
  background:var(--calm-2);border:0;border-radius:var(--r-s);padding:0 14px;min-height:36px}
.cs-eg a{color:var(--ink-2)}
.cs-body{padding:6px 20px 22px}

/* section heads: a plain heading with a hairline, no bar down the side */
.band{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:18px 0 4px;margin:22px 0 8px;
  font-family:var(--sans);font-size:var(--fs-body);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.band .hint{font-size:var(--fs-small);color:var(--ink-2);font-weight:400}
.band button,.band .btn{font-family:var(--sans);letter-spacing:0;text-transform:none}

/* labels carry the field's name in plain words; fields are real boxes */
.fact .k,.cell .k,.org-top{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);margin-bottom:6px}
#view-edit [contenteditable]{border:1px solid var(--field-edge);border-radius:var(--r-s);background:var(--white);padding:10px 12px;min-height:44px}
#view-edit [contenteditable]:focus{border-color:var(--ink);background:var(--white);box-shadow:none;outline:2px solid var(--ink);outline-offset:1px}
#view-edit td [contenteditable]{padding:9px 10px}
.fact.big .v{font-weight:600;letter-spacing:0}
#view-edit .fact.big .v{padding-top:7px;padding-bottom:7px;line-height:28px}   /* the big unit call keeps the row's 44px (design review, 11 Oct 2026) */
table.cs-tab th{font-family:var(--sans);font-size:var(--fs-label);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2)}
table.cs-tab td.n{font-family:var(--sans);color:var(--ink-3)}
.day{border-color:var(--field-edge);border-radius:var(--pill);min-height:36px}
.day[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.day-add input,.pick,.hex,.sd-link input{border-color:var(--field-edge);border-radius:var(--r-s);background:var(--white);font-family:var(--sans)}

/* quiet buttons are calm, radius 10; the one primary is ink with accent text */
.addrow,.syncbtn,.rowbtn,.sl-acts button{background:var(--calm-2);border:0;border-radius:var(--r-s);color:var(--ink);font-weight:600}
.addrow{min-height:40px;padding:0 16px}
.addrow:hover,.syncbtn:hover,.sl-acts button:hover{opacity:.85}
.rowbtn:hover{background:var(--ink);color:var(--on-ink)}
.syncbtn.primary{background:var(--ink);color:var(--accent)}
.sync-dot[data-s="conflict"],.sync-dot[data-s="error"],.sync-dot[data-s="capped"]{background:var(--danger)}
.sync-dialog{border:0;border-radius:var(--r);box-shadow:var(--float)}
.sync-dialog::backdrop{background:var(--ink-a35)}
.sd-head,.sd-list li,.sd-sec{border-color:var(--line)}

/* organisations, drops, toggles, weather */
.org{border-color:var(--line);border-radius:var(--r)}
.drop{border-color:var(--field-edge);border-radius:var(--r)}
.drop.bad{border-color:var(--danger);color:var(--danger)}
/* A file held over the box: it says it will take it. */
.drop.over{border-style:solid;border-color:var(--ink);background:var(--soft-lilac);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.drop:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.toggles label{background:var(--calm-2);border-color:transparent;border-radius:var(--pill);min-height:40px;font-weight:500}
.toggles label:has(input:checked){background:var(--white);border-color:var(--ink)}
.swatch{border-radius:var(--r-s)}
.wx-sun,.wx-hours em,.shotchip b{font-family:var(--sans);letter-spacing:0}
.wx-hours u{color:var(--ink-2)}
.shotchip{border-color:var(--field-edge)}

/* the shot list editor */
.sl-row{border-bottom-color:var(--line)}
.sl-tick span{border-radius:6px;border-color:var(--ink)}
.is-done .sl-tick span{background:var(--ink);border-color:var(--ink)}
.sl-tick svg{stroke:var(--accent)}
.sl-size,select.sl-size{background-color:var(--calm-2);border-radius:var(--r-s);letter-spacing:.06em;color:var(--ink)}
.sl-size.is-empty,select.sl-size.is-empty{color:var(--ink-3)}
.sl-chip{border-color:var(--field-edge);border-radius:var(--pill);min-height:40px}
.sl-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.sl-add input{border-color:var(--field-edge);border-radius:var(--r-s);min-height:48px}
.sl-add .btn{min-height:48px}
.sl-panel{border-bottom-color:var(--line)}
.sl-row.is-dragging{background:var(--white);border-radius:var(--r);box-shadow:var(--float)}
.sl-loc-lab{letter-spacing:.06em;font-weight:700;color:var(--ink-2)}

/* ================= the document (screen and print) =================
   It stays black on white so it photocopies. v2 changes the typeface, turns the warm
   grey bands into calm, and gives the unit call its own box. Red still prohibits. */
.page{box-shadow:0 0 0 1px var(--line);font-family:var(--sans)}
.pg-head .t{font-weight:700}
.pg-foot .wm{font-family:var(--sans);font-weight:700;letter-spacing:0;color:#333}
.pg-foot .wm i{color:inherit}
.d-band,table.d-tab th,.d-org .lab,table.d-tab tr.banner td{background:var(--calm-2)}
table.d-tab tr.grp td{background:var(--tint)}
.d-band{border-color:transparent}
.d-time.big{background:var(--calm-2);border-bottom:0;margin-bottom:0;padding-left:2.5mm;border-radius:1.2mm}
.d-red,table.d-list tr.d-red td,table.d-tab tr.banner.hold td{color:var(--danger)}
.d-band-red{background:var(--danger-soft);border-color:transparent;border-left-color:var(--danger)}
@media print{.page{box-shadow:none}}

/* the release forms: the same boxed fields as the rest of the form */
.cs-body > .band:first-child{border-top:0;padding-top:6px}
.rl-in{border-color:var(--field-edge);border-radius:var(--r-s);background:var(--white);padding:10px 12px;min-height:44px;font-family:var(--sans)}
.rl-in:focus{outline:2px solid var(--ink);outline-offset:1px;box-shadow:none;border-color:var(--ink)}
.rl-f .k{letter-spacing:.1em}

/* a section head that is the first thing showing in the card needs no rule above it */
.cs-body > [hidden]:first-child + .band{border-top:0;padding-top:6px}

/* the Free tools label is a label, not a pill */
.tool-switch .tool-switch-lab,.tool-switch .tool-switch-lab:hover{background:none;padding:0 10px 0 0}

/* the shot list add button is the primary on the card */
.sl-add .btn{background:var(--ink);color:var(--accent)}

/* the notice bar: ink with the one accent action; a failed save is the danger colour */
.tool-notice{background:var(--ink);border-radius:var(--r);box-shadow:var(--float)}
.tool-notice.is-error{background:var(--danger)}
.tool-notice button{background:var(--accent);color:var(--ink);border-radius:var(--r-s)}

/* the bare .btn action that had no v2 fill: contact's Send (the release form's Print is the quiet .btn-ghost-d, as on the other tools) */
form .btn[type="submit"]{background:var(--ink);color:var(--accent);border:0}
/* help's reading colours: v2 shows palette C's five, v1's swatches stay for live */
.v1-pal{display:none!important}
.addphoto{background:var(--calm-2);border:0;border-radius:var(--r-s);color:var(--ink)}
.rowphoto img{border-radius:var(--r-s)}

/* FAQs in the homepage's own look (Luke, 1 Oct 2026: "this box here is off
   brand"): a sand panel with an ink head, each question a white bubble with a
   dot. The same rules as site-v2.css, over the older .faq ones. */
.faq.faq-v2{max-width:none;border-radius:var(--r);overflow:hidden;background:var(--calm-2)}
.faq-v2 .faq-head{background:var(--ink);color:var(--white);display:flex;align-items:center;gap:14px;padding:14px 24px;font-size:14px;font-weight:600;letter-spacing:.04em}
.faq-v2 .faq-head i{width:36px;height:36px;border-radius:50%;background:var(--accent);display:block}
.faq-v2 .faq-list{padding:14px 12px 20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.faq-v2 details{background:var(--white);border-radius:12px;max-width:100%;padding:0;margin:0;border:0;box-shadow:none}
.faq-v2 details[open]{width:100%}
.faq-v2 summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:center;justify-content:flex-start;padding:14px 18px;font-size:clamp(16px,1.6vw,18px);font-weight:400;color:var(--ink)}
.faq-v2 summary::-webkit-details-marker{display:none}
.faq-v2 summary::after,.faq-v2 details[open] summary::after{content:none}
.faq-v2 summary i{width:34px;height:34px;border-radius:50%;flex:none;display:block}
.faq-v2 details p{padding:0 18px 4px 66px;margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:62em}
.faq-v2 details p:last-child{padding-bottom:18px}
.faq-v2 details p + p{margin-top:0;padding-top:0}
@media (max-width:560px){.faq-v2 details p{padding-left:18px}}

/* ---------- Pro waitlist on the two free templates (marketing brief, 4 Oct 2026) ----------
   A band under the tool, and a small note right after a print. Neither prints. */
section.tpl-pro{padding:48px 0 0}
.tpl-pro-card{background:var(--calm-1);border-radius:var(--r);padding:32px 32px 30px;color:var(--ink)}
.tpl-pro-card h2{margin:0 0 10px;font-size:clamp(22px,2.6vw,30px);font-weight:500;line-height:1.25;color:var(--ink)}
.tpl-pro-card p{margin:0 0 20px;max-width:40em;font-size:16px;line-height:1.55;color:var(--ink-2)}
.tpl-pro-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.tpl-pro-acts .btn{min-height:48px;padding:0 22px;font-size:15px}
.tpl-pro-note{font-size:14px;color:var(--ink-2)}
@media (max-width:560px){.tpl-pro-card{padding:24px 20px}}
.tpl-printed{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:61;max-width:380px;
  background:var(--ink);color:var(--white);border-radius:var(--r);box-shadow:var(--float);padding:14px 48px 14px 18px}
.tpl-printed[hidden]{display:none!important}
.tpl-printed p{margin:0;font-size:14.5px;line-height:1.5;color:var(--white)}
.tpl-printed a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tpl-printed-x{position:absolute;top:4px;right:4px;width:40px;height:40px;border:0;border-radius:var(--r-s);background:transparent;color:var(--white);font:400 22px/1 var(--sans);cursor:pointer}
.tpl-printed-x:hover{background:var(--white-a60);color:var(--ink)}
@media (max-width:560px){.tpl-printed{left:16px;max-width:none}}
/* On a phone the call sheet's editor keeps a sticky "Next:" bar at the foot (v2-desk.css,
   760px and down); the note sits above it rather than over it. */
@media (max-width:760px){body:has(#view-edit:not([hidden]) .desk-next) .tpl-printed{bottom:calc(84px + env(safe-area-inset-bottom))}}
@media print{.tpl-pro,.tpl-printed{display:none!important}}
/* Phone tap targets (11 Oct 2026 design review): the shot type select (32px) and the must star
   (30px) on the shot list. The select grows to 44px; the star keeps its look and gets a 44px hit area. */
@media (max-width:600px){
  .sl-row select.sl-size{min-height:44px}
  .sl-row .starbtn{position:relative}
  .sl-row .starbtn::after{content:"";position:absolute;inset:-7px}
}

/* One stroke for every line icon (design review, 11 Oct 2026): 1.5px on screen whatever the icon's size.
   Every app icon is drawn on a 24 grid, so the viewBox picks out icons and leaves logos and drawings alone. */
html.has-sbar svg[viewBox="0 0 24 24"] :is(path,line,polyline,polygon,circle,rect,ellipse){vector-effect:non-scaling-stroke;stroke-width:1.5px}
/* The shot type picker's caret: the line chevron used everywhere else, not a filled triangle. */
select.sl-size{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235E4D5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-position:right 6px center;background-size:14px 14px}
/* A time field shows the account's clock ("7:30 AM") while it is not being edited; it holds "07:30" (call-sheet.js paintTimeShown). */
#view-edit [contenteditable][data-shown]:not(:focus){font-size:0!important;line-height:0!important}
#view-edit [contenteditable][data-shown]:not(:focus)::after{content:attr(data-shown);font-size:var(--shown-fs);line-height:var(--shown-lh);white-space:nowrap;pointer-events:none}   /* a press lands on the field, so the caret goes into the real text */