/* ============================================================================ FLEET DESIGN LANGUAGE — components.css (v1.2) The component layer. Requires tokens.css loaded first and data-register set on . Everything reads CSS variables, so the same markup re-skins across editorial / console / workbench and re-brands with data-accent. ALL component classes are namespaced `hs-` so they never collide with an app's own .btn / .card / .panel etc. Modifiers (ghost, danger, up, warn, down, on) only apply compounded with their hs- base (e.g. .hs-btn.ghost). Load order: fonts.css → tokens.css → components.css → your app css ============================================================================ */ *{box-sizing:border-box;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-variation-settings:var(--body-vs); font-size:var(--fs); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } ::selection{background:var(--accent); color:#fff;} .hs-mono{font-family:var(--font-data);} a{color:var(--accent); text-underline-offset:3px;} /* ---- titles ---- */ .hs-pagetitle{font-family:var(--font-title); font-weight:var(--title-weight); font-variation-settings:var(--title-vs); font-size:var(--fs-title); line-height:1.05; letter-spacing:-.015em; margin:0;} .hs-ptitle{font-family:var(--font-title); font-weight:var(--title-weight); font-variation-settings:var(--title-vs); font-size:var(--fs-panel-title); letter-spacing:-.01em; margin:0;} :root[data-register="console"] .hs-ptitle{letter-spacing:.1em; text-transform:uppercase;} .hs-eyebrow{font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft);} /* ---- buttons ---- */ .hs-btn{font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:var(--ui-spacing); text-transform:var(--ui-transform); padding:10px 18px; border-radius:var(--radius); cursor:pointer; white-space:nowrap; border:1px solid var(--accent); background:var(--accent); color:#fff; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);} .hs-btn:hover{background:var(--accent-2); border-color:var(--accent-2);} .hs-btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule-strong);} .hs-btn.ghost:hover{border-color:var(--accent); color:var(--accent); background:transparent;} .hs-btn.danger{background:var(--crit); border-color:var(--crit);} .hs-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;} /* ---- panel / card (rules over shadows; shadow only where the register allows) ---- */ .hs-panel{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;} .hs-panel > .hs-ph{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:var(--pad); border-bottom:1px solid var(--rule);} .hs-panel > .hs-pbody{padding:var(--pad);} .hs-card h3{font-family:var(--font-title); font-weight:var(--title-weight); font-variation-settings:var(--title-vs); font-size:1.15rem; margin:0 0 8px; letter-spacing:-.01em; color:var(--ink);} .hs-card p{margin:0; color:var(--ink-2);} .hs-card .hs-cardmeta{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:12px; border-top:1px solid var(--rule); font-family:var(--font-data); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);} /* ---- stat tiles ---- */ .hs-tile{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:var(--pad); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px;} .hs-tile .hs-tl{font-family:var(--font-ui); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);} .hs-tile .hs-tv{font-family:var(--font-data); font-size:1.9rem; font-weight:500; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);} .hs-delta{font-family:var(--font-data); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;} .hs-delta.up{color:var(--good);} .hs-delta.down{color:var(--crit);} .hs-delta.flat{color:var(--ink-2);} /* ---- data table (tabular numerals, hairline rules) ---- */ .hs-tablewrap{overflow-x:auto;} .hs-table{border-collapse:collapse; width:100%; font-family:var(--font-data); font-size:.86em;} .hs-table thead th{text-align:left; font-weight:600; text-transform:uppercase; letter-spacing:.09em; font-size:.8em; color:var(--ink-2); padding:10px var(--pad); border-bottom:1px solid var(--rule-strong); background:var(--surface-2); white-space:nowrap;} .hs-table tbody td{padding:10px var(--pad); border-bottom:1px solid var(--rule); color:var(--ink); white-space:nowrap;} .hs-table tbody tr:last-child td{border-bottom:0;} .hs-table tbody tr:hover td{background:var(--surface-2);} .hs-table .hs-num{text-align:right; font-variant-numeric:tabular-nums;} /* ---- status pills (semantic, never the accent) ---- */ .hs-pill{display:inline-block; font-family:var(--font-data); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:var(--radius); border:1px solid;} .hs-pill.up{color:var(--good); border-color:var(--good);} .hs-pill.warn{color:var(--warn); border-color:var(--warn);} .hs-pill.down{color:var(--crit); border-color:var(--crit);} /* ---- chips / tags ---- */ .hs-chip{font-family:var(--font-data); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--rule-strong); border-radius:var(--radius); color:var(--ink-2);} .hs-chip.on{border-color:var(--accent); color:var(--accent);} /* ---- forms ---- */ .hs-field{display:flex; flex-direction:column; gap:7px; margin-bottom:14px;} .hs-field label{font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:var(--ui-spacing); text-transform:var(--ui-transform); color:var(--ink-2);} .hs-field input, .hs-field select, .hs-field textarea{font-family:var(--font-data); font-size:13px; color:var(--ink); background:var(--bg); border:1px solid var(--rule-strong); border-radius:var(--radius); padding:9px 11px; width:100%;} .hs-field input:focus, .hs-field select:focus, .hs-field textarea:focus{ outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent);} /* ---- callout (accent rule + panel ground, not a rounded pastel box) ---- */ .hs-callout{border-left:3px solid var(--accent); background:var(--surface-2); padding:13px 15px; border-radius:0 var(--radius) var(--radius) 0;} .hs-callout .hs-cl{font-family:var(--font-ui); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:5px;} .hs-callout p{margin:0; font-size:.92em; color:var(--ink-2);} /* ---- sparkline: give charts the same care as type ---- */ .hs-spark{display:block;} .hs-spark path{fill:none; stroke:var(--accent); stroke-width:1.5;} .hs-spark .end{fill:var(--accent);} @media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important;}}