/* Q Calendar app - the whole stylesheet. No framework.

   Palette and type are qphilosophy.com's (Web Root/book-website/css/style.css and
   calendar.css): deep navy, light blue, cool paper, Palatino. The holiday colour
   coding is the site calendar's: solar blue, civic navy, Master Summit brass,
   Intermission dashed on tinted paper. Your own entries take the one colour the
   site doesn't have, a muted green, so they never read as holidays. Phone first. */

/* ------------------------------------------------------------ typeface --
   As on the site: local() first, so Windows and macOS use the installed
   Palatino and download nothing; Android falls back to the self-hosted TeX
   Gyre Pagella (GUST Font License, see fonts/). Never preload these:
   preload bypasses local(). */

@font-face {
    font-family: 'Pagella';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Palatino Linotype'), local('PalatinoLinotype-Roman'),
         local('Palatino'), local('Palatino-Roman'),
         local('Book Antiqua'), local('URW Palladio L'),
         url('../fonts/pagella-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pagella';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Palatino Linotype Italic'), local('PalatinoLinotype-Italic'),
         local('Palatino Italic'), local('Palatino-Italic'),
         local('Book Antiqua Italic'),
         url('../fonts/pagella-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Pagella';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Palatino Linotype Bold'), local('PalatinoLinotype-Bold'),
         local('Palatino Bold'), local('Palatino-Bold'),
         local('Book Antiqua Bold'),
         url('../fonts/pagella-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pagella';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local('Palatino Linotype Bold Italic'), local('PalatinoLinotype-BoldItalic'),
         local('Palatino Bold Italic'), local('Palatino-BoldItalic'),
         local('Book Antiqua Bold Italic'),
         url('../fonts/pagella-bolditalic.woff2') format('woff2');
}

/* -------------------------------------------------------------- tokens -- */

:root {
    /* The site's palette, verbatim. */
    --navy-900: #0b1526;
    --navy-800: #10203a;
    --navy-700: #1a2d4d;
    --navy-600: #24406b;
    --blue-400: #5a9fd4;
    --blue-300: #7fb8e3;
    --blue-200: #a8d0ee;

    --font-book: 'Pagella', 'Palatino Linotype', Palatino, 'Book Antiqua',
                 'URW Palladio L', Georgia, 'Times New Roman', serif;

    /* Roles. Everything below this line uses roles, never the raw palette,
       so dark mode only has to reassign roles. */
    --paper: #f7f8fa;
    --paper-2: #eef1f6;
    --card: #ffffff;
    --rule: rgba(28, 38, 53, 0.12);
    --ink: #1c2635;
    --ink-soft: #55637a;
    --ink-faint: #8593a8;
    --heading: var(--navy-700);

    --bar: var(--navy-900);           /* the masthead, like the site's navbar */
    --on-bar: #eaf0f8;
    --on-bar-soft: rgba(234, 240, 248, 0.6);

    --accent: var(--blue-400);        /* fills and edges: today, solar days, focus */
    --accent-ink: var(--navy-700);    /* text and controls, as the site's buttons */
    --accent-soft: var(--paper-2);
    --on-accent: #ffffff;

    --solar: var(--blue-400);
    --civic: var(--navy-600);
    --summit: #a8823c;                /* edges and dots only */
    --summit-ink: #7a5d28;            /* text: clears 4.5:1 on white */
    --intermission: var(--navy-600);
    --intermission-soft: var(--paper-2);

    --entry: #3d7a68;
    --entry-soft: #e4f0ec;
    --danger: #9a3b3b;

    --radius: 4px;
    --radius-lg: 8px;
    --shadow-card: 0 1px 2px rgba(16, 32, 58, 0.05), 0 8px 24px -12px rgba(16, 32, 58, 0.18);
    --tabbar-height: 58px;
}

/* The site has no dark mode; this one is its navy sections turned into a page. */
@media (prefers-color-scheme: dark) {
    :root {
        --paper: var(--navy-900);
        --paper-2: var(--navy-700);
        --card: var(--navy-800);
        --rule: rgba(234, 240, 248, 0.12);
        --ink: #eaf0f8;
        --ink-soft: rgba(234, 240, 248, 0.72);
        --ink-faint: rgba(234, 240, 248, 0.48);
        --heading: var(--blue-200);

        --bar: #070e1a;

        --accent: var(--blue-400);
        --accent-ink: var(--blue-200);
        --accent-soft: var(--navy-700);
        --on-accent: var(--navy-900);

        --civic: var(--blue-200);
        --summit: #c9a25a;
        --summit-ink: #dcbb7a;
        --intermission: var(--blue-300);
        --intermission-soft: var(--navy-700);

        --entry: #7cc4ab;
        --entry-soft: #15302b;
        --danger: #e8908f;
        --shadow-card: none;
    }
}

/* ---------------------------------------------------------------- base -- */

* { box-sizing: border-box; }

/* overscroll-behavior-x: Chrome otherwise treats a sideways swipe as "go back a page" on top of
   the app's own swipe between days/weeks/months, and leaves the app (seen in testing). */
html, body { overscroll-behavior-x: none; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    /* Palatino's small x-height reads small; the site bumps prose the same way. */
    font: 17px/1.55 var(--font-book);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }
h1:focus { outline: none; }

/* As on the site: headings at 400 in navy. Pagella's bold is reserved for emphasis. */
h1, h2 { font-weight: 400; color: var(--heading); }

::selection { background: var(--blue-400); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.gregorian-note, .greg {
    color: var(--ink-faint);
    font-style: italic;
}

.gregorian-note { font-size: 12px; }

/* Every Gregorian date carries the word, in the same quiet italic as the date itself, so the
   whole note reads as an aside next to the upright Q dates (the user's request). */
.greg-label { font-style: italic; }

/* A phone's month cell (~52px) can't fit the word; the caption under the grid says it once,
   and each cell's title still reads "Gregorian 27 Sep". Wide screens label every cell. */
.cell .greg-label { display: none; }
.grid-note { margin: 6px 0 0; text-align: right; font-size: 12px; font-style: italic; color: var(--ink-faint); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The site's small-caps-style labels. */
.today-label, .field > span, .weekday, .detail-grid .head, .week-head span {
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------- masthead -- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: var(--bar);
    color: var(--on-bar);
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 21px;
    text-decoration: none;
    color: var(--on-bar);
}

.wordmark img { width: 28px; height: 28px; display: block; }

.today-chip {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    text-align: right;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
    min-width: 0;
}

.today-label { font-size: 10px; font-weight: 700; color: var(--blue-400); }

/* ------------------------------------------------------------ banners -- */

.banner {
    margin: 12px 16px 0;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: 14px;
}

.banner.problem { background: var(--accent-soft); color: var(--danger); border: 1px solid var(--danger); }

.banner.alerts {
    background: var(--entry-soft);
    border: 1px solid var(--entry);
    display: grid;
    gap: 6px;
}

.banner.update {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--ink);
}

.banner.update .button { flex: none; white-space: nowrap; }

.alert-row { display: flex; align-items: center; gap: 10px; }
.alert-row a { flex: 1; text-decoration: none; display: flex; flex-direction: column; }
.alert-row span { font-size: 12px; color: var(--ink-soft); }

/* --------------------------------------------------------------- page -- */

main {
    max-width: 1140px;
    margin: 0 auto;
    padding: 18px 16px calc(var(--tabbar-height) + 32px + env(safe-area-inset-bottom));
}

.empty { color: var(--ink-soft); font-style: italic; }
.hint, small { color: var(--ink-faint); font-size: 13px; }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}

.section-head h1, .section-head h2 { margin: 0; }
.section-head h2 { font-size: 22px; }

/* ------------------------------------------------------------- tabbar -- */

.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--card);
    border-top: 1px solid var(--rule);
}

.tabbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 15px;
    color: var(--ink-faint);
    border-top: 3px solid transparent;
}

