/* ============================================================
   PLUS WERK — marketing dashboard
   Adapted from the BOS light direction. Frosted panels floating
   on a soft grey ground, a black icon rail, heavy rounding, and
   colour only on a thing that needs you or a thing that is wrong.
   ============================================================ */

:root{
  --well:inset 0 2px 4px rgba(0,0,0,.11), inset 0 -1px 0 rgba(255,255,255,.55);
  --well-deep:inset 0 3px 8px rgba(0,0,0,.17), inset 0 -2px 2px rgba(255,255,255,.72), inset 0 0 0 1px rgba(0,0,0,.05);
  --ink:#1a1a1a;
  --dim:#6e6e6e;
  --dim2:#949494;
  --pos:#2e9e68;
  --neg:#d6503f;

  /* BOS names, for the door — globals.css :root */
  --card:rgba(255,255,255,.34);
  --lift-pane:0 8px 22px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.7);
  --float:0 26px 60px rgba(0,0,0,.17), 0 2px 5px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.06);
  --radius-card:32px;
  --radius-well:22px;
  --field:rgba(255,255,255,.3);
  --faint:#8b8b8b;
  --fainter:#a3a3a3;
  --radius-field:20px;
  --lift:0 2px 6px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9);
  --calm:200ms;
  --ease:cubic-bezier(.22,.7,.25,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);
  font-family:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  font-feature-settings:"cv11" 1,"ss01" 1;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(130% 100% at 35% 0%, #bcbcbc 0%, #b0b0b0 55%, #a6a6a6 100%);
  background-attachment:fixed}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}
.dim2{color:var(--dim2)}

/* ---- the shell ----
   BOS: src/components/Shell.tsx. Two panels and a gap. The window is the
   full height and never scrolls; the room inside the right panel does.

   NO PADDING ON THE RIGHT. The room's own scroll box carries that 32px as
   part of its 64, so the box reaches the window's edge and its scrollbar
   lands on the grey BEYOND the panel instead of inside it. */
.app{position:relative;display:flex;width:100%;height:100svh;gap:16px;overflow:hidden;
  padding:32px 0 32px 32px}

/* ---- glass ---- */
.glass{background:rgba(255,255,255,.28);border-radius:40px;box-shadow:var(--float)}
.pane{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--lift-pane)}
.raise{background:rgba(255,255,255,.5);border-radius:20px;box-shadow:var(--lift)}
.sunk{background:rgba(255,255,255,.24);border-radius:20px;box-shadow:var(--well)}
.hair{height:1px;background:rgba(0,0,0,.09);margin:18px 0}

/* ---- the rail ----
   One inset round both: the glass panel holds the black pill 16px from its
   own edge, so the pill carries no margin of its own. */
.side{flex:0 0 316px;width:316px;display:flex;flex-direction:column;gap:8px;padding:16px;
  background:rgba(255,255,255,.28);border-radius:40px;box-shadow:var(--float)}
