/* Panel patterns — document chrome + specimen shells. Reads the same tokens as the guide. */
:root{--stage-w:1360px}

/* ── Document ─────────────────────────────────────────────── */
section.wide{max-width:none}
section.wide .inner{max-width:1480px}
.tierhead{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;margin:0 0 26px}
.tiermark{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:24px;font-weight:700;color:#fff;background:var(--seed-pine)}
.tiermark.b{background:var(--seed-teal)}
.tiermark.c{background:var(--seed-orange);color:#2B1700}
.tierhead h2{margin:0 0 6px}
.tiermeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.tiermeta span{font-size:12px;font-weight:700;color:var(--seed-pine);background:var(--seed-mint);border-radius:5px;padding:4px 9px}
.pine .tiermeta span{background:rgba(255,255,255,.10);color:#fff}

/* Specimen frame — a browser window holding a 1360px stage, zoomed to fit */
.spec-frame{border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow-card);margin:0 0 14px}
.spec-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--gray-100);border-bottom:1px solid var(--line)}
.spec-bar i{width:9px;height:9px;border-radius:50%;background:var(--gray-300);display:block}
.spec-bar .url{margin-left:10px;flex:1;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}
.spec-body{overflow:hidden}
.stage{width:var(--stage-w);font-family:var(--font-body);color:var(--text-primary);font-size:13px;line-height:1.5;transform-origin:top left}
.caption{font-size:13px;color:var(--text-secondary);max-width:900px;margin:0 0 40px;line-height:1.55}
.caption b{color:var(--seed-pine)}

/* ── Shared app primitives inside stages ──────────────────── */
.stage *{box-sizing:border-box}
.stage h1,.stage h2,.stage h3{font-family:var(--font-display);font-weight:400;color:var(--seed-pine);margin:0;letter-spacing:-.01em}
.stage .grd{background:var(--canvas)}
.a-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--seed-green);margin-bottom:7px}
.a-sub{font-size:13px;color:var(--gray-600);margin:6px 0 0;max-width:660px}
.a-card{background:#fff;border:0.5px solid var(--line-soft);border-radius:8px}
.a-btn{display:inline-flex;align-items:center;gap:7px;background:var(--seed-pine);color:#fff;border-radius:6px;padding:0 14px;height:32px;font-size:13px;font-weight:700;white-space:nowrap}
.a-btn.g{background:#fff;color:var(--seed-pine);border:0.5px solid var(--line-soft);font-weight:400}
.a-in{height:32px;border:0.5px solid var(--line-soft);border-radius:6px;background:#fff;padding:0 10px;font-size:13px;color:var(--gray-500);display:flex;align-items:center}
.a-lb{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500);margin-bottom:6px}
.a-pill{font-size:11px;font-weight:700;border-radius:4px;padding:2px 7px;background:var(--good-bg);color:var(--good-text)}
.a-pill.n{background:var(--neutral-bg);color:var(--neutral-text)}
.a-pill.w{background:var(--warn-bg);color:var(--warn-text)}
.a-pill.c{background:var(--critical-bg);color:var(--critical-text)}
.a-tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.a-tbl th{text-align:left;font-size:12.5px;font-weight:700;color:var(--gray-700);padding:11px 16px;border-bottom:0.5px solid var(--line-soft)}
.a-tbl td{padding:12px 16px;border-bottom:0.5px solid var(--line-hair);color:var(--gray-700)}
.a-tbl tr:last-child td{border-bottom:0}
.a-tbl .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text-primary)}
.a-tbl th.n{text-align:right;font-weight:700}
.a-tbl .lk{color:var(--seed-teal);font-weight:700}
.a-tbl tr.hov td{background:var(--gray-50)}
.a-kpis{display:grid;gap:1px;background:var(--line-soft);border:0.5px solid var(--line-soft);border-radius:8px;overflow:hidden}
.a-kpi{background:#fff;padding:14px 18px}
.a-kpi .k{font-size:11px;font-weight:700;color:var(--gray-500);letter-spacing:.04em}
.a-kpi .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--seed-pine);margin-top:4px;line-height:1.1}
.a-kpi .d{font-size:11px;color:var(--gray-500);margin-top:3px}
.a-kpi .v.acc{color:var(--seed-orange)}