.tabbar a.active { color: var(--accent-ink); border-top-color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------ buttons -- */

.button, button.link {
    font: inherit;
    cursor: pointer;
}

/* The site's .btn-outline and .btn-primary. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 6px 16px;
    border: 1px solid var(--accent-ink);
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent-ink);
    font-size: 15px;
    text-decoration: none;
}

.button:hover { background: var(--accent-ink); color: var(--card); }
.button.primary { background: var(--blue-400); border-color: var(--blue-400); color: var(--navy-900); }
.button.primary:hover { background: var(--blue-300); border-color: var(--blue-300); }
.button.danger { border-color: var(--danger); color: var(--danger); margin-left: auto; }
.button.danger:hover { background: var(--danger); color: var(--card); }

button.link {
    border: 0;
    background: none;
    color: var(--ink-faint);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
}

.add-row, .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------------------------------------------------- calendar header --
   Shared by Day, Week, Month and Year (CalendarHeader.razor): the view switcher, Today, big
   thumb-sized arrows, and a title that opens "go to a date". */

.cal-header { margin-bottom: 16px; }

.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.view-switch {
    display: grid;
    grid-template-columns: repeat(4, auto);
    border: 1px solid var(--accent-ink);
    border-radius: var(--radius);
    overflow: hidden;
}

.view-switch a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    font-size: 15px;
    text-decoration: none;
    color: var(--accent-ink);
    background: var(--card);
}

