/* Handle owner console layout. Components and tokens: /handle-ds/ (Handle design system). */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--canvas); }
body { min-height: 100vh; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
a { color: var(--link); } a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.hc-skip { position: fixed; left: 16px; top: -100px; z-index: var(--z-skip); padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-md); }
.hc-skip:focus-visible { top: 12px; }
.hc-loading { padding: 96px 24px; text-align: center; color: var(--ink-muted); }

/* Shell */
.hc-app { min-height: 100vh; }
.hc-shell { min-height: 100vh; display: flex; }
.hc-shell > .hd-rail { flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.hd-rail .hd-wm { text-decoration: none; }
.hc-rail-links { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.hc-rail-links a { color: var(--ink-2); text-decoration: none; }
.hc-rail-links a:hover { color: var(--ink); text-decoration: underline; }
.hc-work { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hc-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 20px clamp(16px, 4vw, 48px); }
.hc-top-l, .hc-top-r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hc-biz { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 6px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); font: 500 14px/20px var(--font-sans); }
.hc-biz-mark { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--inverse); color: var(--on-primary); display: grid; place-items: center; font: 600 11px/1 var(--font-sans); }
.hc-biz select { border: 0; background: transparent; font: inherit; padding: 0 4px; max-width: 220px; cursor: pointer; }
.hc-email { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); padding-right: 4px; overflow-wrap: anywhere; }
.hc-main { width: 100%; max-width: var(--size-content); margin: 0 auto; padding: 8px clamp(16px, 4vw, 48px) 64px; display: flex; flex-direction: column; gap: 20px; }
.hc-main:focus { outline: none; }
.hc-foot { font: 400 12px/18px var(--font-sans); color: var(--ink-muted); padding-top: 12px; }
.hc-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.hc-head h1 { font: 500 32px/40px var(--font-sans); letter-spacing: -0.02em; }
.hc-head p { margin-top: 6px; color: var(--ink-muted); max-width: 640px; }
.hc-feedback { margin: 0 clamp(16px, 4vw, 48px); }

