/* Berth — design system
   Calm surfaces, soft cards, one ink colour, colour only where it means something.
   Navigation follows Material 3: top app bar with tabs on desktop, bottom
   navigation on phones, side sheets for detail. */

:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --card: #F1F2F4;
  --card-2: #E8EAEE;
  --line: #E4E6EB;
  --line-2: #D5D9E0;
  --ink: #111418;
  --ink-2: #474E5C;
  --dim: #767D8C;
  --blue: #2F62D8;
  --blue-ink: #1D3F8F;
  --blue-t: #E7EEFC;
  --green: #1D8452;
  --green-t: #DDF2E6;
  --amber: #995A00;
  --amber-t: #FFEFD6;
  --red: #BF3328;
  --red-t: #FBE4E1;
  --violet: #5B3CC4;
  --violet-t: #ECE6FB;
  --navy: #0E1626;
  --t-minimal: #5E6B85;
  --t-limited: #B7791F;
  --t-high: #BF3328;
  --t-prohibited: #111418;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow-1: 0 1px 2px rgba(17, 20, 24, 0.05);
  --shadow-2: 0 10px 30px rgba(17, 20, 24, 0.08);
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --bar-h: 64px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* Utilities */
.mono { font-family: var(--mono); }
.tiny { font-size: 11.5px; }
.small { font-size: 13px; }
.dim { color: var(--dim); }
.ok { color: var(--green); }
.danger { color: var(--red); }
.good { color: var(--green); }
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.wrap { flex-wrap: wrap; }
.gap8 { gap: 8px; }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--t-minimal); }
.dot-limited { background: var(--t-limited); }
.dot-high { background: var(--t-high); }
.dot-prohibited { background: var(--t-prohibited); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 0; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, transform .1s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15px; border-radius: 14px; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover:not(:disabled) { background: #2A2F37; color: #fff; }
.btn-soft { background: var(--card); color: var(--ink); }
.btn-soft:hover:not(:disabled) { background: var(--card-2); color: var(--ink); }
.btn-soft.is-on { background: var(--ink); color: #fff; }
.btn-danger-soft { background: var(--red-t); color: var(--red); }
.btn-danger { background: var(--red); color: #fff; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; flex-shrink: 0; }
.icon-btn:hover { background: var(--card); color: var(--ink); }
.link-btn { background: none; border: 0; padding: 0; color: var(--dim); font-size: 12.5px; cursor: pointer; }
.link-btn:hover:not(:disabled) { color: var(--blue); }
.link-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Chips and tags */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--card); color: var(--ink-2); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-minimal { background: #ECEFF4; color: var(--t-minimal); }
.chip-limited { background: var(--amber-t); color: var(--amber); }
.chip-high { background: var(--red-t); color: var(--red); }
.chip-prohibited { background: var(--ink); color: #fff; }
.chip-ok { background: var(--green-t); color: var(--green); }
.chip-soft { background: var(--card); color: var(--ink-2); }
.chip-pending { background: var(--amber-t); color: var(--amber); }
.soft-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--card); color: var(--ink-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { padding: 5px 10px; border-radius: 999px; background: var(--card); font-size: 12.5px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 600; }

/* ---------------------------------------------------------------------- */
/* Frame: app bar, secondary tabs, view, bottom nav */

.frame { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.appbar { flex: none; height: var(--bar-h); display: flex; align-items: center; gap: 28px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: #fff; font: 700 14px var(--sans); }
.logo-word { font: 600 22px var(--serif); letter-spacing: -0.01em; }
.tabs { display: flex; align-self: stretch; gap: 4px; }
.tab { position: relative; display: flex; align-items: center; padding: 0 16px; color: var(--ink-2); font-weight: 500; font-size: 14.5px; }
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); }
.tab.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ink); }
.appbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--green-t); color: var(--green); font-size: 12.5px; font-weight: 500; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #23B067; box-shadow: 0 0 0 3px rgba(35, 176, 103, 0.18); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 6px rgba(35, 176, 103, 0.06); } }
.subnav { flex: none; display: flex; gap: 6px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
.subtab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.subtab:hover { background: var(--card); color: var(--ink); }
.subtab.is-on { background: var(--ink); color: #fff; }
.subtab .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; }
.view { flex: 1; min-height: 0; overflow: auto; }
.bottomnav { display: none; }

/* Pages */
.page { max-width: 1120px; margin: 0 auto; padding: 40px 32px 72px; display: flex; flex-direction: column; gap: 32px; }
.page.narrow { max-width: 820px; }
.page.wide { max-width: 1320px; }
.page-head { display: flex; flex-direction: column; gap: 8px; }
.page-head h1 { font: 500 38px/1.1 var(--serif); letter-spacing: -0.015em; }
.lede { max-width: 70ch; font-size: 15.5px; color: var(--ink-2); }
.sec-title { font: 500 28px/1.2 var(--serif); letter-spacing: -0.01em; }
.sec-title.sm { font-size: 22px; margin-bottom: 14px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-lede { margin: 6px 0 18px; color: var(--ink-2); }
.panel { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.panel-h { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.facts4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.facts4 > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); background: var(--card); font-size: 13.5px; }
.note { padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; }
.note-warn { background: var(--amber-t); color: var(--amber); }
.note-block { background: var(--red-t); color: #7A1E16; }
.note-info { background: var(--blue-t); color: var(--blue-ink); }
.hint { padding: 10px 14px; border-radius: var(--r-sm); background: var(--blue-t); color: var(--blue-ink); font-size: 13.5px; }
.empty-card { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: var(--r-lg); background: var(--card); color: var(--ink-2); }
.empty-card svg { color: var(--green); margin-top: 3px; }
.empty-card b { display: block; color: var(--ink); margin-bottom: 2px; }

/* Forms */
input:not([type="checkbox"]), select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); font-size: 14px; color: var(--ink); }
textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 20, 24, 0.08); }
.fld { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
.fld em { font-style: normal; font-weight: 400; color: var(--dim); margin-left: 4px; }
.fld-more summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--blue); }
.fld-more[open] { display: flex; flex-direction: column; gap: 12px; }
.opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; background: var(--card); cursor: pointer; font-size: 13.5px; transition: background .15s; }
.opt:hover { background: var(--card-2); }
.opt input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--ink); flex-shrink: 0; }
.opt b { display: block; font-weight: 600; }
.opt small { display: block; color: var(--dim); font-size: 12px; line-height: 1.4; }
.opt.opt-sm { padding: 8px 12px; }
.opt.is-locked { cursor: default; background: #F3F3F1; }
.opt-lock { margin-left: auto; color: var(--dim); }
.opt-wrap { display: flex; flex-direction: column; gap: 6px; }
.opt-wrap .mode { width: auto; align-self: flex-start; margin-left: 42px; padding: 5px 8px; font-size: 12.5px; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 8px 12px; align-items: center; }

/* Dialog */
dialog { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: var(--r-lg); padding: 0; box-shadow: 0 30px 80px rgba(17, 20, 24, 0.3); color: var(--ink); }
dialog::backdrop { background: rgba(14, 22, 38, 0.45); }
.dialog-body { display: flex; flex-direction: column; gap: 16px; padding: 26px; }
.dialog-body h2 { font: 500 26px var(--serif); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.risk-proposal { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--card); }
.risk-proposal p { font-size: 14px; color: var(--ink-2); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--card-2); border-top-color: var(--ink); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 11px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; z-index: 50; box-shadow: var(--shadow-2); animation: rise .2s ease-out; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------------------------------------------------------------------- */
/* Home */

.home { max-width: 1240px; margin: 0 auto; padding: 64px 32px 40px; display: flex; flex-direction: column; gap: 88px; }
.home-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.eyebrow-pill { padding: 6px 14px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.home-hero h1 { max-width: 980px; font: 500 clamp(36px, 5vw, 60px)/1.07 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.home-sub { max-width: 720px; font-size: 17.5px; color: var(--ink-2); text-wrap: balance; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.home-note { font-size: 13px; color: var(--dim); }

.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: -36px; position: relative; }
.jcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px; border-radius: 24px; background: var(--card); color: var(--ink); transition: transform .2s, box-shadow .2s, background .2s; }
.jcard:hover { color: var(--ink); background: #ECEDF0; transform: translateY(-3px); box-shadow: var(--shadow-2); }
.jcard:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 38px; width: 10px; height: 10px; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: rotate(45deg); z-index: 1; }
.jstep { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; }
.jcard h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.jcard p { font-size: 13.5px; color: var(--ink-2); min-height: 40px; }
.jvis { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 14px; border-radius: 16px; background: var(--surface); font-size: 12.5px; flex: 1; }
.jlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--blue); }
.mini-pipe { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.mini-pipe i { width: 8px; height: 2px; background: var(--line-2); border-radius: 1px; }
.mp { padding: 3px 7px; border-radius: 7px; font-size: 11px; font-weight: 600; }
.mp-protect { background: var(--amber-t); color: var(--amber); }
.mp-route { background: var(--blue-t); color: var(--blue); }
.mp-work { background: var(--violet-t); color: var(--violet); }
.mp-review { background: var(--green-t); color: var(--green); }
.mp-approve { background: var(--red-t); color: var(--red); }
.mini-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); }
.mini-row:last-child { border: 0; }
.mini-row span { color: var(--dim); }
.mini-answer { line-height: 1.5; }
.cite { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--blue-t); color: var(--blue); font-weight: 600; font-size: 11.5px; }
.mini-metrics { display: flex; flex-direction: column; gap: 3px; margin-top: auto; font-size: 12px; color: var(--dim); }
.mini-metrics .good { font-weight: 600; }
.mini-tier { display: flex; justify-content: space-between; align-items: baseline; }
.mini-tier b { color: var(--red); }
.mini-tier span { color: var(--dim); font-size: 11.5px; }
.mini-gauge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mini-gauge i { height: 6px; border-radius: 3px; background: var(--card-2); }
.mini-gauge i.on { background: var(--red); }
.mini-check { display: flex; align-items: center; gap: 6px; }
.mini-check svg { color: var(--green); }
.mono-vis { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--ink-2); }
.mono-vis .good { font-weight: 500; }

