@charset "UTF-8";
/* portno.css v2.2, 1 October 2026 (v2.0 and v2.1 earlier the same day; v2.2: sheet picker and sign-out styling, .account links). v2 reworks navigation: one declared menu drawn as a top bar or rail on desktop, a tab bar on a phone (top in a browser, pinned at the bottom as an installed web app) with a More sheet; sun/moon theme toggle, no Auto. v1.4 added --star. The one stylesheet for Ant's personal sites.
   Template A, Slate and Cobalt. Every colour here was checked against WCAG 2.2 AA in both modes.
   A site sets only its name and its icon (a white pictogram on the personal purple). Nothing else is per site.
   Theme: light by default. The html element carries data-theme="dark" for dark; anything else is light. theme.js sets it from the sun/moon toggle (no Auto since v2.0).
   Dark ground is a lifted, low-blue grey (not near-black): on a page of numbers the meaning colours must carry, and they read best on this. */

:root {
  --site: #6B3FA0;                 /* the personal purple: icon background on every site. Never orange (OLBG). */
  --bg: #f4f6f9;  --panel: #ffffff;  --panel2: #eef1f5;
  --ink: #111827; --muted: #4b5563;  --faint: #6b7280;  --line: #d5dbe3;  --line2: #e7ebf0;
  --action: #1d4ed8;  --action-ink: #ffffff;  --action-hover: #1e40af;  --action-soft: #e4ebfb;  --link: #1e40af;
  --good: #166534; --good-bg: #dcfce7;  --warn: #713f12; --warn-bg: #fef3c7;  --bad: #991b1b; --bad-bg: #fee2e2;
  --info: #1e40af; --info-bg: #dbeafe;  --neutral: #374151; --neutral-bg: #e5e7eb;
  --mid: #4d7c0f; --mid-bg: #ecfccb;    /* v1.2: the step between good and warn, for a five-level scale */
  --star: #a16207;                      /* v1.4: gold for rating stars (travel), a true gold, never orange; 4.9:1 on white */
  --shadow: 0 1px 2px rgba(17,24,39,.06), 0 4px 12px rgba(17,24,39,.06);
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Figtree", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 8px;  --gap: 16px;  --nav-h: 52px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1e2227;  --panel: #282d34;  --panel2: #31373f;
  --ink: #e6eaef; --muted: #aab3bd;  --faint: #8d97a2;  --line: #3d454f;  --line2: #343b44;
  --action: #6c9cf5;  --action-ink: #0b1220;  --action-hover: #88b0f8;  --action-soft: #243553;  --link: #9dbcff;
  --good: #8fe0a8; --good-bg: #1d4530;  --warn: #fde68a; --warn-bg: #4a3d16;  --bad: #f4a6a0; --bad-bg: #54241f;
  --info: #9dbcff; --info-bg: #243553;  --neutral: #c9d1da; --neutral-bg: #3d454f;
  --mid: #cdea8b; --mid-bg: #38481a;
  --star: #f0b43c;
  --shadow: none;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }  h2 { font-size: 1.3rem; margin-top: 2rem; }  h3 { font-size: 1.05rem; margin-top: 1.4rem; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 3px; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--muted); }  .faint { color: var(--faint); }  .small { font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- layout ---------- */
/* Width: one width per site. Data pages use the full window up to 1440px; reading pages are .narrow. Never a page that leaves half the desktop empty. */
.page { max-width: 1440px; margin: 0 auto; padding: 20px var(--gap) 64px; }
.page.narrow { max-width: 760px; }
.page.wide { max-width: none; }
.prose { max-width: 68ch; }   /* long reading text inside a full-width page; the page width does not change */
/* on-this-page list for long pages: a row of chip links under the header */
.onpage { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.onpage a { text-decoration: none; }
/* a who-are-you picker in the rail or the top bar */
.rail .picker { padding: 6px 8px 10px; }  .rail .picker select { font-size: .9rem; padding: 6px 8px; }
.nav .picker select { width: auto; font-size: .9rem; padding: 5px 8px; }
.header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0 20px; }
.header h1 { margin: 0; }
.header .lede { color: var(--muted); margin: 0; flex-basis: 100%; }
.header .actions { margin-left: auto; display: flex; gap: 8px; }
.updated { color: var(--faint); font-size: .8rem; }

/* ---------- icons ---------- */
.i { width: 22px; height: 22px; flex: none; }
.menu a .i, .tabbar .i, .sheet .i { stroke-width: 1.8; }

/* ---------- navigation. The page declares one <ul class="menu"> in priority order; this draws every form of it ---------- */
/* desktop top bar (up to five sections) */
.nav { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--line); }
.nav .in { max-width: 1440px; margin: 0 auto; padding: 0 var(--gap); display: flex; align-items: center; gap: 18px; height: var(--nav-h); }
.nav.wide .in { max-width: none; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 700 1.05rem var(--display); margin-right: 6px; white-space: nowrap; }
.brand .icon { width: 26px; height: 26px; border-radius: 7px; background: var(--site); color: #fff; display: grid; place-items: center; font: 700 .8rem var(--display); flex: none; overflow: hidden; }
.brand .icon:has(img) { background: none; }
.brand .icon img { width: 100%; height: 100%; display: block; }
.menu { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.nav .menu a { color: var(--muted); text-decoration: none; font-weight: 500; padding: 15px 0 13px; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; }
.nav .menu a .i { display: none; }                      /* text only in the desktop bar */
.nav .menu a:hover { color: var(--ink); }
.nav .menu a[aria-current="page"] { color: var(--action); border-bottom-color: var(--action); }
.nav .util { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.theme-toggle, .util .signout, .util .account, .rail .util .account { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; text-decoration: none; padding: 0; }
.theme-toggle:hover, .util .signout:hover, .util .account:hover { color: var(--ink); background: var(--panel2); }
.util .signout span, .util .account span { display: none; }   /* icon only on desktop; the label is read by screen readers via aria-label */
.nav .picker { margin-left: 6px; }
.nav .picker select { width: auto; font-size: .9rem; padding: 5px 8px; }

/* desktop side rail (six or more sections) */
.rail-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.rail { background: var(--panel); border-right: 1px solid var(--line); padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.rail .brand { padding: 4px 8px 14px; }
.rail .menu { flex-direction: column; gap: 2px; }
.rail .menu a { color: var(--muted); text-decoration: none; font-weight: 500; padding: 8px 10px; border-radius: 6px; display: flex; align-items: center; gap: 10px; }
.rail .menu a .i { width: 20px; height: 20px; }
.rail .menu a:hover { background: var(--panel2); color: var(--ink); }
.rail .menu a[aria-current="page"] { background: var(--action-soft); color: var(--action); }
.rail .menu .group { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 14px 10px 4px; list-style: none; }
.rail .util { margin-top: auto; padding: 10px 6px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.rail .picker { padding: 6px 8px 10px; }  .rail .picker select { font-size: .9rem; padding: 6px 8px; }
.rail-bar { display: none; }

/* phone: a slim top row with the brand only, the sections in a tab bar, everything else in the More sheet */
.tabbar, .sheet, .backdrop { display: none; }
@media (max-width: 720px) {
  .nav .in { height: var(--nav-h); }
  .nav .menu, .nav .util, .nav .picker, .rail { display: none; }
  .rail-layout { grid-template-columns: 1fr; }
  .rail-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; background: var(--panel); border-bottom: 1px solid var(--line); padding: 0 var(--gap); height: var(--nav-h); }
  .tabbar { display: flex; z-index: 25; background: var(--panel); }
  .tabbar a, .tabbar .more { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 8px 4px 7px; color: var(--muted); text-decoration: none; font: 500 .68rem/1 var(--body); letter-spacing: .01em; background: none; border: 0; cursor: pointer; }
  .tabbar a .i, .tabbar .more .i { width: 24px; height: 24px; }
  .tabbar a[aria-current="page"] { color: var(--action); }
  .tabbar a[aria-current="page"] .i { stroke-width: 2.2; }
  .tabbar .more[aria-expanded="true"] { color: var(--action); }
  /* in a browser tab: the row sits under the brand, because Safari's own toolbar owns the bottom */
  html.browser .tabbar { position: sticky; top: var(--nav-h); border-bottom: 1px solid var(--line); }
  html.browser .filters { top: calc(var(--nav-h) + 56px); }
  /* installed as a web app: pinned to the bottom, clear of the home indicator */
  html.app .tabbar { position: fixed; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0); }
  html.app body { padding-bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0)); }
  /* the More sheet */
  .backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30; }
  .sheet.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--panel); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); max-height: 80vh; overflow: auto; padding-bottom: env(safe-area-inset-bottom, 0); }
  .sheet-in { padding: 12px 12px 16px; }
  .sheet .close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .sheet-list { list-style: none; margin: 8px 0 0; padding: 0; }
  .sheet-list a { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-weight: 500; }
  .sheet-list a:hover, .sheet-list a[aria-current="page"] { background: var(--action-soft); color: var(--action); }
  .sheet-util { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
  .sheet-util .theme-toggle, .sheet-util .signout, .sheet-util .account { display: flex; align-items: center; width: auto; height: auto; justify-content: flex-start; gap: 12px; padding: 12px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--ink); font: 500 1rem var(--body); text-decoration: none; }
  .sheet-util .signout span, .sheet-util .account span { display: inline; }
  .sheet-util .picker { padding: 8px 10px; }
  .sheet-util .picker select { width: 100%; font: 1rem var(--body); color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 10px; }
}
@media (min-width: 721px) { .tabbar, .sheet, .backdrop { display: none !important; } }