.view-switch a + a { border-left: 1px solid var(--accent-ink); }
.view-switch a:hover { background: var(--accent-soft); }
.view-switch a.on { background: var(--accent-ink); color: var(--card); }

/* Already showing today: still tappable, but quiet. */
.today-button.is-here { opacity: 0.45; }

.cal-title-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding-bottom: 4px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: var(--card);
    font-size: 32px;
    line-height: 1;
    text-decoration: none;
    color: var(--accent-ink);
}

.nav-arrow:hover { border-color: var(--accent); background: var(--accent-soft); }
span.nav-arrow { visibility: hidden; }   /* keeps the title centred at the ends of the range */

.cal-title { text-align: center; min-width: 0; }
.cal-title .weekday { margin: 0; }
.cal-title h1 { margin: 0; font-size: 32px; line-height: 1.15; }
.cal-title .month-span { margin: 2px 0 0; font-size: 13px; }

.title-button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: var(--radius);
    padding: 2px 8px;
    cursor: pointer;
}

.title-button:hover { background: var(--accent-soft); }
.caret { margin-left: 6px; font-size: 0.4em; vertical-align: middle; color: var(--ink-faint); }

.goto {
    display: grid;
    gap: 8px;
    max-width: 440px;
    margin: 12px auto 0;
    padding: 12px;
    background: var(--card);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.goto .actions { margin-top: 4px; }

.field-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

/* --------------------------------------------------------- year view -- */

.leap-flag {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--blue-400);
    border: 1px solid currentColor;
    border-radius: 99px;
    padding: 0 8px;
}

.year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.month-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 10px 8px;
    text-decoration: none;
    display: block;
}

.month-card:hover, .month-card.current { border-color: var(--accent); }

.month-card header { display: flex; align-items: baseline; gap: 6px; }

.month-ord {
    font-size: 10px;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0 4px;
}

.month-name { font-size: 17px; color: var(--heading); }

.month-span { font-size: 11px; color: var(--ink-faint); font-style: italic; margin: 0 0 6px; }

.week-head, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }

.week-head span { text-align: center; font-size: 8px; font-weight: 700; color: var(--ink-faint); padding-bottom: 2px; }

