/* 101 Studios HQ: phone version and the online lock screen.
   Everything is built from the theme tokens, so all 19 themes carry over. The few theme-specific rules at the end
   give each new theme's tab bar the shape of its reference (pill, rail circle, glass, square). */

/* ---------- lock screen (online HQ) ---------- */
.vault-screen{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:24px;background:var(--bg-img),var(--bg)}
html[data-frame="float"] .vault-screen{background:var(--frame)}
.vault-card{width:min(400px,100%);background:var(--panel-img),var(--panel);border:1px solid var(--line);border-radius:calc(24px*var(--rk));box-shadow:var(--shadow-lg);padding:30px 26px;display:flex;flex-direction:column;gap:14px}
.vault-card img{height:24px;width:auto;align-self:flex-start}
.vault-card h1{font-family:var(--font-title);font-weight:var(--title-weight);letter-spacing:var(--title-track);font-size:28px;margin:6px 0 0}
.vault-card p{margin:0;color:var(--muted);font-size:14px}
.vault-card input[type=password]{font-size:16px}
.vault-keep{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text)}
.vault-card .btn{padding:13px;font-size:15px}
.vault-msg{min-height:18px;color:var(--bad-fg);font-size:13.5px;font-weight:600}
html.is-cloud [data-set="reveal-data"],html.is-cloud [data-set="reveal-backups"],html.is-cloud [data-act="quit"],html.is-cloud [data-a="reveal"]{display:none}

/* ---------- tab bar and sheets exist only on phones ---------- */
#tabbar,.mob-back,.mob-sheet{display:none}

