/* ============================================================
 Family Hub · hub.example.com
 Almanac direction · Linen palette
 Design handoff: design_handoff_family_hub/
 Editorial, refined. Instrument Serif headlines, Inter Tight body,
 JetBrains Mono for data. Paper-cream backgrounds. Thin rule lines.
 ============================================================ */

:root {
 /* Linen palette — see design_handoff_family_hub/palettes.js */
 --c-paper: #F8F2E6;
 --c-paper-deep: #F0E6D2;
 --c-ink: #22201B;
 --c-ink-soft: #6B6253;
 --c-rule: #D7CCB1;
 --c-today: #8E2A22;
 /* Member colors — JF + Cristina */
 --c-jf: #3B4F7E;       /* navy */
 --c-cristina: #C28E5A; /* warm camel */
 /* Trip category colors */
 --c-couple: #7A5290;   /* plum */
 --c-padel: #2E7D6E;    /* teal-green (padel) */
 --c-golf:  #5C7A3A;    /* olive green (golf) */
 /* Expense category colors (linen-palette friendly) */
 --c-exp-lodging:    #8B5A3C;  /* saddle */
 --c-exp-flights:    #3B6E8A;  /* denim */
 --c-exp-activities: #6B8E4E;  /* sage */
 --c-exp-dining:     #A85A4A;  /* terra cotta */
 --c-exp-ground:     #7A7060;  /* warm grey */
 --c-exp-other:      #8B7B9C;  /* lavender */
 /* Misc / legacy */
 --c-away: #ADA597;     /* hashed neutral */
 /* Backwards-compatible aliases — keep so any stale data with old keys
    still renders something sensible instead of an unstyled bar. */
 --c-adult1: var(--c-jf);
 --c-adult2: var(--c-cristina);
 --c-kid1: #C45A4B;
 --c-kid2: #D49E3F;
 --c-family: var(--c-couple);
 --c-solo: #5E6B73;
 --c-school: #D49E3F;
 --c-paris: #C45A4B;
 --c-dogs: #9C8FB8;

 color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
 margin: 0;
 padding: 0;
 background: var(--c-paper);
 color: var(--c-ink);
 font-family: "Inter Tight", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 font-size: 13px;
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

/* =================== SHARED GRID =================== */

.hg {
 position: relative;
 padding: 20px 0 28px;
 font-feature-settings: "ss01", "ss02", "cv11";
}

.hg__axis {
 display: flex;
 align-items: flex-end;
 padding-bottom: 8px;
}
.hg__axis-spacer { width: var(--label-w); flex: 0 0 var(--label-w); }
.hg__axis-end { width: 32px; flex: 0 0 32px; }
.hg__axis-track {
 position: relative;
 flex: 1;
 height: 14px;
}
.hg__month {
 position: absolute;
 transform: translateX(-50%);
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 font-weight: 500;
}

.hg__rows {
 position: relative;
 display: flex;
 flex-direction: column;
}

/* Holiday bands feature removed 2026-05-19. */
.hg__row { position: relative; z-index: 1; }
.hg__row .hg__track { position: relative; z-index: 1; }

.hg__row {
 display: flex;
 align-items: stretch;
 height: var(--row-h);
 position: relative;
}
.hg__row + .hg__row { border-top: 1px solid var(--c-rule); }

.hg__rowlabel {
 width: var(--label-w);
 flex: 0 0 var(--label-w);
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding-right: 12px;
}
.hg__rowlabel-main {
 font-family: var(--font-display);
 font-size: 15px;
 color: var(--c-ink);
 line-height: 1.05;
 letter-spacing: -0.005em;
}
.hg__rowlabel-sub {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 margin-top: 2px;
}

.hg__rowend { width: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; }
.hg__row__add, .hg-row__add {
 width: 22px; height: 22px; border-radius: 50%;
 border: 1px dashed var(--c-rule);
 background: transparent;
 font-size: 14px; line-height: 0; padding: 0;
 color: var(--c-ink-soft);
 cursor: pointer;
}

.hg__track {
 position: relative;
 flex: 1;
}
.hg__track-bg {
 position: absolute; inset: 4px 0;
 background: var(--c-paper-deep);
 border-radius: 2px;
 opacity: 0.25;
}

.hg-bar {
 position: absolute;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 padding: 0 8px;
 font-family: var(--font-body);
 font-size: var(--bar-font);
 font-weight: 500;
 letter-spacing: 0.005em;
 white-space: nowrap;
 overflow: hidden;
}
.hg-bar__label {
 text-overflow: ellipsis;
 overflow: hidden;
}

.hg__divider {
 height: 14px;
 position: relative;
 display: flex;
 align-items: center;
}
.hg__divider::before {
 content: "";
 position: absolute;
 left: var(--label-w);
 right: 32px;
 border-top: 1px dashed var(--c-rule);
 opacity: 0.9;
}

.hg__today-line {
 position: absolute;
 top: 0; bottom: 0;
 width: 0;
 border-left: 1px dashed var(--c-today);
 opacity: 0.55;
 pointer-events: none;
}
.hg__today-label {
 position: absolute;
 bottom: 4px;
 transform: translateX(-50%);
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-today);
 background: var(--c-paper);
 padding: 0 6px;
}

.hg__gap {
 position: absolute;
 top: 50%;
 height: 0;
 border-top: 1px dashed var(--c-today);
 opacity: 0.5;
 display: flex;
 align-items: center;
 justify-content: center;
}
.hg__gap > span {
 background: var(--c-paper);
 padding: 0 6px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--c-today);
 transform: translateY(-50%);
}

/* legend */
.hg-legend {
 display: flex;
 flex-wrap: wrap;
 gap: 14px 22px;
 align-items: center;
}
.hg-legend__item {
 display: flex;
 align-items: center;
 gap: 8px;
 font-family: var(--font-body);
 font-size: 12px;
 color: var(--c-ink);
}
.hg-legend__swatch {
 width: 12px; height: 12px;
 border-radius: 2px;
 display: inline-block;
}

/* ===================== DIRECTION A — ALMANAC ===================== */

.a-frame {
 --font-display: "Instrument Serif", "GT Sectra", "Newsreader", Georgia, serif;
 --font-body: "Inter Tight", "Inter", system-ui, sans-serif;
 background: var(--c-paper);
 color: var(--c-ink);
 font-family: var(--font-body);
 font-size: 13px;
 line-height: 1.5;
 position: relative;
}

.a-frame--desktop {
 padding: 56px 64px 48px;
}

