/* ── Plinth theme ──────────────────────────────────────────
   The shared look from the Plinth product mock (brand sheet v0.1): linen and
   charcoal, one madder accent, Geist, motion that settles. Opt in by putting
   class="plinth" on a page's root; everything here is scoped under it. The
   colours are styles.css's tokens (one palette, one light/dark switch); this
   file only gives the mock's components and the mock's names for them.

   Generated from the mock's stylesheet; keep its class names (btn, chip,
   card, field, lane, tcard, suggest …) so pages built from the mock drop in.
   Animations are renamed pl-* so they never collide with styles.css. */

.plinth {
  /* The palette is styles.css's (:root and [data-mode="light"]): the same Plinth values, one
     definition, one light/dark switch. These are the mock's names for it. */
  --surface2: var(--surface-2);
  --line: var(--border);
  --line2: var(--border-strong);
  --ink: var(--text);
  --ink2: var(--text-2);
  --ink3: var(--text-3);
  --accc: var(--accent);
  --acc-ink: var(--accent-ink);
  --acc-soft: var(--accent-soft);
  --ok-soft: color-mix(in srgb, var(--ok) 13%, transparent);
  --warn-c: var(--warn);
  --warn-soft: color-mix(in srgb, var(--warn) 16%, transparent);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* The one shade the mock has that styles.css doesn't: ochre for edges and dots on linen. */
[data-mode="light"] .plinth { --warn-c: #C4943A; }

@keyframes pl-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pl-fade{from{opacity:0}to{opacity:1}}
@keyframes pl-pop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.plinth *{box-sizing:border-box}
.plinth h1,.plinth h2,.plinth h3,.plinth p{margin:0}
.plinth button{font:inherit;color:inherit}
.plinth .mono{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.plinth .muted{color:var(--ink2)}
.plinth .faint{color:var(--ink3)}
.plinth .sm-t{font-size:13px}
.plinth .xs-t{font-size:12px}
.plinth .row{display:flex;align-items:center;gap:12px}
.plinth .col{display:flex;flex-direction:column}
.plinth .grow{flex:1;min-width:0}
.plinth .ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.plinth .ico.lg{width:22px;height:22px}
.plinth .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,transform .12s,box-shadow .2s,filter .2s}
.plinth .btn:hover{background:var(--surface2)}
.plinth .btn:active{transform:scale(.98)}
.plinth .btn.primary{background:var(--accc);border-color:transparent;color:var(--acc-ink)}
.plinth .btn.primary:hover{filter:brightness(1.08);background:var(--accc)}
.plinth .btn.inkb{background:var(--ink);border-color:transparent;color:var(--bg)}
.plinth .btn.inkb:hover{background:var(--ink);filter:brightness(1.15)}
.plinth .btn.ghost{background:transparent;border-color:transparent}
.plinth .btn.ghost:hover{background:var(--surface2)}
.plinth .btn.sm{min-height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.plinth .btn.lg{min-height:48px;padding:0 22px;font-size:15px;border-radius:12px}
.plinth .btn.block{width:100%}
.plinth .btn.icon{width:40px;padding:0}
.plinth .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.plinth :focus-visible{outline:2px solid var(--accc);outline-offset:2px}
.plinth .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);transition:background-color .35s,border-color .35s}
.plinth .pad{padding:20px}
.plinth .chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface2);color:var(--ink2);white-space:nowrap}
.plinth .chip.acc{background:var(--acc-soft);color:var(--accc)}
.plinth .chip.ok{background:var(--ok-soft);color:var(--ok)}
.plinth .chip.warn{background:var(--warn-soft);color:var(--warn)}
.plinth .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.plinth .dot.live{animation:pl-pulse 2s ease-in-out infinite}
.plinth .label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.plinth .field{width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font:inherit;transition:border-color .2s,box-shadow .2s,background-color .35s}
.plinth .field:focus{border-color:var(--accc);box-shadow:0 0 0 4px var(--acc-soft);outline:none}
.plinth .field.err{border-color:var(--warn-c)}
.plinth textarea.field{min-height:120px;resize:vertical;line-height:1.5}
.plinth .flabel{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.plinth .cb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border-radius:5px;border:1.5px solid var(--line2);background:var(--surface);display:inline-grid;place-items:center;cursor:pointer;flex:none;transition:background-color .2s,border-color .2s}
.plinth .cb:checked{background:var(--accc);border-color:var(--accc)}
.plinth .cb:checked::after{content:"";width:5px;height:9px;border:solid var(--acc-ink);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.plinth .switch{appearance:none;-webkit-appearance:none;width:40px;height:24px;margin:0;border-radius:99px;background:var(--line2);position:relative;cursor:pointer;flex:none;transition:background-color .25s}
.plinth .switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .28s var(--ease)}
.plinth .switch:checked{background:var(--accc)}
.plinth .switch:checked::after{transform:translateX(16px)}
.plinth .spinner{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:pl-spin .7s linear infinite;flex:none}
.plinth .rise{animation:pl-rise .5s var(--ease) both}
.plinth .d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}.d5{animation-delay:.3s}
.plinth .pop{animation:pl-pop .45s var(--ease) both}
.plinth .choices{display:flex;flex-wrap:wrap;gap:8px}
.plinth .choice{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);cursor:pointer;font-weight:500;transition:all .2s var(--ease)}
.plinth .choice:hover{border-color:var(--ink3)}
.plinth .choice.on{border-color:var(--accc);background:var(--acc-soft);color:var(--accc)}
.plinth .psq{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex:none}
.plinth .psq.all{background:var(--ink);color:var(--bg)}
.plinth .psq.xl{width:40px;height:40px;border-radius:10px;font-size:16px}
.plinth .psq.dot{width:10px;height:10px;border-radius:3px}
.plinth .choice.sm{min-height:34px;padding:0 12px;font-size:13px}
.plinth .pbadge{width:20px;height:20px;font-size:10px;border-radius:6px;flex:none;margin-top:1px}
.plinth .badge{margin-left:auto;min-width:20px;height:20px;border-radius:99px;font-size:11px;display:inline-grid;place-items:center;font-weight:600;padding:0 6px;background:var(--surface2);color:var(--ink2)}
.plinth .badge.warn{background:var(--warn-soft);color:var(--warn)}
.plinth .ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.plinth .ph h1{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.plinth .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px}
.plinth .card-h h2{font-size:15px;font-weight:600}
.plinth .board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);gap:16px;align-items:start;overflow-x:auto;padding-bottom:8px}
.plinth .lane{background:var(--surface2);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:260px;transition:background-color .35s}
.plinth .lane-h{display:flex;align-items:center;gap:8px;padding:4px 6px 6px;font-weight:600;font-size:13px}
.plinth .tcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;animation:pl-rise .35s var(--ease) both;box-shadow:var(--shadow)}
.plinth .tcard .t{font-weight:500;line-height:1.4}
.plinth .tcard[draggable="true"]{cursor:grab}
.plinth .tcard[draggable="true"]:active{cursor:grabbing}
.plinth .tcard.dragging{opacity:.4}
.plinth .tcard.before{box-shadow:0 -3px 0 0 var(--accc),var(--shadow)}
.plinth .cform{gap:10px;cursor:default}
.plinth .lane{transition:background-color .2s,box-shadow .2s}
.plinth .lane.over{background:color-mix(in srgb,var(--accc) 7%,var(--surface2));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accc) 40%,transparent)}
.plinth .lane-new{background:transparent;box-shadow:none;min-height:0}
.plinth .lane-title{border:0;background:none;font:inherit;font-weight:600;font-size:13px;color:var(--ink);cursor:text;padding:2px 6px;margin-left:-6px;border-radius:6px;text-align:left}
.plinth .lane-title:hover{background:var(--surface)}
.plinth .lane-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:40px;border:1.5px dashed var(--line2);border-radius:10px;background:transparent;color:var(--ink2);cursor:pointer;font-weight:500;transition:border-color .2s,color .2s,background-color .2s}
.plinth .lane-add:hover{border-color:var(--accc);color:var(--accc);background:var(--acc-soft)}
.plinth .drop-slot{min-height:44px;border:1.5px dashed var(--accc);border-radius:10px;display:grid;place-items:center;font-size:12px;color:var(--accc);animation:pl-fade .15s ease both}
.plinth .prio.high{background:var(--acc-soft);color:var(--accc)}
.plinth .prio.low{background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}
.plinth .seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;background:var(--surface2);border-radius:10px}
.plinth .seg3 button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;border:0;background:transparent;border-radius:7px;cursor:pointer;font-weight:500;font-size:13px;color:var(--ink2);transition:background-color .2s,color .2s,box-shadow .2s}
.plinth .seg3 button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.plinth .suggest{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--accc) 60%,transparent);background:var(--acc-soft);margin-bottom:20px;flex-wrap:wrap}