@media (max-width:820px){
  html{-webkit-text-size-adjust:100%}
  body{overscroll-behavior-y:none}
  /* no sidebar on phones, in any layout */
  #app,html.rail #app,html[data-layout="top"] #app{display:block}
  #nav{display:none !important}
  #scopebar{display:none !important}
  html[data-frame="float"],html[data-skin="fleet"]{background:var(--bg)}
  html[data-frame="float"] #app,html[data-frame="float"] #col{margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}

  /* header row: business switcher (scrolls sideways) and the icons */
  html #topbar{display:flex !important;position:sticky;top:0;z-index:40;margin:0 !important;border:0 !important;border-radius:0 !important;padding:calc(10px + env(safe-area-inset-top)) 14px 10px !important;gap:10px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line) !important}
  #topbar .tb-l{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  #topbar .tb-l::-webkit-scrollbar{display:none}
  #topbar .scope{flex:none;box-shadow:none}
  #topbar .scope button{padding:7px 12px;font-size:12.5px;white-space:nowrap}
  #topbar .tb-r{flex:none;gap:6px}
  #topbar #savestate{font-size:0 !important;gap:0}
  #topbar .ib{width:36px;height:36px}
  #topbar .quick{display:none}
  #nav .quick{display:none}

  /* page */
  main,html body main{padding:16px 14px calc(104px + env(safe-area-inset-bottom)) !important}
  .head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px}
  .head h1,html body .head h1{font-size:27px !important}
  .head .sub{font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;white-space:normal}
  .head > div:first-child{min-width:0;max-width:100%}
  .head h1{overflow-wrap:anywhere}
  .head .actions{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0;padding:0 0 2px;width:100%;max-width:100%;min-width:0}
  .head .actions::-webkit-scrollbar{display:none}
  .head .actions .btn{flex:none}
  .grid,.g2,.g3{grid-template-columns:1fr !important}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .grid{gap:12px}
  .card{padding:16px;border-radius:calc(var(--radius)*.85)}
  .kpi{padding:15px 16px}
  .kpi .v,html body .kpi .v{font-size:clamp(19px,5.6vw,27px) !important;margin-top:8px !important;overflow-wrap:anywhere}
  .kpi .l{font-size:12.5px !important}
  .kpi .l{font-size:12.5px;padding-right:0}
  .kpi .s{font-size:11.5px}
  .filters,.tabs,.tabrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;min-width:0}
  html,body{overflow-x:hidden}
  .filters::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
  .tabs{width:100%}
  .tabs a{flex:none}
  .filters > *{flex:none}
  .banner{flex-direction:column;align-items:flex-start;gap:10px;padding:13px 14px;font-size:13.5px}

  /* comfortable tap targets, no iOS zoom on focus */
  input,select,textarea{font-size:16px !important}
  .btn{min-height:40px}
  .btn.sm{min-height:34px}
  label.f.inline{min-height:36px}

  /* windows become bottom sheets */
  #modal-root .back{align-items:flex-end;padding:0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  #modal-root .modal,#modal-root .modal.wide{width:100%;max-height:92vh;overflow-y:auto;border-radius:calc(22px*var(--rk)) calc(22px*var(--rk)) 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));animation:mob-up .32s var(--ease) !important}
  #modal-root .modal .fields.c2,#modal-root .modal .fields.c3{grid-template-columns:1fr}
  #modal-root .modal .fields > *{grid-column:1 / -1 !important}
  main .fields.c2,main .fields.c3,main .fields.c4{grid-template-columns:1fr !important}
  main .fields > *{grid-column:1 / -1 !important}
  #modal-root .modal .foot{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));background:inherit;padding:12px 0 calc(6px + env(safe-area-inset-bottom));margin-bottom:calc(-18px - env(safe-area-inset-bottom))}
  #modal-root .modal .foot .btn{flex:1}
  #toasts{bottom:calc(86px + env(safe-area-inset-bottom)) !important;left:12px !important;right:12px !important}

  /* invoice editor: form, then the preview; layout tools are for the Mac */
  .editor{grid-template-columns:1fr !important}
  .arrtools{display:none !important}
  .previewwrap{position:static}

  /* tab bar */
  #tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--nav-bg) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-top:1px solid var(--nav-line)}
  #tabbar a,#tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:54px;border:0;background:none;color:var(--muted);font:inherit;font-size:10.5px;font-weight:600;text-decoration:none;border-radius:calc(14px*var(--rk));-webkit-tap-highlight-color:transparent;cursor:pointer;transition:color .15s,background .15s,transform .15s var(--ease)}
  #tabbar a:active,#tabbar button:active{transform:scale(.92)}
  #tabbar svg{width:22px;height:22px}
  #tabbar .on{color:var(--nav-on-fg);background:var(--nav-on-bg);box-shadow:var(--nav-on-sh)}
  #tabbar .tb-plus{width:54px;height:54px;justify-self:center;border-radius:50%;background:var(--primary);color:var(--on-primary);box-shadow:0 10px 24px -10px var(--primary);margin-top:-18px}
  #tabbar .tb-plus svg{width:26px;height:26px;stroke-width:2.4}
  .tb-count{position:absolute;top:5px;right:calc(50% - 22px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-style:normal;font-weight:700;line-height:17px;text-align:center}

  /* sheets */
  .mob-back{display:block;position:fixed;inset:0;z-index:60;background:var(--backdrop);opacity:0;transition:opacity .25s}
  .mob-back.in{opacity:1}
  .mob-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:86vh;overflow-y:auto;background:var(--panel-img),var(--panel2);border-top:1px solid var(--line2);border-radius:calc(24px*var(--rk)) calc(24px*var(--rk)) 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .3s var(--ease);box-shadow:var(--shadow-lg)}
  .mob-sheet.in{transform:none}
  .ms-grip{width:40px;height:5px;border-radius:3px;background:var(--line2);margin:4px auto 12px}
  .mob-sheet h2{font-family:var(--font-head);font-size:18px;margin:0 0 12px}
  .mob-sheet h3{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:14px 4px 8px}
  .ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ms-grid > *{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:calc(16px*var(--rk));border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
  .ms-grid svg{width:22px;height:22px;color:var(--lime)}
  .ms-big{grid-column:1 / -1;background:var(--primary) !important;color:var(--on-primary) !important;border-color:transparent !important}
  .ms-big svg{color:inherit !important;width:26px;height:26px}
  .ms-big small{font-weight:400;opacity:.8;font-size:12px}
  .ms-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .ms-links a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:calc(14px*var(--rk));background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:500;text-align:center;text-decoration:none}
  .ms-links a.on{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
  .ms-links svg{width:20px;height:20px;color:var(--muted)}
  .ms-links .tb-count{top:6px;right:8px}
  .ms-foot{display:flex;gap:8px;margin-top:16px}
  .ms-foot .btn{flex:1}
  @keyframes mob-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}

