:root {
  color-scheme: light;
  --ink: #24231f;
  --muted: #79766e;
  --soft: #aaa69b;
  --canvas: #efede6;
  --card: #fcfbf7;
  --line: rgba(43, 41, 35, 0.10);
  --purple: #6e61ff;
  --coral: #ff785a;
  --green: #259b77;
  --yellow: #f4bc52;
  --shadow: 0 18px 60px rgba(52, 47, 37, 0.07), 0 2px 8px rgba(52, 47, 37, 0.03);
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: linear-gradient(145deg, #f3f0e9 0%, #ebe9e2 55%, #f3eee5 100%); }
button, input, select { font: inherit; }
button { color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(110, 97, 255, 0.25); outline-offset: 2px; }
.hidden { display: none !important; }

.ambient { position: fixed; border-radius: 999px; filter: blur(4px); opacity: .55; pointer-events: none; }
.ambient-one { width: 340px; height: 340px; top: -170px; right: 14%; background: radial-gradient(circle, rgba(255, 194, 115, .42), transparent 70%); }
.ambient-two { width: 400px; height: 400px; bottom: -220px; left: 22%; background: radial-gradient(circle, rgba(142, 128, 255, .18), transparent 70%); }

.eyebrow, .section-kicker { margin: 0; font-size: 10px; font-weight: 750; letter-spacing: .2em; color: var(--muted); }
.app-shell { position: relative; width: 100%; max-width: 100vw; height: 100dvh; overflow: hidden; overscroll-behavior: none; touch-action: pan-y; }
.screen-page { position: absolute; z-index: 1; inset: 0; width: 100%; min-width: 0; height: 100dvh; overflow-x: hidden; overflow-y: auto; pointer-events: none; transform: translate3d(100%, 0, 0); transition: transform .32s cubic-bezier(.22,.78,.24,1); }
.screen-page.is-before { transform: translate3d(-100%, 0, 0); }
.screen-page.is-active { z-index: 2; pointer-events: auto; transform: translate3d(0, 0, 0); }
.app-shell.no-page-transition .screen-page { transition: none; }
.dashboard-page { display: grid; grid-template-columns: 78px minmax(0, 1fr); }

.rail { position: sticky; top: 0; z-index: 10; height: 100vh; display: flex; flex-direction: column; align-items: center; padding: max(22px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom)); border-right: 1px solid var(--line); background: #f3f0e9; }
.brand { position: relative; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 15px; color: #fff; background: var(--ink); font-weight: 800; font-size: 15px; letter-spacing: -.04em; box-shadow: 0 8px 22px rgba(30, 29, 26, .18); }
.brand-dot { position: absolute; right: 8px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.rail-nav { display: flex; flex-direction: column; gap: 12px; margin-top: 70px; }
.rail-button, .icon-button, .small-icon-button { display: grid; place-items: center; border: 0; cursor: pointer; background: transparent; }
.rail-button { width: 44px; height: 44px; border-radius: 14px; color: #8d897f; transition: .2s ease; }
.rail-button svg, .icon-button svg, .small-icon-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-button:hover, .rail-button.active { color: var(--ink); background: rgba(255,255,255,.78); box-shadow: 0 6px 20px rgba(50,45,35,.07); transform: translateY(-1px); }
.rail-settings { margin-top: auto; }

.board { position: relative; z-index: 1; width: min(1550px, 100%); margin: 0 auto; padding: 28px 32px 18px; }
.topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.topbar h1 { margin: 5px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 3vw, 43px); font-weight: 500; letter-spacing: -.045em; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.clock { display: flex; align-items: flex-start; min-width: 118px; font-size: 34px; font-weight: 650; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.clock small { margin: 6px 0 0 5px; font-size: 9px; letter-spacing: .12em; color: var(--muted); }
.icon-button { width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.52); }
.icon-button:hover { background: #fff; }

.weather-hero { position: relative; overflow: hidden; min-height: 164px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 26px clamp(28px, 3.5vw, 50px); border: 1px solid rgba(255,255,255,.26); border-radius: 30px; color: #fff; background-color: #536b78; background-image: linear-gradient(90deg, rgba(13,20,28,.71) 0%, rgba(13,20,28,.32) 48%, rgba(13,20,28,.57) 100%), var(--weather-scene, linear-gradient(108deg, #e4b779, #8d86be)); background-position: center 52%; background-size: cover; box-shadow: 0 16px 50px rgba(43,48,53,.18); text-shadow: 0 2px 10px rgba(0,0,0,.34); }
.weather-hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: 31%; top: -190px; border-radius: 50%; background: rgba(255,255,255,.14); box-shadow: 0 0 60px rgba(255,255,255,.13); pointer-events: none; }
.weather-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; }
.weather-symbol { width: 90px; height: 90px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.24); border-radius: 27px; background: rgba(12,20,27,.28); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.12); font-size: 50px; text-shadow: 0 3px 12px rgba(0,0,0,.32); backdrop-filter: blur(10px); }
.weather-location { margin: 0 0 5px; font-size: 14px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.weather-reading { display: flex; align-items: baseline; gap: 15px; }
.weather-reading strong { font-size: 58px; line-height: 1; letter-spacing: -.055em; }
.weather-reading span { font-family: Georgia, serif; font-size: 27px; line-height: 1.1; }
.weather-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: 12px; }
.weather-stats div { min-width: 112px; padding: 15px 18px; border-left: 1px solid rgba(255,255,255,.3); }
.weather-stats span { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.76); }
.weather-stats strong { font-size: 20px; font-weight: 700; }

/* Stacked full-width cards rather than a calendar-plus-sidebar split. The to-do list is
   read from the same distance as the calendar, and a 300px column left ordinary titles
   ellipsised a couple of words in; below the calendar it gets the whole board width. */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.side-column { display: grid; gap: 18px; align-self: stretch; align-content: stretch; }
.side-column .tasks-card { display: flex; flex-direction: column; }
.side-column .task-list { flex: 1 1 auto; min-height: 0; }
/* Opaque, not translucent-with-a-backdrop-blur: these surfaces were designed over a cream
   canvas and now sit on a black one, where a blurred backdrop has nothing to show and only
   darkens them. It also keeps Safari backdrop-filter, which misrenders inside the promoted
   3D-transformed page, off the dashboard entirely. */
.card { border: 1px solid rgba(41, 38, 31, .08); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 23px 24px 16px; }
.card-header h2 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 23px; font-weight: 500; letter-spacing: -.035em; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.sync-note { font-size: 10px; color: var(--muted); }
.small-icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.small-icon-button svg { width: 17px; }
.small-icon-button.is-spinning svg { animation: spin .8s linear infinite; }

/* Today and the days ahead are two cards, not two halves of one. Sharing a card meant
   today shared the four-column width and the same flat near-white background, and read as
   one slab from across the room. Both cards now carry a tint of their own, and an event is
   a saturated tile rather than a 10%-of-colour wash that resolved to white at a distance. */
.today-card, .ahead-card { overflow: hidden; }
.today-card {
  border-color: rgba(110, 97, 255, .17);
  background:
    radial-gradient(125% 150% at 0% 0%, rgba(255, 205, 138, .62), transparent 56%),
    radial-gradient(115% 135% at 100% 4%, rgba(160, 145, 255, .44), transparent 58%),
    linear-gradient(158deg, #fffaf0, #f7f2ff 70%, #fdf2e8);
}
.today-header { padding-bottom: 15px; }
.today-header .section-kicker { color: #6152cf; }
.today-count { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #6e61ff, #9257ff); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 5px 16px rgba(110, 97, 255, .3); }
.today-events { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 24px 22px; }

.ahead-card { background: linear-gradient(168deg, #f6efe0, #e8e4f5 76%, #f7eee2); }
.ahead-header { padding-bottom: 13px; }
.ahead-header .section-kicker { color: #7f6b51; }
.calendar-grid { min-height: 268px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 24px 22px; }

/* Each day ahead is its own tinted card on a rotating accent. Four columns split by
   hairlines over one cream background is exactly the monotone the dividers cannot fix;
   the accent also gives the eye a fixed landmark per column from a few feet away. */
.day-column { min-width: 0; padding: 14px 12px 15px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 17%, #fff), color-mix(in srgb, var(--accent) 5%, #fff)); box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 13%, transparent); }
.day-column[data-accent="0"] { --accent: var(--purple); }
.day-column[data-accent="1"] { --accent: var(--coral); }
.day-column[data-accent="2"] { --accent: var(--green); }
.day-column[data-accent="3"] { --accent: var(--yellow); }
.day-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 1px 12px; }
.day-name { font-size: 14px; font-weight: 800; letter-spacing: .1em; color: color-mix(in srgb, var(--accent) 68%, #302d27); }
.day-number { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #fff; background: color-mix(in srgb, var(--accent) 88%, #241c12); font-size: 17px; font-weight: 800; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 34%, transparent); }
.day-events { display: flex; flex-direction: column; gap: 8px; }
.event { position: relative; overflow: hidden; min-height: 78px; padding: 11px 12px 10px 17px; border: 1px solid color-mix(in srgb, var(--event) 40%, transparent); border-radius: 15px; background: linear-gradient(140deg, color-mix(in srgb, var(--event) 34%, #fff), color-mix(in srgb, var(--event) 15%, #fff)); box-shadow: 0 4px 12px color-mix(in srgb, var(--event) 17%, transparent); }
.event::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--event); }
.event-time { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 850; letter-spacing: .06em; color: color-mix(in srgb, var(--event) 78%, #17150f); text-transform: uppercase; }
.event-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; font-weight: 750; line-height: 1.24; }
.event-location { display: block; overflow: hidden; margin-top: 6px; color: color-mix(in srgb, var(--event) 44%, #514d46); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.day-empty { padding: 18px 6px; font-family: Georgia, serif; font-size: 14px; font-style: italic; color: color-mix(in srgb, var(--accent, #9b9689) 42%, #8f8a7e); text-align: center; }
.day-more { padding: 7px 6px; border-radius: 10px; color: color-mix(in srgb, var(--accent, var(--ink)) 68%, #2b2822); background: color-mix(in srgb, var(--accent, var(--ink)) 16%, #fff); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-align: center; }

/* The to-do card is built out of the same parts as the two calendar cards above it: a tinted
   surface of its own, a grid of tiles on the calendar's column rhythm, and a colour bar down
   the left edge of every tile. A hairline list on a near-white card read as a different app
   stapled to the bottom of the board - from the same three feet the calendar is read at, a
   task was a grey line where an event was a card. */
.tasks-card {
  overflow: hidden;
  border-color: rgba(37, 155, 119, .17);
  background:
    radial-gradient(120% 145% at 100% 0%, rgba(150, 226, 197, .48), transparent 58%),
    linear-gradient(168deg, #f3f8ef, #e9f2ef 72%, #f8f2e6);
}
.tasks-card .card-header { padding-bottom: 13px; }
.tasks-card .section-kicker { color: #3d7f66; }
.task-header-tools { display: flex; align-items: center; gap: 6px; }
/* Both owner controls were sized for the 300px sidebar this card used to sit in, where
   110px was all the header could spare; it clipped its own default option to "All ow…".
   The card is full-width now, so they grow with it and only fall back to the old widths
   on a phone. 210px clears an ordinary name; longer ones still ellipsise. */
.owner-filter-select { max-width: min(210px, 42vw); height: 34px; padding: 0 25px 0 11px; border: 1px solid rgba(37, 155, 119, .22); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, .88); font-size: 13px; font-weight: 700; outline: 0; text-overflow: ellipsis; }
/* The same filled chip today's event count wears, in this card's accent: the two counts sit
   one above the other down the board and should not read as two different kinds of thing. */
.task-progress { display: grid; place-items: center; min-width: 50px; height: 34px; padding: 0 13px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #2fb187, #1f8d6b); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 5px 16px rgba(37, 155, 119, .28); }
.quick-add { display: grid; grid-template-columns: 40px minmax(0, 1fr) clamp(88px, 14vw, 168px); align-items: center; gap: 5px; margin: 0 24px 14px; padding: 6px 8px 6px 6px; border: 1px solid rgba(37, 155, 119, .2); border-radius: 15px; background: rgba(255, 255, 255, .72); }
.quick-add:focus-within { border-color: rgba(37, 155, 119, .42); background: #fff; box-shadow: 0 0 0 3px rgba(37, 155, 119, .1); }
.quick-add button { width: 38px; height: 38px; border: 0; border-radius: 11px; color: #fff; background: var(--ink); cursor: pointer; font-size: 25px; line-height: 1; }
.quick-add input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.quick-add input::placeholder { color: #a5a196; }
.quick-add .task-owner-input { width: 100%; padding: 6px 2px 6px 9px; border-left: 1px solid rgba(37, 155, 119, .22); color: #1f8d6b; font-size: 16px; font-weight: 700; }

/* The same grid as .calendar-grid, so a task lines up under the day column above it. --task
   is declared here as well as set per tile from script: every colour below is a color-mix on
   it, and one unresolved variable would drop the tile's border, fill and bar together. */
.task-list { --task: var(--purple); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 12px; overflow: auto; padding: 0 24px 22px; }
.task-empty { grid-column: 1 / -1; --accent: #6f8f80; }
/* Deliberately the .event tile's own box: same min-height, radius, tint depth, shadow and
   5px colour bar. An event takes that colour from its calendar, a task from its owner. */
.task-item { position: relative; overflow: hidden; min-height: 78px; display: grid; grid-template-columns: 26px minmax(0, 1fr) 28px; align-items: center; gap: 10px; padding: 11px 12px 10px 17px; border: 1px solid color-mix(in srgb, var(--task) 40%, transparent); border-radius: 15px; background: linear-gradient(140deg, color-mix(in srgb, var(--task) 30%, #fff), color-mix(in srgb, var(--task) 12%, #fff)); box-shadow: 0 4px 12px color-mix(in srgb, var(--task) 17%, transparent); }
.task-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--task); }
.task-check { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 2px solid color-mix(in srgb, var(--task) 52%, #8d887c); border-radius: 7px; background: rgba(255, 255, 255, .72); cursor: pointer; }
.task-check svg { width: 15px; fill: none; stroke: white; stroke-width: 2.5; }
.task-copy { min-width: 0; }
/* The title is the .event-title box, clamp included, so a task wraps the way an event does. */
.task-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; padding: 0; border: 0; background: none; cursor: text; font-size: 17px; font-weight: 750; line-height: 1.24; text-align: left; }
/* The owner sits where an event's time sits and is set like one - small, uppercase, tracked,
   in the tile's own colour.
   A block box with inline children, not a flex row. text-overflow truncates inline
   content only, so on a flex container it was never going to work: first it hard-clipped
   ("Yang" as "Yar"), then, once the name had its own shrinkable item, iPad WebKit sized
   that item off the flex container's shrink-to-fit width and collapsed it to "Y…" with
   the whole card free beside it. Inline content sidesteps both. width:max-content keeps
   the chip shrink-wrapped so the click target stays the chip and not the empty rest of
   the row, and max-width is what actually engages the ellipsis on a genuinely long name.
   The padding is slack so a bold glyph's last pixel column is never shaved. */
.task-owner-button { display: block; width: max-content; max-width: 100%; overflow: hidden; margin: 0 0 6px; padding: 0; border: 0; color: color-mix(in srgb, var(--task) 74%, #17150f); background: none; cursor: pointer; font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-align: left; text-overflow: ellipsis; }
.task-owner-name { padding-right: 2px; vertical-align: middle; }
.task-owner-button .task-owner-initial { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 6px; vertical-align: middle; border-radius: 50%; color: #fff; background: color-mix(in srgb, var(--task) 88%, #241c12); font-size: 9px; letter-spacing: 0; }
.task-owner-button.unassigned { color: #8b867c; }
.task-owner-button.unassigned .task-owner-initial { color: #fff; background: #b0aa9e; }
/* Done is a tile gone quiet rather than one taken away: the fill drains back to the card's
   own paper and only the bar keeps a colour, so the eye lands on what is still open. */
.task-item.completed { border-color: rgba(43, 41, 35, .09); background: linear-gradient(140deg, rgba(255, 255, 255, .86), rgba(247, 246, 240, .8)); box-shadow: none; }
.task-item.completed::before { background: color-mix(in srgb, var(--green) 55%, #d3d8d2); }
.task-item.completed .task-check { border-color: var(--green); background: var(--green); }
.task-item.completed .task-title { color: #aaa69c; text-decoration: line-through; }
.task-item.completed .task-owner-button { color: #a9a49a; }
.task-item.completed .task-owner-button .task-owner-initial { background: #c3beb3; }
.task-delete { width: 28px; height: 28px; align-self: start; border: 0; border-radius: 9px; color: color-mix(in srgb, var(--task) 45%, #6d6961); background: transparent; cursor: pointer; font-size: 17px; opacity: .5; }
.task-item:hover .task-delete, .task-delete:focus-visible { opacity: 1; }
.task-delete:hover { color: #d55843; background: rgba(255, 255, 255, .8); }
.task-edit-input, .task-owner-edit { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--task) 45%, transparent); border-radius: 9px; background: #fff; outline: 0; font-size: 16px; }
.task-owner-edit { margin-bottom: 6px; padding-block: 6px; }

.live-pill { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .1em; }
.live-pill i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(255,120,90,.12); }
.empty-state { padding: 55px 20px; color: var(--muted); font-family: Georgia, serif; font-size: 14px; font-style: italic; text-align: center; }
.empty-state.compact { padding: 25px 10px; }

.board-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px 2px; color: var(--muted); font-size: 9px; letter-spacing: .06em; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(37,155,119,.12); }

/* Keep only the canvas dark; dashboard components retain their original light
   surfaces and dark text for strong contrast on the iPad. */
.app-shell { background: #000; }
.dashboard-page { color: var(--ink); background: #000 radial-gradient(circle at 78% 3%, rgba(105,80,255,.1), transparent 30%); }
.dashboard-page .topbar { color: #f7f6fa; }
.dashboard-page .topbar .eyebrow, .dashboard-page .clock small { color: #aaa6b2; }
.dashboard-page .icon-button { color: var(--ink); border-color: rgba(255,255,255,.3); background: #fff; }
.dashboard-page .icon-button:hover { background: #f2f0ea; }
.dashboard-page .board-footer { color: #aaa6b2; }

.routine-page { isolation: isolate; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; color: #f8f7ff; background: #000; }
.routine-page::before { content: ""; position: absolute; z-index: -2; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px); background-size: 23px 23px; opacity: .55; }
.routine-orb { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.routine-orb-one { width: 470px; height: 470px; right: -155px; top: -215px; background: radial-gradient(circle, rgba(114,86,255,.30) 0%, rgba(114,86,255,.20) 45%, rgba(114,86,255,0) 72%); }
.routine-orb-two { width: 430px; height: 430px; left: -195px; bottom: -195px; background: radial-gradient(circle, rgba(255,91,115,.22) 0%, rgba(255,91,115,.14) 45%, rgba(255,91,115,0) 72%); }
.routine-header { position: relative; z-index: 3; flex: 0 0 auto; min-height: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(16px, env(safe-area-inset-top)) clamp(20px, 4vw, 54px) 10px; }
.routine-page-button { justify-self: start; min-height: 42px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #f4f1ff; background: rgba(255,255,255,.08); box-shadow: 0 7px 22px rgba(0,0,0,.25); cursor: pointer; font-size: 12px; font-weight: 750; }
.routine-page-button span { display: inline-block; margin-right: 5px; font-size: 17px; vertical-align: -1px; }
.routine-brand { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #050505; background: #fff; font-size: 13px; font-weight: 850; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.routine-brand span { position: absolute; width: 5px; height: 5px; right: 7px; top: 7px; border-radius: 50%; background: #ff8d6f; }
.routine-status { justify-self: end; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.routine-count, .routine-points-pill { min-width: 92px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #f5f2ff; background: rgba(255,255,255,.08); font-size: 10px; font-weight: 800; text-align: center; }
.routine-points-pill { color: #ffe16b; background: rgba(255,205,67,.1); }
.routine-content { position: relative; z-index: 2; flex: 1 0 auto; width: min(1100px, 100%); min-height: calc(100vh - 110px); min-height: calc(100dvh - 110px); display: flex; flex-direction: column; align-self: center; padding: 4px clamp(22px, 5vw, 70px) 8px; }
.routine-intro { flex: 0 0 auto; text-align: center; }
.routine-kicker { margin: 0 0 4px; color: #a99cff; font-size: 10px; font-weight: 850; letter-spacing: .2em; }
.routine-intro h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px, 4.2vw, 54px); font-weight: 600; letter-spacing: -.05em; }
.routine-intro > p:last-child { margin: 5px 0 0; color: #a9a3b7; font-size: clamp(12px, 1.5vw, 16px); }
.routine-progress { flex: 0 0 10px; width: min(660px, 78%); margin: 13px auto 16px; overflow: hidden; border: 2px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.routine-progress-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8b6f, #ffbd59 48%, #7568ed); transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.22,.72,.24,1); }
.routine-stage-shell { position: relative; flex: 1 0 auto; min-height: 430px; display: grid; }
.routine-stage { min-height: 100%; display: grid; place-items: center; padding: 2px 0 8px; }
.routine-stage > * { grid-area: 1 / 1; }
.routine-transition-cover { position: absolute; z-index: 15; top: 2px; bottom: 8px; left: 50%; width: min(760px, 100%); display: grid; place-items: center; pointer-events: none; border-radius: clamp(30px, 5vw, 52px); opacity: 0; transform: translateX(-50%) scale(.96); background: radial-gradient(circle at 50% 44%, #9a7cff 0%, #6654df 38%, #33277f 72%, #171226 100%); box-shadow: 0 28px 80px rgba(0,0,0,.55); transition: opacity .2s ease-out, transform .2s ease-out; }
.routine-transition-message { display: grid; justify-items: center; gap: 13px; opacity: 0; }
.routine-transition-cover span { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; color: #423173; background: #fff; box-shadow: 0 18px 48px rgba(0,0,0,.25); font-size: 50px; font-weight: 900; }
.routine-transition-cover strong { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.035em; text-shadow: 0 4px 18px rgba(21,12,53,.45); }
.routine-transition-cover.is-covering { opacity: 1; transform: translateX(-50%) scale(1); }
.routine-transition-cover.is-covering span { opacity: 1; transform: scale(1); }
.routine-transition-cover.is-revealing { opacity: 0; transform: translateX(-50%) scale(1.015); transition-duration: .3s; }
.routine-transition-cover.is-revealing span { opacity: 0; transform: scale(1.12); transition-delay: 0s; transition-duration: .18s; }
.routine-focus-card { position: relative; z-index: 0; transition: border-color .35s ease; width: min(760px, 100%); min-height: clamp(390px, 54dvh, 560px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(26px, 4vw, 48px); overflow: hidden; border: 2px solid rgba(255,255,255,.16); border-radius: clamp(30px, 5vw, 52px); color: #fff; background: linear-gradient(145deg, rgba(28,25,36,.96), rgba(8,8,11,.97)); box-shadow: 0 28px 80px rgba(0,0,0,.65), 0 0 45px rgba(112,88,255,.12), inset 0 1px rgba(255,255,255,.09); text-align: center; }
.routine-focus-card > * { position: relative; z-index: 1; }
.routine-focus-card::before { content: ""; position: absolute; z-index: 0; width: 70%; aspect-ratio: 1; top: -48%; right: -28%; border-radius: 50%; background: var(--step-color, #fff0b9); opacity: .16; transition: background .35s ease; }
.routine-focus-card.is-entering { animation: routine-focus-in .26s ease-out both; }
.routine-focus-card.is-leaving { pointer-events: none; animation: routine-focus-out .2s ease-in both; }
.routine-focus-card.is-pressed { border-color: rgba(255,255,255,.34); }
.routine-focus-card::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; border: 10px solid rgba(255,255,255,.28); border-radius: inherit; opacity: 0; }
.routine-focus-card.is-celebrating { border-color: rgba(255,255,255,.98); }
.routine-focus-card.is-celebrating::after { animation: routine-card-ring .55s ease-out; }
.routine-focus-card.is-celebrating::before { animation: routine-color-bloom .75s ease-out; }
.routine-focus-icon { flex: 0 0 auto; width: clamp(132px, 18vw, 190px); height: clamp(132px, 18vw, 190px); display: grid; place-items: center; border-radius: clamp(34px, 5vw, 54px); background: var(--step-color, #fff0b9); box-shadow: inset 0 2px rgba(255,255,255,.9), 0 16px 38px rgba(74,56,68,.1); font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: clamp(76px, 11vw, 116px); line-height: 1; }
.routine-focus-media { position: relative; flex: 0 0 auto; width: min(580px, 100%); height: clamp(180px, 24dvh, 250px); overflow: hidden; border: 2px solid rgba(255,255,255,.2); border-radius: clamp(24px, 4vw, 38px); background: #211e29; box-shadow: 0 18px 44px rgba(0,0,0,.34); }
.routine-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #b9b2ca; background: linear-gradient(145deg, #292531, #17151c); font-size: 13px; font-weight: 750; }
.routine-focus-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; }
.routine-focus-image.is-ready { opacity: 1; }
.routine-focus-card.is-celebrating .routine-focus-icon { animation: routine-icon-win .72s cubic-bezier(.16,.86,.22,1.18); }
.routine-loading-card { gap: 4px; }
.routine-loading-photo { width: min(580px, 100%); height: clamp(180px, 24dvh, 250px); overflow: hidden; border-radius: clamp(24px, 4vw, 38px); background: linear-gradient(105deg, #1b1822 20%, #322d3e 38%, #1b1822 58%); background-size: 220% 100%; animation: routine-loading-sheen 1.4s linear infinite; }
.routine-loading-card .routine-focus-copy h2 { font-size: clamp(30px, 5vw, 52px); }
.routine-focus-card.is-celebrating .routine-focus-copy { animation: routine-copy-win .58s .08s ease-out both; }
.routine-focus-copy { margin: clamp(18px, 3vh, 28px) 0 clamp(20px, 3vh, 32px); }
.routine-focus-number { display: block; margin-bottom: 7px; color: #aaa0c5; font-size: 11px; font-weight: 850; letter-spacing: .18em; }
.routine-focus-copy h2 { min-height: 2em; display: grid; place-items: center; max-width: 650px; margin: 0 auto; font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 6vw, 64px); font-weight: 650; line-height: 1; letter-spacing: -.045em; }
.routine-focus-time[data-empty] { visibility: hidden; }
.routine-focus-copy p { display: inline-block; margin: 12px 0 0; padding: 7px 13px; border-radius: 999px; color: #ffe59a; background: rgba(255,190,86,.14); font-size: clamp(12px, 1.7vw, 16px); font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.routine-done-button { position: relative; -webkit-tap-highlight-color: transparent; width: min(440px, 100%); min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 28px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; color: #fff; background: linear-gradient(105deg, #5d4ce7, #8a57f4); box-shadow: 0 14px 36px rgba(94,73,231,.35); cursor: pointer; font-size: clamp(21px, 3vw, 29px); font-weight: 850; touch-action: manipulation; transition: transform .18s ease, background .18s ease, opacity .18s ease; }
.routine-done-button span, .routine-done-button i { position: relative; z-index: 2; }
.routine-done-button::before { content: ""; position: absolute; z-index: 1; top: 3px; bottom: 3px; left: 3px; right: 3px; pointer-events: none; border-radius: 21px; background: linear-gradient(90deg, #6a58f0 0%, #a55cff 34%, #4ad6ff 72%, #b8fff0 100%); box-shadow: 0 0 22px rgba(90,214,255,.5); opacity: 0; transform: scaleX(0); transform-origin: left center; }
.routine-done-button i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #342e42; background: #fff; font-size: 19px; font-style: normal; }
@media (hover: hover) {
  .routine-done-button:hover { background: linear-gradient(105deg, #6a59f2, #9b63ff); transform: translateY(-2px); }
}
.routine-confirm-card { border-color: rgba(255,225,107,.34); box-shadow: 0 28px 80px rgba(0,0,0,.65), 0 0 60px rgba(255,209,71,.12); }
.routine-parent-media { height: clamp(150px, 21dvh, 220px); }
.routine-parent-checks { width: min(520px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: -8px 0 13px; }
.routine-parent-check { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 14px; border: 2px solid rgba(255,255,255,.16); border-radius: 18px; color: #e8e4f0; background: rgba(255,255,255,.07); cursor: pointer; font-size: 15px; font-weight: 850; touch-action: manipulation; }
.routine-parent-check i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #c8c1d4; background: rgba(255,255,255,.1); font-size: 18px; font-style: normal; }
.routine-parent-check.is-checked { border-color: rgba(104,223,166,.72); color: #eafff5; background: rgba(43,159,107,.24); }
.routine-parent-check.is-checked i { color: #10231a; background: #83e6b3; }
.routine-confirm-button { background: linear-gradient(105deg, #f38c25, #ffca47); color: #171008; box-shadow: 0 14px 38px rgba(255,175,45,.26); }
.routine-confirm-button:disabled { color: #9d98a8; background: rgba(255,255,255,.08); box-shadow: none; }
.routine-complete-card { border-color: rgba(255,225,107,.34); }
.routine-complete-actions { width: min(440px, 100%); display: grid; gap: 9px; }
.routine-complete-actions .routine-done-button { width: 100%; }
.routine-secondary-action { min-height: 48px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; font-size: 14px; font-weight: 800; touch-action: manipulation; }
@media (hover: hover) {
  .routine-secondary-action:hover { background: rgba(255,255,255,.14); }
}
.routine-done-button:active { transform: scale(.98); }
.routine-done-button.is-saving { opacity: .72; }
.routine-done-button.is-charging { opacity: 1; background: linear-gradient(105deg, #241d3d, #2f2456); }
.routine-done-button.is-charging span { text-shadow: 0 1px 8px rgba(10,7,20,.8); }
.routine-done-button.is-charging::before { animation: routine-bar-charge .66s cubic-bezier(.5,.05,.3,1) forwards; }
.routine-done-button.is-charging i { animation: routine-check-spin .5s .34s cubic-bezier(.2,.85,.25,1.15); }
.routine-done-button.is-celebrating { opacity: 1; background: linear-gradient(105deg, #241d3d, #2f2456); animation: routine-button-win .65s ease-out; }
.routine-done-button.is-celebrating::before { animation: routine-bar-charge .66s cubic-bezier(.5,.05,.3,1) forwards; }
.routine-done-button.is-celebrating i { animation: routine-check-spin .58s cubic-bezier(.2,.85,.25,1.15); }
.routine-step-burst { position: absolute; z-index: 6; left: 50%; bottom: 17%; width: 1px; height: 1px; pointer-events: none; }
.routine-step-spark { position: absolute; left: 0; top: 0; color: var(--spark-color); font-size: var(--spark-size); line-height: 1; text-shadow: 0 3px 7px rgba(71,48,80,.16); opacity: 0; animation: routine-spark-burst .78s var(--spark-delay) cubic-bezier(.12,.72,.22,1) forwards; }
.routine-footer { position: relative; z-index: 3; flex: 0 0 auto; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 20px max(10px, env(safe-area-inset-bottom)); color: #888292; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.page-dots { display: inline-flex; gap: 5px; margin-left: 8px; }
.page-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); }
.page-dots i.active { width: 17px; border-radius: 999px; background: #978cff; }
.routine-celebration { position: absolute; z-index: 20; inset: 2px 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; padding: 28px 24px; border-radius: clamp(30px, 5vw, 52px); color: #fff; background: radial-gradient(circle at 50% 43%, #2b2053 0%, #0b0911 42%, #000 74%); text-align: center; }
.celebration-stars { margin-bottom: 4px; color: #f2a633; font-size: clamp(24px, 5vw, 52px); letter-spacing: .2em; animation: celebration-float 1.3s ease-in-out infinite alternate; }
.celebration-trophy { font-size: clamp(70px, 13vw, 140px); text-shadow: 0 15px 20px rgba(105,78,35,.2); animation: trophy-arrive .8s cubic-bezier(.15,.85,.25,1.2); }
.routine-celebration h2 { max-width: 720px; margin: 8px 0 5px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 6vw, 70px); line-height: .98; letter-spacing: -.055em; }
.routine-celebration p { margin: 9px 0 22px; color: #ffe16b; font-size: clamp(20px, 3vw, 34px); font-weight: 850; }
.celebration-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.celebration-button { padding: 15px 24px; border: 0; border-radius: 999px; color: #100d16; background: #ffe16b; box-shadow: 0 10px 30px rgba(255,210,75,.24); cursor: pointer; font-size: 14px; font-weight: 850; }
.celebration-button.secondary { border: 1px solid rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.09); box-shadow: none; }
.celebration-button:disabled { cursor: wait; opacity: .62; }
.confetti-layer { position: absolute; z-index: 30; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; width: var(--size); height: calc(var(--size) * .48); left: var(--left); top: -8vh; border-radius: 2px; background: var(--color); transform: rotate(var(--rotate)); animation: confetti-fall var(--duration) var(--delay) cubic-bezier(.12,.7,.28,1) forwards; }

@keyframes routine-focus-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes routine-loading-sheen { to { background-position: -220% 0; } }
@keyframes routine-focus-out { to { opacity: 0; } }
@keyframes routine-card-ring { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }
@keyframes routine-color-bloom { 35% { opacity: 1; transform: scale(1.45); } 100% { opacity: .72; transform: scale(1); } }
@keyframes routine-icon-win { 30% { transform: translateY(-18px) rotate(-12deg) scale(1.16); } 58% { transform: translateY(3px) rotate(9deg) scale(.98); } 82% { transform: translateY(-4px) rotate(-4deg) scale(1.05); } }
@keyframes routine-copy-win { 35% { opacity: .55; transform: scale(.96); } 72% { opacity: 1; transform: scale(1.045); } }
@keyframes routine-button-win { 30% { transform: scale(.92); } 62% { transform: scale(1.08) rotate(-1deg); } 82% { transform: scale(.99) rotate(.5deg); } }
@keyframes routine-bar-charge { 0% { opacity: .9; transform: scaleX(0); } 70% { opacity: 1; } 100% { opacity: 1; transform: scaleX(1); } }
@keyframes routine-check-spin { 55% { transform: rotate(380deg) scale(1.22); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes routine-spark-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.15) rotate(0deg); } 18% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--spark-x) - 50%), calc(var(--spark-y) - 50%)) scale(1.15) rotate(420deg); } }
@keyframes trophy-arrive { 0% { opacity: 0; transform: translateY(40px) scale(.4) rotate(-15deg); } 70% { transform: translateY(-8px) scale(1.08) rotate(5deg); } }
@keyframes celebration-float { to { transform: translateY(-7px) scale(1.05); } }
@keyframes confetti-fall { 0% { opacity: 0; transform: translate3d(0,-5vh,0) rotate(var(--rotate)); } 10% { opacity: 1; } 100% { opacity: 1; transform: translate3d(var(--drift),112vh,0) rotate(calc(var(--rotate) + 760deg)); } }

.login-view { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(620px, 100%); padding: clamp(34px, 7vw, 70px); border: 1px solid rgba(43,41,35,.08); border-radius: 34px; background: rgba(252,251,247,.88); box-shadow: 0 30px 90px rgba(48,43,34,.11); backdrop-filter: blur(20px); }
.login-mark { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 42px; border-radius: 19px; color: white; background: var(--ink); font-weight: 800; box-shadow: 0 12px 28px rgba(36,35,31,.18); }
.login-card h1 { margin: 9px 0 12px; font-family: Georgia, serif; font-size: clamp(34px, 7vw, 52px); font-weight: 500; letter-spacing: -.05em; }
.login-copy { max-width: 460px; margin: 0 0 36px; color: var(--muted); font-family: Georgia, serif; font-size: 17px; line-height: 1.55; }
.login-form label { display: block; margin-bottom: 8px; font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.password-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.password-row input { min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: #f5f3ed; outline: 0; }
.password-row input:focus { border-color: rgba(110,97,255,.4); background: #fff; }
.primary-button, .secondary-button { border: 0; border-radius: 13px; cursor: pointer; font-size: 12px; font-weight: 700; }
.primary-button { padding: 13px 17px; color: #fff; background: var(--ink); box-shadow: 0 8px 18px rgba(36,35,31,.12); }
.primary-button:hover { background: #3b3933; transform: translateY(-1px); }
.form-error { min-height: 20px; margin: 8px 0 0; color: #d05441; font-size: 11px; }
.login-footnote { margin: 26px 0 0; color: #aaa69c; font-size: 9px; letter-spacing: .08em; }

.settings-dialog { width: min(860px, calc(100vw - 30px)); max-height: min(820px, calc(100vh - 30px)); padding: 0; border: 0; border-radius: 28px; color: var(--ink); background: #f8f6f0; box-shadow: 0 30px 100px rgba(25,24,21,.26); }
.settings-dialog::backdrop { background: rgba(31,29,25,.35); backdrop-filter: blur(8px); }
.dialog-shell { display: flex; flex-direction: column; max-height: min(820px, calc(100vh - 30px)); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 27px 30px 20px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 28px; font-weight: 500; letter-spacing: -.04em; }
.dialog-close { width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; font-family: Arial, sans-serif; font-size: 23px; font-weight: 300; line-height: 1; }
.settings-content { overflow-y: auto; padding: 0 30px; }
.settings-section { display: grid; grid-template-columns: minmax(185px, .58fr) minmax(0, 1.42fr); gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.settings-section:last-child { border-bottom: 0; }
.settings-section-copy { display: flex; gap: 12px; }
.setting-number { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 10px; background: #ece9e1; color: var(--muted); font-size: 9px; font-weight: 750; }
.settings-section h3 { margin: 2px 0 6px; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.settings-section-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.settings-form label, .add-calendar-form label, .points-adjust-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.settings-form input, .settings-form select, .add-calendar-form input, .points-adjust-form input { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); outline: 0; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.settings-form input:focus, .add-calendar-form input:focus, .points-adjust-form input:focus { border-color: rgba(110,97,255,.42); box-shadow: 0 0 0 3px rgba(110,97,255,.07); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.form-row-between { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.select-label { display: flex !important; grid-template-columns: auto auto; align-items: center; gap: 7px !important; margin-left: auto; }
.select-label select { padding: 8px; }
.secondary-button { padding: 10px 13px; border: 1px solid var(--line); background: white; }
.text-button { padding: 0; border: 0; color: var(--purple); background: none; cursor: pointer; font-size: 10px; font-weight: 700; }
.calendar-fields { grid-template-columns: .75fr 1.8fr 54px; margin-top: 0; }
.color-field input { height: 37px; padding: 4px; }
.add-calendar-form { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #f1eee7; }
.add-calendar-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.calendar-form-note { margin: 0; color: var(--muted); font-size: 9px; }
.compact-button { padding: 10px 13px; }
.calendar-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.calendar-row:last-child { border-bottom: 0; }
.calendar-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--calendar); }
.calendar-name { font-size: 11px; font-weight: 650; }
.calendar-provider { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.calendar-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.calendar-remove { border: 0; color: #bc6b5b; background: none; cursor: pointer; font-size: 9px; }
.no-calendars { margin: 0 0 12px; color: var(--muted); font-family: Georgia, serif; font-size: 12px; font-style: italic; }
.setup-help { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.setup-help summary { display: flex; align-items: center; gap: 8px; padding: 11px 13px; cursor: pointer; list-style: none; font-size: 10px; font-weight: 700; }
.setup-help summary::-webkit-details-marker { display: none; }
.setup-help summary span:last-child { margin-left: auto; color: var(--muted); font-size: 8px; }
.setup-help ol, .setup-help p { margin: 0 15px 12px 34px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.setup-help p { margin-left: 14px; }
.apple-mark { color: #111; font-size: 8px; }
.points-manager { display: grid; gap: 13px; }
.points-total-card { min-height: 105px; display: flex; align-items: baseline; gap: 8px; padding: 20px 22px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #1a1720, #493fa8); box-shadow: 0 12px 30px rgba(75,61,168,.18); }
.points-total-card span { align-self: flex-start; margin-right: auto; color: rgba(255,255,255,.68); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.points-total-card strong { font-family: Georgia, serif; font-size: 56px; line-height: 1; }
.points-total-card small { color: #ffe16b; font-size: 12px; font-weight: 800; }
.points-adjust-form { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #f1eee7; }
.points-adjust-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.point-button { min-height: 42px; border: 0; border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 800; }
.point-button.subtract { color: #fff; background: #c5584d; }
.point-button.add { color: #fff; background: #387f69; }
.point-button:disabled { cursor: wait; opacity: .6; }
.points-history { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.points-history h4 { margin: 0; padding: 12px 14px 8px; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.points-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); }
.points-history-row span { min-width: 0; }
.points-history-row strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.points-history-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.points-history-row b { flex: 0 0 auto; font-size: 14px; }
.points-history-row b.positive { color: #2c8b6c; }
.points-history-row b.negative { color: #c5584d; }
.points-history-empty { margin: 0; padding: 18px; color: var(--muted); font-family: Georgia, serif; font-size: 12px; font-style: italic; text-align: center; }
.dialog-footer { display: flex; justify-content: space-between; padding: 17px 30px max(17px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.danger-text { color: #b75a49; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); max-width: min(430px, calc(100vw - 30px)); padding: 11px 16px; border-radius: 12px; color: #fff; background: rgba(35,33,29,.94); box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
  .board { padding-inline: 22px; }
  .weather-stats div { min-width: 75px; padding-inline: 10px; }
  .today-events, .calendar-grid, .task-list { padding-inline: 18px; }
  .calendar-grid, .task-list { gap: 10px; }
  .quick-add { margin-inline: 18px; }
}

/* Room-readable today, shared by both iPad orientations. One event per row, each stretched
   the width of the card: side by side they were narrow enough to wrap short titles, and the
   eye had to scan in two directions to read the day. The time sits in a fixed left gutter so
   it lines up down the day and a row costs one line of height instead of two. Every rule
   here outranks its plain counterpart in the layout blocks below on specificity, so it holds
   wherever it lands in the file. */
@media (min-width: 700px) {
  .today-card .card-header h2 { font-size: 30px; }
  .today-header .section-kicker { font-size: 12px; }
  /* A fixed gutter, not an auto track: each event is its own grid, so an auto column is
     sized by that event's own time and the column would step in and out down the day.
     132px clears the longest string the renderer produces ("CONTINUES"). */
  .today-events .event { min-height: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; column-gap: 18px; padding: 12px 18px 12px 17px; border-radius: 19px; }
  /* A filled chip rather than tinted text: from several feet the time is the first thing
     scanned, and it carries the row's per-calendar colour at a size that survives the
     distance. Centred in its own grid row, so a wrapped title never drags it out of line —
     the title is a clamped -webkit-box whose synthesized baseline would drop it a whole line. */
  .today-events .event-time { display: grid; place-items: center; margin-bottom: 0; padding: 8px 6px; border-radius: 12px; color: #fff; background: color-mix(in srgb, var(--event) 84%, #201811); font-size: 16px; letter-spacing: .03em; box-shadow: inset 0 1px rgba(255, 255, 255, .26); }
  /* A third line rather than a bigger clamp budget: at this size a two-line clamp ate the
     tail of ordinary titles ("Bedtime story + reading log"), which is the opposite of the point. */
  .today-events .event-title { font-size: 27px; line-height: 1.16; -webkit-line-clamp: 3; }
  .today-events .event-location { grid-column: 2; font-size: 17px; margin-top: 3px; }
  .today-events .day-empty { padding: 26px 6px; font-size: 23px; }
}

@media (min-width: 851px) and (max-height: 820px) {
  .board { padding-top: 18px; padding-bottom: 10px; }
  .topbar { min-height: 58px; margin-bottom: 11px; }
  .topbar h1 { font-size: 32px; }
  .weather-hero { min-height: 140px; padding-block: 20px; }
  .weather-symbol { width: 74px; height: 74px; font-size: 42px; }
  .weather-reading strong { font-size: 48px; }
  .content-grid { margin-top: 14px; }
  .today-events { gap: 8px; padding-bottom: 18px; }
  .today-events .event { padding-block: 10px; }
  .today-events .event-title { font-size: 25px; }
  .calendar-grid { min-height: 218px; padding-bottom: 18px; }
  .card-header { padding-top: 18px; padding-bottom: 13px; }
  .side-column { gap: 14px; }
  .task-list { max-height: 183px; padding-bottom: 18px; }
  .quick-add { margin-bottom: 11px; }
  .board-footer { padding-top: 10px; }
  .routine-header { min-height: 59px; padding-top: 10px; }
  .routine-content { padding-top: 0; }
  .routine-progress { margin-block: 9px 11px; }
  .routine-footer { min-height: 30px; }
}

@media (max-width: 850px) {
  .dashboard-page { grid-template-columns: 1fr; }
  .rail { position: fixed; top: auto; bottom: 10px; left: 50%; z-index: 30; width: min(300px, calc(100vw - 30px)); height: 58px; flex-direction: row; justify-content: center; gap: 15px; padding: 7px 10px; border: 1px solid rgba(43,41,35,.1); border-radius: 20px; box-shadow: 0 16px 40px rgba(34,32,28,.18); transform: translateX(-50%); }
  .brand { width: 40px; height: 40px; border-radius: 13px; }
  .rail-nav { flex-direction: row; gap: 5px; margin: 0; }
  .rail-settings { margin: 0; }
  .board { padding: max(20px, env(safe-area-inset-top)) 18px 90px; }
  .content-grid { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: 1fr; }
  .calendar-grid, .task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-section { grid-template-columns: 1fr; gap: 16px; }
}

/* iPad portrait: turn the compressed five-column calendar into a legible
   card agenda. Today gets the visual lead, followed by two balanced rows. */
@media (min-width: 700px) and (max-width: 850px) {
  .board { padding: max(24px, env(safe-area-inset-top)) 24px 82px; }
  .topbar { min-height: 68px; margin-bottom: 15px; }
  .topbar h1 { font-size: 34px; }
  .clock { font-size: 31px; }

  .weather-hero { min-height: 170px; padding: 25px 28px; }
  .weather-symbol { width: 84px; height: 84px; border-radius: 25px; font-size: 47px; }
  .weather-reading strong { font-size: 54px; }
  .weather-reading span { font-size: 25px; }
  .weather-reading span { max-width: 145px; }
  .weather-stats { grid-template-columns: repeat(3, minmax(76px, 1fr)); gap: 4px; }
  .weather-stats div { min-width: 0; padding-inline: 13px; }

  .content-grid { gap: 16px; margin-top: 16px; }
  .today-header, .ahead-header { padding: 18px 20px 13px; }
  .today-events { gap: 9px; padding: 0 18px 18px; }
  .calendar-grid { min-height: 96px; gap: 10px; padding: 0 18px 18px; }
  .task-list { gap: 10px; padding: 0 18px 18px; }
  .quick-add { margin: 0 18px 12px; }
  .task-item { min-height: 72px; padding: 10px 11px 9px 16px; }
  .task-owner-button { margin-bottom: 5px; font-size: 11px; }
  .task-title { font-size: 16px; }
  .day-column { min-height: 94px; padding: 11px; border-radius: 17px; }
  .day-heading { margin: 0 2px 8px; }
  .day-number { width: 33px; height: 33px; font-size: 16px; }
  .day-name { font-size: 12px; }
  .day-events { gap: 8px; }
  .event { min-height: 72px; padding: 10px 11px 9px 16px; }
  .event-time { margin-bottom: 5px; font-size: 11px; }
  .event-title { font-size: 16px; }
  .event-location { margin-top: 5px; font-size: 12px; }
  .day-empty { padding: 12px 5px 9px; }
  .today-events .event { padding: 11px 16px; }
  .today-events .event-time { font-size: 15px; }
  .today-events .event-title { font-size: 24px; }
  .today-events .day-empty { padding: 20px 6px; font-size: 21px; }

  .side-column { grid-template-columns: 1fr; gap: 16px; }
  .tasks-card { min-height: 300px; }
  .task-list { max-height: 260px; }
  .board-footer { padding-top: 13px; }

  .rail { bottom: max(12px, env(safe-area-inset-bottom)); width: 310px; background: rgba(250, 248, 243, .9); }

  .routine-content { padding-inline: 24px; }
  .routine-focus-card { width: min(690px, 100%); }
}

@media (max-width: 620px) {
  .topbar { align-items: flex-start; }
  .topbar h1 { font-size: 30px; }
  .clock { min-width: auto; font-size: 25px; }
  .icon-button { width: 38px; height: 38px; }
  .weather-hero { align-items: flex-start; flex-direction: column; }
  .weather-stats { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .weather-stats div { padding-inline: 9px; }
  .weather-stats div:first-child { border-left: 0; padding-left: 0; }
  .side-column { grid-template-columns: 1fr; }
  .task-list { grid-template-columns: minmax(0, 1fr); }
  .password-row { grid-template-columns: 1fr; }
  .password-row .primary-button { width: 100%; }
  .settings-content { padding-inline: 20px; }
  .dialog-header, .dialog-footer { padding-inline: 20px; }
  .field-row, .calendar-fields { grid-template-columns: 1fr; }
  .color-field input { width: 60px; }
  .form-row-between, .add-calendar-actions { align-items: stretch; flex-wrap: wrap; }
  .select-label { margin-left: 0; }
  .routine-header { padding-inline: 14px; }
  .routine-page-button { width: 42px; padding-inline: 0; font-size: 0; }
  .routine-page-button span { margin: 0; font-size: 20px; }
  .routine-content { padding-inline: 12px; }
  .routine-intro h1 { font-size: 31px; }
  .routine-intro > p:last-child { font-size: 12px; }
  .routine-progress { margin-block: 9px 11px; }
  .routine-stage-shell { min-height: 390px; }
  .routine-focus-card { min-height: 360px; padding: 20px 16px; border-radius: 28px; }
  .routine-focus-icon { width: 112px; height: 112px; border-radius: 32px; font-size: 66px; }
  .routine-focus-media, .routine-loading-photo { height: 155px; border-radius: 24px; }
  .routine-focus-copy { margin-block: 14px 18px; }
  .routine-focus-copy h2 { font-size: 34px; }
  .routine-parent-checks { grid-template-columns: 1fr; }
  .routine-done-button { min-height: 64px; border-radius: 20px; font-size: 21px; }
  .routine-done-button::before { border-radius: 17px; }
  .routine-footer { display: none; }
}

/* The card now runs the full width of the board, so the list grows with its contents
   rather than scrolling inside the 183px window the short-landscape block sets for the
   old sidebar. Below 851px the narrower caps still apply. */
@media (min-width: 851px) {
  .side-column .task-list { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}