/* paper texture overlay */
.a-frame::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
 radial-gradient(rgba(80,55,20,0.025) 1px, transparent 1px) 0 0/3px 3px,
 radial-gradient(circle at 8% 6%, rgba(120,80,30,0.04), transparent 40%),
 radial-gradient(circle at 92% 94%, rgba(120,80,30,0.04), transparent 40%);
 mix-blend-mode: multiply;
}
.a-frame > * { position: relative; z-index: 1; }

.a-eyebrow {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 display: flex;
 gap: 10px;
 align-items: center;
 flex-wrap: nowrap;
 white-space: nowrap;
}
.a-eyebrow .dot { opacity: 0.55; }

.a-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.a-header__l { flex: 1; }
.a-header__r { display: flex; gap: 10px; flex: 0 0 auto; padding-top: 6px; }

.a-title {
 font-family: var(--font-display);
 font-weight: 400;
 font-size: 88px;
 line-height: 0.95;
 letter-spacing: -0.025em;
 margin: 14px 0 12px;
 color: var(--c-ink);
}
.a-title em { font-style: italic; color: var(--c-paris); }
.a-dek {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 19px;
 color: var(--c-ink-soft);
 margin: 0;
 max-width: 640px;
 line-height: 1.35;
}

.a-btn {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 padding: 9px 16px;
 border: 1px solid var(--c-rule);
 background: transparent;
 color: var(--c-ink);
 border-radius: 999px;
 cursor: pointer;
}
.a-btn--solid {
 background: var(--c-ink);
 color: var(--c-paper);
 border-color: var(--c-ink);
}
.a-btn--block { width: 100%; padding: 12px 16px; }

.a-rule {
 border: 0;
 border-top: 1px solid var(--c-rule);
 margin: 22px 0;
}
.a-rule--thick { border-top-width: 2px; border-top-color: var(--c-ink); margin: 28px 0 16px; }

.a-legend-row {
 display: flex;
 gap: 28px;
 align-items: center;
 padding: 4px 0 6px;
}

.a-grid-wrap { padding: 8px 0 4px; }

/* Row that holds zoom controls + the past-12-months toggle */
.a-grid-controls {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 8px;
 margin: 0 0 8px;
}

/* "Show past 12 months" toggle. Same pill shape as the zoom buttons so they
 read as a related cluster, but uses the display serif italic for the active
 word to keep visual consistency with the masthead "Family Hub" treatment. */
.a-past-toggle {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.1em;
 padding: 5px 12px;
 border: 1px solid var(--c-rule);
 background: transparent;
 color: var(--c-ink);
 border-radius: 999px;
 cursor: pointer;
}
.a-past-toggle em {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 13px;
 letter-spacing: 0;
 text-transform: none;
 margin: 0 1px;
}
.a-past-toggle[aria-pressed="true"] {
 background: var(--c-ink);
 color: var(--c-paper);
 border-color: var(--c-ink);
}
.a-past-toggle:hover:not([aria-pressed="true"]) {
 background: var(--c-paper-deep);
}

/* Zoom controls */
.a-zoom {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 0;
}
.a-zoom__label {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 margin-right: 4px;
}
.a-zoom__btn {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.1em;
 padding: 5px 10px;
 border: 1px solid var(--c-rule);
 background: transparent;
 color: var(--c-ink);
 border-radius: 999px;
 cursor: pointer;
}
.a-zoom__btn[aria-pressed="true"] {
 background: var(--c-ink);
 color: var(--c-paper);
 border-color: var(--c-ink);
}
.a-zoom__btn:hover:not([aria-pressed="true"]) {
 background: var(--c-paper-deep);
}

.a-grid-scroll {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}
.a-grid-scroll::-webkit-scrollbar { height: 10px; }
.a-grid-scroll::-webkit-scrollbar-track { background: var(--c-paper-deep); border-radius: 4px; }
.a-grid-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-ink-soft) 40%, transparent); border-radius: 4px; }

.a-hint {
 text-align: center;
 font-family: var(--font-display);
 font-style: italic;
 font-size: 14px;
 color: var(--c-ink-soft);
 margin: 6px 0 0;
}

/* section title */
.a-sec-title { margin: 0 0 18px; }
.a-sec-title__kicker {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 margin-bottom: 4px;
}
.a-sec-title__h {
 font-family: var(--font-display);
 font-weight: 400;
 font-size: 36px;
 line-height: 1.0;
 letter-spacing: -0.015em;
 margin: 0;
}
.a-sec-title__h em { font-style: italic; color: var(--c-couple); }

.a-two-col {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
 padding: 12px 0 8px;
}
.a-col { min-width: 0; }