/* Tier A — operator top bar */
.tA .top{display:flex;align-items:center;gap:26px;background:var(--seed-pine);height:52px;padding:0 22px;color:#fff}
.tA .brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.tA .brand img{height:19px;filter:brightness(0) invert(1)}
.tA .brand span{color:var(--seed-green-light);font-weight:400}
.tA nav{display:flex;gap:3px;flex:1}
.tA nav a{font-size:13px;color:rgba(255,255,255,.72);padding:6px 11px;border-radius:6px;text-decoration:none}
.tA nav a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:700}
.tA .util{display:flex;align-items:center;gap:16px;font-size:12.5px;color:rgba(255,255,255,.72)}
.tA .util .me{display:flex;align-items:center;gap:8px}
.tA .util .av{width:24px;height:24px;border-radius:50%;background:var(--seed-green)}
.tA .sub{display:flex;align-items:center;gap:22px;height:40px;padding:0 22px;background:#fff;border-bottom:0.5px solid var(--line-soft);font-size:12.5px;color:var(--gray-600)}
.tA .sub a{position:relative;text-decoration:none;color:var(--gray-600);height:40px;display:flex;align-items:center}
.tA .sub a.on{color:var(--seed-pine);font-weight:700;box-shadow:inset 0 -2px 0 var(--seed-green)}
.tA .body{padding:26px 22px 30px}
.tA .ph{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.tA .ph h1{font-size:30px}

/* Tier B — tool rail */
.tB{display:grid;grid-template-columns:216px 1fr}
.tB .rail{background:var(--seed-pine);color:#fff;padding:20px 14px;display:flex;flex-direction:column;gap:22px}
.tB .rail .wm{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;padding:0 8px}
.tB .rail .wm img{height:18px;filter:brightness(0) invert(1)}
.tB .rail .grp{display:flex;flex-direction:column;gap:2px}
.tB .rail .gl{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);padding:0 8px;margin-bottom:6px}
.tB .rail a{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.76);text-decoration:none;padding:7px 8px;border-radius:6px}
.tB .rail a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:700}
.tB .rail a b{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.tB .rail .foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);padding:12px 8px 0;font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.5}
.tB .work{background:var(--canvas);padding:26px 26px 30px;min-width:0}
.tB .work h1{font-size:28px}