/* ---------- buttons ---------- */
.btn, button.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius); font: 600 .9rem var(--body); border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap; }
.btn.primary { background: var(--action); color: var(--action-ink); }
.btn.primary:hover { background: var(--action-hover); }
.btn.secondary { background: transparent; color: var(--action); border-color: var(--action); }
.btn.secondary:hover { background: var(--action-soft); }
.btn.quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn.quiet:hover { color: var(--ink); background: var(--panel2); }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); }
.btn.small { padding: 5px 10px; font-size: .8rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; }

/* ---------- pills (meaning) ---------- */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.neutral { background: var(--neutral-bg); color: var(--neutral); }
/* the verdict scale shared by ent and travel. v1.2 adds v-good: ent's scale is
   Top / Great / Good / OK / Bad and had only four steps to sit on, so Good and
   Great were the same pill. --mid is a real step between green and amber, 4.6:1
   in light and 7.5:1 in dark. */
.pill.v-great { background: var(--good-bg); color: var(--good); }
.pill.v-good { background: var(--mid-bg); color: var(--mid); }
.pill.v-ok { background: var(--warn-bg); color: var(--warn); }
.pill.v-bad { background: var(--bad-bg); color: var(--bad); }
.pill.v-want { background: var(--info-bg); color: var(--info); }


/* ---------- fixed colours: data scales and solid meanings (v1.2) ----------
   These are flat colour pairs that look the same in both themes, so they are NOT redefined per theme.
   Never build a scale by mixing a colour towards a neutral: in dark mode it turns grey, brown and pink (bets, 30 Sep 2026).
   Ant's own scale from his hand-kept sheet: pale, mid, deep blue for a lead; the same in red for a deficit; yellow for level. */
:root {
  --win1-bg: #bfdbfe; --win1: #1e3a8a;   /* narrow lead */
  --win2-bg: #2563eb; --win2: #ffffff;   /* comfortable */
  --win3-bg: #1e3a8a; --win3: #dbeafe;   /* two touchdowns or more */
  --lose1-bg: #fecaca; --lose1: #7f1d1d;
  --lose2-bg: #dc2626; --lose2: #ffffff;
  --lose3-bg: #7f1d1d; --lose3: #fee2e2;
  --tie-bg: #fde047; --tie: #422006;     /* level: true yellow, never amber or orange */
  --wait-bg: #fef08a; --wait: #713f12;   /* not started */
  --good-solid: #15803d; --good-solid-ink: #f0fdf4;
  --bad-solid: #b91c1c;  --bad-solid-ink: #fef2f2;
  --warn-solid: #facc15; --warn-solid-ink: #422006;
  --info-solid: #2563eb; --info-solid-ink: #ffffff;
}
.cell.win1 { background: var(--win1-bg); color: var(--win1); }  .cell.win2 { background: var(--win2-bg); color: var(--win2); }  .cell.win3 { background: var(--win3-bg); color: var(--win3); }
.cell.lose1 { background: var(--lose1-bg); color: var(--lose1); } .cell.lose2 { background: var(--lose2-bg); color: var(--lose2); } .cell.lose3 { background: var(--lose3-bg); color: var(--lose3); }
.cell.tie { background: var(--tie-bg); color: var(--tie); }  .cell.wait { background: var(--wait-bg); color: var(--wait); }
/* state-filled table cells: the whole cell carries the meaning, for grids read by column */
.cell.good { background: var(--good-bg); color: var(--good); }  .cell.warn { background: var(--warn-bg); color: var(--warn); }  .cell.bad { background: var(--bad-bg); color: var(--bad); }
.cell.info { background: var(--info-bg); color: var(--info); }  .cell.neutral { background: var(--neutral-bg); color: var(--neutral); }
.cell.live { box-shadow: inset 3px 0 0 var(--action); }   /* a bar down the leading edge: still in play */
.cell.ring { box-shadow: inset 0 0 0 2px var(--line); }     /* ringed: in doubt, not settled */
/* solid meanings, for a result that must shout */
.pill.good-solid, .cell.good-solid { background: var(--good-solid); color: var(--good-solid-ink); }
.pill.bad-solid, .cell.bad-solid { background: var(--bad-solid); color: var(--bad-solid-ink); }
.pill.warn-solid, .cell.warn-solid { background: var(--warn-solid); color: var(--warn-solid-ink); }
.pill.info-solid, .cell.info-solid { background: var(--info-solid); color: var(--info-solid-ink); }
.pill.v-top { background: var(--good-solid); color: var(--good-solid-ink); }
.pill.v-worst { background: var(--bad-solid); color: var(--bad-solid-ink); }
/* a landed / gone / live / to come bar under a summary */
.bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); }
.bar > i { display: block; height: 100%; }
.bar .good { background: var(--good-solid); } .bar .bad { background: var(--bad-solid); } .bar .live { background: var(--info-solid); } .bar .wait { background: var(--wait-bg); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table.data { border-collapse: collapse; width: 100%; font-size: .92rem; }
table.data th, table.data td { padding: 9px 12px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line2); }
table.data thead th { position: sticky; top: 0; background: var(--panel); border-top: 0; border-bottom: 1px solid var(--line); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable::after { content: "\2195"; opacity: .35; margin-left: 5px; font-size: .8em; }
table.data th[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; color: var(--action); }
table.data th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; color: var(--action); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--panel2); }
table.data tr.selected { background: var(--action-soft); }
table.data td.key { font-weight: 600; }
table.data .sticky-col { position: sticky; left: 0; background: var(--panel); z-index: 1; }

/* ---------- cards (only with a picture or one action) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.cards.roomy { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }   /* a poster plus a row of buttons */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
.card img { border-radius: 6px; margin-bottom: 8px; }
.card .foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.card .foot .btn { margin-left: auto; }

/* ---------- panel and notices ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.notice { border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; font-size: .92rem; border: 1px solid transparent; }
.notice.info { background: var(--info-bg); color: var(--info); }
.notice.good { background: var(--good-bg); color: var(--good); }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.bad { background: var(--bad-bg); color: var(--bad); }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; border: 1px dashed var(--line); border-radius: var(--radius); }
.stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); }
.stat .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat .tile .k { display: block; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.stat .tile .v { display: block; font: 700 1.5rem/1.1 var(--display); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* ---------- filter bar: search, chips, sort in one row ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; position: sticky; top: var(--nav-h); background: var(--bg); padding: 8px 0; z-index: 10; }
.filters input[type="search"] { flex: 1 1 200px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 500 .85rem var(--body); cursor: pointer; }
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--action-soft); color: var(--action); border-color: var(--action); }
.chip .x { opacity: .6; }
.more { display: flex; justify-content: center; margin: 16px 0; }

/* ---------- forms ---------- */
/* form rules are scoped to .field, .filters and .signin (v1.3): a site's own forms are untouched unless they opt in with .field */
.field label, .signin label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.field input, .field select, .field textarea, .filters input, .filters select, .signin input, .signin select, .rail select { font: 1rem var(--body); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus, .filters input:focus, .signin input:focus { border-color: var(--action); outline: 2px solid var(--action-soft); }
.filters input[type="search"] { padding-left: 12px; }
.field input[type="checkbox"], .field input[type="radio"] { width: auto; accent-color: var(--action); }
.field { margin: 0 0 14px; }
.field .help { color: var(--faint); font-size: .8rem; margin-top: 4px; }
.field .err { color: var(--bad); font-size: .85rem; margin-top: 4px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

/* ---------- sign-in page ---------- */
.signin { min-height: 100vh; display: grid; place-items: center; padding: var(--gap); }
.signin .box { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; box-shadow: var(--shadow); }
.signin .brand { margin-bottom: 18px; }
.signin .btn { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------- footer ---------- */
.foot { color: var(--faint); font-size: .8rem; border-top: 1px solid var(--line); margin-top: 48px; padding-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; }