/* =================================================================== TARICHIVE — DESIGN SYSTEM "Paper & graphite" neutrals, honey-amber accent, mono for codes. Light + dark themes via [data-theme] on . =================================================================== */ /* ── Fonts ──────────────────────────────────────────────────────── */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2"); } /* ── Tokens ─────────────────────────────────────────────────────── */ :root { --font-ui: ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --bg: #faf9f7; --surface: #ffffff; --inset: #f3f1ec; --hover: #edeae3; --border: #e6e3db; --border-strong: #cfcac0; --text: #26241f; --text-2: #6e6a60; --text-3: #9b968c; /* topbar chrome — dark in BOTH themes */ --chrome: #211e19; --chrome-text: #d9d5cb; --chrome-muted: #8f8a7e; --chrome-hover: rgb(255 255 255 / 0.08); --chrome-border: rgb(255 255 255 / 0.12); --accent: #a16207; --accent-strong: #7c4a03; --accent-soft: #f7ecd6; --ok: #2f7d4f; --ok-soft: #e2f1e8; --warn: #9a6200; --warn-soft: #f7ecd6; --danger: #b3261e; --danger-soft: #f9e5e3; --info: #3b6ea5; --info-soft: #e5edf6; --purple: #6d5a9e; --purple-soft: #ece7f5; --teal: #2a7f7f; --teal-soft: #e0efef; --r-1: 6px; --r-2: 10px; --r-pill: 999px; --shadow-1: 0 1px 2px rgb(30 27 20 / 0.06); --shadow-2: 0 8px 28px rgb(30 27 20 / 0.14); color-scheme: light; } [data-theme="dark"] { --bg: #151412; --surface: #1d1b18; --inset: #262320; --hover: #2c2925; --border: #33302a; --border-strong: #45403a; --text: #e8e5dd; --text-2: #a39e93; --text-3: #7a756b; --chrome: #111009; --accent: #dba54b; --accent-strong: #ecc27d; --accent-soft: #3a2f1a; --ok: #5cb883; --ok-soft: #1c2f24; --warn: #dba54b; --warn-soft: #3a2f1a; --danger: #e5695f; --danger-soft: #3a201d; --info: #7ba7d4; --info-soft: #1e2a38; --purple: #a894d6; --purple-soft: #2a2438; --teal: #6bbaba; --teal-soft: #1a2c2c; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-2: 0 8px 28px rgb(0 0 0 / 0.55); color-scheme: dark; } /* ── Base ───────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 0.875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); } h1, h2, h3, h4 { color: var(--text); } h1:focus { outline: none; } code, .th-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } ::selection { background: var(--accent-soft); } /* Uppercase mono label — recurring pattern */ .th-label { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } /* ── Blazor validation / error ──────────────────────────────────── */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); } .invalid { outline: 1px solid var(--danger); } .validation-message { color: var(--danger); font-size: 0.78rem; } .blazor-error-boundary { background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--r-1); color: var(--text); padding: 1rem; margin: 1rem; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ── Utility layer (Bootstrap replacement subset) ───────────────── */ .th-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .th-stack { display: flex; flex-direction: column; gap: 0.75rem; } .th-grow { flex: 1; } .th-right { margin-left: auto; } .th-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 0.9rem; align-items: start; } .th-grid-75 { grid-template-columns: 7fr 5fr; } .th-grid-even { grid-template-columns: 1fr 1fr; } .th-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem 0.9rem; margin-bottom: 0.9rem; } @media (max-width: 900px) { .th-grid, .th-grid-75, .th-grid-even { grid-template-columns: 1fr; } .th-form-grid { grid-template-columns: 1fr; } } .th-muted { color: var(--text-2); } .th-faint { color: var(--text-3); } .th-small { font-size: 0.78rem; } .th-page { padding: 1.1rem 1.25rem; max-width: 1100px; width: 100%; margin: 0 auto; } .th-page-title { font-size: 1.05rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 0.45rem; } .th-alert { border: 1px solid var(--border); border-radius: var(--r-1); padding: 0.6rem 0.9rem; font-size: 0.82rem; background: var(--inset); color: var(--text); } .th-alert-info { background: var(--info-soft); border-color: var(--info); } .th-alert-warn { background: var(--warn-soft); border-color: var(--warn); } .th-alert-danger { background: var(--danger-soft); border-color: var(--danger); } .th-alert-ok { background: var(--ok-soft); border-color: var(--ok); } .th-spinner { display: inline-block; width: 1.1rem; height: 1.1rem; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: th-spin 0.7s linear infinite; vertical-align: middle; } @keyframes th-spin { to { transform: rotate(360deg); } } /* Forms */ .th-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.7rem; } .th-field > label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .th-input, .th-select, .th-textarea { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--text); font-family: var(--font-ui); font-size: 0.85rem; padding: 0.4rem 0.6rem; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .th-input:focus, .th-select:focus, .th-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .th-input::placeholder { color: var(--text-3); } /* Buttons */ .th-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--text); cursor: pointer; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; padding: 0.32rem 0.85rem; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .th-btn:hover { background: var(--hover); } .th-btn:disabled { opacity: 0.45; cursor: not-allowed; } .th-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .th-btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } [data-theme="dark"] .th-btn-primary { color: #1a1508; } .th-btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .th-btn-ghost:hover { background: var(--hover); color: var(--text); } .th-btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .th-btn-sm { font-size: 0.72rem; padding: 0.18rem 0.6rem; } /* Pills (filters / toggles) */ .th-pill { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-2); cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.65rem; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; white-space: nowrap; text-decoration: none; } .th-pill:hover { background: var(--hover); color: var(--text); } .th-pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } .th-pill:disabled { opacity: 0.45; cursor: not-allowed; } .th-pill-count { font-size: 0.62rem; background: var(--inset); border-radius: var(--r-pill); padding: 0 0.35rem; color: var(--text-2); } .th-pill.active .th-pill-count { background: var(--surface); } /* Cards */ .th-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); box-shadow: var(--shadow-1); overflow: hidden; } .th-card-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--inset); } .th-card-body { padding: 0.8rem; } /* Tables */ .th-table { width: 100%; border-collapse: collapse; } .th-table th { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); } .th-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.82rem; vertical-align: middle; } .th-table tr:last-child td { border-bottom: none; } .th-table tbody tr:hover { background: var(--inset); } /* ── Topbar (chrome) ────────────────────────────────────────────── */ .th-navbar { background-color: var(--chrome); padding: 0.45rem 1rem; min-height: 48px; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .th-navbar-brand { color: var(--chrome-text) !important; font-family: var(--font-mono); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .th-navbar-brand:hover { color: #fff !important; } .th-navbar .nav-link, .th-navbar a { color: var(--chrome-muted); font-size: 0.8rem; text-decoration: none; } .th-navbar .nav-link:hover, .th-navbar a:hover { color: var(--chrome-text); } .th-nav-divider { width: 1px; height: 18px; background: var(--chrome-border); flex-shrink: 0; } .th-lang-btn { background: transparent; border: none; border-radius: var(--r-1); color: var(--chrome-muted); cursor: pointer; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; padding: 0.25rem 0.35rem; transition: color 0.15s ease; } .th-lang-btn:hover { color: var(--chrome-text); } .th-lang-btn.active { color: var(--accent); font-weight: 500; } .th-theme-btn { background: transparent; border: 1px solid var(--chrome-border); border-radius: var(--r-pill); color: var(--chrome-muted); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0.3rem 0.55rem; transition: color 0.15s ease, background 0.15s ease; } .th-theme-btn:hover { color: var(--chrome-text); background: var(--chrome-hover); } /* Controls that sit on chrome (TariffDetail second bar — restyled Phase 2) */ .th-flag-btn { background: none; border: none; font-size: 1.05rem; padding: 0 0.2rem; cursor: pointer; opacity: 0.55; border-bottom: 2px solid transparent; line-height: 1.6; transition: opacity 0.15s ease; } .th-flag-btn:hover { opacity: 1; } .th-flag-btn.active { opacity: 1; border-bottom-color: var(--accent); } .th-flag-btn:disabled { opacity: 0.2; cursor: not-allowed; filter: grayscale(1); } .th-flag-btn:disabled:hover { opacity: 0.2; } .th-date-input { background: var(--chrome-hover); border: 1px solid var(--chrome-border); color: var(--chrome-text); border-radius: var(--r-1); padding: 0.18rem 0.5rem; font-family: var(--font-mono); font-size: 0.74rem; width: 126px; } .th-date-input:focus { outline: none; border-color: var(--chrome-muted); } .th-movement-btn { padding: 0.18rem 0.75rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--r-pill); cursor: pointer; border: 1px solid var(--chrome-border); transition: background 0.15s ease; } .th-movement-btn.is-active-import, .th-movement-btn.is-active-export { background: var(--accent); color: #1a1508; border-color: var(--accent); } .th-movement-btn.is-inactive { background: transparent; color: var(--chrome-muted); } .th-movement-btn.is-inactive:hover { color: var(--chrome-text); } .th-search-input { background: var(--chrome-hover); border: 1px solid var(--chrome-border); color: var(--chrome-text); border-radius: var(--r-1); padding: 0.18rem 0.6rem; font-size: 0.78rem; width: 160px; } .th-search-input::placeholder { color: var(--chrome-muted); } .th-search-input:focus { outline: none; border-color: var(--chrome-muted); } /* ── Breadcrumb / tabs bar ──────────────────────────────────────── */ .th-breadcrumb-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.45rem 1rem 0; } .th-bc-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; } .th-bc-crumbs { display: flex; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.76rem; } .th-bc-crumbs a { color: var(--text-2); text-decoration: none; } .th-bc-crumbs a:hover { color: var(--accent); } .th-bc-sep { color: var(--text-3); margin: 0 0.35rem; } .th-bc-active { color: var(--text); font-weight: 500; } .th-bc-actions { display: flex; gap: 0.4rem; align-items: center; } .th-icon-btn { background: var(--inset); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--r-1); padding: 0.15rem 0.5rem; font-size: 0.75rem; cursor: pointer; transition: background 0.15s ease; } .th-icon-btn:hover { background: var(--hover); color: var(--text); } .th-tabs-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; padding-top: 0.15rem; } .th-sub-tabs { display: flex; gap: 0; } .th-sub-tab { background: none; border: none; color: var(--text-2); padding: 0.45rem 0.9rem; cursor: pointer; font-size: 0.82rem; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s ease; } .th-sub-tab:hover { color: var(--text); } .th-sub-tab.active { color: var(--accent-strong); border-bottom-color: var(--accent); } .th-doc-btns { display: flex; gap: 0.3rem; padding-bottom: 0.35rem; flex-wrap: wrap; } .th-doc-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--r-pill); padding: 0.15rem 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .th-doc-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } .th-doc-btn:disabled { opacity: 0.45; cursor: not-allowed; } .th-doc-btn .th-pill-count { margin-left: 0.25rem; } /* ── Nomenclature tree ──────────────────────────────────────────── */ .th-nom-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: 0.75rem; } .th-nom-card-header { background: var(--inset); color: var(--text-3); border-bottom: 1px solid var(--border); padding: 0.4rem 0.7rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .th-nom-table { width: 100%; border-collapse: collapse; } .th-nom-tr td { padding: 0.24rem 0.45rem; vertical-align: middle; } .th-nom-tr + .th-nom-tr td { border-top: 1px solid var(--border); } .th-nom-code { color: var(--text-2); font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.76rem; white-space: nowrap; min-width: 100px; letter-spacing: 0.03em; } .th-nom-desc { color: var(--text); font-size: 0.8rem; padding-left: 0.6rem !important; } .th-nom-tr-active td { background: var(--accent-soft); } .th-nom-tr-active .th-nom-code { color: var(--accent-strong); font-weight: 500; } .th-nom-tr-active .th-nom-desc { font-weight: 600; } /* ── Filter panel ───────────────────────────────────────────────── */ .th-filter-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); box-shadow: var(--shadow-1); padding: 0.75rem; margin-bottom: 0.75rem; } .th-filter-panel .form-label, .th-filter-panel label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.2rem; display: block; } .th-filter-panel .form-control, .th-filter-panel .form-select, .th-filter-panel input, .th-filter-panel select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--text); font-size: 0.82rem; padding: 0.25rem 0.5rem; } .th-filter-row { display: flex; gap: 0.5rem; align-items: flex-end; } .th-filter-row .form-control { flex: 1; } .th-ucc-radios { display: flex; gap: 1rem; font-size: 0.8rem; margin-top: 0.25rem; } .th-ucc-radios label { cursor: pointer; } /* ── Section headers ────────────────────────────────────────────── */ .th-section-title { font-size: 0.95rem; font-weight: 700; color: var(--text); padding: 0.6rem 0 0.3rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-strong); display: flex; align-items: center; gap: 0.5rem; } .th-section-title-sm { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 0.4rem 0 0.2rem; margin-bottom: 0.4rem; } /* ── Measure cards & rows ───────────────────────────────────────── */ .th-measure-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); box-shadow: var(--shadow-1); margin-bottom: 0.65rem; /* no overflow:hidden — badge popovers must escape the card; corners are rounded on the header/last row instead */ } .th-measure-head { background: var(--inset); color: var(--text); border-bottom: 1px solid var(--border); border-radius: calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0 0; padding: 0.38rem 0.7rem; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; } .th-measure-head-left { display: flex; align-items: center; gap: 0.4rem; } .th-measure-head-right { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; color: var(--text-3); } .th-measure-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.7rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; min-height: 32px; } .th-measure-row:last-child { border-bottom: none; border-radius: 0 0 calc(var(--r-2) - 1px) calc(var(--r-2) - 1px); } .th-measure-row:hover { background: var(--inset); } .th-measure-row-indent { padding-left: 1.8rem; font-size: 0.8rem; color: var(--text-2); } .th-region { color: var(--text); font-weight: 500; font-size: 0.82rem; } .th-region-name { color: var(--text-2); font-size: 0.8rem; } .th-region-sep { color: var(--text-3); margin: 0 0.15rem; } .th-order-link { color: var(--accent); text-decoration: underline; cursor: pointer; font-size: 0.75rem; background: none; border: none; padding: 0; } .th-order-link:hover { color: var(--accent-strong); } .th-expand-btn { background: none; border: none; cursor: pointer; color: var(--accent); padding: 0; font-size: 0.72rem; flex-shrink: 0; } .th-archive-btn { background: var(--inset); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.1rem 0.5rem; font-size: 0.7rem; cursor: pointer; margin-left: auto; flex-shrink: 0; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .th-archive-btn:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } .th-excluding { display: block; color: var(--text-3); font-size: 0.75rem; padding-left: 0.8rem; margin-top: 0.1rem; } /* Inline conditions table under an expanded measure row */ .th-cond-table-wrap { background: var(--inset); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0.35rem 0.7rem 0.45rem 2rem; } .th-cond-table-wrap .th-table th, .th-cond-table-wrap .th-table td { padding: 0.25rem 0.5rem; } .th-cond-table-wrap .th-table tbody tr:hover { background: transparent; } /* Excise sub-rows */ .th-excise-block { padding: 0.3rem 0.7rem; border-bottom: 1px solid var(--border); } .th-excise-block:last-child { border-bottom: none; } .th-excise-block-header { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.2rem; } .th-excise-subrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0 0.15rem 1.2rem; font-size: 0.78rem; border-top: 1px solid var(--border); } .th-excise-label { flex: 1; color: var(--text-2); } .th-excise-rate { color: var(--text); font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── Badge / chip system (soft tints) ───────────────────────────── */ .th-badge { display: inline-block; padding: 0.1rem 0.42rem; border-radius: var(--r-1); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.7rem; font-weight: 500; white-space: nowrap; line-height: 1.5; flex-shrink: 0; border: 1px solid transparent; } .th-badge-duty { background: var(--inset); color: var(--text); border-color: var(--border-strong); font-weight: 500; } .th-badge-pref { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .th-badge-cert-c { background: var(--teal-soft); color: var(--teal); } .th-badge-cert-y { background: var(--warn-soft); color: var(--warn); } .th-badge-cert-n { background: var(--ok-soft); color: var(--ok); } .th-badge-footnote-cd { background: var(--teal-soft); color: var(--teal); } .th-badge-footnote-tm { background: var(--purple-soft); color: var(--purple); } .th-badge-footnote-in { background: var(--ok-soft); color: var(--ok); } .th-badge-addcode { background: var(--info-soft); color: var(--info); } .th-badge-unit { background: var(--inset); color: var(--text-2); } .th-badge-other { background: var(--inset); color: var(--text-2); } .th-badge-ok { background: var(--ok-soft); color: var(--ok); } .th-badge-danger { background: var(--danger-soft); color: var(--danger); } .th-flag-icon { font-size: 0.9rem; flex-shrink: 0; } /* ── Modal ──────────────────────────────────────────────────────── */ .th-modal-backdrop { position: fixed; inset: 0; background: rgb(15 13 10 / 0.5); z-index: 1040; } .th-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); max-width: 720px; width: 92%; max-height: 82vh; overflow-y: auto; z-index: 1050; box-shadow: var(--shadow-2); } .th-modal-header { background: var(--inset); color: var(--text); border-bottom: 1px solid var(--border); padding: 0.6rem 1rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; } .th-modal-title { font-weight: 700; font-size: 0.9rem; } .th-modal-subtitle { font-size: 0.78rem; color: var(--text-2); } .th-modal-close { background: none; border: none; color: var(--text-2); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0; } .th-modal-close:hover { color: var(--text); } .th-modal-body { padding: 1rem; } .th-modal table th { font-size: 0.72rem; font-weight: 600; color: var(--text-3); } .th-modal table td { font-size: 0.8rem; } .th-reg-link { color: var(--accent) !important; text-decoration: underline; } /* ── Slide-in overlay panel (BTI / Legislation / Legend) ────────── */ .th-panel-backdrop { position: fixed; inset: 0; background: rgb(15 13 10 / 0.4); z-index: 1060; opacity: 0; transition: opacity 0.2s ease; } .th-panel-backdrop.open { opacity: 1; } .th-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--shadow-2); z-index: 1070; display: flex; flex-direction: column; transform: translateX(105%); transition: transform 0.22s ease; } .th-panel.open { transform: translateX(0); } .th-panel-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); } .th-panel-title { font-weight: 700; font-size: 0.9rem; flex: 1; } .th-panel-body { flex: 1; overflow-y: auto; padding: 0.9rem 1rem; } .th-panel-filters { display: flex; gap: 0.3rem; flex-wrap: wrap; padding: 0.6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); } /* BTI cards inside the slide panel */ .th-bti-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); box-shadow: var(--shadow-1); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; } .th-bti-desc { font-size: 0.78rem; color: var(--text); margin-top: 0.35rem; white-space: pre-line; max-height: 7.5rem; overflow-y: auto; } /* ── Popover (regulation / additional code) ─────────────────────── */ .th-popover-wrap { position: relative; display: inline-block; } .th-popover-backdrop { position: fixed; inset: 0; background: transparent; border: none; padding: 0; z-index: 1080; cursor: default; } .th-popover { position: absolute; z-index: 1090; min-width: 280px; max-width: min(380px, 90vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); box-shadow: var(--shadow-2); padding: 0.7rem 0.85rem; font-size: 0.78rem; text-align: left; } .th-popover-right { right: 0; top: calc(100% + 6px); } .th-popover-left { left: 0; top: calc(100% + 6px); } /* ── Content area / layout ──────────────────────────────────────── */ .th-content { padding: 0.9rem 1rem; background: var(--bg); min-height: calc(100vh - 96px); } .th-loading { text-align: center; padding: 3rem 0; color: var(--text-2); } .th-empty { text-align: center; padding: 2rem; color: var(--text-3); font-style: italic; } .th-expand-all { background: none; border: none; color: var(--text-3); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; padding: 0; } .th-expand-all:hover { color: var(--accent); } /* ── Home / search ──────────────────────────────────────────────── */ .th-home-search-wrap { max-width: 680px; margin: 4rem auto 1.5rem; text-align: center; } .th-home-title { color: var(--text); font-family: var(--font-mono); font-weight: 500; font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.25rem; } .th-home-title .accent { color: var(--accent); } .th-search-bar { display: flex; gap: 0; border: 1px solid var(--border-strong); border-radius: var(--r-2); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .th-search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .th-search-bar input { flex: 1; border: none; background: transparent; color: var(--text); padding: 0.6rem 0.9rem; font-size: 0.95rem; outline: none; } .th-search-bar input::placeholder { color: var(--text-3); } .th-search-bar select { border: none; border-left: 1px solid var(--border); padding: 0 0.6rem; font-family: var(--font-mono); font-size: 0.78rem; background: var(--inset); color: var(--text); outline: none; cursor: pointer; } .th-search-bar button { background: var(--accent); border: none; color: #fff; padding: 0 1.1rem; font-size: 1rem; cursor: pointer; transition: background 0.15s ease; } .th-search-bar button:hover { background: var(--accent-strong); } [data-theme="dark"] .th-search-bar button { color: #1a1508; } .th-recent-codes { text-align: center; margin-bottom: 1.5rem; } .th-recent-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-right: 0.4rem; } .th-recent-pill { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.12rem 0.65rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--text-2); text-decoration: none; margin: 0.15rem; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .th-recent-pill:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } .th-result-list { max-width: 800px; margin: 0 auto; } .th-result-item { display: flex; align-items: center; gap: 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); padding: 0.5rem 0.75rem; margin-bottom: 0.4rem; text-decoration: none; color: inherit; box-shadow: var(--shadow-1); transition: border-color 0.15s ease; } .th-result-item:hover { border-color: var(--accent); color: inherit; } .th-result-code { background: var(--accent-soft); color: var(--accent-strong); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 0.8rem; padding: 0.15rem 0.45rem; border-radius: var(--r-1); white-space: nowrap; } .th-result-source { background: var(--inset); color: var(--text-2); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; padding: 0.1rem 0.4rem; border-radius: var(--r-1); } .th-result-desc { flex: 1; font-size: 0.83rem; color: var(--text); } /* ── Legacy Bootstrap-era stragglers (removed with Bootstrap) ───── */ .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--text-3); }