.days b {
    position: relative;
    font-weight: 400;
    text-align: center;
    font-size: 11px;
    /* Room at the foot for the holiday dots, on every cell so rows stay level. */
    padding: 2px 0 6px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

/* As on the site, a holiday is a dot on a day, not a state of it, so it can sit
   alongside today and your entries. ::after is solar/civic, ::before the summit. */
.days b.holiday::after,
.days b.summit::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
}

.days b.holiday::after { background: var(--solar); }
.days b.summit::before { background: var(--summit); }
.days b.holiday.summit::after { margin-left: -5px; }
.days b.holiday.summit::before { margin-left: 1px; }

.days b.has-entry { background: var(--entry-soft); color: var(--entry); font-weight: 700; }
.days b.today { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.days b.today.holiday::after, .days b.today.summit::before { background: var(--on-accent); }

.intermission-card {
    grid-column: 1 / -1;
    background: var(--intermission-soft);
    border: 1px dashed var(--intermission);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    text-decoration: none;
}

.intermission-card h2 { margin: 0; font-size: 20px; }
.intermission-card p { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); max-width: 54ch; }

.intermission-days { display: flex; gap: 10px; margin-left: auto; }

.intermission-days div {
    background: var(--card);
    border: 1px solid var(--intermission);
    border-radius: var(--radius);
    padding: 6px 12px;
    text-align: center;
    min-width: 76px;
}

.intermission-days .ord { font-size: 20px; display: block; color: var(--heading); font-variant-numeric: tabular-nums; }
.intermission-days .greg { font-size: 11px; }
.intermission-days .has-entry { box-shadow: inset 0 -3px 0 var(--entry); }
.intermission-days .today { background: var(--accent); border-color: var(--accent); }
.intermission-days .today .ord, .intermission-days .today .greg { color: var(--on-accent); }

.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 18px;
    font-size: 12px;
    color: var(--ink-faint);
}

.swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
    vertical-align: -1px;
    margin-right: 4px;
}

.swatch.today { background: var(--accent); }
.swatch.has-entry { background: var(--entry-soft); border: 1px solid var(--entry); }
.swatch.dot { width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px; }
.swatch.solar { background: var(--solar); }
.swatch.summit { background: var(--summit); }

/* ------------------------------------------------------------ day view --
   All-day items, then the hours in their own scroll box so the header and all-day items stay
   put. Entries have no duration, so each sits in its hour's row; an empty hour is one big
   "add at this time" target. */

