/* ========================================================================= Housecarl Chrome — extensions (chrome-ext.css) Pairs with tokens.css + palettes.css + chrome.css. Provides primitives the base pack does not ship but the operator console and marketing surface need: card, modal, toast, meter, breadcrumb, pagination, alert, field, kvtable, statline, empty-state, tab-bar, toolbar, copy-button, danger-zone, plus console-mode chrome variants. Every value comes from tokens. No raw colors. No raw spacing. ========================================================================= */ /* --- Page modes ------------------------------------------------------- Marketing mode is the default. Console mode tightens density, swaps the masthead status block, and condenses the footer. Set on : (or absent) ------------------------------------------------------------------- */ body[data-mode="console"] { --row: 24px; --cell-y: 4px; --cell-x: 8px; --section-gap: var(--s-5); } body:not([data-mode="console"]) { --section-gap: var(--s-7); } /* --- Buttons (extensions) --------------------------------------------- */ .btn--danger { background: var(--rust); border-color: var(--rust); color: var(--off-white); } .btn--danger:hover { background: #6A2018; border-color: #6A2018; color: var(--off-white); } .btn--ghost-danger { background: transparent; border-color: var(--rust); color: var(--rust); } .btn--ghost-danger:hover { background: rgba(139, 58, 31, 0.06); } .btn--success { background: var(--success); border-color: var(--success); color: var(--off-white); } .btn--success:hover { background: #224832; border-color: #224832; } .btn--block { display: flex; width: 100%; justify-content: center; } .btn--xs { font-size: 10px; padding: 3px 7px; } .btn--lg { font-size: 14px; padding: 12px 22px; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } /* --- Cards ------------------------------------------------------------- */ .card { background: var(--bg-card); border: 1px solid var(--rule); padding: var(--s-5); margin-bottom: var(--s-4); box-shadow: var(--shadow-card); border-radius: var(--r-sm); } .card--paper { background: var(--bg-paper); border-color: var(--rule); } .card--inset { background: var(--paper-tint); border-color: var(--rule); box-shadow: none; } .card--accent { border-left: var(--bw-heavy) solid var(--copper-orange); padding-left: var(--s-5); } .card--rust { border-left: var(--bw-heavy) solid var(--rust); padding-left: var(--s-5); } .card--gold { border-left: var(--bw-heavy) solid var(--muted-gold); padding-left: var(--s-5); } .card--ink { border-left: var(--bw-heavy) solid var(--ink); padding-left: var(--s-5); } .card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); } .card__head h3, .card__head h4 { font-family: var(--font-serif); font-weight: 700; font-size: var(--size-md); letter-spacing: -.005em; color: var(--ink); margin: 0; } .card__body { font-family: var(--font-serif); } .card__foot { display: flex; gap: var(--s-2); padding-top: var(--s-3); margin-top: var(--s-3); border-top: 1px solid var(--rule); } /* --- Sections (extensions) -------------------------------------------- */ .section--inset { background: var(--paper-tint); border: 1px solid var(--rule); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-4); } .section--loading { position: relative; isolation: isolate; } .section--loading::before { content: ""; position: absolute; inset: 0; border-left: var(--bw-heavy) solid var(--copper-orange); animation: section-pulse 1.4s var(--ease-in-out) infinite; pointer-events: none; } @keyframes section-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* --- Toolbar (action bar pinned below slug) --------------------------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) 0 var(--s-4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-5); } .toolbar__primary { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; } .toolbar__spacer { flex: 1 1 auto; } .toolbar__filter { flex: 0 1 360px; display: flex; gap: var(--s-2); align-items: center; } .toolbar__filter .hc-input { flex: 1 1 auto; } .toolbar__count { font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); } /* --- Statline (mono "k1: v1 · k2: v2" header line) -------------------- */ .statline { font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .statline__sep { color: var(--rule-strong); } .statline strong { color: var(--ink); font-weight: 700; } .statline .ok { color: var(--success); } .statline .warn { color: var(--muted-gold); } .statline .err { color: var(--rust); } /* --- Console masthead variant ----------------------------------------- */ .masthead--console { border-bottom: 3px double var(--copper-orange); } .masthead--console .wrap { padding: 18px 24px 14px; align-items: center; } .masthead--console .wordmark .m1 { font-size: 22px; } .masthead--console .wordmark img.mascot { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--iron-900); object-fit: cover; background: var(--steel-grey); } .masthead--console .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } /* --- Console footer (condensed) --------------------------------------- */ .footer--console { margin-top: var(--s-7); } .footer--console .wrap { padding: 24px 24px 12px; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-6); } .footer--console .colophon { padding: 10px 24px; } /* --- Slug (extensions) ------------------------------------------------- */ .slug--compact { padding: var(--s-5) 0 var(--s-4); grid-template-columns: 100px 1fr 240px; gap: var(--s-5); } .slug--compact .num .roman { font-size: 32px; } .slug--compact h2 { font-size: 22px; } /* --- Field group (form input + label + hint + error) ------------------ */ .field { display: block; margin-bottom: var(--s-4); } .field__label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); font-weight: 700; margin-bottom: var(--s-1); } .field__label .req { color: var(--rust); margin-left: 2px; } .field__hint { display: block; font-family: var(--font-serif); font-style: italic; font-size: var(--size-sm); color: var(--fg3); margin-top: var(--s-1); } .field__error { display: block; font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: .04em; color: var(--rust); margin-top: var(--s-1); } .field .hc-input, .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field input[type="search"], .field select, .field textarea { width: 100%; background: var(--bg-card); color: var(--fg1); border: 1px solid var(--rule-strong); padding: 8px 10px; font-family: var(--font-mono); font-size: var(--size-sm); border-radius: var(--r-xs); outline: none; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .field .hc-input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper-orange); box-shadow: 0 0 0 1px var(--copper-orange); } .field textarea { font-family: var(--font-mono); resize: vertical; min-height: 96px; } .field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--rust); } .field-row { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .action-row { display: flex; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); } .action-row--center { justify-content: center; } .action-row--end { justify-content: flex-end; } .action-row--split { justify-content: space-between; } /* --- Switch & checkbox ------------------------------------------------- */ .checkbox { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-serif); font-size: var(--size-sm); cursor: pointer; } .checkbox input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: 1px solid var(--rule-strong); background: var(--bg-card); border-radius: var(--r-xs); display: inline-grid; place-content: center; cursor: pointer; } .checkbox input[type="checkbox"]:checked { background: var(--copper-orange); border-color: var(--copper-orange); } .checkbox input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 8px; background: var(--off-white); clip-path: polygon(0 50%, 25% 80%, 100% 0%, 100% 20%, 25% 100%, 0 70%); } /* --- KV-table (vertical key/value detail) ----------------------------- */ table.kvtable { width: 100%; border-collapse: collapse; font-family: var(--font-serif); font-size: var(--size-sm); } table.kvtable th { text-align: left; padding: var(--cell-y, 6px) var(--cell-x, 12px); font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg2); font-weight: 700; width: 180px; vertical-align: top; border-bottom: 1px solid var(--rule); background: transparent; } table.kvtable td { padding: var(--cell-y, 6px) var(--cell-x, 12px); border-bottom: 1px solid var(--rule); color: var(--fg1); vertical-align: top; } table.kvtable tr:last-child th, table.kvtable tr:last-child td { border-bottom: 0; } table.kvtable td.mono { font-family: var(--font-mono); font-size: var(--size-xs); } /* --- Tables (extensions) ---------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--bg-card); } table.data thead th { position: sticky; top: 0; z-index: 1; } table.data td.actions { white-space: nowrap; text-align: right; } table.data td.actions .btn { margin-left: var(--s-1); } /* --- Tag (extensions) -------------------------------------------------- */ .tag--solid { background: var(--ink); color: var(--off-white); border-color: var(--ink); } .tag--solid-copper { background: var(--copper-orange); color: var(--off-white); border-color: var(--copper-orange); } .tag--lg { font-size: 11px; padding: 3px 9px; } /* --- Pill (small inline status, distinct from .tag) ------------------- */ .pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--paper-tint); color: var(--fg2); } .pill--ok { background: rgba(45, 95, 63, .12); color: var(--success); } .pill--warn { background: rgba(168, 132, 58, .12); color: var(--muted-gold); } .pill--err { background: rgba(155, 58, 51, .12); color: var(--rust); } .pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* --- Meter (rate-limit / token-bucket bar) ---------------------------- */ .meter { margin-bottom: var(--s-3); } .meter__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-1); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } .meter__name { color: var(--fg2); } .meter__value { color: var(--ink); } .meter__track { height: 8px; background: var(--paper-tint); border: 1px solid var(--rule); position: relative; overflow: hidden; } .meter__bar { height: 100%; background: var(--copper-orange); transition: width var(--dur-base) var(--ease-standard); } .meter--low .meter__bar { background: var(--success); } .meter--med .meter__bar { background: var(--muted-gold); } .meter--high .meter__bar { background: var(--rust); } .meter-group { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: var(--s-4); } /* --- Breadcrumb -------------------------------------------------------- */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); margin-bottom: var(--s-3); } .breadcrumb a { color: var(--fg2); text-decoration: none; } .breadcrumb a:hover { color: var(--ink); } .breadcrumb .sep { color: var(--rule-strong); } .breadcrumb .here { color: var(--ink); font-weight: 700; } /* --- Pagination -------------------------------------------------------- */ .pagination { display: flex; align-items: center; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--size-xs); margin: var(--s-4) 0; } .pagination__page, .pagination__nav { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--rule-strong); color: var(--fg1); text-decoration: none; background: var(--bg-card); cursor: pointer; letter-spacing: .04em; } .pagination__page:hover, .pagination__nav:hover { background: var(--paper-tint); } .pagination__page--current { background: var(--ink); color: var(--off-white); border-color: var(--ink); } .pagination__count { margin-left: var(--s-3); color: var(--fg2); letter-spacing: .12em; text-transform: uppercase; } /* --- Tab bar ----------------------------------------------------------- */ .tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--rule-strong); margin: var(--s-5) 0 var(--s-4); } .tab { font-family: var(--font-serif); font-weight: 600; font-size: var(--size-sm); letter-spacing: .04em; padding: 8px 18px; background: transparent; border: 1px solid transparent; border-bottom: 0; color: var(--fg2); cursor: pointer; text-decoration: none; margin-bottom: -1px; transition: color var(--dur-fast) var(--ease-standard); } .tab:hover { color: var(--ink); } .tab.is-active { color: var(--ink); background: var(--bg-paper); border-color: var(--rule-strong); border-bottom-color: var(--bg-paper); font-weight: 700; } /* --- Alert (flash messages) ------------------------------------------- */ .alert { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--rule-strong); border-left-width: var(--bw-heavy); background: var(--bg-card); color: var(--fg1); font-family: var(--font-serif); font-size: var(--size-sm); margin-bottom: var(--s-3); } .alert__title { font-weight: 700; letter-spacing: -.005em; margin-right: 4px; } .alert__close { margin-left: auto; background: none; border: 0; color: var(--fg3); font-family: var(--font-mono); font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1; } .alert__close:hover { color: var(--ink); } .alert--info { border-left-color: var(--deep-blue); } .alert--ok { border-left-color: var(--success); background: rgba(45, 95, 63, .04); } .alert--warn { border-left-color: var(--muted-gold); background: rgba(168, 132, 58, .04); } .alert--danger { border-left-color: var(--rust); background: rgba(155, 58, 51, .04); } /* --- Toast stack ------------------------------------------------------- */ .toast-stack { position: fixed; top: var(--s-4); right: var(--s-4); z-index: 1000; display: flex; flex-direction: column; gap: var(--s-2); max-width: 380px; } .toast { background: var(--bg-card); border: 1px solid var(--ink); border-left: var(--bw-heavy) solid var(--copper-orange); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-card-lg); font-family: var(--font-serif); font-size: var(--size-sm); display: flex; align-items: flex-start; gap: var(--s-2); animation: toast-in var(--dur-base) var(--ease-standard); } .toast--ok { border-left-color: var(--success); } .toast--warn { border-left-color: var(--muted-gold); } .toast--danger { border-left-color: var(--rust); } .toast__title { font-weight: 700; display: block; margin-bottom: 2px; } .toast__close { margin-left: auto; background: none; border: 0; color: var(--fg3); cursor: pointer; font-family: var(--font-mono); font-size: 14px; line-height: 1; } @keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* --- Modal ------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(26, 26, 26, .52); z-index: 900; display: flex; align-items: center; justify-content: center; padding: var(--s-5); animation: backdrop-in var(--dur-base) var(--ease-standard); } .modal { background: var(--bg-card); border: 1px solid var(--ink); border-top: var(--bw-heavy) solid var(--copper-orange); width: 100%; max-width: 540px; box-shadow: var(--shadow-card-lg); display: flex; flex-direction: column; max-height: 86vh; animation: modal-in var(--dur-slow) var(--ease-standard); } .modal--danger { border-top-color: var(--rust); } .modal--lg { max-width: 780px; } .modal__head { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--rule-strong); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); } .modal__head h3 { font-family: var(--font-serif); font-weight: 700; font-size: var(--size-md); margin: 0; } .modal__body { padding: var(--s-4) var(--s-5); overflow-y: auto; font-family: var(--font-serif); } .modal__foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--rule); display: flex; gap: var(--s-2); justify-content: flex-end; background: var(--bg-paper); } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* --- Empty state ------------------------------------------------------- */ .empty-state { text-align: center; padding: var(--s-7) var(--s-4); border: 1px dashed var(--rule-strong); background: var(--bg-paper); } .empty-state__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--size-lg); color: var(--ink); margin: var(--s-2) 0 var(--s-1); } .empty-state__aside { font-family: var(--font-serif); font-size: var(--size-sm); font-style: italic; color: var(--fg2); margin: 0 auto var(--s-4); max-width: 52ch; line-height: var(--lh-loose); } .empty-state .eyebrow { display: inline-block; } /* --- Danger zone (destructive action region) --------------------------- */ .danger-zone { margin-top: var(--s-7); padding: var(--s-4) var(--s-5); border: 1px solid var(--rust); background: rgba(155, 58, 51, .03); } .danger-zone__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rust); } .danger-zone__head h4 { font-family: var(--font-serif); font-weight: 700; font-size: var(--size-md); color: var(--rust); margin: 0; } .danger-zone__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; } .danger-zone__row + .danger-zone__row { border-top: 1px dotted rgba(155, 58, 51, .25); } .danger-zone__copy { font-family: var(--font-serif); font-size: var(--size-sm); color: var(--fg1); } /* --- Copy-to-clipboard chip ------------------------------------------- */ .copy-button { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: .04em; padding: 1px 6px; border: 1px solid var(--rule-strong); background: var(--bg-card); color: var(--fg2); border-radius: var(--r-xs); cursor: pointer; text-transform: uppercase; } .copy-button:hover { color: var(--ink); border-color: var(--ink); } .copy-button.is-copied { color: var(--success); border-color: var(--success); } /* --- Diff / split panel (policy editor) -------------------------------- */ .diff-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .diff-panel__pane { background: var(--bg-card); border: 1px solid var(--rule-strong); display: flex; flex-direction: column; min-height: 480px; } .diff-panel__head { padding: var(--s-2) var(--s-3); background: var(--bg-paper); border-bottom: 1px solid var(--rule-strong); font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg2); display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); } .diff-panel__body { flex: 1 1 auto; padding: var(--s-3); overflow: auto; } .diff-panel__foot { padding: var(--s-2) var(--s-3); background: var(--bg-paper); border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--size-xs); color: var(--fg2); display: flex; gap: var(--s-4); justify-content: space-between; } .diff-panel__editor { width: 100%; height: 100%; min-height: 420px; border: 0; outline: none; resize: none; font-family: var(--font-mono); font-size: var(--size-sm); line-height: var(--lh-snug); background: transparent; color: var(--ink); padding: var(--s-3); } /* --- Stat-card (4-up summary tiles) ----------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); } .stat-card { background: var(--bg-card); border: 1px solid var(--rule); padding: var(--s-3) var(--s-4); } .stat-card__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg2); } .stat-card__value { font-family: var(--font-serif); font-weight: 700; font-size: var(--size-2xl); color: var(--ink); letter-spacing: -.01em; margin-top: var(--s-1); } .stat-card__delta { font-family: var(--font-mono); font-size: var(--size-xs); color: var(--fg3); margin-top: var(--s-1); } .stat-card__delta.up { color: var(--success); } .stat-card__delta.down { color: var(--rust); } /* --- Detail metadata (k:v inline list) -------------------------------- */ .metadata-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .metadata-item { font-family: var(--font-mono); font-size: var(--size-xs); display: flex; gap: var(--s-2); padding: 2px 0; border-bottom: 1px dotted var(--rule); } .metadata-key { color: var(--fg2); letter-spacing: .04em; min-width: 8em; } .metadata-value { color: var(--ink); word-break: break-all; } /* --- Code prompt highlight (used on landing) -------------------------- */ pre.code .prompt { color: var(--copper-orange); user-select: none; } pre.code .comment { color: #8A8579; font-style: italic; } /* --- Misc utilities ---------------------------------------------------- */ .text-mono { font-family: var(--font-mono); } .text-mute { color: var(--fg3); } .text-ink { color: var(--ink); } .text-rust { color: var(--rust); } .text-gold { color: var(--muted-gold); } .text-accent { color: var(--copper-orange); } .text-ok { color: var(--success); } .text-center { text-align: center; } .text-right { text-align: right; } .divider-rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; } .divider-double { border: 0; border-top: 3px double var(--iron-900); margin: var(--s-5) 0; } .stack-1 > * + * { margin-top: var(--s-1); } .stack-2 > * + * { margin-top: var(--s-2); } .stack-3 > * + * { margin-top: var(--s-3); } .stack-4 > * + * { margin-top: var(--s-4); } .stack-5 > * + * { margin-top: var(--s-5); } .row-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-5); } .row-3col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); } .row-4col { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); } /* --- Print ------------------------------------------------------------- */ @media print { .topnav, .toolbar, .toast-stack, .modal-backdrop { display: none; } .masthead, .footer { background: transparent; color: var(--ink); border-color: var(--ink); } body { background: white; } }