.flow-sec { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.flow { width: 100%; display: grid; grid-template-columns: 210px 70px minmax(0, 1fr) 70px 210px; align-items: center; padding: 36px 40px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.flow-col { display: flex; flex-direction: column; gap: 8px; }
.flow-h { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.ent { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 12px; background: var(--card); font-size: 14px; font-weight: 500; }
.ent small { color: var(--dim); font-weight: 400; font-size: 12px; }
.ent-row { flex-direction: row; justify-content: space-between; align-items: center; }
.ent-row em { font-style: normal; font-size: 11px; color: var(--dim); background: var(--surface); padding: 1px 7px; border-radius: 6px; }
.flow-link { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.flow-link::before { content: ""; position: absolute; left: 8px; right: 14px; top: 50%; border-top: 2px dashed var(--line-2); }
.flow-link::after { content: ""; position: absolute; right: 6px; top: calc(50% - 6px); border: 6px solid transparent; border-left: 9px solid #A8AFBB; }
.flow-link span { position: relative; top: -16px; background: var(--surface); padding: 0 4px; font-size: 10.5px; color: var(--dim); }
.flow-core { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 22px; background: var(--navy); color: #fff; box-shadow: 0 24px 50px rgba(14, 22, 38, 0.18); }
.core-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.core-head b { font: 600 20px var(--serif); }
.core-head span { font-size: 12px; color: #9AA3B5; }
.layer { display: flex; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09); }
.layer b { display: block; font-weight: 600; font-size: 14px; }
.layer small { color: #A7B0C2; font-size: 12.5px; }
.k { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-size: 13px; font-weight: 700; }
.k1 { background: #FFE2B8; color: #7A4A00; }
.k2 { background: #D7E4FF; color: #1D4BB8; }
.k3 { background: #FAD9D5; color: #9A2219; }
.k4 { background: #CDEEDC; color: #126B40; }
.core-docs { margin-top: 4px; padding: 10px 14px; border-radius: 12px; background: #DCE6FB; color: var(--blue-ink); font-size: 13px; font-weight: 500; }

.ex-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ex-card, .agent-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 20px; background: var(--card); color: var(--ink); transition: background .15s, transform .2s; }
.ex-card:hover { color: var(--ink); background: #ECEDF0; transform: translateY(-2px); }
.ex-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-ind { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.ex-name { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.ex-meta { font-size: 12.5px; color: var(--dim); margin-top: auto; }
.home-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }

/* ---------------------------------------------------------------------- */
/* Build: gallery */

.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.start-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 0; border-radius: 22px; background: var(--card); text-align: left; cursor: pointer; transition: background .15s, transform .2s, box-shadow .2s; }
.start-card:hover { background: #ECEDF0; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.start-top { display: flex; justify-content: space-between; align-items: center; }
.start-top b { font: 600 20px var(--sans); }
.start-line { font-size: 13.5px; color: var(--ink-2); min-height: 42px; }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.agent-card { background: var(--surface); border: 1px solid var(--line); gap: 10px; }
.agent-purpose { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agent-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }

/* Split page with a side list (patterns) */
.split-page { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100%; }
.side-list { display: flex; flex-direction: column; gap: 22px; padding: 28px 14px; border-right: 1px solid var(--line); background: var(--surface); }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-h { padding: 0 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.side-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; color: var(--ink-2); font-size: 14px; }
.side-item:hover { background: var(--card); color: var(--ink); }
.side-item.is-on { background: var(--ink); color: #fff; }
.side-item.is-on .soft-tag { background: rgba(255, 255, 255, .15); color: #fff; }
.split-main { min-width: 0; padding: 36px clamp(16px, 4vw, 48px) 56px; display: flex; flex-direction: column; gap: 22px; max-width: 1100px; }
.how-select { display: none; }
.facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.facts3 > div { padding: 18px; border-radius: var(--r-md); background: var(--card); }
.facts3 h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.facts3 p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

/* ---------------------------------------------------------------------- */
/* Build: designer */

.view-designer { overflow: hidden; }
.designer { display: flex; flex-direction: column; height: 100%; }
.dhead { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dtitle { width: auto !important; min-width: 120px; max-width: 420px; flex: 0 1 auto; padding: 6px 8px !important; border: 1px solid transparent !important; border-radius: 8px; background: transparent !important; font: 500 23px var(--serif) !important; }
.dtitle:hover { border-color: var(--line) !important; }
.dtitle:focus { border-color: var(--ink) !important; background: var(--surface) !important; }
.dhead-end { margin-left: auto; display: flex; gap: 8px; }
.dbody { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.canvas { min-width: 0; overflow: auto; padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 22px; background: radial-gradient(circle, #DADDE3 1px, transparent 1.2px) 0 0 / 22px 22px, var(--bg); }
.add-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.add-label { font-size: 13px; color: var(--dim); margin-right: 2px; }
.add-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background .15s, border-color .15s; }
.add-btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.add-btn:disabled { opacity: 0.4; cursor: default; }
.pipeline { display: flex; align-items: stretch; }
.pipeline .link { flex: 0 0 26px; position: relative; }
.pipeline .link::before { content: ""; position: absolute; left: 2px; right: 8px; top: 50%; border-top: 2px solid #C9CED8; }
.pipeline .link::after { content: ""; position: absolute; right: 1px; top: calc(50% - 5px); border: 5px solid transparent; border-left: 7px solid #C9CED8; }
.step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); cursor: pointer; transition: border-color .15s, box-shadow .2s, transform .2s; animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.step:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.step.is-sel { border: 2px solid var(--ink); padding: 15px 13px 13px; box-shadow: 0 12px 28px rgba(17, 20, 24, 0.12); }
.step.is-off { opacity: 0.55; }
.step-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; margin-bottom: 8px; }
.ic-input { background: var(--card); color: var(--ink); }
.ic-protect { background: var(--amber-t); color: var(--amber); }
.ic-route { background: var(--blue-t); color: var(--blue); }
.ic-work { background: var(--violet-t); color: var(--violet); }
.ic-review { background: var(--green-t); color: var(--green); }
.ic-approve { background: var(--red-t); color: var(--red); }
.step-kind { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.step-title { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.step-text { font-size: 12px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.step-fork { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12px; }
.step-fork span { display: flex; justify-content: space-between; gap: 6px; }
.step-fork em { font-style: normal; color: var(--dim); }
.step-tag { align-self: flex-start; margin-top: 8px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.tag-ok { background: var(--green-t); color: var(--green); }
.tag-blue { background: var(--blue-t); color: var(--blue); }
.tag-red { background: var(--red-t); color: var(--red); }
.tag-warn { background: var(--amber-t); color: var(--amber); }
.tag-soft { background: var(--card); color: var(--ink-2); }
.step-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 8px; background: transparent; color: var(--dim); cursor: pointer; opacity: 0; transition: opacity .15s; }
.step:hover .step-x, .step.is-sel .step-x { opacity: 1; }
.step-x:hover { background: var(--card); color: var(--ink); }
.step-lock { position: absolute; top: 12px; right: 12px; color: var(--red); }

.test-card { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.test-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.test-top b { font-size: 15px; }
.test-top span { font-size: 12px; color: var(--dim); }
.test-form { display: flex; gap: 10px; }
.test-form input { background: var(--card); border-color: transparent; }
.test-empty { font-size: 13px; color: var(--dim); }
.lights { display: flex; gap: 6px; flex-wrap: wrap; }
.light { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; font-size: 12px; background: var(--card); color: var(--dim); animation: pop .25s ease-out; }
.light.is-done { background: var(--green-t); color: var(--green); font-weight: 500; }
.light.is-run { background: var(--blue-t); color: var(--blue); font-weight: 500; animation: pulse 1.2s ease-in-out infinite; }
.light.is-wait { background: var(--amber-t); color: var(--amber); font-weight: 600; }
.test-answer { max-height: 260px; overflow: auto; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.test-answer > :first-child { margin-top: 0; }
.test-answer > :last-child { margin-bottom: 0; }
.test-metrics, .metrics { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.metrics { font-size: 11.5px; }
.metrics .good, .test-metrics .good { font-weight: 600; }
.sep { color: var(--line-2); }
.sys-line { padding: 10px 14px; border-radius: 12px; background: var(--red-t); color: #7A1E16; font-size: 13.5px; }

.sheet { min-height: 0; overflow: auto; padding: 22px 22px 40px; background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.sheet-head { display: flex; flex-direction: column; gap: 4px; }
.sheet-head h2 { font: 500 22px/1.2 var(--serif); }
.sheet-head p { font-size: 13px; color: var(--ink-2); }
.sheet-note { font-size: 12.5px; color: var(--dim); }
.lock-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--red-t); color: #7A1E16; font-size: 12.5px; }
.lock-note svg { flex: none; margin-top: 2px; }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 7px 11px; border: 0; border-radius: 11px; background: var(--card); cursor: pointer; text-align: left; transition: background .15s; }
.mchip b { font-size: 13px; font-weight: 600; }
.mchip small { font-size: 10.5px; color: var(--dim); }
.mchip:hover:not(:disabled) { background: var(--card-2); }
.mchip.is-on { background: var(--ink); color: #fff; }
.mchip.is-on small { color: #B5BCC9; }
.mchip:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------------------------------- */
/* Work */

.view-work { overflow: hidden; }
.work { display: grid; grid-template-columns: 260px minmax(0, 1fr) 0; height: 100%; transition: grid-template-columns .25s ease; }
.work.list-closed { grid-template-columns: 0 minmax(0, 1fr) 0; }
.work.sheet-open { grid-template-columns: 260px minmax(0, 1fr) 340px; }
.work.list-closed.sheet-open { grid-template-columns: 0 minmax(0, 1fr) 340px; }
.agent-list { min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--line); }
.list-closed .agent-list { padding: 0; border: 0; overflow: hidden; }
.al-head { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.al-items { display: flex; flex-direction: column; gap: 2px; }
.al-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); font-size: 13.5px; }
.al-item:hover { background: var(--card); color: var(--ink); }
.al-item.is-on { background: var(--card); font-weight: 600; }
.al-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-type { font-size: 10.5px; color: var(--dim); }
.al-total { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding: 14px; border-radius: 14px; background: var(--green-t); }
.al-total .big { font-size: 22px; font-weight: 600; color: var(--green); }
.chatpane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.chat-head { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 22px; background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-title { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.chat-title h1 { font: 500 22px var(--serif); }
.chat-title .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-select { display: flex; flex-direction: column; gap: 1px; }
.inline-select select { width: auto; max-width: 200px; padding: 5px 8px; font-size: 12.5px; }
.prod-bar { flex: none; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 9px 22px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.prod-bar b { font-weight: 600; }
.prod-bar .dim { margin-left: auto; font-size: 11.5px; }
.gsheet { min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 20px; padding: 18px; background: var(--surface); border-left: 1px solid var(--line); }
.work:not(.sheet-open) .gsheet { padding: 0; border: 0; overflow: hidden; }
.gsheet-head { display: flex; justify-content: space-between; align-items: center; }

.messages { flex: 1; min-height: 0; overflow: auto; padding: 26px clamp(16px, 5vw, 56px) 16px; display: flex; flex-direction: column; gap: 22px; }
.empty { margin: auto 0; display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.empty h2 { font: 500 32px var(--serif); }
.starters { display: grid; gap: 8px; margin-top: 8px; }
.starter { text-align: left; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--card); font-size: 14px; line-height: 1.5; cursor: pointer; white-space: pre-line; transition: background .15s, transform .15s; }
.starter:hover { background: var(--card-2); transform: translateX(2px); }
.msg { display: flex; flex-direction: column; gap: 8px; max-width: 780px; animation: pop .2s ease-out; }
.msg-user { align-self: flex-end; align-items: flex-end; max-width: 640px; }
.bubble { padding: 13px 16px; background: var(--ink); color: #fff; border-radius: 18px 18px 6px 18px; font-size: 14.5px; line-height: 1.6; }
.bubble .tok { background: rgba(255, 255, 255, .16); color: #fff; }
.redact-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--amber); font-weight: 500; }
.tok { display: inline-block; padding: 0 6px; border-radius: 5px; background: #FFE8C2; color: #7A4A00; font-family: var(--mono); font-size: 0.82em; line-height: 1.6; }
.msg-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
.msg-meta strong { color: var(--ink); font-weight: 600; }
.ai-label { padding: 1px 7px; border-radius: 6px; background: var(--card); font-size: 10.5px; color: var(--ink-2); }
.answer { padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
.answer > :first-child { margin-top: 0; }
.answer > :last-child { margin-bottom: 0; }
.answer h1, .answer h2, .answer h3 { font-size: 15.5px; color: var(--ink); margin: 1em 0 0.4em; }
.answer table { border-collapse: collapse; font-size: 13.5px; display: block; overflow-x: auto; }
.answer th, .answer td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.answer code { font-family: var(--mono); font-size: 0.88em; background: var(--card); padding: 1px 4px; border-radius: 4px; }
.answer pre { background: var(--card); padding: 12px; border-radius: 10px; overflow-x: auto; }
.is-held .answer { border-color: #EFC9C3; }
.is-rejected .answer { opacity: 0.55; text-decoration: line-through; text-decoration-color: rgba(191, 51, 40, 0.4); }
.thinking { color: var(--dim); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.steps { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 12px; background: var(--violet-t); font-size: 13px; color: var(--ink-2); }
.step-line .mono { color: var(--violet); margin-right: 6px; font-weight: 500; }
.notes { display: flex; flex-direction: column; gap: 6px; }
.hold-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--amber-t); color: var(--amber); font-size: 13px; }
.hold-bar .btn-danger-soft { margin-left: auto; }
.msg-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.msg-system { align-self: stretch; max-width: 780px; }
.sys-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--card); font-size: 14px; color: var(--ink-2); }
.status-stopped .sys-card { background: var(--red-t); color: #7A1E16; font-weight: 500; }
.status-blocked .sys-card { background: var(--amber-t); color: var(--amber); }
.tool-ask { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 780px; padding: 12px 14px; border-radius: 14px; background: var(--blue-t); font-size: 14px; }
.tool-ask .btn-soft { margin-left: auto; }
.stages { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.stage-link { width: 10px; height: 2px; background: var(--line-2); border-radius: 1px; }
.stage { display: inline-flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 11px; background: var(--card); font-size: 12.5px; animation: pop .25s ease-out; }
.stage-top { display: flex; gap: 6px; align-items: baseline; }
.stage-k { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.stage.is-running { background: var(--blue-t); animation: pulse 1.2s ease-in-out infinite; }
.stage-router { background: var(--blue-t); }
.stage-fast, .stage-strong, .stage-model { background: var(--violet-t); }
.stage-reviewer { background: var(--green-t); }
.stage-retrieve { background: var(--amber-t); }
.review { padding: 10px 14px; border-radius: 12px; background: var(--amber-t); color: var(--amber); font-size: 13px; }
.review.review-pass { background: var(--green-t); color: var(--green); }
.review ul { margin: 6px 0 0; padding-left: 18px; }
.sources { font-size: 13px; }
.sources summary { cursor: pointer; color: var(--blue); font-weight: 500; }
.sources ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.sources li span { display: block; }
.composer-wrap { flex: none; padding: 0 clamp(16px, 5vw, 56px) 16px; }
.composer { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); }
.composer textarea { border: 0; padding: 4px 2px; box-shadow: none; resize: none; min-height: 46px; font-size: 14.5px; }
.composer textarea:focus { box-shadow: none; }
.composer-row { display: flex; align-items: center; gap: 12px; }
.preview { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); }
.preview.is-active { color: var(--amber); font-weight: 500; }
.preview.is-block { color: var(--red); }
.send { margin-left: auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: var(--ink); color: #fff; cursor: pointer; }
.send:disabled { opacity: 0.35; cursor: not-allowed; }
.composer-foot { margin-top: 8px; text-align: center; }

/* Governance sheet */
.tier-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: var(--navy); color: #EEF1F6; }
.tier-card .tiny { color: #8C96A9; }
.tier-name { font: 500 24px var(--serif); }
.tier-card p { font-size: 13px; line-height: 1.55; color: #C9D0DC; }
.tier-card .tier-why { color: #8C96A9; }
.scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.scale span { height: 5px; border-radius: 3px; background: #2B3448; }
.scale .on-minimal { background: #8FA0BE; }
.scale .on-limited { background: #E3A444; }
.scale .on-high { background: #E0584A; }
.scale .on-prohibited { background: #F4F6FA; }
.scale-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 10px; color: #8C96A9; }
.scale-labels .cur { color: #fff; font-weight: 600; }
.h-sub { font-size: 13px; font-weight: 600; }
.ctrl-list { display: flex; flex-direction: column; gap: 10px; }
.ctrl { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.ctrl svg { flex: none; margin-top: 2px; color: var(--green); }
.ctrl small { display: block; color: var(--dim); font-size: 12px; }
.ctrl.is-off { color: var(--dim); }
.ctrl.is-off svg { color: var(--line-2); }
.trail { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.trail-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: baseline; }

/* Documents */
.drop { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; padding: 30px 16px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--card); text-align: center; cursor: pointer; }
.drop:hover { border-color: var(--ink); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kb-preview { max-height: 220px; overflow: auto; padding: 12px; border-radius: 12px; background: var(--card); font-size: 13px; line-height: 1.55; }
.kb-results { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.kb-results p { margin: 4px 0 0; color: var(--ink-2); }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.table th { position: sticky; top: 0; background: var(--card); text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); padding: 11px 12px; }
.table td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: top; }

/* Comply */
.tier-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tt { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 20px; background: var(--card); }
.tt-n { font-size: 34px; font-weight: 600; line-height: 1.1; }
.tt-l { font-weight: 600; }
.tt-s { font-size: 12px; color: var(--dim); }
.tt-high .tt-n { color: var(--red); }
.tt-limited .tt-n { color: var(--amber); }
.reg-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.reg-main { display: flex; flex-direction: column; gap: 10px; }
.reg-main h3 { font: 500 22px var(--serif); }
.reg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; }
.reg-facts div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--card); }
.reg-facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.reg-facts dd { margin: 0; font-size: 13px; }
.reg-facts select { padding: 4px 6px; font-size: 12.5px; background: var(--surface); }
.reg-ctrls { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--card); }
.reg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.reg-actions .btn-soft { background: var(--surface); }

/* Govern */
.appr { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.appr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appr-q { align-self: flex-start; max-width: 720px; padding: 10px 14px; border-radius: 14px; background: var(--card); font-size: 13.5px; }
.appr-a { max-height: 240px; overflow: auto; }
.appr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.appr-actions .metrics { margin-right: auto; }

/* Architecture diagrams */
.diagram-card { margin: 0; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.diagram-scroll { overflow-x: auto; padding: 18px 14px 8px; background-image: radial-gradient(circle, #DADDE3 1px, transparent 1px); background-size: 16px 16px; }
.diagram { display: block; width: 100%; min-width: 640px; height: auto; font-family: var(--sans); }
.diagram-card figcaption { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--card); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.d-pill { fill: #FFFFFF; stroke: var(--ink); stroke-width: 1.3; }
.d-model { fill: var(--navy); stroke: var(--navy); stroke-width: 1; }
.d-gate { fill: #FFF3DF; stroke: #B7791F; stroke-width: 1.2; }
.d-tool { fill: var(--blue-t); stroke: var(--blue); stroke-width: 1.2; }
.d-decision { fill: #FFFFFF; stroke: var(--blue); stroke-width: 1.4; }
.d-human { fill: #FFFFFF; stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 5 3; }
.d-store { fill: #EEF0F3; stroke: #8A93A3; stroke-width: 1.1; }
.d-pattern { fill: #F6F8FD; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 6 4; }
.d-label { fill: var(--ink); font-size: 12px; font-weight: 600; }
.d-label-sm { font-size: 11px; }
.d-label-model { fill: #FFFFFF; }
.d-label-accent { fill: var(--blue-ink); }
.d-role { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; fill: var(--dim); }
.d-role-model { fill: #9FB0CC; }
.d-role-gate { fill: #995A00; }
.d-role-tool { fill: var(--blue-ink); }
.d-edge { fill: none; stroke: #5A6272; stroke-width: 1.4; }
.d-edge-loop { stroke: var(--blue); stroke-dasharray: 5 3; }
.d-edge-log { stroke: #9AA2B1; stroke-dasharray: 2 3; stroke-width: 1.2; }
.d-arrow-flow { fill: #5A6272; }
.d-arrow-loop { fill: var(--blue); }
.d-arrow-log { fill: #9AA2B1; }
.d-edge-label-bg { fill: #FFFFFF; stroke: var(--line); stroke-width: 0.8; }
.d-edge-label { font-family: var(--mono); font-size: 10px; fill: var(--ink-2); }

/* ---------------------------------------------------------------------- */
/* Responsive */

@media (max-width: 1200px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jcard:nth-child(2)::after { display: none; }
  .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px; }
  .flow-col { flex-direction: row; flex-wrap: wrap; }
  .flow-h { width: 100%; }
  .flow-link { height: 26px; }
  .flow-link::before { left: 50%; right: auto; top: 0; bottom: 6px; border-top: 0; border-left: 2px dashed var(--line-2); }
  .flow-link::after { right: auto; left: calc(50% - 5px); top: auto; bottom: -4px; border: 6px solid transparent; border-top: 9px solid #A8AFBB; }
  .flow-link span { display: none; }
  .dbody { grid-template-columns: minmax(0, 1fr) 340px; }
  .pipeline { flex-wrap: wrap; gap: 12px; }
  .pipeline .link { display: none; }
  .step { flex: 1 1 150px; }
  .work.sheet-open { grid-template-columns: 0 minmax(0, 1fr) 340px; }
  .work.sheet-open .agent-list { padding: 0; border: 0; overflow: hidden; }
}
@media (max-width: 900px) {
  .appbar { gap: 14px; padding: 0 16px; }
  .appbar .tabs { display: none; }
  .bottomnav { display: flex; flex: none; justify-content: space-around; height: 64px; padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); }
  .bn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; color: var(--dim); font-size: 11.5px; font-weight: 500; }
  .bn svg { width: 22px; height: 22px; padding: 2px 14px; box-sizing: content-box; border-radius: 14px; }
  .bn.is-on { color: var(--ink); }
  .bn.is-on svg { background: var(--card-2); }
  .bn .badge { position: absolute; top: 6px; left: 54%; margin: 0; }
  .subnav { padding: 8px 16px; }
  .page { padding: 28px 16px 48px; gap: 24px; }
  .page-head h1 { font-size: 30px; }
  .home { padding: 40px 16px 32px; gap: 56px; }
  .journey { grid-template-columns: 1fr; margin-top: -16px; }
  .jcard::after { display: none; }
  .ex-grid, .start-grid, .two-col, .facts4, .facts3, .tier-tiles, .opt-grid { grid-template-columns: 1fr; }
  .reg-card { grid-template-columns: 1fr; }
  .reg-facts { grid-template-columns: 1fr; }
  .split-page { grid-template-columns: 1fr; }
  .side-list { display: none; }
  .how-select { display: block; }
  .view-designer { overflow: auto; }
  .designer { height: auto; }
  .dbody { display: flex; flex-direction: column; }
  .canvas { overflow: visible; }
  .sheet { border-left: 0; border-top: 1px solid var(--line); }
  .dtitle { font-size: 19px !important; max-width: 100%; }
  .dhead-end { margin-left: 0; width: 100%; }
  .step { flex: 1 1 calc(50% - 6px); padding: 12px; }
  .step.is-sel { padding: 11px; }
  .step-text, .step-fork { display: none; }
  .step-ic { width: 28px; height: 28px; margin-bottom: 4px; }
  .home-hero h1 { font-size: 34px; }
  .work, .work.sheet-open, .work.list-closed, .work.list-closed.sheet-open { grid-template-columns: minmax(0, 1fr); position: relative; }
  .agent-list { display: none; }
  .gsheet { position: absolute; inset: 0; z-index: 4; }
  .work:not(.sheet-open) .gsheet { display: none; }
  .prod-bar .dim { display: none; }
  .chat-head { padding: 10px 16px; }
  .inline-select { display: none; }
  .home-foot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}