/* ubutler-trust — hand-written BEM, no build step, no Tailwind (see CLAUDE.md). * * The palette is the deep navy/blue of the design mock, deliberately distinct * from the intranet's violet: these are two apps, and a glance at the chrome * should tell you which one you're in. * * Theming (docs/adr/0017 pattern): every colour is a token on :root, and * [data-theme="dark"] re-points the tokens. Components never name a raw colour, * so there is exactly one place per colour to change and no per-component dark * overrides to keep in sync. static/js/theme.js stamps data-theme on * before first paint. */ /* Vendored, same-origin (CSP font-src falls back to default-src 'self'). The exact fonts the Company Hub uses (reuse, don't reinvent): Inter for body, Raleway for headings, system mono for code/labels. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/inter.woff2") format("woff2"); } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/raleway.woff2") format("woff2"); } :root { /* Surfaces & text */ --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f9fafb; /* subtle fill: table hover, inputs */ --line: #e3e6ea; --line-strong: #cfd5dc; --text: #1c2430; --muted: #5b6572; /* Brand */ --brand: #1f4e8c; --brand-hover: #1a4176; /* darker on hover — NOT lighter: the label is white and must stay legible */ --brand-soft: #e8eff8; --on-brand: #ffffff; /* text on a brand-filled surface */ /* Sidebar (its own scale: dark in both themes) */ --ink: #14233a; --ink-line: #24354f; --ink-text: #c8d2e0; --ink-muted: #7f8fa6; --ink-hover: #1d3050; /* Status */ --green: #1e7d4e; --green-bg: #e3f3ea; --amber: #9a6700; --amber-bg: #fbf0d9; --red: #b42318; --red-bg: #fdeceb; --purple:#5b4b9e; --purple-bg:#eeebf8; --overlay: rgba(20, 35, 58, .45); --shadow: 0 10px 40px rgba(20, 35, 58, .18); /* Resting card elevation — subtle, matches the Hub's card lift. */ --card-shadow: 0 1px 2px rgba(20, 35, 58, .05), 0 1px 3px rgba(20, 35, 58, .04); --radius: 8px; --radius-sm: 5px; /* Content column width + the page gutter, mirroring the intranet. */ --content-max: 1120px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: "Raleway", var(--font); --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } [data-theme="dark"] { --bg: #10151d; --surface: #171d27; --surface-2: #1d2531; --line: #2a3341; --line-strong: #3a4553; --text: #e6eaf0; --muted: #94a0b0; /* Lifted for contrast against the dark surface: the light-mode navy is too close to the background to read as a brand colour here. */ --brand: #4a8fd8; --brand-hover: #63a2e6; --brand-soft: #1b2c40; --on-brand: #0d1520; /* dark ink on the lighter blue */ --ink: #0d1520; --ink-line: #202b3a; --ink-text: #b8c4d4; --ink-muted: #6b7889; --ink-hover: #1a2534; /* Status: desaturated foregrounds + dark tints, so a red pill doesn't glow. */ --green: #57c98b; --green-bg: #14301f; --amber: #d9a441; --amber-bg: #33260d; --red: #f08278; --red-bg: #3a1714; --purple:#a596e8; --purple-bg:#241f3d; --overlay: rgba(0, 0, 0, .6); --shadow: 0 10px 40px rgba(0, 0, 0, .5); --card-shadow: 0 1px 2px rgba(0, 0, 0, .3); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); font-size: 15px; line-height: 1.5; background: var(--bg); color: var(--text); display: flex; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, .brand, .page-head h1, .card__title, .public__title, .login__title, .noaccess__title, .stat__value { font-family: var(--font-head); letter-spacing: -.01em; } /* The public trust center, login and no-access pages render without a sidebar. */ .app--public, .app--bare { display: block; } a { color: var(--brand); } /* ===== Sidebar ===== */ .sidebar { width: 248px; flex-shrink: 0; box-sizing: border-box; background: var(--ink); color: var(--ink-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; font-weight: 700; color: #fff; font-size: 1.05rem; border-bottom: 1px solid var(--ink-line); } .brand__icon { flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.15; } .brand small { font-weight: 400; color: var(--ink-muted); font-size: .72rem; margin-top: 2px; } .brand--center { border: none; color: var(--text); padding: 0 0 4px; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .brand--center .brand__text { align-items: center; } .brand--center small { color: var(--muted); } .brand__icon--lg { width: 40px; height: 44px; } .nav { padding: 10px 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1px; } .nav__group { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); padding: 14px 12px 4px; font-weight: 600; } .nav__link { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-text); text-decoration: none; font-size: .88rem; } .nav__link:hover { background: var(--ink-hover); } .nav__link--active { background: var(--brand); color: var(--on-brand); } /* Search trigger — mirrors the palette it opens. */ .navsearch { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; margin-bottom: 4px; background: var(--ink-hover); border: 1px solid var(--ink-line); border-radius: var(--radius-sm); color: var(--ink-muted); font: inherit; font-size: .82rem; cursor: pointer; text-align: left; } .navsearch:hover { border-color: var(--ink-muted); color: var(--ink-text); } .navsearch__label { flex: 1; } .navsearch__kbd { font-family: var(--mono); font-size: .68rem; padding: 1px 5px; border: 1px solid var(--ink-line); border-radius: 3px; background: var(--ink); } /* --- Sidebar footer ----------------------------------------------------- A single padded column: identity, then the actions in one aligned row, so the links and the sign-out button share a baseline instead of stacking at different insets. */ .sidebar__foot { padding: 12px; border-top: 1px solid var(--ink-line); display: flex; flex-direction: column; gap: 10px; } .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .who__name { font-size: .85rem; color: #fff; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* A long address must not push the row wider than the sidebar. */ .who__mail { font-size: .72rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .foot__actions { display: flex; align-items: center; gap: 6px; } .foot__actions form { margin: 0; display: flex; } .foot__link { font-size: .75rem; color: var(--ink-muted); text-decoration: none; padding: 5px 8px; border-radius: var(--radius-sm); line-height: 1.2; } .foot__link:hover { background: var(--ink-hover); color: #fff; } /* Pushes sign-out to the right edge, level with the links. */ .foot__spacer { flex: 1; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid var(--ink-line); border-radius: var(--radius-sm); color: var(--ink-text); font-size: .9rem; cursor: pointer; line-height: 1; } .iconbtn:hover { background: var(--ink-hover); color: #fff; } /* ===== Main ===== */ .main { flex: 1; min-width: 0; padding: 24px 28px; } /* Centered content column that adapts to any screen width — the intranet's pattern. The layout wraps authed page content in .wrap. */ .wrap { max-width: var(--content-max); margin-inline: auto; } .page-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .page-head h1 { font-size: 1.4rem; font-weight: 650; } .sub { color: var(--muted); font-size: .87rem; margin-top: 4px; } /* ===== Cards & grid ===== */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; box-shadow: var(--card-shadow); } .card__title { font-size: 1rem; font-weight: 650; } .card__h3 { font-size: .85rem; font-weight: 650; margin: 12px 0 4px; } .card__sub { color: var(--muted); font-size: .8rem; margin: 4px 0 12px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; } .body { font-size: .88rem; white-space: pre-wrap; } /* ===== Stats ===== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 2px; } .stat__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; } .stat__value { font-size: 1.8rem; font-weight: 650; line-height: 1.1; } .stat__note { font-size: .72rem; color: var(--muted); } /* A breached appetite or an overdue review is the finding — it must read as one. */ .stat--bad { border-color: var(--red); background: var(--red-bg); } .stat--bad .stat__value { color: var(--red); } .stat--warn { border-color: var(--amber); background: var(--amber-bg); } .stat--warn .stat__value { color: var(--amber); } /* ===== Tables ===== */ .table { width: 100%; border-collapse: collapse; font-size: .85rem; } .table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } .table tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--surface-2); } .table-wrap { overflow-x: auto; } .mono { font-family: var(--mono); font-size: .8rem; } .muted { color: var(--muted); } /* ===== Pills, tags, badges ===== */ .pill { display: inline-block; min-width: 26px; text-align: center; padding: 2px 7px; border-radius: 999px; font-size: .75rem; font-weight: 700; font-family: var(--mono); } .pill--low { background: var(--green-bg); color: var(--green); } .pill--medium { background: var(--amber-bg); color: var(--amber); } .pill--high { background: var(--red-bg); color: var(--red); } .pill--critical { background: var(--red); color: var(--red-bg); } .tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 600; background: var(--brand-soft); color: var(--brand); } .tag--red { background: var(--red-bg); color: var(--red); } .tag--amber { background: var(--amber-bg); color: var(--amber); } .badge { font-size: .62rem; padding: 1px 5px; border-radius: 3px; background: var(--purple-bg); color: var(--purple); font-weight: 700; } .badge--owner { background: var(--brand); color: var(--on-brand); } .alert { background: var(--red-bg); color: var(--red); padding: 9px 12px; border-radius: var(--radius-sm); font-size: .82rem; } /* ===== Heat map ===== */ .heat { border-collapse: separate; border-spacing: 3px; } .heat__axis { font-size: .7rem; color: var(--muted); font-family: var(--mono); width: 22px; text-align: center; } .heat__cell { width: 40px; height: 34px; text-align: center; vertical-align: middle; border-radius: var(--radius-sm); font-weight: 700; font-size: .8rem; font-family: var(--mono); } .heat__cell--low { background: var(--green-bg); color: var(--green); } .heat__cell--medium { background: var(--amber-bg); color: var(--amber); } .heat__cell--high { background: var(--red-bg); color: var(--red); } .heat__cell--critical { background: var(--red); color: var(--red-bg); } /* An empty cell still shows its band, faintly: the grid is a legend as much as a count, so the shape of the scale must stay readable. */ .heat__cell--empty { opacity: .35; } .heat__legend { font-size: .7rem; color: var(--muted); margin-top: 8px; } /* ===== Key/value ===== */ .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .85rem; } .kv dt { color: var(--muted); font-size: .78rem; } /* ===== Filters ===== */ .filters { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .filter { padding: 4px 11px; border-radius: 999px; font-size: .8rem; text-decoration: none; background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .filter:hover { border-color: var(--line-strong); color: var(--text); } .filter--on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .filter--on:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); } /* ===== Forms ===== */ .form { display: grid; gap: 12px; max-width: 720px; } .form__row { display: flex; flex-wrap: wrap; gap: 12px; } .field { display: grid; gap: 4px; flex: 1; min-width: 160px; } .field--score { max-width: 150px; } .field__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; } .field__input { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .87rem; background: var(--surface-2); color: var(--text); width: 100%; } .field__input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .check { font-size: .82rem; display: flex; gap: 6px; align-items: center; } .scores { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; } .scores legend { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 0 6px; } /* ===== Buttons ===== Each variant owns its hover explicitly. The base `.btn:hover` must NOT set a background, or it would win on specificity (0,2,0) over `.btn--primary` (0,1,0) and leave white label text on a near-white fill. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .85rem; font-weight: 550; cursor: pointer; text-decoration: none; text-align: center; line-height: 1.3; } .btn:hover { background: var(--surface-2); border-color: var(--line-strong); } .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); } .btn--ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn--ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--text); } .btn--danger { background: var(--surface); border-color: var(--line); color: var(--red); } .btn--danger:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); } .btn--sm { padding: 4px 9px; font-size: .78rem; } /* In the sidebar the ghost button sits on the dark ink scale, not the page. */ .sidebar .btn--ghost { color: var(--ink-text); border-color: var(--ink-line); } .sidebar .btn--ghost:hover { background: var(--ink-hover); border-color: var(--ink-muted); color: #fff; } /* ===== Cmd+K palette ===== */ .cmdk { position: fixed; inset: 0; z-index: 50; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .cmdk[hidden] { display: none; } .cmdk__panel { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; max-height: 68vh; } .cmdk__input { width: 100%; padding: 15px 18px; border: none; border-bottom: 1px solid var(--line); font: inherit; font-size: 1rem; background: transparent; color: var(--text); } .cmdk__input:focus { outline: none; } .cmdk__input::placeholder { color: var(--muted); } .cmdk__results { overflow-y: auto; padding: 6px; } .cmdk__group { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; padding: 10px 12px 4px; } .cmdk__item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-size: .88rem; } /* Selection is keyboard-driven, so it must be a real fill, not a hover tint — the highlighted row has to be obvious without a pointer. */ .cmdk__item--sel { background: var(--brand); color: var(--on-brand); } .cmdk__item--sel .cmdk__sub { color: var(--on-brand); opacity: .75; } .cmdk__title { flex-shrink: 0; } .cmdk__sub { color: var(--muted); font-size: .78rem; margin-left: auto; padding-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; } .cmdk__empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: .85rem; } .cmdk__foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: .7rem; color: var(--muted); background: var(--surface-2); } .cmdk__foot kbd { font-family: var(--mono); font-size: .68rem; padding: 1px 4px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); } /* ===== Login / no-access ===== */ .login, .noaccess { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login__panel, .noaccess__panel { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; display: grid; gap: 12px; } .noaccess__panel { max-width: 460px; text-align: center; justify-items: center; } .login__title { font-size: 1.2rem; font-weight: 650; } .login__hint, .login__dev { font-size: .8rem; color: var(--muted); } .noaccess__title { font-size: 1.15rem; font-weight: 650; } .noaccess__body { font-size: .88rem; } .noaccess__hint { font-size: .8rem; color: var(--muted); } /* ===== Public trust center ===== */ .public { max-width: 860px; margin: 0 auto; padding: 48px 24px; } .public__head { text-align: center; margin-bottom: 40px; } .public__title { font-size: 2rem; font-weight: 680; margin: 18px 0 10px; } .public__lede { color: var(--muted); font-size: 1rem; max-width: 620px; margin: 0 auto; } .public__section { margin-bottom: 34px; } .public__section h2 { font-size: 1.1rem; font-weight: 650; margin-bottom: 12px; } .public__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .public__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .public__item h3 { font-size: .9rem; font-weight: 650; margin-bottom: 5px; } .public__item p { font-size: .82rem; color: var(--muted); } .public__foot { border-top: 1px solid var(--line); padding-top: 18px; text-align: center; } /* ===== Connectors (MCP) ===== */ .token { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .85rem; } .token:last-child { border-bottom: none; } .token__name { font-weight: 550; } .token__meta { color: var(--muted); font-size: .76rem; margin-left: auto; } .secret { font-family: var(--mono); font-size: .8rem; word-break: break-all; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; } @media (max-width: 860px) { body { display: block; } .sidebar { width: auto; height: auto; position: static; } .main { padding: 18px; } .cmdk { padding: 8vh 10px 10px; } } /* ===== Inline forms & misc (registers) ===== */ .inlineform { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 4px 0; } .triage-row td { background: var(--surface-2); } .btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .links { list-style: none; display: grid; gap: 6px; font-size: .85rem; } .links li { display: flex; gap: 8px; align-items: center; } /* A card fronting a lapsed statutory deadline reads as the alert it is. */ .card--alert { border-color: var(--red); } /* ===== Checkbox grid (control→requirement mapping) ===== */ .checkgrid { display: grid; grid-template-columns: 1fr; gap: 4px; max-height: 340px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; } .permcheck { display: flex; gap: 8px; align-items: start; padding: 6px 8px; border-radius: var(--radius-sm); font-size: .85rem; cursor: pointer; } .permcheck:hover { background: var(--surface-2); } .permcheck input { margin-top: 2px; } /* ===== Answer library ===== */ .answers { display: grid; gap: 10px; } .answer { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; } .answer__q { font-weight: 600; font-size: .9rem; margin-bottom: 4px; } .answer__a { font-size: .85rem; color: var(--text); white-space: pre-wrap; } .answer__tags { font-size: .72rem; color: var(--muted); margin-top: 6px; font-family: var(--mono); } /* ===== Acknowledgment roster ===== */ .ack { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; margin-top: 4px; } .ack li { white-space: nowrap; } .ack--pending li { color: var(--muted); } /* ===== Integrations (evidence sources) ===== */ .integ { border-top: 1px solid var(--line); padding: 12px 0; } .integ:first-of-type { border-top: none; } .integ__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .integ__name { font-weight: 600; font-size: .92rem; } .integ__row { display: flex; align-items: center; gap: 8px; } .integ__webhook { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 8px; } /* ===== Audit package (print-friendly) ===== */ .pkg { max-width: 900px; margin: 0 auto; padding: 32px 24px; } .pkg__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 16px; margin-bottom: 20px; } .pkg__brand { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; } .pkg__head h1 { font-size: 1.6rem; margin: 4px 0; } .pkg__meta { color: var(--muted); font-size: .85rem; } .pkg__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; } .pkg__ctl { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; } .pkg__ctl select { font: inherit; font-size: .85rem; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } .pkg__summary { display: flex; gap: 28px; margin-bottom: 24px; } .pkg__n { display: block; font-size: 1.6rem; font-weight: 650; font-family: var(--font-head); } .pkg__l { font-size: .78rem; color: var(--muted); } .pkg__section { margin-bottom: 28px; } .pkg__section h2 { font-size: 1.05rem; margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .pkg__table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-bottom: 8px; } .pkg__table th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 5px 8px; border-bottom: 1px solid var(--line); } .pkg__table td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .pkg__control { margin-bottom: 16px; } .pkg__ctlhead { font-size: .85rem; margin-bottom: 6px; } .pkg__none { color: var(--muted); font-size: .82rem; } .pkg__foot { color: var(--muted); font-size: .72rem; border-top: 1px solid var(--line); padding-top: 12px; } @media print { .no-print { display: none !important; } body { background: #fff; } .pkg { max-width: none; padding: 0; } .pkg__control { break-inside: avoid; } } .pkg__filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 20px; } .pkg__fl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }