/* Atlas · Bento theme for every page.
   Loaded last, so it re-points the shared tokens every page already uses and restyles the shared shell.
   Palette: warm grey page, white tiles, ink text, one cobalt signature panel per page,
   lime for "good / go", coral for "urgent", lilac for costs. System sans throughout. */

:root {
  --canvas: #f2f2f0;
  --paper: #ffffff;
  --paper-card: #ffffff;
  --paper-warm: #f2f2f0;
  --paper-edge: #e7e7e4;
  --ink: #111111;
  --ink-soft: #3a3a3f;
  --ink-mid: #4a4a50;
  --ink-muted: #62626a;
  --ink-faded: #6a6a70;
  --black: #111111;
  --green: #111111;          /* was the accent green: now ink (primary buttons, active states) */
  --green-deep: #2743ff;     /* was the deep green panel: now the cobalt signature panel */
  --amber: #d4f062;          /* was amber highlight: now lime */
  --amber-deep: #b9d63a;
  --sage: #dfe4ff;           /* was soft green: now soft cobalt */
  --honey: #eef8c6;          /* was honey: now soft lime */
  --coral: #c9431a;          /* text-safe coral */
  --red: #b91c1c;
  --negative: #b91c1c;
  --lilac: #cdbdff;
  --cobalt: #2743ff;
  --cobalt-2: #dfe4ff;
  --cobalt-ink: #1a2ccc;
  --lime: #d4f062;
  --lime-soft: #eef8c6;
  --coral-bright: #ff6a45;
  --radius: 22px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --shadow-soft: none;
  --shadow-card: 0 20px 50px #00000026;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: var(--sans);
  --font-display: var(--sans);
}

/* ---------- Base ---------- */
body.atlas-app { background: var(--canvas); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.atlas-app :is(p, li) a:not([class]) { color: var(--cobalt-ink); }
body.atlas-app input[type=checkbox], body.atlas-app input[type=radio], body.atlas-app input[type=range] { accent-color: var(--cobalt); }
body.atlas-app :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
body.atlas-app :is(h1, h2, h3) { font-family: var(--sans); }
.at-skip { background: var(--ink); color: #fff; }

/* ---------- Header: the floating capsule ---------- */
.at-header { max-width: 1180px; padding: 16px 28px 0; }
.at-nav {
  position: relative; z-index: 60; /* lift the nav (and its More menu) above page content */ gap: 16px; min-height: 0; padding: 8px 8px 8px 20px;
  background: #ffffffd9; border: 0; border-radius: 999px;
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 1px 0 #0000000d, 0 8px 24px #0000000d;
}
.at-brand { font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: -.03em; color: var(--ink); gap: 0; }
.at-brand b { color: var(--cobalt); }
.at-brand-mark { display: none; }
.at-links { gap: 4px; }
.at-links a { padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.at-links a:hover { background: transparent; color: var(--ink); }
.at-links a[aria-current=page] { background: var(--ink); color: #fff; }
.at-tools summary { padding: 10px 16px; border-radius: 999px; background: var(--canvas); font-size: 14px; font-weight: 500; }
.at-tools summary::after { content: none; }
.at-tools[open] summary { background: var(--ink); color: #fff; }
.at-tools-menu { top: 50px; width: 240px; border: 0; border-radius: 20px; box-shadow: var(--shadow-card); }
.at-tools-menu a { padding: 11px 12px; }

/* ---------- Page heading: a white status tile ---------- */
.at-heading {
  align-items: flex-end; gap: 20px; margin: 20px 0 14px; padding: 26px;
  background: var(--paper); border-radius: var(--radius-xl);
}
.at-heading h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(38px, 5vw, 68px); line-height: .98; letter-spacing: -.045em; }
.at-heading p { font-size: 17px; margin-top: 14px; color: var(--ink-muted); letter-spacing: -.01em; }
.at-kicker { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink-muted); }
.at-phase-chip { padding: 10px 16px; background: var(--canvas); border: 0; font-size: 14px; }
.at-phase-chip-label { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.at-phase-chip strong { font-weight: 600; }
.at-phase-chip-action { color: var(--cobalt-ink); text-decoration: none; font-weight: 500; }
.at-phase-chip:hover { background: var(--cobalt-2); }
.at-phase-chip--select { position: relative; cursor: pointer; }
.at-phase-chip--select select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center; padding: 2px 18px 2px 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.at-phase-chip--select select:focus-visible { outline: none; }
.at-phase-chip--select:focus-within { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* ---------- Layout, sections ---------- */
.at-main { max-width: 1240px; padding: 0 24px 48px; }
.at-section-heading h2 { font-family: var(--sans); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }

/* ---------- Buttons, inputs ---------- */
.at-primary, .at-secondary { border-radius: 999px; font-weight: 600; }
.at-primary { background: var(--ink); color: #fff; border: 0; }
.at-primary:hover { background: #2a2a2e; }
.at-secondary { background: var(--canvas); color: var(--ink); border: 0; }
.at-secondary:hover { background: var(--paper-edge); }
.at-text-button { color: var(--cobalt-ink); text-decoration: none; font-weight: 500; }
.at-text-button:hover { text-decoration: underline; }
.at-input { background: var(--canvas); border: 0; border-radius: 14px; }
.at-toast { background: var(--ink); border-radius: 999px; font-weight: 500; }
.at-notice { background: #fff4da; border: 0; border-radius: 16px; }
.at-module-hint { background: var(--paper); border-radius: 20px; }

/* ---------- More / disclosure ---------- */
details.at-more { border-radius: var(--radius-xl); }

/* ---------- Footer ---------- */
.at-footer { max-width: 1240px; color: var(--ink-muted); }
.at-footer a { color: var(--ink-muted); text-decoration: none; }
.at-footer a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .at-header { padding: 12px 12px 0; }
  .at-nav { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-radius: 24px; }
  .at-brand { margin-right: auto; }
  .at-links { order: 3; flex-basis: 100%; justify-content: space-between; overflow-x: auto; }
  .at-links a { padding: 9px 11px; font-size: 13px; }
  .at-heading { flex-direction: column; align-items: flex-start; margin: 12px 0 10px; padding: 20px; border-radius: 24px; }
  .at-heading h1 { font-size: 40px; }
  .at-heading p { font-size: 16px; }
  .at-main { padding: 0 12px 40px; }
}

/* ---------- Week: the fortnight is the cobalt signature panel, same language as Today's countdown ---------- */
.fortnight-panel { background: var(--cobalt); border-color: var(--cobalt); box-shadow: none; }
.fortnight-panel-sub { color: #e3e7ff; letter-spacing: .02em; text-transform: none; font-size: 12px; }
.fort-day { background: #ffffff1f; border: 0; color: #fff; }
.fort-day.kids { background: #fff; color: var(--cobalt-ink); border: 0; }
.fort-day.empty { color: #e3e7ff; }
.fort-day.today { box-shadow: 0 0 0 3px var(--lime); }
.fort-day-name { opacity: .85; }
.fort-day.empty { color: #fff; }
.fortnight-panel .upcoming-line { color: #fff; }
.fortnight-panel .upcoming-when { color: #e3e7ff; }
/* Child colours as text: darker versions so names stay readable on their tints */
body[data-module=week] { --child1-color: #3d5a8a; }
.kid-chip-name { color: var(--ink); font-weight: 600; }
.kid-chip-age { color: var(--ink-soft); opacity: 1; }
.event-chip.child2 { color: #a8360f; }

/* ---------- Text that sat on the old lime/amber: keep it readable ---------- */
.dossier-row-val.purple { color: var(--cobalt-ink); }
.pairing-key-admin { --pairing-key-color: #56650c; }
.pairing-key-week { --pairing-key-color: #3f6b27; }

/* ---------- Quiet labels on black panels ---------- */
.promise-band .eyebrow, .rhythm-band .eyebrow, .is-col.is .is-col-label,
.hero-pro-meta, .phase-section-kicker, .access-note, .access-card-kicker { color: rgba(255,255,255,.72); }

/* ---------- Page heading: side column (phase chip, and on Week the kids) ---------- */
.at-heading-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.at-kids { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; text-decoration: none; border-radius: 999px; }
.at-kid { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; background: var(--canvas); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); }
.at-kid b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: var(--ink); }
.at-kid small { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.at-kids:hover .at-kid { background: var(--cobalt-2); }
@media (max-width: 720px) { .at-heading-side { align-items: flex-start; } .at-kids { justify-content: flex-start; } }

/* ---------- Week: full-width fortnight, calendar left, day cards right ---------- */
body[data-module=week] .container { max-width: 1124px; }
body[data-module=week] .hero { padding: 0 0 16px; }
.fn-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.fn-cal, .fn-cards { min-width: 0; }
.fn-cards { display: flex; flex-direction: column; gap: 10px; }
.fn-cards > * { margin: 0 !important; }
@media (max-width: 900px) { .fn-split { grid-template-columns: 1fr; gap: 12px; } }

/* Kids & custody cycle (set-once section at the bottom; at the top on first run) */
.cycle-section { border: 0; border-radius: var(--radius-xl); }
.cycle-section.is-first-run { margin: 0 0 16px; box-shadow: 0 0 0 3px var(--cobalt); }
.family-kids { margin-bottom: 24px; }
.family-kids-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kid-chip { gap: 10px; padding: 5px 16px 5px 5px; background: var(--canvas); border-radius: 999px; color: var(--ink); }
.kid-chip-avatar { width: 34px; height: 34px; color: var(--ink); font-family: var(--sans); font-size: 14px; }
.kid-chip-name { font-size: 14px; }
.kid-chip-age { font-size: 12px; }
.family-edit { min-height: 44px; }
.pattern-help { font-family: var(--sans); font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }
.pattern-day { border: 0; background: var(--canvas); }
.pattern-day.mine { background: var(--cobalt); color: #fff; }
.pattern-day.mine .pattern-day-name, .pattern-day.mine .pattern-day-owner { color: #fff; }

/* ---------- Sentences that used the display serif read as body text, not bold headings ---------- */
.phase-context, .flow-note, .anchor-input, .pattern-help, .legal-signoff {
  font-family: var(--sans); font-weight: 400; letter-spacing: 0;
}
.savings-meta-item input, .income-input-group input, .tc-field-input, .tc-modal-input { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }

/* ---------- Progress bars on black panels: visible track, lime fill ---------- */
.snap-bar { background: rgba(255,255,255,.2); height: 10px; }
.snap-bar-fill { background: var(--lime); }

/* ---------- Guides: the Scripts tab title is a section title, not a second page headline ---------- */
.conv-title { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; }
@media (max-width: 720px) { .cycle-section-head .card-meta { display: none; } }

/* ---------- Text that used amber-deep (now a lime shade that can't carry text) ---------- */
.snap-stat-val.warn, .metric-val.amber { color: var(--coral); }
.snap-stat-val.purple { color: var(--cobalt-ink); }
button.tc-row-est.tc-set-est { color: var(--cobalt-ink); }
.job-num { color: var(--ink); }
/* Print pages: the wordmark accent is the cobalt dot, like the app header */
.print-logo-accent, .cover-logo-accent, .print-header-logo-accent, .print-logo span { color: var(--cobalt); }
.entry-type.communication { background: #ece6ff; color: #4b2fb3; }
.fridge-meal-date { color: var(--ink-soft); }

/* =====================================================================
   HERO COLOUR LOGIC — one colour per area of life, the same everywhere:
     Cobalt  #2743ff  Week: time, the fortnight, the kids  (Today countdown, Week fortnight)
     Lime    #d4f062  Money                                (Today money tile, Money "at a glance")
     Lilac   #cdbdff  Records and separation costs         (Today record tile, Records "record so far")
     Mint    #bfe8d6  Goals                                (Goals overall progress)
     Black   #111111  Needs you: attention, right now      (Today "Needs you", Admin "focus now" sections)
     Soft cobalt #dfe4ff  Phase guidance notes
   White tiles carry everything else.
   ===================================================================== */
:root { --mint: #bfe8d6; }

/* Money: lime */
body[data-module=money] .snap-panel { background: var(--lime); border-color: var(--lime); color: var(--ink); box-shadow: none; }
body[data-module=money] .snap-panel-head { color: var(--ink); font-size: 12px; }
body[data-module=money] .snap-bar { background: rgba(255,255,255,.75); }
body[data-module=money] .snap-bar-spent { background: var(--ink); }
body[data-module=money] .snap-bar-legend, body[data-module=money] .snap-bar-legend-item strong { color: var(--ink); }
body[data-module=money] .snap-bar-legend-dot.light { background: #fff; border-color: rgba(17,17,17,.25); }
body[data-module=money] .snap-stat { border-color: transparent; }

/* Records: lilac */
.summary-panel { background: var(--lilac); color: var(--ink); box-shadow: none; }
.summary-label, .summary-stat-label, .summary-balance-note, .summary-export-hint { color: #2e2350; }
.summary-divider { border-top-color: rgba(17,17,17,.15); }
.summary-export { background: var(--ink); color: #fff; }
.summary-export:hover { background: #2a2a2e; }

/* Goals: mint */
body[data-module=goals] .snap-panel { background: var(--mint); border-color: var(--mint); color: var(--ink); box-shadow: none; }
body[data-module=goals] .snap-bar { background: rgba(255,255,255,.7); }
body[data-module=goals] .snap-bar-fill { background: var(--ink); }
body[data-module=goals] .snap-stat { border-color: transparent; }
body[data-module=goals] .snap-stat.hero .snap-stat-val { color: var(--ink); }

/* Phase guidance notes: soft cobalt */
.flow-note { background: var(--cobalt-2); color: var(--ink); }
.flow-note-title { color: var(--ink); }
.flow-note span { color: var(--ink-soft); }

/* ---------- Goals: full-width mint hero. Bar across the top; big % | four stats | anchor ---------- */
body[data-module=goals] .hero { padding: 0 0 16px; }
.goals-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr); gap: 12px; padding: 24px; }
.goals-hero .snap-bar { grid-column: 1 / -1; margin: 0 0 4px; }
.goals-hero .snap-stats { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0; }
.goals-hero .snap-stat { padding: 16px 18px; border-radius: 18px; }
.goals-hero .snap-stat.hero { grid-column: 1; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 24px; }
.goals-hero .snap-stat.hero .snap-stat-val { font-size: clamp(56px, 6vw, 88px); line-height: .9; letter-spacing: -.05em; }
.goals-hero .anchor-card { margin: 0; display: flex; flex-direction: column; }
.goals-hero .anchor-input { flex: 1; min-height: 90px; }
body[data-module=goals] .print-action-row { display: flex; gap: 10px; margin: 14px 0 0; }
@media (max-width: 900px) {
  .goals-hero { grid-template-columns: 1fr; padding: 18px; }
  .goals-hero .snap-stats { grid-template-columns: 1fr 1fr; }
  .goals-hero .snap-stat.hero { grid-column: 1 / -1; grid-row: auto; }
  .goals-hero .snap-stat.hero .snap-stat-val { font-size: 56px; }
}

/* =====================================================================
   No coloured edge strokes. Status is carried by a tinted card and a label.
   Kids days: soft cobalt card + cobalt label. Co-parent / solo days: white card + grey label.
   ===================================================================== */
.day-block { border: 1px solid var(--paper-edge); border-left-width: 1px; border-left-color: var(--paper-edge); border-radius: 18px; }
.day-block.both { background: var(--cobalt-2); border-color: transparent; }
.day-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.day-head .day-name { margin: 0; font-size: 16px; }
.day-tag { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.day-tag.kids, .tomorrow-tag.kids { background: var(--cobalt); color: #fff; }
.day-tag.away, .tomorrow-tag.solo { background: var(--canvas); color: var(--ink-muted); }
.day-block.both .event-chip.both { background: #fff; }
.day-block.both .event-chip.child1, .day-block.both .event-chip.child2 { box-shadow: inset 0 0 0 1px rgba(17,17,17,.08); }
/* Week: today's card in the fortnight panel */
.todays-run-card { border-left: 1px solid var(--paper-edge); }
/* Guides: the opening line is a soft quote block, not an edged one */
.script-acc-opening, .script-opening-quote { border-left: 0; border-radius: 16px; background: var(--canvas); }
.script-cover-example { border-left: 0; padding-left: 0; }
/* How it works: numbered jobs without the lime edge */
.job-accent { display: none; }
.job-item:hover { border-color: var(--paper-edge); }
/* Classic Today "needs" rows, if ever shown */
.at-need { border-left-width: 1px; border-left-color: var(--paper-edge); }
.day-block.away, .day-block.child2 { border-left-color: var(--paper-edge); }
body[data-module=week] .flow-note { padding: 14px 16px; border-radius: 16px; margin-top: 12px; color: var(--ink); }

/* ---------- "More" disclosure: full width of its column, left aligned, styled like the other section rows ---------- */
details.at-more { display: block; width: 100%; max-width: none; margin: 0 0 14px; align-self: stretch; }
.at-more > summary {
  width: 100%; padding: 20px 24px; border: 0; border-radius: var(--radius-xl);
  background: var(--paper); text-align: left; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
.at-more > summary > span { flex: 1; }
.at-more > summary::after {
  content: ''; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px);
}
.at-more[open] > summary::after { content: ''; transform: rotate(-135deg) translateY(-3px); }
.at-more > summary:hover { background: #fafaf9; }
.at-more-hint { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 400; letter-spacing: 0; }
/* Five nav items on phones (Scripts lives in More). A flex row of pills, not the old six-column grid:
   the grid squeezed each link into a fixed cell and its 44px minimum made the current pill taller than the row. */
@media (max-width: 720px) {
  .at-links { display: flex; gap: 2px; justify-content: space-between; flex-wrap: nowrap; overflow: visible; }
  .at-links a { min-height: 0; padding: 9px 12px; font-size: 14px; line-height: 1.2; white-space: nowrap; text-align: center; }
}
@media (max-width: 380px) { .at-links a { padding: 8px 9px; font-size: 13px; } }
/* More: the current page in the menu, and the More button marked when you're on one of its pages */
.at-tools-menu a[aria-current=page] { background: var(--canvas); font-weight: 600; }
.at-tools:has(.at-tools-menu a[aria-current=page]) summary { background: var(--ink); color: #fff; }
/* Today in the Week fortnight: white ring, so lime only ever means handover (matches Today's strip) */
.fort-day.today { box-shadow: none; outline: 2px solid #fff; outline-offset: 2px; }
/* Handover days in the Week fortnight: the same lime dot as Today's strip, under the date */
.fort-day { position: relative; }
.fort-day.handover::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--cobalt); }
.fn-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -4px 0 14px; font-size: 12px; color: #e3e7ff; }
.fn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fn-legend b { width: 14px; height: 14px; border-radius: 4px; background: #fff; }
.fn-legend b.solo { background: #ffffff33; }
.fn-legend b.hand { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }

/* Week fortnight: solo days need a visible shape on the blue, holidays included */
.fort-day.empty, .fort-day.in-break.empty { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); color: #fff; }
.fort-day.today.empty { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); }

/* Week add forms: fields need a fill to read on the white card, and iOS shows an empty date input as a blank box */
.schedule-add-form input, .schedule-add-form select, .dates-add-form input, .dates-add-form select { background: #f2f2f0 !important; min-height: 44px; }
.schedule-add-form input[type="date"], .schedule-add-form input[type="time"], .dates-add-form input[type="date"] { -webkit-appearance: none; appearance: none; display: block; text-align: left; line-height: 1.2; }
.fn-legend b.solo { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); }
.fn-legend b.hol { background: var(--lime, #d4f062); }
.fn-legend span[hidden] { display: none; }
/* Week fortnight: a swapped day (changed from the usual cycle) */
.fort-day.swapped::before { content: "⇄"; position: absolute; top: 5px; left: 7px; font-size: 11px; font-weight: 800; line-height: 1; color: #ff6a45; }

/* ---------- Wordmark full stop (brand rule, 7 Oct 2026) ----------
   The full stop in "Atlas." is a SQUARE, matching Geist (social, PDFs, pitch) and the app icon.
   It's drawn here rather than left to the font, because system fonts disagree
   (SF Pro = round on Apple, Arial = square on Windows). The "." stays in the markup for
   copy/paste and screen readers; it is hidden inside the box.
   Cobalt on light, lime on cobalt: set --stop on the parent to change it. */
.at-brand b, .brand b, .print-logo span, .print-logo-accent, .cover-logo-accent,
.print-header-logo-accent, .atlas-stop {
  display: inline-block; width: .18em; height: .18em; margin-left: .06em;
  background: var(--stop, var(--cobalt, #2743ff));
  color: transparent !important; overflow: hidden; vertical-align: baseline;
  line-height: 1; font-style: normal; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* The app header link is a flex row; align the square to the text baseline, not the middle */
.at-brand { align-items: baseline; }