/* © 2026 Lumira Studio (lumirastudio.com). All rights reserved.
   Served for running in your browser; not licensed for copying or reuse. */
/* One set of controls for every app screen (design review, 12 Oct 2026): the library, project,
   editor, account, the tools inside a shoot and the shoot day all link this file last, so its
   rules are the ones that hold. Values come from css/v2-tokens.css only.

   BUTTONS: one .btn. Sizes s 36, m 48 (the default), l 56. Variants primary (ink, citrus text),
   secondary (sand), quiet (no fill) and danger. One radius rule: a small button is --r-s, m and
   l are --r. On an ink surface (.on-ink) primary turns citrus with ink text and secondary turns
   a white wash. The older names (.btn-ghost, .sbar-btn, .lp-btn, .pv-btn ...) are kept as hooks
   for scripts and tests and drawn here, so there is one look whatever the markup says. */
.btn,.sbar-btn,.lp-btn,.pv-btn,.pp-go,.lib-board-btn,.lib-head h2 .lib-board-btn,.sbar-share-copy{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--ctl-m);height:auto;padding:0 var(--sp-5);margin:0;
  border:0;border-radius:var(--r);
  font-family:var(--sans);font-size:var(--fs-ui);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:0;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--calm-2);color:var(--ink);box-shadow:none;
  transition:opacity var(--v2-ease),background-color var(--v2-ease)}
.btn:hover,.sbar-btn:hover,.lp-btn:hover,.pv-btn:hover,.pp-go:hover,.lib-board-btn:hover,.sbar-share-copy:hover{opacity:.9;transform:none}
.btn:focus-visible,.sbar-btn:focus-visible,.lp-btn:focus-visible,.pv-btn:focus-visible,.pp-go:focus-visible,.lib-board-btn:focus-visible,.sbar-share-copy:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn svg,.sbar-btn svg,.pv-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.btn[disabled],.sbar-btn[disabled],.pv-btn[disabled]{opacity:.5;cursor:default}

/* sizes */
.btn-s,.app-bar .btn,.ed-bar .btn,.sbar-btn,.pv-btn,.lib-board-btn,.lib-head h2 .lib-board-btn,.sbar-share-copy,
.pv-tools .btn,.aplan .btn,.ausage .btn,.asketch .btn,.viewbar-acts .btn{
  min-height:var(--ctl-s);padding:0 var(--sp-4);border-radius:var(--r-s);font-size:var(--fs-small)}
.btn-l,.pp-go{min-height:var(--ctl-l);padding:0 var(--sp-6);font-size:var(--fs-body)}
.btn-wide{width:100%}
/* a touch screen: the small size keeps its look and grows to a 44px target */
@media (hover:none),(max-width:600px){
  .btn-s,.app-bar .btn,.ed-bar .btn,.sbar-btn,.pv-btn,.lib-board-btn,.lib-head h2 .lib-board-btn,.sbar-share-copy,
  .pv-tools .btn,.aplan .btn,.ausage .btn,.asketch .btn,.viewbar-acts .btn{min-height:var(--hit)}
}
/* the phone shoot bar's icon-only buttons stay round (phase 1, 11 Oct 2026) */
@media (max-width:600px){.sbar-ico{border-radius:50%}}

/* variants */
.btn-primary,.btn-light,.sbar-primary,.pv-btn-ink,.pp-go,.sl-add .btn,form .btn[type="submit"]{background:var(--ink);color:var(--accent)}
.btn-secondary,.btn-ghost,.btn-ghost-d,.pv-btn-quiet,.lib-board-btn,.sbar-share-copy{background:var(--calm-2);color:var(--ink)}
.btn-quiet{background:transparent;color:var(--ink)}
.btn-quiet:hover{background:var(--calm-2);opacity:1}
.btn-danger{background:var(--danger);color:var(--on-ink)}
/* on an ink surface: the library's next-shoot card */
.on-ink .btn-primary,.lp-btn.primary{background:var(--accent);color:var(--ink)}
.on-ink .btn-secondary,.lp-btn.quiet{background:rgba(255,255,255,.12);color:var(--on-ink)}
.on-ink .btn:focus-visible,.lp-btn:focus-visible{outline-color:var(--accent)}

/* Two buttons drawn as one (New and its menu; Start prompter and the call button): square inner
   corners and a citrus hairline between them */