.all-day { display: grid; gap: 6px; margin-bottom: 14px; }

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;   /* rows' offsetTop is measured from here (qcal.scrollTimeline) */
    max-height: max(320px, calc(100vh - 400px));
    max-height: max(320px, calc(100dvh - 400px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
}

.hour { display: grid; grid-template-columns: 56px minmax(0, 1fr); min-height: 52px; border-top: 1px solid var(--rule); }
.hour:first-child { border-top: 0; }
.hour-label { padding: 6px 0 0 10px; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hour-slot { position: relative; padding: 4px 8px 4px 0; }

.slot-add {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 14px;
    font-size: 20px;
    text-decoration: none;
    color: transparent;
}

.slot-add:hover, .slot-add:focus-visible, .slot-add:active { color: var(--ink-faint); background: var(--accent-soft); }

/* Entries sit above the add target so they stay tappable. */
.hour-slot .agenda-items { position: relative; z-index: 1; margin: 0; }

.now-line {
    position: absolute;
    left: -56px;
    right: 0;
    z-index: 2;
    border-top: 2px solid var(--accent);
    pointer-events: none;
}

.now-line::before {
    content: '';
    position: absolute;
    left: 50px;
    top: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

/* ---------------------------------------------------------- month view -- */

.weekday { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--blue-400); }

.detail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.detail-grid.intermission { display: flex; justify-content: center; gap: 10px; }
.detail-grid.intermission .cell { width: 140px; }

.detail-grid .head {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-faint);
}

.cell {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    min-height: 58px;
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.cell:hover { border-color: var(--accent); }
.cell .q { font-size: 17px; color: var(--heading); font-variant-numeric: tabular-nums; }
.cell .greg { font-size: 10px; margin-top: auto; }
.cell.today { border-color: var(--accent); background: var(--accent-soft); }
.cell.today .q { font-weight: 700; }

.marks { display: flex; gap: 3px; min-height: 7px; }
.mark { width: 7px; height: 7px; border-radius: 50%; }
.mark.holiday { background: var(--solar); }
.mark.summit { background: var(--summit); }
.mark.has-entry { background: var(--entry); }

/* The four weeks under a month grid. */
.week-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }

.week-links a {
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 0;
    color: var(--accent-ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--card);
}

.week-links a:hover { border-color: var(--accent); }
.week-links a.current { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.week-links a:only-child { grid-column: 1 / -1; }

/* ------------------------------------------------------------- agenda -- */

.agenda-day { margin-top: 16px; }

.agenda-date {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-decoration: none;
    font-size: 16px;
    color: var(--heading);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
}

.agenda-date.is-today { font-weight: 700; }

.wd-short { display: none; }

.agenda-items { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.agenda-items:empty { display: none; }

.agenda-add {
    display: block;
    margin-top: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--ink-faint);
    text-decoration: none;
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
}

.agenda-add:hover { color: var(--accent-ink); border-color: var(--accent); }

/* Week view: today's day stands out the way today does everywhere else. */
.week-days .agenda-day.is-today .agenda-date { border-bottom: 2px solid var(--accent); }

/* The site's holiday list: white card, coloured left edge saying which kind. */
.item {
    background: var(--card);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule);
    border-radius: var(--radius);
}

.item, .item > a { display: flex; gap: 12px; padding: 8px 12px; }
.item > a { flex: 1; margin: -8px -12px; text-decoration: none; }

.item-time { flex: 0 0 52px; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 2px; }
.item-body { display: flex; flex-direction: column; min-width: 0; }
.item-body strong { font-weight: 400; font-size: 17px; color: var(--heading); }
.item-body small { font-size: 12px; color: var(--ink-soft); }

.item.kind-solar { border-left-color: var(--solar); }
.item.kind-civic { border-left-color: var(--civic); }
.item.kind-summit { border-left-color: var(--summit); }
.item.kind-summit strong { color: var(--summit-ink); }
.item.kind-intermission { border-left-color: var(--intermission); border-left-style: dashed; background: var(--intermission-soft); }
.item.entry { border-left-color: var(--entry); }

/* ------------------------------------------------------------- editor -- */

.editor { display: grid; gap: 16px; max-width: 560px; }

.field { display: grid; gap: 6px; }
.field > span { font-size: 11px; font-weight: 700; color: var(--ink-faint); }

input, select, textarea {
    font: inherit;
    font-size: 16px; /* 16px stops mobile browsers zooming on focus */
    padding: 8px 10px;
    min-height: 42px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    width: 100%;
}

input[type=checkbox] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--navy-600); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.date-picker { display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 8px; }
.picker-note { font-size: 13px; color: var(--ink-soft); }

.inline { display: flex; align-items: center; gap: 16px; }
.inline input[type=time] { width: auto; }

.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check.row { align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.check.row span { display: flex; flex-direction: column; }
.check.row strong { font-weight: 400; color: var(--heading); }
.check.row input { margin-top: 3px; flex: none; }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--accent-ink); border-radius: var(--radius); overflow: hidden; }

.segmented button {
    font: inherit;
    padding: 10px 0;
    border: 0;
    background: var(--card);
    color: var(--accent-ink);
    cursor: pointer;
}

.segmented button + button { border-left: 1px solid var(--accent-ink); }
.segmented button.on { background: var(--accent-ink); color: var(--card); }

.problems { color: var(--danger); margin: 0; padding-left: 18px; }

/* ----------------------------------------------------------- settings -- */