/* booked cards */
.a-card-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
}
.a-card {
 background: var(--c-paper-deep);
 border: 1px solid var(--c-rule);
 border-radius: 4px;
 padding: 16px 16px 14px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 min-height: 120px;
 text-align: left;
}
.a-card__top {
 display: flex; align-items: center; gap: 8px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-card__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.a-card__when { margin-left: auto; color: var(--c-ink); }
.a-card__edit {
 background: transparent; border: 0; color: var(--c-ink-soft); cursor: pointer;
 font-size: 13px; padding: 0; margin-left: 6px;
}
.a-card__name {
 font-family: var(--font-display);
 font-weight: 400;
 font-style: italic;
 font-size: 30px;
 line-height: 1.0;
 margin: 2px 0 4px;
 color: var(--c-ink);
}
.a-card__status {
 display: flex;
 flex-wrap: wrap;
 gap: 6px 10px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.06em;
 color: var(--c-ink-soft);
}
.a-card__status .ok { color: var(--c-family); }
.a-card__status .todo { color: var(--c-ink-soft); opacity: 0.75; }
.a-card__nights { margin-left: auto; color: var(--c-ink); }

.a-card--add {
 background: transparent;
 border: 1px dashed var(--c-rule);
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 align-items: center;
 justify-content: center;
 cursor: pointer;
}
.a-card--add > span:first-child { font-size: 26px; }

/* Archive — list of past trips inside <details> under the booked cards.
 Lightweight: not a card grid, just a stacked list of clickable rows that
 link out to the public /<slug> itinerary pages rendered by trip-page.js. */
.a-archive-wrap {
 margin-top: 18px;
 border-top: 1px solid var(--c-rule);
 padding-top: 14px;
}
.a-archive-summary {
 list-style: none;
 cursor: pointer;
 display: flex;
 align-items: baseline;
 gap: 10px;
 user-select: none;
}
.a-archive-summary::-webkit-details-marker { display: none; }
.a-archive-summary::before {
 content: "▸";
 font-size: 10px;
 color: var(--c-ink-soft);
 transition: transform 0.15s ease;
 display: inline-block;
}
.a-archive-wrap[open] > .a-archive-summary::before { transform: rotate(90deg); }
.a-archive-kicker {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink);
}
.a-archive-hint {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 13px;
 color: var(--c-ink-soft);
}
.a-archive {
 margin-top: 10px;
 display: flex;
 flex-direction: column;
}
.a-archive__row {
 display: block;
 padding: 10px 4px;
 border-top: 1px solid var(--c-rule);
 color: inherit;
 text-decoration: none;
}
.a-archive__row:first-child { border-top: 0; }
.a-archive__row:hover { background: var(--c-paper-deep); }
.a-archive__row--noslug { cursor: default; }
.a-archive__row--noslug:hover { background: transparent; }
.a-archive__row-inner {
 display: flex;
 align-items: baseline;
 gap: 10px;
 flex-wrap: wrap;
}
.a-archive__dot {
 width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
 position: relative; top: -1px;
}
.a-archive__name {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 18px;
 color: var(--c-ink);
}
.a-archive__dest {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-archive__when {
 margin-left: auto;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.08em;
 color: var(--c-ink-soft);
}
.a-archive__empty {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 14px;
 color: var(--c-ink-soft);
 margin: 8px 0 0;
}

/* sneak list */
.a-sneak {
 list-style: none;
 padding: 0;
 margin: 0;
}
.a-sneak__row {
 display: grid;
 grid-template-columns: 36px 1fr auto;
 gap: 12px;
 align-items: center;
 padding: 14px 0;
 border-top: 1px solid var(--c-rule);
}
.a-sneak__row:first-child { border-top: 0; padding-top: 4px; }
.a-sneak__n {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 color: var(--c-ink-soft);
 letter-spacing: 0.12em;
}
.a-sneak__range {
 font-family: var(--font-display);
 font-size: 22px;
 font-style: italic;
 line-height: 1.05;
 color: var(--c-ink);
}
.a-sneak__why {
 font-size: 12px;
 color: var(--c-ink-soft);
 margin-top: 2px;
}
.a-sneak__right { display: flex; align-items: center; gap: 10px; }
.a-sneak__need {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-sneak__dot { width: 10px; height: 10px; border-radius: 50%; }
.a-sneak__foot {
 display: flex;
 justify-content: space-between;
 margin-top: 14px;
 padding-top: 12px;
 border-top: 1px solid var(--c-rule);
 font-family: var(--font-display);
 font-style: italic;
 font-size: 13px;
 color: var(--c-ink-soft);
}
.a-sneak__foot > span:last-child {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-style: normal;
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}

/* sitters */
.a-sitters {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
}
.a-sitter {
 background: var(--c-paper-deep);
 border: 1px solid var(--c-rule);
 border-radius: 4px;
 padding: 16px;
}
.a-sitter__role {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-sitter__name {
 font-family: var(--font-display);
 font-size: 22px;
 line-height: 1.1;
 margin: 4px 0 6px;
 font-style: italic;
}
.a-sitter__meta {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 color: var(--c-ink);
 display: flex; gap: 8px; flex-wrap: wrap;
}
.a-sitter__meta .dot { opacity: 0.4; }
.a-sitter__notes {
 font-size: 12px;
 color: var(--c-ink-soft);
 margin-top: 8px;
 font-style: italic;
 font-family: var(--font-display);
}

/* notes */
.a-notes {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
}
.a-note {
 background: var(--c-paper-deep);
 border: 1px solid var(--c-rule);
 border-radius: 4px;
 padding: 12px 14px;
 display: flex;
 flex-direction: column;
 gap: 2px;
 text-align: left;
 font-family: var(--font-body);
}
.a-note__cat {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9.5px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-paris);
}
.a-note__title {
 font-family: var(--font-display);
 font-size: 17px;
 line-height: 1.15;
 color: var(--c-ink);
}
.a-note__meta {
 font-size: 11px;
 color: var(--c-ink-soft);
}
.a-note--add {
 border: 1px dashed var(--c-rule);
 background: transparent;
 align-items: center;
 justify-content: center;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 cursor: pointer;
}

.a-foot {
 margin-top: 32px;
 padding-top: 18px;
 border-top: 1px solid var(--c-rule);
 display: flex;
 justify-content: space-between;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}

/* ----- Almanac MOBILE ----- */
.a-frame--mobile {
 padding: 28px 22px 80px;
}
.a-mheader { display: flex; flex-direction: column; gap: 4px; }
.a-mtitle {
 font-family: var(--font-display);
 font-weight: 400;
 font-size: 56px;
 line-height: 0.95;
 letter-spacing: -0.025em;
 margin: 10px 0 6px;
}
.a-mtitle em { font-style: italic; color: var(--c-paris); }
.a-mdek {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 16px;
 color: var(--c-ink-soft);
 margin: 0 0 16px;
}
.a-mactions { margin-top: 6px; }
.a-mlegend { padding: 6px 0 8px; }

.a-mgrid-wrap {
 margin: 8px -22px 0;
 padding: 4px 0 0;
}
.a-mgrid-scroll-hint {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9.5px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 padding: 0 22px 8px;
}
.a-mgrid-clip {
 position: relative;
 overflow: hidden;
}
.a-mgrid-clip::after {
 content: "";
 position: absolute;
 top: 0; right: 0; bottom: 0;
 width: 30px;
 background: linear-gradient(to right, transparent, var(--c-paper));
 pointer-events: none;
}
.a-mgrid-inner {
 width: 720px;
 padding-left: 22px;
}
.a-mhint {
 text-align: center;
 font-family: var(--font-display);
 font-style: italic;
 font-size: 12px;
 color: var(--c-ink-soft);
 margin: 8px 0 0;
}
.a-msection { padding: 14px 0; }
.a-mcards {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.a-mcards .a-card { min-height: 0; }
.a-sneak--mobile .a-sneak__range { font-size: 18px; }
.a-sneak--mobile .a-sneak__row { padding: 12px 0; }
.a-sneak--mobile .a-sneak__why { font-size: 11px; }

.a-fab {
 position: absolute;
 right: 18px;
 bottom: 18px;
 width: 54px; height: 54px;
 border-radius: 50%;
 background: var(--c-ink);
 color: var(--c-paper);
 font-family: var(--font-display);
 font-size: 30px;
 line-height: 54px;
 text-align: center;
 box-shadow: 0 6px 18px rgba(30,20,5,0.3);
}


/* ============================================================
 Responsive · single DOM, two layouts
 Below 720px the page switches to mobile mode.
 ============================================================ */

/* mobile-only elements hidden on desktop */
.is-mobile { display: none; }

@media (max-width: 720px) {
 .is-desktop { display: none !important; }
 .is-mobile { display: initial; }

 /* swap padding to mobile metrics */
 .a-frame--desktop {
 padding: 28px 22px 80px;
 }

 /* shrink masthead */
 .a-title { font-size: 56px; margin: 6px 0; }
 .a-dek { font-size: 15px; }
 .a-header { flex-direction: column; gap: 12px; }
 .a-header__r { display: none; } /* hide desktop pill buttons; replaced by mobile block button + FAB */

 /* mobile add button under the dek */
 .a-mactions {
 display: block;
 margin-top: 4px;
 }

 /* let the grid scroll horizontally */
 .a-grid-wrap {
 margin: 8px -22px 0;
 padding-left: 0;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 position: relative;
 }
 .a-grid-wrap::after {
 content: "";
 position: sticky;
 top: 0; right: 0;
 width: 30px;
 height: 100%;
 background: linear-gradient(to right, transparent, var(--c-paper));
 pointer-events: none;
 display: block;
 }
 .a-grid-wrap .hg {
 width: 720px;
 padding-left: 22px;
 }

 /* sections stack to one column */
 .a-two-col { grid-template-columns: 1fr; gap: 22px; }
 .a-card-grid { grid-template-columns: 1fr; }
 .a-sitters { grid-template-columns: 1fr; }
 .a-notes { grid-template-columns: 1fr 1fr; }
 .a-sneak__row { padding: 12px 0; }
 .a-sneak__range { font-size: 18px; }
 .a-sneak__why { font-size: 11px; }

 /* hint shrink */
 .a-hint { font-size: 12px; }

 /* FAB */
 .a-fab {
 display: flex;
 position: fixed;
 right: 18px;
 bottom: 18px;
 width: 54px; height: 54px;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 background: var(--c-ink);
 color: var(--c-paper);
 font-family: var(--font-display, "Instrument Serif", serif);
 font-size: 30px;
 line-height: 1;
 text-align: center;
 box-shadow: 0 6px 18px rgba(30,20,5,0.3);
 border: 0;
 cursor: pointer;
 z-index: 50;
 }

 /* footer wraps */
 .a-foot { flex-direction: column; gap: 6px; align-items: flex-start; }
}

/* Desktop: hide the FAB and the mobile-only block button */
@media (min-width: 721px) {
 .a-fab { display: none; }
 .a-mactions { display: none; }
}

/* ============================================================
 Loading + error states
 ============================================================ */

.a-loading,
.a-error {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 padding: 60px 0;
 text-align: center;
}
.a-error { color: var(--c-today); }

/* ============================================================
 Hover affordance on bars + cards (subtle)
 ============================================================ */

.hg-bar { cursor: pointer; transition: filter 150ms ease-out; }
.hg-bar:hover { filter: brightness(0.93); }

.a-card { cursor: pointer; transition: filter 150ms ease-out; }
.a-card:hover { filter: brightness(0.97); }

.a-card--add:hover,
.a-note--add:hover {
 border-color: var(--c-ink-soft);
 color: var(--c-ink);
}

.hg-row__add { transition: all 150ms ease-out; }
.hg-row__add:hover {
 border-style: solid;
 border-color: var(--c-rule);
 color: var(--c-ink);
}

.a-btn { transition: filter 150ms ease-out, transform 100ms ease-out; }
.a-btn:hover { filter: brightness(0.93); }
.a-btn:active { transform: translateY(1px); }

/* ============================================================
 Print stylesheet · fridge poster
 ============================================================ */

@media print {
 :root {
 --c-paper: #ffffff;
 --c-paper-deep: #f6f1e3;
 --c-ink: #000000;
 }
 .a-header__r,
 .a-fab,
 .a-mactions,
 .a-card--add,
 .a-note--add,
 .hg-row__add,
 .a-hint {
 display: none !important;
 }
 .a-frame--desktop { padding: 18px 24px; }
 .a-title { font-size: 56px; }
 .a-two-col { gap: 24px; }
 .a-foot { margin-top: 18px; }
 .hg__today-line { opacity: 0.8; }
}

/* ============================================================
 Edit modal · adds/edits/deletes for trips, schedule, sitters, notes
 ============================================================ */

body.modal-open { overflow: hidden; }

.a-modal__backdrop {
 position: fixed;
 inset: 0;
 background: rgba(34, 32, 27, 0.45);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 100;
 padding: 24px;
 animation: modal-fade 150ms ease-out;
}

@keyframes modal-fade {
 from { opacity: 0; }
 to { opacity: 1; }
}

.a-modal__panel {
 background: var(--c-paper);
 border-radius: 6px;
 width: 100%;
 max-width: 520px;
 max-height: calc(100vh - 48px);
 display: flex;
 flex-direction: column;
 box-shadow: 0 12px 40px rgba(30,20,5,0.25);
 border: 1px solid var(--c-rule);
}

.a-modal__head {
 padding: 22px 24px 12px;
 border-bottom: 1px solid var(--c-rule);
}
.a-modal__kicker {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-modal__title {
 font-family: "Instrument Serif", serif;
 font-weight: 400;
 font-size: 28px;
 line-height: 1.1;
 margin: 4px 0 0;
 color: var(--c-ink);
}

.a-modal__form {
 padding: 18px 24px;
 overflow-y: auto;
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.a-field { display: flex; flex-direction: column; gap: 4px; }
.a-field__label {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-field__req { color: var(--c-today); }

.a-field input[type="text"],
.a-field input[type="date"],
.a-field input[type="time"],
.a-field select,
.a-field textarea {
 font-family: "Inter Tight", "Inter", system-ui, sans-serif;
 font-size: 14px;
 padding: 9px 12px;
 border: 1px solid var(--c-rule);
 background: var(--c-paper);
 color: var(--c-ink);
 border-radius: 4px;
 width: 100%;
 box-sizing: border-box;
 outline: none;
 transition: border-color 150ms ease-out;
}
.a-field input:focus,
.a-field select:focus,
.a-field textarea:focus {
 border-color: var(--c-ink);
}
.a-field textarea {
 resize: vertical;
 min-height: 60px;
 font-family: inherit;
}

.a-field--checkbox {
 flex-direction: row;
 align-items: center;
 gap: 10px;
}
.a-field--checkbox input { width: 18px; height: 18px; margin: 0; }
.a-field--checkbox .a-field__label { font-size: 12px; letter-spacing: 0.04em; text-transform: none; color: var(--c-ink); }

.a-modal__error {
 margin: 0 24px;
 padding: 10px 14px;
 background: rgba(142, 42, 34, 0.08);
 color: var(--c-today);
 border-radius: 4px;
 font-size: 13px;
 font-family: "Inter Tight", sans-serif;
}

.a-modal__foot {
 padding: 16px 24px 20px;
 border-top: 1px solid var(--c-rule);
 display: flex;
 align-items: center;
 gap: 10px;
}
.a-modal__spacer { flex: 1; }

.a-btn--danger {
 background: transparent;
 color: var(--c-today);
 border-color: rgba(142, 42, 34, 0.4);
}
.a-btn--danger:hover { background: rgba(142, 42, 34, 0.06); }

@media (max-width: 720px) {
 .a-modal__backdrop { padding: 0; align-items: flex-end; }
 .a-modal__panel {
 max-width: 100%;
 width: 100%;
 max-height: 92vh;
 border-radius: 12px 12px 0 0;
 animation: modal-slide 200ms ease-out;
 }
 @keyframes modal-slide {
 from { transform: translateY(20px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
 }
 .a-modal__title { font-size: 24px; }
}

/* ============================================================
 Trip card upgrades · destination, travelers, progress bar, chips
 ============================================================ */

.a-card__dest {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 14px;
 color: var(--c-ink-soft);
 margin: -2px 0 2px;
}

.a-card__travelers {
 display: flex;
 align-items: center;
 gap: 6px;
 margin: 2px 0;
}
.a-card__tdot {
 width: 8px; height: 8px; border-radius: 50%;
 display: inline-block;
}
.a-card__tlabel {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.1em;
 color: var(--c-ink-soft);
 margin-left: 4px;
}

.a-card__progress {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-top: 6px;
}
.a-card__progress-bar {
 flex: 1;
 height: 4px;
 background: var(--c-rule);
 border-radius: 2px;
 overflow: hidden;
}
.a-card__progress-fill {
 height: 100%;
 background: var(--c-family);
 transition: width 200ms ease-out;
}
.a-card__progress-text {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9.5px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}

.a-card__chips {
 display: flex;
 flex-wrap: wrap;
 gap: 6px 10px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.06em;
 color: var(--c-ink-soft);
 align-items: center;
}
.a-card__chip {
 opacity: 0.6;
}
.a-card__chip--on {
 color: var(--c-ink);
 opacity: 1;
}

/* ============================================================
 Trip detail modal · the rich dossier view
 ============================================================ */

.a-modal__panel--wide {
 max-width: 820px;
}

.a-tripd__body {
 padding: 18px 24px 24px;
 overflow-y: auto;
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 18px;
}

.a-tripd__header { display: flex; flex-direction: column; gap: 16px; padding-bottom: 4px; }

.a-tripd__grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px 14px;
}

.a-field--col1 { grid-column: span 1; }
.a-field--col2 { grid-column: span 2; }
.a-field--col3 { grid-column: span 3; }
.a-field--col4 { grid-column: span 4; }

.a-tripd__sectionkicker {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}

.a-tripd__travelers-wrap {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.a-tripd__travelers {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.a-tripd__traveler {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 padding: 7px 12px 7px 10px;
 border: 1px solid var(--c-rule);
 border-radius: 999px;
 font-family: var(--font-body);
 font-size: 12px;
 color: var(--c-ink);
 cursor: pointer;
 background: var(--c-paper-deep);
 transition: filter 150ms ease-out, border-color 150ms ease-out;
}
.a-tripd__traveler input {
 margin: 0;
 width: 14px; height: 14px;
}
.a-tripd__traveler-dot {
 width: 10px; height: 10px;
 border-radius: 50%;
}
.a-tripd__traveler.is-on {
 border-color: var(--c-ink);
}

.a-tripd__guests-row {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 align-items: center;
 border: 1px solid var(--c-rule);
 border-radius: 4px;
 padding: 7px 8px;
 background: var(--c-paper);
}
.a-tripd__guest-chip {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 4px 6px 4px 10px;
 background: var(--c-paper-deep);
 border: 1px solid var(--c-rule);
 border-radius: 999px;
 font-size: 13px;
 color: var(--c-ink);
}
.a-tripd__guest-x {
 border: 0;
 background: transparent;
 padding: 0 2px;
 font-size: 16px;
 line-height: 1;
 color: var(--c-ink-soft);
 cursor: pointer;
}
.a-tripd__guest-x:hover { color: var(--c-ink); }
.a-tripd__guest-input {
 flex: 1;
 min-width: 160px;
 border: 0;
 outline: 0;
 background: transparent;
 font-family: "Inter Tight", "Inter", system-ui, sans-serif;
 font-size: 13.5px;
 color: var(--c-ink);
 padding: 4px 2px;
}

.a-tripd__section {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 14px 0 4px;
 border-top: 1px solid var(--c-rule);
}

.a-tripd__sectionhead {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
}
.a-tripd__sectioncount {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.12em;
 color: var(--c-ink-soft);
}

.a-tripd__sub {
 position: relative;
 padding: 12px 36px 12px 14px;
 background: var(--c-paper-deep);
 border: 1px solid var(--c-rule);
 border-radius: 4px;
}

.a-tripd__subdel {
 position: absolute;
 top: 8px;
 right: 8px;
 width: 22px; height: 22px;
 border-radius: 50%;
 border: 1px solid var(--c-rule);
 background: var(--c-paper);
 color: var(--c-ink-soft);
 font-size: 14px;
 line-height: 0;
 cursor: pointer;
 display: flex; align-items: center; justify-content: center;
}
.a-tripd__subdel:hover {
 color: var(--c-today);
 border-color: var(--c-today);
}

.a-tripd__addsub {
 align-self: flex-start;
 background: transparent;
 border: 1px dashed var(--c-rule);
 color: var(--c-ink-soft);
 border-radius: 4px;
 padding: 8px 14px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 cursor: pointer;
 transition: all 150ms ease-out;
}
.a-tripd__addsub:hover {
 border-style: solid;
 color: var(--c-ink);
 border-color: var(--c-ink);
}

.a-tripd__longtext {
 font-family: "Inter Tight", "Inter", system-ui, sans-serif;
 font-size: 13px;
 padding: 10px 12px;
 border: 1px solid var(--c-rule);
 background: var(--c-paper);
 color: var(--c-ink);
 border-radius: 4px;
 width: 100%;
 box-sizing: border-box;
 outline: none;
 resize: vertical;
 min-height: 80px;
}
.a-tripd__longtext:focus { border-color: var(--c-ink); }

@media (max-width: 720px) {
 .a-modal__panel--wide { max-width: 100%; }
 .a-tripd__body { padding: 14px 16px 18px; }
 .a-tripd__grid { grid-template-columns: repeat(2, 1fr); }
 .a-field--col1, .a-field--col2, .a-field--col3, .a-field--col4 { grid-column: span 2; }
 .a-tripd__sub { padding: 12px 36px 12px 12px; }
}

/* Away-row bars should not feel clickable (legacy class kept for safety) */
.hg-bar--away { cursor: default; }
.hg-bar--away:hover { filter: none; }

/* ============================================================
 Note image upload
 ============================================================ */

.a-note-image {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.a-note-image__hint {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 13px;
 color: var(--c-ink-soft);
 padding: 8px 0;
}
.a-note-image__preview {
 border: 1px solid var(--c-rule);
 background: var(--c-paper-deep);
 border-radius: 4px;
 padding: 8px;
 min-height: 80px;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}
.a-note-image__preview img {
 max-width: 100%;
 max-height: 280px;
 display: block;
 border-radius: 2px;
}
.a-note-image__empty {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-note-image__actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}
.a-note-image__actions .a-btn {
 text-decoration: none;
}
.a-note-image__status {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.1em;
 color: var(--c-ink-soft);
 min-height: 14px;
}

/* ============================================================
 Password gate overlay
 ============================================================ */

.a-gate {
 position: fixed;
 inset: 0;
 background: var(--c-paper);
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
}
.a-gate__panel {
 max-width: 420px;
 width: 100%;
 background: var(--c-paper-deep);
 border: 1px solid var(--c-rule);
 border-radius: 6px;
 padding: 36px 32px;
 text-align: center;
}
.a-gate__kicker {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 margin-bottom: 8px;
}
.a-gate__title {
 font-family: "Instrument Serif", Georgia, serif;
 font-weight: 400;
 font-size: 44px;
 line-height: 1;
 margin: 0 0 10px;
}
.a-gate__dek {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 15px;
 color: var(--c-ink-soft);
 margin: 0 0 20px;
}
.a-gate__row {
 display: flex;
 gap: 8px;
 margin-bottom: 8px;
}
.a-gate__input {
 flex: 1;
 font-family: "Inter Tight", sans-serif;
 font-size: 14px;
 padding: 10px 12px;
 border: 1px solid var(--c-rule);
 background: var(--c-paper);
 color: var(--c-ink);
 border-radius: 4px;
}
.a-gate__input:focus { outline: none; border-color: var(--c-ink); }
.a-gate__err {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 color: var(--c-today);
 min-height: 14px;
}

/* ============================================================
 Settings section · calendar sources per family member
 ============================================================ */

.a-settings-section { padding: 8px 0; }
.a-sec-sub {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 14px;
 color: var(--c-ink-soft);
 margin: 0 0 18px;
 max-width: 720px;
}

.a-settings-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 18px;
}
@media (max-width: 720px) {
 .a-settings-grid { grid-template-columns: 1fr; }
}

.a-setcard {
 background: var(--c-paper-deep);
 border: 1px solid var(--c-rule);
 border-radius: 4px;
 padding: 18px;
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.a-setcard__head {
 display: flex;
 align-items: baseline;
 gap: 10px;
}
.a-setcard__dot {
 width: 10px; height: 10px;
 border-radius: 50%;
 display: inline-block;
 align-self: center;
}
.a-setcard__name {
 font-family: var(--font-display);
 font-size: 22px;
 line-height: 1;
}
.a-setcard__row {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 margin-left: auto;
}

.a-setcard__field {
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.a-setcard__label {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-setcard__input,
.a-setcard__type {
 font-family: "Inter Tight", "Inter", system-ui, sans-serif;
 font-size: 13px;
 padding: 8px 12px;
 border: 1px solid var(--c-rule);
 background: var(--c-paper);
 color: var(--c-ink);
 border-radius: 4px;
 width: 100%;
 outline: none;
}
.a-setcard__input:focus,
.a-setcard__type:focus { border-color: var(--c-ink); }

.a-setcard__terms { display: flex; flex-direction: column; gap: 8px; }
.a-setcard__term {
 display: grid;
 grid-template-columns: 1fr 110px 110px 28px;
 gap: 6px;
 align-items: center;
}
.a-setcard__term-del {
 width: 22px; height: 22px;
 border-radius: 50%;
 border: 1px solid var(--c-rule);
 background: var(--c-paper);
 color: var(--c-ink-soft);
 cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 font-size: 14px;
}
.a-setcard__term-del:hover { color: var(--c-today); border-color: var(--c-today); }
.a-setcard__addterm {
 align-self: flex-start;
 background: transparent;
 border: 1px dashed var(--c-rule);
 color: var(--c-ink-soft);
 border-radius: 4px;
 padding: 6px 12px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 cursor: pointer;
}
.a-setcard__addterm:hover { color: var(--c-ink); border-color: var(--c-ink); border-style: solid; }

.a-setcard__pdf-row {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}
.a-setcard__pdf-link {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 12px;
 color: var(--c-ink);
 text-decoration: none;
 padding: 8px 12px;
 background: var(--c-paper);
 border: 1px solid var(--c-rule);
 border-radius: 4px;
}
.a-setcard__pdf-link:hover { border-color: var(--c-ink); }
.a-setcard__pdf-empty {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-setcard__pdf-file { font-size: 12px; }

.a-setcard__foot {
 display: flex;
 align-items: center;
 gap: 10px;
 padding-top: 6px;
 border-top: 1px solid var(--c-rule);
}
.a-setcard__status {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.1em;
 color: var(--c-ink-soft);
 flex: 1;
}

/* Trip detail · public share link */
.a-tripd__share { gap: 8px; }
.a-tripd__share-row {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}
.a-tripd__share-url {
 flex: 1;
 min-width: 200px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 12px;
 padding: 9px 12px;
 background: var(--c-paper-deep);
 border: 1px solid var(--c-rule);
 border-radius: 4px;
 color: var(--c-ink);
 text-decoration: none;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.a-tripd__share-url:hover { border-color: var(--c-ink); }
.a-tripd__share-status {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.1em;
 color: var(--c-family);
 min-height: 14px;
}
.a-tripd__share-hint {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 12.5px;
 color: var(--c-ink-soft);
}
.a-tripd__share-empty {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}

/* Tiny "has image" marker on note cards */
.a-note__hasimg {
 display: inline-block;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9.5px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 margin-top: 4px;
}

/* =================== OUTLOOK-STYLE MONTH CALENDAR =================== */
/* Replaces the horizontal almanac timeline. Phase 1 = Month view only;
   Day/Week tabs are placeholders until Phase 2. */

.cal {
 --daynum-h: 22px;
 --trip-h: 18px;
 --cell-min-h: 96px;
 background: var(--c-paper);
 border: 1px solid var(--c-rule);
 border-radius: 4px;
 overflow: hidden;
 margin-top: 8px;
}
.cal-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 18px;
 border-bottom: 1px solid var(--c-rule);
 gap: 16px;
 flex-wrap: wrap;
}
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-title {
 font-family: "Instrument Serif", serif;
 font-size: 24px;
 font-style: italic;
 line-height: 1;
 min-width: 180px;
 text-align: center;
 color: var(--c-ink);
}
.cal-navbtn {
 width: 32px; height: 32px; border-radius: 50%;
 border: 1px solid var(--c-rule); background: transparent;
 font-size: 18px; line-height: 1; cursor: pointer; color: var(--c-ink);
 transition: background 0.15s;
}
.cal-navbtn:hover { background: var(--c-paper-deep); }
.cal-todaybtn {
 padding: 6px 16px; border-radius: 16px;
 border: 1px solid var(--c-rule); background: transparent;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase;
 cursor: pointer; color: var(--c-ink); margin-left: 6px;
 transition: background 0.15s;
}
.cal-todaybtn:hover { background: var(--c-paper-deep); }
.cal-tabs {
 display: flex; gap: 2px;
 background: var(--c-paper-deep); border-radius: 16px; padding: 3px;
}
.cal-tab {
 padding: 6px 16px; border: none; background: transparent; border-radius: 14px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase;
 cursor: pointer; color: var(--c-ink-soft);
 transition: all 0.15s;
}
.cal-tab--active { background: var(--c-ink); color: var(--c-paper); cursor: default; }
.cal-tab--disabled { opacity: 0.4; cursor: not-allowed; }
.cal-weekdays {
 display: grid; grid-template-columns: repeat(7, 1fr);
 border-bottom: 1px solid var(--c-rule); background: var(--c-paper-deep);
}
.cal-weekday {
 padding: 8px 10px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
 color: var(--c-ink-soft);
 border-right: 1px solid var(--c-rule);
}
.cal-weekday:last-child { border-right: none; }
.cal-weekday--weekend { opacity: 0.7; }
.cal-month { display: flex; flex-direction: column; }
.cal-week {
 position: relative;
 display: grid; grid-template-columns: repeat(7, 1fr);
 border-bottom: 1px solid var(--c-rule);
 min-height: var(--cell-min-h);
}
.cal-week:last-child { border-bottom: none; }
.cal-cell {
 padding: 6px 8px; border-right: 1px solid var(--c-rule);
 cursor: pointer; position: relative; z-index: 1;
 transition: background 0.12s;
 min-height: var(--cell-min-h);
}
.cal-cell:last-child { border-right: none; }
.cal-cell:hover { background: rgba(34, 32, 27, 0.03); }
.cal-cell--other { background: rgba(0,0,0,0.025); }
.cal-cell--other .cal-daynum { color: var(--c-ink-soft); opacity: 0.55; }
.cal-cell--weekend:not(.cal-cell--other) { background: rgba(215, 204, 177, 0.18); }
.cal-cell--today .cal-daynum {
 background: var(--c-today); color: #fff;
 border-radius: 999px; display: inline-block;
 padding: 2px 9px; margin-left: -3px;
}
.cal-daynum {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--c-ink);
}
.cal-chips {
 display: flex; flex-direction: column; gap: 2px;
 margin-top: calc(var(--trip-h, 18px) * var(--trip-rows, 0) + (var(--trip-rows, 0) * 2px) + 6px);
}
.cal-chip {
 font-size: 11px; padding: 2px 6px; border-radius: 3px;
 cursor: pointer; overflow: hidden; text-overflow: ellipsis;
 white-space: nowrap; line-height: 1.3;
}
.cal-chip:hover { filter: brightness(1.1); }
.cal-week-trips {
 position: absolute;
 top: calc(var(--daynum-h) + 8px);
 left: 0; right: 0; height: 0;
 pointer-events: none; z-index: 2;
}
.cal-trip {
 position: absolute; height: var(--trip-h);
 border-radius: 3px; padding: 0 8px;
 font-size: 11px; color: #fff;
 display: flex; align-items: center;
 cursor: pointer; pointer-events: auto;
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 line-height: 1; font-weight: 500;
 transition: filter 0.15s;
}
.cal-trip:hover { filter: brightness(1.1); }
.cal-trip--cl { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 4px; }
.cal-trip--cr { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 4px; }
@media (max-width: 720px) {
 .cal { --cell-min-h: 70px; --trip-h: 14px; }
 .cal-head { padding: 10px 12px; }
 .cal-title { font-size: 18px; min-width: 0; }
 .cal-tabs { display: none; }
 .cal-weekday { padding: 6px 4px; font-size: 9px; letter-spacing: 0.1em; }
 .cal-cell { padding: 3px 4px; }
 .cal-chip { font-size: 9.5px; padding: 1px 4px; }
 .cal-trip { font-size: 9.5px; padding: 0 4px; }
 .cal-daynum { font-size: 10.5px; }
 .cal-cell--today .cal-daynum { padding: 1px 6px; }
}

/* =================== WEEK VIEW (Outlook-style) =================== */

.wk-dayheader {
 display: grid;
 grid-template-columns: 64px repeat(7, 1fr);
 border-bottom: 1px solid var(--c-rule);
 background: var(--c-paper-deep);
}
.wk-corner {
 border-right: 1px solid var(--c-rule);
}
.wk-daycell {
 padding: 10px 12px;
 border-right: 1px solid var(--c-rule);
 text-align: left;
}
.wk-daycell:last-child { border-right: none; }
.wk-daynum {
 font-family: "Instrument Serif", serif;
 font-size: 26px;
 font-weight: 400;
 line-height: 1;
 color: var(--c-ink);
}
.wk-dayname {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 margin-top: 3px;
}
.wk-daycell--today {
 background: rgba(142, 42, 34, 0.08);
}
.wk-daycell--today .wk-daynum {
 color: var(--c-today);
 font-weight: 500;
}
.wk-daycell--today .wk-dayname {
 color: var(--c-today);
 font-weight: 700;
}

/* All-day strip */
.wk-allday {
 display: grid;
 grid-template-columns: 64px 1fr;
 border-bottom: 1px solid var(--c-rule);
 background: rgba(247, 240, 226, 0.6);
 min-height: calc(var(--alldayrows, 1) * 22px + 8px);
}
.wk-allday-label {
 padding: 6px 8px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9px;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 border-right: 1px solid var(--c-rule);
}
.wk-allday-body {
 position: relative;
}
.wk-trip {
 position: absolute;
 height: 18px;
 border-radius: 3px;
 padding: 0 8px;
 font-size: 11px;
 color: #fff;
 display: flex;
 align-items: center;
 cursor: pointer;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 line-height: 1;
 font-weight: 500;
 transition: filter 0.15s;
}
.wk-trip:hover { filter: brightness(1.1); }
.wk-trip--cl { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 4px; }
.wk-trip--cr { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 4px; }
.wk-allday-chip {
 position: absolute;
 height: 18px;
 border-radius: 3px;
 padding: 0 6px;
 font-size: 10.5px;
 background: var(--event-color);
 opacity: 0.85;
 color: #fff;
 display: flex;
 align-items: center;
 cursor: pointer;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

/* Hourly grid */
.wk-grid {
 display: grid;
 grid-template-columns: 64px repeat(7, 1fr);
}
.wk-timeaxis {
 border-right: 1px solid var(--c-rule);
}
.wk-hour {
 height: 56px;
 position: relative;
 border-bottom: 1px dashed transparent;
}
.wk-hour-label {
 position: absolute;
 top: -7px;
 right: 6px;
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9.5px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 background: var(--c-paper);
 padding: 0 4px;
}
.wk-daycol {
 position: relative;
 border-right: 1px solid var(--c-rule);
}
.wk-daycol:last-child { border-right: none; }
.wk-daycol--today { background: rgba(142, 42, 34, 0.03); }
.wk-hourcell {
 height: 56px;
 border-bottom: 1px solid var(--c-rule);
 cursor: pointer;
 transition: background 0.12s;
}
.wk-hourcell:hover { background: rgba(34, 32, 27, 0.04); }
.wk-hourcell:last-child { border-bottom: none; }

/* Timed event blocks — soft tinted fill with darker accent left border */
.wk-event {
 position: absolute;
 border-radius: 3px;
 padding: 4px 6px;
 font-size: 11px;
 line-height: 1.2;
 background: color-mix(in srgb, var(--event-color) 18%, var(--c-paper));
 color: var(--c-ink);
 border-left: 3px solid var(--event-color);
 cursor: pointer;
 overflow: hidden;
 transition: filter 0.15s;
 box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.wk-event:hover { filter: brightness(0.96); }
.wk-event-time {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 9.5px;
 letter-spacing: 0.05em;
 color: var(--c-ink-soft);
 margin-bottom: 2px;
}
.wk-event-label {
 font-weight: 600;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

/* Mobile: week view scrolls horizontally; tabs hidden */
@media (max-width: 720px) {
 .cal-tabs { display: none; }
 .wk-dayheader, .wk-allday, .wk-grid {
 grid-template-columns: 48px repeat(7, minmax(60px, 1fr));
 min-width: 460px;
 }
 .wk-daynum { font-size: 18px; }
 .wk-dayname { font-size: 8.5px; letter-spacing: 0.1em; }
 .wk-hour { height: 40px; }
 .wk-hourcell { height: 40px; }
 .wk-event { font-size: 9.5px; padding: 2px 4px; }
 .wk-event-time { font-size: 8.5px; }
}

/* =================== EXPENSES (trip detail) =================== */

.a-tripd__expenses {
 padding-top: 8px;
}
.exp-empty {
 padding: 14px 16px;
 background: var(--c-paper-deep);
 border-radius: 4px;
 color: var(--c-ink-soft);
 font-size: 13px;
}
.exp-empty-sub {
 font-size: 12px;
 margin-top: 4px;
 opacity: 0.85;
}
.exp-total {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 padding: 6px 0;
 border-bottom: 1px solid var(--c-rule);
 margin-bottom: 10px;
}
.exp-total-label {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.exp-total-amount {
 font-family: "Instrument Serif", serif;
 font-size: 22px;
 font-style: italic;
 color: var(--c-ink);
}
.exp-bar {
 display: flex;
 height: 18px;
 border-radius: 3px;
 overflow: hidden;
 background: var(--c-rule);
 margin-bottom: 12px;
}
.exp-bar-seg {
 height: 100%;
 transition: filter 0.15s;
}
.exp-bar-seg:hover { filter: brightness(1.1); }
.exp-rows {
 display: grid;
 grid-template-columns: 14px 1fr auto auto;
 row-gap: 5px;
 column-gap: 10px;
 align-items: center;
 font-size: 13px;
}
.exp-row {
 display: contents;
}
.exp-row-swatch {
 width: 10px;
 height: 10px;
 border-radius: 2px;
}
.exp-row-label {
 color: var(--c-ink);
}
.exp-row-amount {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 color: var(--c-ink);
 font-weight: 500;
}
.exp-row-pct {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 color: var(--c-ink-soft);
 font-size: 11px;
 min-width: 32px;
 text-align: right;
}
.exp-recent {
 margin-top: 16px;
 padding-top: 10px;
 border-top: 1px solid var(--c-rule);
}
.exp-recent-kicker {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
 margin-bottom: 6px;
}
.exp-recent-row {
 display: grid;
 grid-template-columns: 72px auto 1fr auto;
 column-gap: 10px;
 align-items: center;
 padding: 3px 0;
 font-size: 12.5px;
}
.exp-recent-date {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 10.5px;
 color: var(--c-ink-soft);
}
.exp-recent-cat {
 display: inline-block;
 padding: 1px 6px;
 border-radius: 2px;
 font-size: 9.5px;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #fff;
 font-weight: 600;
}
.exp-recent-desc {
 color: var(--c-ink);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.exp-recent-amount {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-weight: 500;
 color: var(--c-ink);
}

/* =================== TRAVEL SPEND YTD CARD (hub home) =================== */

.a-spend {
 padding: 14px 18px;
 margin: 8px 0 14px;
 background: var(--c-paper-deep);
 border: 1px solid var(--c-rule);
 border-radius: 4px;
}
.a-spend__row {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 gap: 16px;
 flex-wrap: wrap;
}
.a-spend__kicker {
 font-family: "JetBrains Mono", ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--c-ink-soft);
}
.a-spend__total {
 font-family: "Instrument Serif", serif;
 font-size: 26px;
 font-style: italic;
 color: var(--c-ink);
 line-height: 1;
}
.a-spend__empty {
 font-style: italic;
 color: var(--c-ink-soft);
 font-size: 13px;
}
.a-spend__breakdown {
 display: flex;
 gap: 14px;
 margin-top: 8px;
 flex-wrap: wrap;
}
.a-spend__chip {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 12px;
 color: var(--c-ink-soft);
 font-family: "JetBrains Mono", ui-monospace, monospace;
 letter-spacing: 0.04em;
}
.a-spend__dot {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 display: inline-block;
}

@media (max-width: 720px) {
 .a-spend { padding: 10px 12px; }
 .a-spend__total { font-size: 20px; }
 .exp-recent-row {
 grid-template-columns: 60px auto 1fr auto;
 column-gap: 6px;
 font-size: 11px;
 }
 .exp-recent-cat { font-size: 8.5px; }
}