.navblock{display:flex;min-height:0;flex:0 1 auto;flex-direction:column;overflow-y:auto;
  padding:16px;border-radius:32px;background:#1c1c1c}
.stack{display:flex;flex-shrink:0;flex-direction:column}
/* a grey thumb inside a black pill is the scrollbar this app said no to */
.navblock{scrollbar-width:none}
.navblock::-webkit-scrollbar{display:none;width:0;height:0}

.wsrow{padding:8px 8px 8px}
.wsmark{display:block;width:178px;height:auto}
.wsname{margin-top:16px;display:block;font-size:13px;line-height:1.3;color:#8e8e8e}
.wssub{margin-top:4px;display:block;font-size:11px;line-height:1.3;color:#7a7a7a}

.sect{margin:16px 0 8px;padding:0 8px;font-size:11px;font-weight:500;color:#7a7a7a}
.item{display:flex;align-items:center;gap:8px;height:38px;padding:0 8px;border-radius:16px;
  font-size:13px;color:#a8a8a8;width:100%;text-align:left;
  transition:color var(--calm) var(--ease),background-color var(--calm) var(--ease)}
.item .ic{display:grid;place-items:center;width:19px;height:19px;flex:0 0 19px}
.item .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .ct{font-size:11px;color:#7a7a7a}
.item:hover{color:#fff}
.item.on{background:rgba(255,255,255,.11);color:#fff}
.item.on .ct{color:#a8a8a8}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:11px;
  background:rgba(214,80,63,.22);color:#ff8b7d;font-size:11px;font-weight:600}
.badge.grey{background:rgba(255,255,255,.10);color:#a8a8a8}
.navfoot{margin-top:16px;padding:16px 8px 0;font-size:11px;color:#6e6e6e;line-height:1.5}

/* ---- the track ----
   A stadium PRESSED INTO the rail: the deep well below it, a white lip along
   the bottom, and the letters cut in rather than printed on. It takes whatever
   height the rooms leave, and goes entirely when that is under 176px. */
.track{display:grid;place-items:center;overflow:hidden;border-radius:9999px;
  min-height:46px;flex:1 1 0%;opacity:1;
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.42) 100%);
  box-shadow:var(--well-deep),0 1px 0 rgba(255,255,255,.65);
  transition:flex-grow 200ms var(--ease),min-height 200ms var(--ease),opacity 200ms var(--ease)}
.track.off{min-height:0;flex:none;opacity:0}
.track span{font-size:11px;text-transform:uppercase;letter-spacing:.32em;color:#8a8a8a;
  writing-mode:vertical-rl;transform:rotate(180deg);
  text-shadow:1px 0 0 rgba(255,255,255,.9)}

/* ---- the room ----
   <main> holds the frosted panel and nothing else; the scrolling box is the
   .room inside it. The panel is drawn as a layer behind, inset 32px from the
   right, which is the strip the scrollbar stands in. */
.main{position:relative;isolation:isolate;display:flex;flex-direction:column;
  flex:1;min-width:0;min-height:0}
.main::before{content:"";position:absolute;inset:0 32px 0 0;z-index:-1;display:block;
  pointer-events:none;border-radius:40px;background:rgba(255,255,255,.28);box-shadow:var(--float)}

.room{min-height:0;flex:1 1 0%;overflow-y:auto;padding:32px;padding-right:64px}

/* ---- the room's head ----
   Not a card: it sits straight on the room's own glass, and the tiles
   underneath are the only surface up here. */
.headrow{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:16px 32px;padding:0 8px}
.h1{margin:0;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.lead{margin-top:8px;font-size:13px;line-height:1.5;color:var(--dim);max-width:62ch}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;
  border-radius:var(--radius-field);background:rgba(255,255,255,.55);font-size:13px;
  box-shadow:var(--lift);
  transition:transform var(--calm) var(--ease),box-shadow var(--calm) var(--ease),background-color var(--calm) var(--ease)}
.btn:hover{background:rgba(255,255,255,.75)}
.btn:active{transform:scale(.965);box-shadow:var(--well)}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;
  border-radius:var(--radius-field);background:#1c1c1c;color:#fff;font-size:13px;
  box-shadow:0 6px 14px rgba(0,0,0,.22);
  transition:transform var(--calm) var(--ease),box-shadow var(--calm) var(--ease),background-color var(--calm) var(--ease)}
.btn-dark:hover{background:#000}
.btn-dark:active{transform:scale(.965);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.btn:disabled,.btn-dark:disabled{pointer-events:none;opacity:.4}

.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-tag,12px);
  background:var(--muted,rgba(255,255,255,.45));font-size:11px;color:#5a5a5a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.tag-neg{background:rgba(214,80,63,.12);color:var(--neg);box-shadow:none}
.tag-pos{background:rgba(46,158,104,.16);color:var(--pos);box-shadow:none}
.tag-dark{background:#1c1c1c;color:#fff;box-shadow:none}

/* ---- the facts, as a row of frosted tiles ---- */
.stats{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(264px,1fr));gap:16px}
.stat{display:flex;min-width:0;flex-direction:column;gap:16px;padding:24px;
  background:var(--card);border-radius:var(--radius-card);box-shadow:var(--lift-pane)}
.statlab{font-size:11px;line-height:1.3;color:var(--dim)}
.statbig{font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--faint)}
.statbig.alert{color:var(--neg)}

/* ---- board ---- */
.board{display:flex;gap:14px;margin-top:22px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.col{flex:0 0 288px;width:288px;border-radius:32px;background:rgba(255,255,255,.22);padding:14px 12px 16px;
  box-shadow:var(--well)}
.colhead{display:flex;align-items:center;gap:9px;padding:2px 8px 12px}
.coltitle{font-size:13px;font-weight:600;letter-spacing:-.01em}
.coldot{width:8px;height:8px;border-radius:9999px;background:#9a9a9a;flex:0 0 8px}
.coldot.needs{background:var(--neg)}
.coldot.approved,.coldot.done{background:var(--pos)}
.colcount{margin-left:auto;font-size:12px;color:var(--dim2)}

.card{display:block;width:100%;text-align:left;padding:14px 16px 15px;border-radius:22px;margin-bottom:9px;
  background:rgba(255,255,255,.62);box-shadow:0 2px 6px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.9)}
.card:hover{background:rgba(255,255,255,.82);transform:translateY(-1px)}
.card:last-child{margin-bottom:0}
.cardtop{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.cardtype{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim2);font-weight:500}
.carddate{margin-left:auto;font-size:11.5px;color:var(--dim2)}
.cardtitle{font-size:14.5px;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.cardbrief{margin-top:5px;font-size:12.5px;color:var(--dim);line-height:1.4}
.cardfoot{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.empty{padding:16px 10px;font-size:12.5px;color:var(--dim2);text-align:center}

/* ---- needs-you list ---- */
.needs{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.need{padding:20px 22px;border-radius:28px;background:rgba(255,255,255,.5);
  box-shadow:0 2px 6px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9)}
.needhead{display:flex;align-items:flex-start;gap:12px}
.needtitle{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.3;flex:1;min-width:0}
.needwhy{margin-top:6px;font-size:13.5px;color:var(--dim);line-height:1.5}
.needact{margin-top:14px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.done-state{margin-top:12px;padding:12px 16px;border-radius:18px;background:rgba(46,158,104,.10);
  font-size:13px;color:#2a7d55;line-height:1.5}

/* ---- inputs ---- */
.field{width:100%;min-height:74px;padding:13px 16px;border-radius:20px;resize:vertical;
  background:rgba(255,255,255,.4);box-shadow:var(--well);border:0;outline:0;
  font-size:14px;line-height:1.5;color:var(--ink)}
.field:focus{background:rgba(255,255,255,.62)}
.field::placeholder{color:var(--dim2)}

/* ---- detail drawer ---- */
.scrim{position:fixed;inset:0;background:rgba(40,40,40,.4);backdrop-filter:blur(3px);
  display:none;z-index:40}
.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,100vw);z-index:50;
  background:#eeeeec;box-shadow:-30px 0 70px rgba(0,0,0,.3);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column}
.drawer.on{transform:none}
.dhead{padding:26px 34px 18px;flex:0 0 auto}
.dtop{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dclose{margin-left:auto;width:34px;height:34px;border-radius:17px;display:grid;place-items:center;
  background:rgba(0,0,0,.06);color:#5a5a5a}
.dclose:hover{background:rgba(0,0,0,.11)}
.dtitle{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:0}
.dpath{margin-top:8px;font-size:12px;color:var(--dim2);font-family:ui-monospace,Menlo,Consolas,monospace}
.dbody{flex:1;overflow-y:auto;padding:4px 34px 30px}
.dact{flex:0 0 auto;padding:18px 34px 22px;background:rgba(255,255,255,.6);
  box-shadow:0 -1px 0 rgba(0,0,0,.08)}
.dactrow{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}

/* markdown inside the drawer */
.md{font-size:14.5px;line-height:1.62;color:#2a2a2a}
.md h1{font-size:24px;font-weight:700;letter-spacing:-.025em;margin:26px 0 10px}
.md h1:first-child{margin-top:6px}
.md h2{font-size:17px;font-weight:650;letter-spacing:-.018em;margin:26px 0 8px}
.md h3{font-size:14.5px;font-weight:650;margin:20px 0 6px}
.md p{margin:0 0 12px}
.md ul,.md ol{margin:0 0 14px;padding-left:22px}
.md li{margin-bottom:5px}
.md strong{font-weight:620}
.md code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:rgba(0,0,0,.06);padding:2px 6px;border-radius:7px}
.md pre{background:rgba(0,0,0,.05);padding:14px 16px;border-radius:16px;overflow-x:auto;margin:0 0 14px}
.md pre code{background:none;padding:0;font-size:12.5px;line-height:1.6}
.md table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:13.5px}
.md th{text-align:left;font-weight:600;padding:8px 12px;border-bottom:1px solid rgba(0,0,0,.14);color:#4a4a4a}
.md td{padding:8px 12px;border-bottom:1px solid rgba(0,0,0,.07);vertical-align:top}
.md blockquote{margin:0 0 14px;padding:10px 18px;border-left:2px solid rgba(0,0,0,.18);color:#4a4a4a}
.md hr{border:0;height:1px;background:rgba(0,0,0,.1);margin:22px 0}
.md a{text-decoration:underline;text-underline-offset:2px}

/* ---- intake form ---- */
.form{padding-top:6px}
.qblock{margin-bottom:22px}
.qhead{font-size:16px;font-weight:650;letter-spacing:-.015em;line-height:1.3;margin-bottom:6px}
.qhint{font-size:13.5px;color:var(--dim);line-height:1.5;margin-bottom:10px}
.qhint p{margin:0 0 6px}
.qhint ul,.qhint ol{margin:0 0 6px;padding-left:20px}
.qhint strong{font-weight:600;color:#3a3a3a}
.qblock .field{min-height:86px;background:rgba(255,255,255,.55)}
.qblock .field:focus{background:#fff}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:60;
  display:flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:22px;
  background:#1c1c1c;color:#fff;font-size:13.5px;box-shadow:0 14px 34px rgba(0,0,0,.32);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--neg)}

/* an unsaved form should look unsaved */
.btn-dark.urgent{background:var(--neg);box-shadow:0 6px 14px rgba(214,80,63,.34)}
.btn-dark.urgent:hover{background:#c2452f}

/* ---- unsaved-changes dialog ---- */
.confirm-scrim{position:fixed;inset:0;background:rgba(30,30,30,.46);backdrop-filter:blur(4px);
  display:none;z-index:80}
.confirm-scrim.on{display:block}
.confirm{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:90;display:none;
  width:min(420px,calc(100vw - 40px));padding:28px 30px 24px;border-radius:32px;background:#f2f1ef;
  box-shadow:0 30px 70px rgba(0,0,0,.36)}
.confirm.on{display:block}
.confirm-title{font-size:20px;font-weight:700;letter-spacing:-.022em;line-height:1.2}
.confirm-body{margin-top:8px;font-size:14px;color:var(--dim);line-height:1.55}
.confirm-acts{margin-top:22px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.confirm-discard{margin-left:auto;color:var(--neg);background:rgba(214,80,63,.10);box-shadow:none}
.confirm-discard:hover{background:rgba(214,80,63,.18)}

/* ---- stale build notice ---- */
.stale{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:70;display:none;
  align-items:center;gap:14px;height:52px;padding:0 14px 0 22px;border-radius:26px;
  background:#1c1c1c;color:#fff;font-size:13.5px;box-shadow:0 14px 34px rgba(0,0,0,.34)}
.stale.on{display:flex}

/* ---- the door ----
   Lifted from BOS: src/components/Login.tsx on globals.css. One glass panel on
   the grey ground, the real mark, two boxes pressed in, one dark press.
   A box is pressed INTO the panel; a button is lifted OFF it. That one
   distinction is the whole look, so nothing here invents a third surface. */

.door{display:grid;min-height:100svh;place-items:center;padding:16px}
.door-panel{width:100%;max-width:400px;padding:32px}
.door-logo{display:block;width:150px;height:auto}
.door-sub{display:block;margin-top:16px;font-size:13px;color:var(--dim)}
.door-stack{margin-top:32px;display:flex;flex-direction:column;gap:16px}

.door-lab{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;line-height:1.3;color:var(--faint)}
.door-box{margin-top:8px}

.door-field{display:flex;align-items:center;width:100%;height:42px;padding:0 16px;
  border:0;outline:0;border-radius:var(--radius-field);
  background:var(--field);box-shadow:var(--well);
  font-size:13px;color:var(--ink);transition:background-color var(--calm) var(--ease)}
.door-field::placeholder{color:var(--fainter)}
.door-field:focus{background:rgba(255,255,255,.45)}

.door-press{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  height:38px;padding:0 16px;border:0;border-radius:var(--radius-field);
  background:var(--primary,#1c1c1c);color:#fff;font-size:13px;cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.22);
  transition:transform var(--calm) var(--ease),box-shadow var(--calm) var(--ease),
             background-color var(--calm) var(--ease),color var(--calm) var(--ease)}
.door-press:hover{background:#000}
.door-press:active{transform:scale(.965);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.door-press:disabled{pointer-events:none;opacity:.4}

/* The refusal is one sentence, the one colour, and it is not a panel. */
.door-refusal{display:none;margin:-8px 0 0;font-size:11px;line-height:1.5;color:var(--neg)}
.door-refusal.on{display:block}

/* The phone: every target 44 tall, the panel to the window's edge. */
@media (width < 64rem),(height < 31.25rem){
  .door-field,.door-press{height:44px}
}

/* ---- sign out ---- */
.signout{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px 11px;border-radius:14px;
  font-size:12.5px;color:#8e8e8e;width:100%;text-align:left}
.signout:hover{background:rgba(255,255,255,.07);color:#d0d0d0}

/* ---- the scrollbar ----
   A thin grey thumb on no track at all, hugging the right of its own gutter
   so it stands against the edge it belongs to. */
*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.22) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.22);
  border-width:3px 0 3px 6px;border-style:solid;border-color:transparent;
  background-clip:content-box;border-radius:5px}

/* ---- the phone ----
   There is no bottom bar here, so the rail stays and lies down instead.
   The panels reach the window's edge and the scrollbar is the browser's own
   overlay, so there is no strip beyond the panel: 16px all round. */
@media (width < 64rem),(height < 31.25rem){
  .app{flex-direction:column;height:auto;min-height:100svh;overflow:visible;gap:12px;padding:12px}
  .side{flex:none;width:auto;border-radius:32px;padding:10px}
  .navblock{flex:none;flex-direction:row;flex-wrap:wrap;gap:6px;border-radius:26px;padding:12px}
  .navblock .wsrow{width:100%;padding:4px}
  .wsmark{width:140px}
  .sect{display:none}
  .item{width:auto;flex:0 0 auto}
  .navfoot{margin-top:0;width:100%;padding:8px 4px 0}
  .track{display:none}
  .main{min-height:0}
  .main::before{inset:0;border-radius:32px}
  .room{overflow:visible;padding:16px}
  .h1{font-size:28px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
  .stat{padding:12px 10px;gap:6px;border-radius:var(--radius-well)}
  .statbig{font-size:16px;line-height:1.1;letter-spacing:-.02em}
  .board{gap:10px}
  .col{flex:0 0 250px;width:250px}
  .dhead,.dbody,.dact{padding-left:20px;padding-right:20px}
  .btn,.btn-dark{height:44px}
}

/* ---- the off switch ----
   Not optional: every screen still works without any motion. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-delay:0ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}