.panel {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 4px 16px 16px;
    margin-top: 16px;
    max-width: 640px;
}

.panel h2 { font-size: 21px; margin: 12px 0 4px; }
.panel .actions { margin-top: 8px; }

/* ----------------------------------------------- framework furniture -- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--navy-900);
    color: #eaf0f8;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 10px; }

.blazor-error-boundary { padding: 1rem; background: var(--accent-soft); color: var(--danger); border-radius: var(--radius-lg); }
.blazor-error-boundary::after { content: "Something went wrong."; }

.loading-progress { position: relative; display: block; width: 6rem; height: 6rem; margin: 30vh auto 1rem; }

.loading-progress circle {
    fill: none;
    stroke: var(--rule);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text { position: absolute; inset: calc(30vh + 2.4rem) 0 auto 0; text-align: center; color: var(--ink-faint); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ------------------------------------------------------- wider screens -- */

@media (min-width: 720px) {
    .masthead { padding-left: 24px; padding-right: 24px; }
    .today-chip { font-size: 16px; }
    main { padding-left: 24px; padding-right: 24px; }
    .cal-title h1 { font-size: 40px; }
    .year-grid { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 16px; }
    .month-card { padding: 14px; }
    .month-name { font-size: 20px; }
    .days b { font-size: 13px; padding: 4px 0 8px; }
    .week-head span { font-size: 10px; }
    .detail-grid { gap: 6px; }
    .detail-grid .head { font-size: 11px; }
    .cell { min-height: 84px; padding: 8px 10px; }
    .cell .q { font-size: 22px; }
    .cell .greg { font-size: 11px; }
    .cell .greg-label { display: inline; }
    .grid-note { display: none; }

    /* On a wide screen the tab bar becomes a strip under the masthead. It comes last in the
       markup (for the phone's fixed bottom bar), so reorder rather than rely on sticky. */
    #app { display: flex; flex-direction: column; min-height: 100vh; }
    .masthead { order: -2; }
    main { width: 100%; }   /* a flex item would otherwise shrink to its content */

    .tabbar {
        order: -1;
        position: sticky;
        top: 52px;
        height: auto;
        padding: 0;
        border-top: 0;
        border-bottom: 1px solid var(--rule);
        grid-template-columns: repeat(3, max-content);
        justify-content: center;
        gap: 8px;
    }

    .week-links { max-width: 560px; margin-inline: auto; }

    .tabbar a { padding: 10px 18px; border-top: 0; border-bottom: 3px solid transparent; }
    .tabbar a.active { border-bottom-color: var(--accent); }
    main { padding-bottom: 48px; }
}

/* ---------------------------------------------- the week as columns --
   Seven columns, Sunday to Saturday, like a month row opened up. Below 1100px a column
   can't hold even "Wed, September 25", so the week stays a stacked list there.
   Breakpoints are measured, not guessed: the widest heading ("Wednesday, September 25")
   needs 175px, which seven columns give from a 1340px window. Between the two, the
   weekday is shortened rather than wrapped. Re-measure if the font size changes. */

@media (min-width: 1100px) {
    /* Seven columns need more room than a page of prose, so a page holding a week gets a
       wider measure. Other pages keep the narrower one. */
    main:has(.week-days) { max-width: 1440px; }

    .week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
    .week-days .agenda-day { margin-top: 0; min-width: 0; }
    .week-days .agenda-date { flex-direction: column; gap: 0; font-size: 15px; white-space: nowrap; }
    .week-days .item, .week-days .item > a { flex-direction: column; gap: 2px; }
    .week-days .item-time { flex: none; padding-top: 0; }
    .week-days .item-time:empty { display: none; }
    .week-days .item-body strong { font-size: 15px; overflow-wrap: anywhere; }
}

@media (min-width: 1100px) and (max-width: 1339px) {
    .week-days .wd-long { display: none; }
    .week-days .wd-short { display: inline; }
}