.split .split-main{border-radius:var(--r-s) 0 0 var(--r-s)}
.split .split-arrow,.ed-split .ed-call-seg{border-radius:0 var(--r-s) var(--r-s) 0;border-left:1px solid rgba(255,225,77,.28);padding:0 var(--sp-3)}
body.guest .split .split-main{border-radius:var(--r-s)}
/* Start prompter on a phone is the editor's bottom bar, edge to edge */
@media (max-width:900px){.ed-split .btn{border-radius:0}.ed-bar .ed-call-seg{padding:0 var(--sp-5)}}

/* HEADER: one app header (design review 12 Oct 2026). The library, project, account, editor,
   the shoot bar (call sheet, shots, moodboard, release) and the shoot day share one height
   (68, 60 on a phone), one gutter (20, 16 on a phone) and one logo: 32px, first in the bar.
   Where there is somewhere to go back to, the way back sits straight after the logo: a sand
   pill with an arrow and the place's name. On a phone it is the arrow alone, a 44px circle,
   the words kept for screen readers (Luke, 12 Oct 2026). The phone shoot bar keeps its
   phase-1 shape: one row of controls, the tabs scrolling underneath. */
.app-bar,body.paper .app-bar,.ed-bar,body.paper .ed-bar,.sbar{
  box-sizing:border-box;min-height:var(--head-h);padding:0 20px;gap:var(--sp-3);align-items:center}
.app-bar .app-name{gap:var(--sp-3);align-items:center;padding:0}
.app-bar .app-icon,.ed-logo img,.sbar-logo img,.d-home img{width:32px;height:32px;border-radius:var(--r-s);display:block;margin:0}
.ed-logo,.sbar-logo,.d-home{flex:none;display:flex;line-height:0}
.ed-left{gap:var(--sp-3)}
/* a screen with a way back drops the word Miracue and the plan: logo, then the way back */
body.has-back .app-bar .app-name{font-size:0;gap:0}
body.has-back .app-bar .plan-tag{display:none}

.hd-back,.sbar-home,.app-bar .lib-back,.lib-head h2 .lib-back{
  box-sizing:border-box;flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;
  height:40px;min-height:0;padding:0 14px 0 10px;margin:0;border:0;border-radius:var(--pill);
  background:var(--calm-2);color:var(--ink);font-family:var(--sans);font-size:var(--fs-ui);font-weight:var(--fw-strong);
  letter-spacing:0;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
.hd-back:hover,.sbar-home:hover,.app-bar .lib-back:hover{background:var(--calm-1)}
.hd-back:focus-visible,.sbar-home:focus-visible,.app-bar .lib-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hd-back svg,.sbar-home svg,.app-bar .lib-back svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:none}
.hd-back span,.sbar-home span,.app-bar .lib-back span{min-width:0;max-width:16em;overflow:hidden;text-overflow:ellipsis}
.app-bar > .lib-back{margin-right:auto}

/* the shoot day: the header row is the same height; its chips and Edit row sit under it */
.d-bar{padding-top:env(safe-area-inset-top,0px)}
.d-top{min-height:var(--head-h-phone);gap:var(--sp-3)}

@media (max-width:900px){
  .sbar{padding:var(--sp-2) 16px var(--sp-1)}
}
@media (max-width:600px){
  .app-bar,body.paper .app-bar,.ed-bar,body.paper .ed-bar{min-height:var(--head-h-phone);padding:0 16px;gap:var(--sp-2)}
  .sbar{padding-left:16px;padding-right:16px}
  .ed-left{gap:var(--sp-2)}
  .sbar,.d-top{gap:var(--sp-2)}
  .sbar .sbar-shoot span,.sbar .sbar-shoot b{line-height:1.25}
  .hd-back,.sbar-home,.app-bar .lib-back{position:relative;width:var(--hit);height:var(--hit);padding:0;justify-content:center;border-radius:50%;flex:none}
  .hd-back span,.sbar-home span,.app-bar .lib-back span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:601px){.d-top{min-height:var(--head-h)}}
/* a narrow phone shows the logo and the plan, not the word (v2-app.css): no gap for the hidden word */
@media (max-width:400px){.app-bar .app-name{gap:0}.app-bar .app-name .plan-tag{margin-left:var(--sp-3)}}