/* Grids */
.hc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.hc-grid-wide > .is-wide { grid-column: span 2; }
@media (max-width: 860px) { .hc-grid-wide > .is-wide { grid-column: auto; } }
.hc-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.hc-stat { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hc-stat-l { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.hc-stat-v { font: 500 30px/36px var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hc-stat-d { font: 500 12px/16px var(--font-sans); color: var(--ink-2); }
.hc-meter { height: 4px; border-radius: 2px; background: var(--canvas-alt); }
.hc-meter > div { height: 4px; border-radius: 2px; background: var(--ink); }

/* Next-step banner */
.hc-next { background: var(--inverse); color: var(--on-primary); border-radius: var(--radius-lg); padding: 16px 16px 16px 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.hc-next-t { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; min-width: 0; }
.hc-next-k { font: 500 13px/18px var(--font-sans); color: var(--on-inverse-muted); }
.hc-next-t strong { font: 500 16px/24px var(--font-sans); }
.hc-next-t span.d { flex-basis: 100%; font: 400 14px/20px var(--font-sans); color: var(--on-inverse-muted); }
.hc-next .hd-btn { background: var(--on-primary); color: var(--inverse); }

/* Panels */
.hc-panel { background: var(--surface); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hc-panel.is-ask { box-shadow: inset 0 0 0 2px var(--escalation-soft); }
.hc-panel-h { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.hc-panel-h h2 { font: 500 18px/26px var(--font-sans); letter-spacing: -0.01em; }
.hc-panel-h .hc-sub { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.hc-panel p { color: var(--ink-2); }
.hc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hc-split { display: flex; flex-wrap: wrap; gap: 24px; }
.hc-split > * { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.hc-empty { color: var(--ink-muted); padding: 8px 0; }
.hc-muted { color: var(--ink-muted); }
.hc-small { font: 400 13px/18px var(--font-sans); }

/* Lists */
.hc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hc-list > li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.hc-list > li:first-child { border-top: 0; }
.hc-list .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hc-list strong { font: 500 14px/20px var(--font-sans); }
.hc-list button.hc-link { border: 0; background: none; padding: 0; text-align: left; font: 500 14px/20px var(--font-sans); cursor: pointer; color: var(--ink); }
.hc-list button.hc-link:hover { text-decoration: underline; }

/* Rules in plain words */
.hc-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hc-rules li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font: 400 15px/22px var(--font-sans); color: var(--ink); }
.hc-rules li:first-child { border-top: 0; }
.hc-rules li::before { content: ""; width: 8px; height: 8px; margin: 7px 0 0 6px; border-radius: 50%; background: var(--ink); }
.hc-change { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.hc-change:first-child { border-top: 0; }
.hc-change .was { color: var(--ink-muted); text-decoration: line-through; }
.hc-change .now { color: var(--ink); font-weight: 500; }

/* Discount bar */
.hc-bar { display: flex; flex-direction: column; gap: 6px; }
.hc-bar-track { display: flex; gap: 2px; height: 10px; }
.hc-bar-track > div { border-radius: 2px; }
.hc-bar-track > div:first-child { border-radius: 5px 2px 2px 5px; }
.hc-bar-track > div:last-child { border-radius: 2px 5px 5px 2px; }
.hc-bar-legend { display: flex; justify-content: space-between; gap: 8px; font: 500 11px/16px var(--font-mono); color: var(--ink-muted); }

/* Charts */
.hc-chart { display: flex; gap: 12px; }
.hc-chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 180px; padding-bottom: 22px; font: 500 11px/1 var(--font-mono); color: var(--ink-muted); text-align: right; }
.hc-chart-area { flex: 1; min-width: 0; position: relative; height: 180px; }
.hc-chart-grid { position: absolute; inset: 0 0 22px 0; display: flex; flex-direction: column; justify-content: space-between; }
.hc-chart-grid div { border-top: 1px solid var(--line); }
.hc-chart-grid div:last-child { border-color: var(--line-strong); }
.hc-chart-bars { position: absolute; inset: 0; display: flex; gap: 4px; }
.hc-chart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-chart-col .bars { flex: 1; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.hc-chart-col .bars div { width: 42%; max-width: 14px; border-radius: 4px 4px 0 0; }
.hc-chart-col span { height: 16px; font: 500 11px/16px var(--font-mono); color: var(--ink-muted); text-align: center; }
.hc-legend { display: flex; gap: 16px; align-items: center; font: 500 12px/16px var(--font-sans); color: var(--ink-2); }
.hc-legend span { display: inline-flex; gap: 6px; align-items: center; }
.hc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hc-hbar { display: flex; flex-direction: column; gap: 6px; }
.hc-hbar-l { display: flex; justify-content: space-between; gap: 8px; font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.hc-hbar-l b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.hc-hbar-t { height: 8px; border-radius: 4px; background: var(--canvas-alt); }
.hc-hbar-t div { height: 8px; border-radius: 4px; background: var(--ink); }

/* Forms */
.hc-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.hc-form .hd-actions { margin-top: 4px; }
.hc-scopes { display: flex; flex-direction: column; }
.hc-scope { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.hc-scope:first-child { border-top: 0; }
.hc-scope input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.hc-scope span.l { font: 500 14px/20px var(--font-sans); }
.hc-scope.is-off span.l { color: var(--ink-muted); }
.hc-code { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); overflow-wrap: anywhere; }
.hc-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); border: 0; padding: 0; margin: 0; min-width: 0; }
.hc-opts legend { padding: 0; margin-bottom: 8px; font: 500 14px/20px var(--font-sans); }
.hc-opt { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--control-line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; font: 500 14px/20px var(--font-sans); }
.hc-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.hc-opt input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); flex: none; }
.hc-opt small { display: block; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); margin-top: 2px; }
.hc-fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); align-items: end; }
select.hd-input { appearance: auto; }

/* Technical details disclosure */
.hc-tech { border-top: 1px solid var(--line); padding-top: 8px; }
.hc-tech > summary { cursor: pointer; font: 500 13px/32px var(--font-sans); color: var(--ink-muted); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.hc-tech > summary::-webkit-details-marker { display: none; }
.hc-tech > summary::before { content: "+"; font-family: var(--font-mono); }
.hc-tech[open] > summary::before { content: "−"; }
.hc-tech > div { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 4px; }
.hc-pre { font: 400 12px/18px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--canvas-alt); border-radius: var(--radius-sm); padding: 12px; margin: 0; color: var(--ink-2); }
.hc-quote { margin: 0; padding: 14px 18px; border-radius: var(--radius-md); background: var(--evidence); font: italic 400 17px/26px var(--font-serif); color: var(--ink); overflow-wrap: anywhere; }
.hc-evidence-img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Login */
.hc-login { min-height: 100vh; display: flex; flex-wrap: wrap; }
.hc-login-brand { flex: 1 1 480px; min-width: 0; padding: clamp(24px, 5vw, 64px); background: var(--canvas); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.hc-login-brand h1 { font: 500 clamp(40px, 5vw, 56px)/1.07 var(--font-sans); letter-spacing: -0.035em; }
.hc-login-brand h1 em { font-family: var(--font-serif); font-weight: 400; font-size: 1.14em; letter-spacing: -0.02em; }
.hc-login-brand p { color: var(--ink-muted); max-width: 440px; }
.hc-login-form { flex: 1 1 480px; min-width: 0; padding: clamp(24px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--canvas); }
.hc-login-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: var(--radius-xl); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.hc-login-card form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.hc-or { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.hc-or::before, .hc-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* Dialog */
.hc-dialog { border: 0; padding: 0; background: transparent; max-width: 520px; width: calc(100% - 32px); color: var(--ink); }
.hc-dialog::backdrop { background: var(--scrim); }
.hc-dialog .hd-dlg { max-width: none; }
.hc-lines { display: flex; flex-direction: column; font: 400 14px/20px var(--font-sans); color: var(--ink-2); }
.hc-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.hc-lines div span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); }
.hc-lines .total { padding-top: 10px; border-top: 1px solid var(--line-strong); font: 500 18px/26px var(--font-sans); color: var(--ink); }

/* Tables */
.hd-tbl td .hc-code { display: block; }
.hd-tbl td.is-act { text-align: right; white-space: nowrap; }

/* Small screens: rail becomes a top bar */
@media (max-width: 860px) {
  .hc-shell { flex-direction: column; }
  .hc-shell > .hd-rail { position: static; width: 100%; height: auto; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); gap: 12px; padding: 16px; }
  .hd-rail-l, .hd-rail-f { display: none; }
  .hd-rail nav { margin-top: 0; flex-direction: row; overflow-x: auto; gap: 4px; }
  .hd-rail nav button { width: auto; flex: none; }
  .hc-chart-col span:nth-child(even) { visibility: hidden; }
  .hc-scope { grid-template-columns: 24px minmax(0, 1fr); }
  .hc-scope .hc-code { display: none; }
}

.hc-start-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; color: var(--ink-2); line-height: 1.5; }