.plinth .chip { margin-left: 0; border: 0; }   /* styles.css's .chip, undone */
/* Where styles.css uses the same class names as the mock, the mock wins inside .plinth:
   - .label: styles.css hides the sidebar's in rail mode; the mock's is an eyebrow.
   - .warn: styles.css's is a full-width notice line; the mock's is a chip or badge tone. */
.sidebar-rail .plinth .label, .plinth .label { display: inline; }
.plinth .chip.warn, .plinth .badge.warn { flex-basis: auto; border-left: 0; padding-left: 10px; font-size: 12px; }
.plinth .badge.warn { padding-left: 6px; font-size: 11px; }

@media (max-width: 900px) { .plinth .board { grid-auto-columns: 86%; } }
@media (prefers-reduced-motion: reduce) {
  .plinth *, .plinth *::before, .plinth *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ── Daily activity: the mock's day components, from its own stylesheet, scoped under .plinth ── */
@keyframes pl-draw{to{stroke-dashoffset:0}}
@keyframes pl-glow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes pl-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pl-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes pl-stamp{0%{opacity:0;transform:scale(1.5) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes pl-wave{0%,100%{height:4px}50%{height:18px}}
.plinth .lrow{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;border-radius:9px;border:0;background:none;cursor:pointer;text-align:left;width:100%;font-size:14px;transition:background-color .2s}
.plinth .lrow:hover,.plinth .lrow.hot{background:var(--surface2)}
.plinth .key{width:10px;height:10px;border-radius:3px;flex:none}
.plinth .kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.plinth .recap-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--warn-soft);color:var(--warn);flex:none}
.plinth .bulb-glow{animation:pl-glow 1.2s ease-in-out infinite}
.plinth .sk{height:10px;border-radius:6px;background:linear-gradient(90deg,var(--surface2) 0%,var(--line) 50%,var(--surface2) 100%);background-size:200% 100%;animation:pl-shimmer 1.2s linear infinite}
.plinth .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:20px;align-items:start}
.plinth .stack{display:flex;flex-direction:column;gap:20px}
.plinth .banner{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:12px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn-c) 35%,transparent);margin-bottom:20px;flex-wrap:wrap}
.plinth .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.plinth .kpi{background:var(--surface);padding:16px;transition:background-color .35s}
.plinth .kpi-v{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:4px}
.plinth .summary{padding:16px 18px;border-radius:12px;background:var(--surface2);font-size:15px;line-height:1.6}
.plinth .chev{transition:transform .35s var(--ease);color:var(--ink3)}
.plinth .acc.open .chev{transform:rotate(90deg)}
.plinth .acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.plinth .acc.open .acc-body,.plinth .mrow.open .acc-body{grid-template-rows:1fr}
.plinth .drow-btn{width:100%;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background-color .2s}
.plinth .drow-btn:hover{background:var(--surface2)}
.plinth .mrow.open .chev{transform:rotate(90deg)}
.plinth .mrow.open .drow-btn{background:var(--surface2)}
.plinth .mdetail{margin:0 20px 14px 50px;padding:14px 16px;border-radius:12px;background:var(--surface2);display:flex;flex-direction:column;gap:12px}
.plinth .mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 16px}
.plinth .acc-inner{overflow:hidden}
.plinth .item{display:flex;gap:12px;align-items:flex-start;padding:12px 20px;border-top:1px solid var(--line)}
.plinth .item.done .item-t{color:var(--ink3);text-decoration:line-through}
.plinth .nudge{padding:18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accc) 35%,var(--line));background:color-mix(in srgb,var(--accc) 5%,var(--surface));display:flex;flex-direction:column;gap:12px}
.plinth .daynav{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.plinth .daynav-t{font-size:17px;font-weight:600;letter-spacing:-.01em;min-width:220px;text-align:center}
.plinth .tl{position:relative;height:48px;border-radius:10px;background:var(--surface2);overflow:hidden}
.plinth .tl-b{position:absolute;top:7px;bottom:7px;border-radius:6px;transform-origin:left center;animation:pl-grow .7s var(--ease) both}
.plinth .tl-b.measured{background-color:var(--accc)}
.plinth .tl-b.guess{background:repeating-linear-gradient(135deg,var(--warn-soft) 0 5px,transparent 5px 10px);border:1.5px dashed var(--warn-c)}
.plinth .tl-b.kept{background-color:var(--warn-c);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.42) 0 3px,transparent 3px 7px)}
.plinth .tl-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--ink3);margin-top:8px}
.plinth .legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--ink2)}
.plinth .sw{width:12px;height:12px;border-radius:3px;flex:none}
.plinth .sw.measured{background:var(--accc)}
.plinth .sw.guess{border:1.5px dashed var(--warn-c);background:var(--warn-soft)}
.plinth .sw.kept{background:var(--warn-c)}
.plinth .sw.told{background:var(--ink2)}
.plinth .sw.kept-key{background-color:var(--ink3);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 2px,transparent 2px 5px)}
.plinth .tl-gap{position:absolute;top:7px;bottom:7px;border-radius:6px;border:1.5px dashed transparent;background:transparent;cursor:pointer;padding:0;display:grid;place-items:center;color:var(--ink3);transition:border-color .2s,background-color .2s,color .2s}
.plinth .tl-gap:hover,.plinth .tl-gap:focus-visible{border-color:var(--line2);background:var(--surface);color:var(--accc)}
.plinth .tl-gap.sel{border-color:var(--accc);background:var(--acc-soft);color:var(--accc)}
.plinth .tl-plus{font-size:16px;font-weight:600;line-height:1;opacity:0;transition:opacity .2s}
.plinth .tl-gap:hover .tl-plus,.plinth .tl-gap:focus-visible .tl-plus,.plinth .tl-gap.sel .tl-plus{opacity:1}
.plinth .tl-gap[disabled]{display:none}
.plinth .tl-b.told{opacity:.55}
.plinth .sw.told-key{background:var(--ink3);opacity:.55}
.plinth .addform{padding:16px 20px 18px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);margin-top:6px}
.plinth .dur{display:flex;align-items:center;gap:6px}
.plinth .dur-in{width:68px;text-align:center;padding-left:6px;padding-right:6px}
.plinth .detail-panel{margin:0 20px 14px 50px;padding:14px;border-radius:12px;background:var(--surface2);display:flex;flex-direction:column;gap:10px;animation:pl-rise .3s var(--ease) both}
.plinth .detail-box{position:relative}
.plinth .detail-box textarea{min-height:92px;padding-right:56px;background:var(--surface)}
.plinth .detail-box .mic{position:absolute;right:8px;top:8px}
.plinth .mic.on{background:var(--accc);color:var(--acc-ink);border-color:transparent;animation:pl-micpulse 1.4s ease-out infinite}
.plinth .voice{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);animation:pl-fade .2s ease both}
.plinth .wave{display:flex;gap:3px;align-items:center;height:20px;flex:none}
.plinth .wave span{width:3px;height:4px;border-radius:2px;background:var(--accc);animation:pl-wave 1s ease-in-out infinite}
.plinth .wave span:nth-child(2){animation-delay:.12s}
.plinth .wave span:nth-child(3){animation-delay:.24s}
.plinth .wave span:nth-child(4){animation-delay:.36s}
.plinth .wave span:nth-child(5){animation-delay:.48s}
.plinth .detail-note{display:flex;gap:10px;align-items:flex-start;margin:-2px 20px 12px 50px;padding:10px 12px;border-radius:10px;background:var(--surface2);font-size:13px;color:var(--ink2);animation:pl-fade .3s ease both}
.plinth .sect-h{display:flex;align-items:center;gap:10px;padding:16px 20px 8px}
.plinth .drow{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line);animation:pl-fade .3s ease both}
.plinth .drow .t{font-weight:500}
.plinth .why{font-size:12px;color:var(--ink3)}
.plinth .close-card{position:sticky;top:84px;padding:22px;display:flex;flex-direction:column;gap:16px}
.plinth .big{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1}
.plinth .meter{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden;display:flex}
.plinth .meter span{display:block;height:100%;transition:width .6s var(--ease)}
.plinth .stamp{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:2px solid var(--ok);color:var(--ok);font-weight:600;animation:pl-stamp .55s var(--ease) both;align-self:flex-start}
.plinth .check-draw{stroke-dasharray:24;stroke-dashoffset:24;animation:pl-draw .5s .15s var(--ease) forwards}
@media (max-width:1080px){
.plinth .grid2{grid-template-columns:minmax(0,1fr)}
.plinth .kpis.k5{grid-template-columns:repeat(3,minmax(0,1fr))}
.plinth .close-card{position:static}
}
@media (max-width:900px){
.plinth .kpis,.plinth .kpis.k5{grid-template-columns:repeat(2,minmax(0,1fr))}
.plinth .detail-panel,.plinth .detail-note,.plinth .mdetail{margin-left:20px}
}
@keyframes pl-micpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accc) 45%,transparent)}100%{box-shadow:0 0 0 12px transparent}}