/* tables become labelled cards on narrow phones */
@media (max-width:600px){
  table.list,table.list tbody,table.list tfoot{display:block;width:100%}
  table.list thead{display:none}
  table.list tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;padding:13px 4px;border-bottom:1px solid var(--line)}
  table.list tbody tr:last-child{border-bottom:0}
  table.list td{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0 !important;border:0 !important;min-width:0;text-align:left !important;white-space:normal !important;font-size:13.5px;overflow-wrap:anywhere}
  table.list td:empty,table.list td:has(> .btn:only-child),table.list td:has(> button.btn:only-child){display:none}
  table.list td::before{content:attr(data-label);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
  table.list td[data-label=""]::before{display:none}
  table.list td:first-child{grid-column:1 / -1;font-size:15px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  table.list td:first-child .small{flex-basis:100%}
  table.list td:first-child::before{display:none}
  table.list td.r{align-items:flex-start}
  table.list td:has(> .btn:only-child){grid-column:1 / -1}
  table.list td[colspan]{grid-column:1 / -1}
  table.list tfoot tr{border-top:1px solid var(--line2);border-bottom:0}
  table.list tr.click:hover td{background:transparent}
  table.list tr.click:active{background:var(--hover)}
}


/* invoice and quote line items: one card per line on any phone width */
@media (max-width:820px){
  table.lines,table.lines tbody{display:block;width:100%}
  table.lines thead{display:none}
  table.lines tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto auto;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
  table.lines td{display:block;padding:0 !important;border:0 !important;width:auto !important;min-width:0}
  table.lines td:first-child{grid-column:1 / -1}
  table.lines td.amt{text-align:right;font-weight:700}
  table.lines td input{width:100%}
  .tot{max-width:100%;width:100% !important;margin-left:0 !important}
  .editor > *,.editor .grid > *{min-width:0}
}

/* ---------- each new theme's tab bar, shaped like its reference ---------- */
@media (max-width:820px){
  /* floating bars */
  html:is([data-skin="signal"],[data-skin="fleet"],[data-skin="aurora"],[data-skin="reactor"],[data-skin="ember"],[data-skin="nebula"],[data-skin="grove"]) #tabbar{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));padding:6px;border:1px solid var(--nav-line);border-radius:calc(26px*var(--rk));box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
  html:is([data-skin="signal"],[data-skin="fleet"],[data-skin="aurora"],[data-skin="reactor"],[data-skin="ember"],[data-skin="nebula"],[data-skin="grove"]) main{padding-bottom:calc(116px + env(safe-area-inset-bottom)) !important}
  html[data-skin="grove"] #tabbar{background:rgba(255,255,255,.9);border-color:var(--line)}
  html[data-skin="grove"] #tabbar .on{background:var(--lime-soft);color:var(--primary)}
  html[data-skin="grove"] #tabbar .tb-plus{background:linear-gradient(180deg,#2b6243,#1d4b31)}
  html[data-skin="signal"] #tabbar{background:#111010;border-color:#2e2b2c;border-radius:999px}
  html[data-skin="signal"] #tabbar a,html[data-skin="signal"] #tabbar button{border-radius:999px}
  html[data-skin="signal"] #tabbar .tb-plus{background:#e2502c;color:#fff;box-shadow:0 10px 26px -10px #e2502c}
  html[data-skin="fleet"] #tabbar{background:#1a1a1a;border-radius:24px}
  html[data-skin="fleet"] #tabbar .on{background:transparent;box-shadow:none;color:var(--text)}
  html[data-skin="fleet"] #tabbar .on svg{background:#f3f3f3;color:#141414;border-radius:50%;padding:7px;width:36px;height:36px;margin:-7px 0}
  html[data-skin="aurora"] #tabbar{background:rgba(9,22,21,.7)}
  html[data-skin="aurora"] #tabbar .tb-plus{background:linear-gradient(180deg,#5ff0de,#22c3b0);box-shadow:0 0 24px -4px rgba(47,216,196,.7)}
  html[data-skin="reactor"] #tabbar{background:rgba(20,32,37,.72)}
  html[data-skin="reactor"] #tabbar .tb-plus{background:linear-gradient(180deg,#ffb15a,#ff8237);box-shadow:0 0 24px -6px rgba(255,140,50,.75)}
  html[data-skin="ember"] #tabbar .tb-plus{background:linear-gradient(180deg,#f46a35,#e2461f)}
  html[data-skin="nebula"] #tabbar .tb-plus{background:linear-gradient(180deg,#c8befe,#a99bf8);color:#15112e}
  /* flush, square, violet top marker (Dealstack) */
  html[data-skin="ultraviolet"] #tabbar{background:#070618;border-top-color:#1a1440}
  html[data-skin="ultraviolet"] #tabbar a,html[data-skin="ultraviolet"] #tabbar button:not(.tb-plus){border-radius:0}
  html[data-skin="ultraviolet"] #tabbar .on{background:rgba(109,31,243,.16);box-shadow:inset 0 2px 0 #7c3aed}
  html[data-skin="ultraviolet"] #tabbar .tb-plus{border-radius:4px;width:50px;height:50px}
  /* flat white with black (BizLink) */
  html[data-skin="linen"] #tabbar{background:rgba(255,255,255,.94);border-top-color:var(--line)}
  html[data-skin="linen"] #tabbar .on{background:#f3f3f1;color:#111}
  html[data-skin="linen"] #tabbar .tb-plus{background:#0f0f0f;border-radius:16px}
  /* the original themes keep their square or rounded character */
  html:is([data-skin="workshop"],[data-skin="workshop-dark"],[data-skin="matte"],[data-skin="matte-noir"]) #tabbar .tb-plus{border-radius:calc(16px*var(--rk))}
  /* theme details that are too big for a phone */
  html[data-skin="grove"] .kpi::after{width:30px;height:30px;top:12px;right:12px;background-size:13px}
  html[data-skin="grove"] .kpi .l{padding-right:36px}
  html[data-skin="linen"] #col{background:linear-gradient(var(--band) 0,var(--band) 260px,var(--bg) 260px)}
  html[data-skin="ultraviolet"] .grid > .kpi{padding:16px}
  html[data-fx~="tilt"] .kpi{transform:none}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  #modal-root .modal{animation:none !important}
  .mob-sheet,.mob-back{transition:none}
}