/* Tier C — client chrome (website skin) */
.tC{background:var(--paper)}
.tC .top{display:flex;align-items:center;gap:34px;height:70px;padding:0 40px;background:#fff;border-bottom:1px solid var(--line)}
.tC .top img.logo{height:26px}
.tC .top nav{display:flex;gap:26px;flex:1}
.tC .top nav a{font-size:14px;font-weight:700;color:var(--gray-700);text-decoration:none}
.tC .top nav a.on{color:var(--seed-pine);box-shadow:inset 0 -2px 0 var(--seed-orange);padding-bottom:4px}
.tC .cta{background:var(--seed-orange);color:#2B1700;font-weight:700;font-size:14px;border-radius:999px;padding:12px 24px;box-shadow:var(--shadow-cta)}
.tC .who{font-size:13px;color:var(--gray-600)}
.tC .body{padding:44px 40px 56px;max-width:1180px;margin:0 auto}
.tC h1{font-size:44px;font-weight:700;line-height:1.08}
.tC .lead{font-size:17px;color:var(--ink-64);margin:12px 0 0;max-width:620px;line-height:1.6}
.tC .ccard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-2xl);padding:30px 32px;box-shadow:var(--shadow-card)}
.tC .stat{font-family:var(--font-display);font-size:42px;font-weight:700;color:var(--seed-pine);line-height:1;font-variant-numeric:tabular-nums}
.tC .stat.acc{color:var(--seed-orange)}
.tC .statk{font-size:13px;color:var(--gray-600);margin-top:8px}
.tC .step{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--gray-500)}
.tC .step i{width:26px;height:26px;border-radius:50%;background:var(--gray-200);color:var(--gray-600);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px}
.tC .step.on{color:var(--seed-pine)}
.tC .step.on i{background:var(--seed-mint);color:var(--seed-pine)}
.tC .bigin{height:60px;border:1px solid var(--line);border-radius:999px;background:#fff;display:flex;align-items:center;padding:0 26px;font-size:17px;color:var(--gray-500);box-shadow:var(--shadow-lift)}
.tC .field{height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:15px;color:var(--gray-500)}

/* ── Motion lab ───────────────────────────────────────────── */
.mo{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mo .m{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden}
.mo .mh{display:flex;align-items:baseline;justify-content:space-between;padding:14px 18px 0}
.mo .mh b{font-size:14px;color:var(--seed-pine)}
.mo .mh span{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}
.mo .mstage{margin:14px 18px 0;background:var(--canvas);border-radius:8px;padding:16px;min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.mo .mn{font-size:12.5px;color:var(--text-secondary);padding:12px 18px 16px;line-height:1.5;margin:0}
.mrow{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:5px;padding:8px 11px;font-size:12.5px;color:var(--gray-700);transition:background .12s var(--ease,cubic-bezier(.2,.7,.2,1)),box-shadow .12s cubic-bezier(.2,.7,.2,1)}
.mrow b{font-variant-numeric:tabular-nums}
.m:hover .mrow.tgt{background:var(--gray-50);box-shadow:inset 2px 0 0 var(--seed-green)}
.mtabs{display:flex;gap:18px;font-size:12.5px;color:var(--gray-600);position:relative;padding-bottom:9px}
.mtabs b{color:var(--seed-pine)}
.mtabs::after{content:"";position:absolute;bottom:0;left:0;width:52px;height:2px;background:var(--seed-green);transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.m:hover .mtabs::after{transform:translateX(70px)}
.mtoast{display:flex;align-items:center;gap:9px;background:#fff;border:0.5px solid var(--line-soft);border-left:3px solid var(--good-line);border-radius:6px;padding:10px 13px;font-size:12.5px;color:var(--gray-700);box-shadow:var(--shadow-lift);opacity:0;transform:translateY(8px);transition:opacity .2s cubic-bezier(.2,.7,.2,1),transform .2s cubic-bezier(.2,.7,.2,1)}
.m:hover .mtoast{opacity:1;transform:none}
.mskel{height:11px;border-radius:3px;background:linear-gradient(90deg,var(--gray-200) 25%,var(--gray-100) 37%,var(--gray-200) 63%);background-size:400% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{0%{background-position:100% 0}100%{background-position:0 0}}
.mbar{height:5px;border-radius:3px;background:var(--gray-200);overflow:hidden}
.mbar i{display:block;height:100%;width:38%;background:var(--seed-green);border-radius:3px;animation:grow 2.6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes grow{0%{width:8%}70%{width:82%}100%{width:92%}}
.mdrawer{position:relative;height:72px;background:#fff;border-radius:6px;overflow:hidden;border:0.5px solid var(--line-soft)}
.mdrawer .sheet{position:absolute;inset:0 0 0 38%;background:var(--seed-pine);color:#fff;font-size:12px;padding:12px;transform:translateX(100%);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.m:hover .mdrawer .sheet{transform:none}
.mcount{font-size:30px;font-weight:700;color:var(--seed-pine);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mdot{width:7px;height:7px;border-radius:50%;background:var(--seed-green);animation:pulse 2s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.mlive{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gray-700)}
.mno .mstage{background:var(--critical-bg)}
.mbounce{width:40px;height:40px;border-radius:8px;background:var(--seed-orange);animation:bnc 1.6s infinite}
@keyframes bnc{0%,100%{transform:translateY(0)}30%{transform:translateY(-18px) scaleY(1.14)}45%{transform:translateY(4px) scaleY(.86)}60%{transform:translateY(-6px)}}
.mspin{width:26px;height:26px;border-radius:50%;border:3px solid var(--gray-200);border-top-color:var(--seed-green);animation:spin .7s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.mzoom{background:#fff;border-radius:6px;padding:12px;font-size:12.5px;color:var(--gray-700);animation:zm 1.8s ease-in-out infinite}
@keyframes zm{0%,100%{transform:scale(1)}50%{transform:scale(1.1) rotate(-1deg)}}

@media(prefers-reduced-motion:reduce){.mskel,.mbar i,.mdot,.mbounce,.mspin,.mzoom{animation:none!important}.mrow,.mtoast,.mtabs::after,.mdrawer .sheet{transition:none!important}}
.mo.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.mo,.mo.four{grid-template-columns:1fr}}