/**
 * Weekly (Mickys-Children) — the whole look of /dashboard/mickys-children.
 *
 * Served as a static file rather than inlined by the view, because the page is
 * now an app: public/weekly-app.js renders the calendar in the browser from
 * data the reader owns, so the markup this styles is built client-side and the
 * service worker caches the stylesheet alongside it.
 *
 * Colour is per activity, not per child.  An activity's hue is a value the
 * reader sets and the page remembers, so it cannot live in a CSS token here:
 * every block, swatch and dot takes it from a --who custom property that the
 * app writes inline.  What lives here is everything around it — the surfaces,
 * the type, the timeline geometry, the editor.
 */
:root {
  color-scheme: light dark;
  --bg:        #f4f5fb;
  --card:      #ffffff;
  --ink:       #16182b;
  --muted:     #6b7089;
  --line:      #e6e8f2;
  --weekend:   #f0f2fa;
  /* The hour rules have to stay visible on the weekend tint, which sits almost
     exactly on top of --line; a weekend column swaps the rule for this. */
  --line-weekend: #dde1ee;
  --accent:    #4f6bff;
  --accent-2:  #8a5cff;
  --on-accent: #ffffff;
  --danger:    #d93b3b;

  /* Weather: one hue per condition family, so a glance down a column says
     "sunny week" or "rain on Thursday" before any number is read. */
  --wx-sun:   #f0a500;
  --wx-cloud: #7b86a8;
  --wx-rain:  #2a78d6;
  --wx-storm: #7a4fd0;
  --wx-snow:  #4aa8d8;
  --wx-fog:   #8d93ab;

  /* Type.  Rubik carries the display voice — the header, the dates, the hour
     axis, every figure — and Assistant does the reading: two Hebrew faces with
     different jobs rather than one doing both.  Both are Google Fonts with real
     Hebrew coverage; the fallbacks are the system Hebrew faces, so a blocked or
     offline font never leaves the page in a Latin-only fallback. */
  --font-text: "Assistant", "Segoe UI", -apple-system, BlinkMacSystemFont, "Arial Hebrew",
               Arial, sans-serif;
  --font-display: "Rubik", "Assistant", "Segoe UI", -apple-system, BlinkMacSystemFont,
                  "Arial Hebrew", Arial, sans-serif;

  /* One hour of the day, in pixels.  Every vertical measurement on the
     calendar — the axis, the hour rules, where an entry sits and how tall it
     is — is derived from this, so the whole timeline rescales from here, and
     the desktop layout below only has to change the number. */
  --hour: 60px;
  --gutter: 34px;
  --wx-slot: 22px;
  --ev-text: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0f1020;
    --card:      #181a30;
    --ink:       #f2f3ff;
    --muted:     #9a9fc0;
    --line:      #262946;
    --weekend:   #1d1f38;
    --line-weekend: #2f3355;
    --accent:    #6f86ff;
    --accent-2:  #a27bff;
    --danger:    #f16a6a;

    --wx-sun:   #ffbe33;
    --wx-cloud: #9aa4c6;
    --wx-rain:  #59a0ee;
    --wx-storm: #a888ee;
    --wx-snow:  #6cc4ef;
    --wx-fog:   #a3a9c2;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-text);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
.wrap { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
:where(button, a, input, select, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  border-radius: 22px;
  padding: 18px 20px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 10px 30px -14px var(--accent);
}
.hero-month { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
               letter-spacing: -0.02em; line-height: 1.1; }
.hero-today { font-size: 0.88rem; opacity: 0.9; margin-top: 4px; font-weight: 500; }
/* Today's own entries, as a stack of pills in the header: what is on today,
   with its start time, before the calendar is read at all. */
.hero-list { flex: none; display: flex; flex-direction: column; gap: 5px; align-items: stretch;
             max-width: 52%; }
.hero-pill {
  display: flex; align-items: baseline; gap: 6px; justify-content: flex-end;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px; padding: 4px 10px;
  font-size: 0.74rem; font-weight: 700; white-space: nowrap;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-time { font-family: var(--font-display); font-weight: 600; font-size: 0.7rem; opacity: 0.9;
             direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* The dot is the activity's colour, on the one surface where the pill itself
   cannot take it: the gradient header would swallow a tint. */
.hero-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--who);
            align-self: center; }
.hero-pill--off { opacity: 0.85; font-weight: 600; }

/* ── The week ───────────────────────────────────────────────────────────── */
.week {
  background: var(--card); border-radius: 22px; padding: 14px 10px 14px;
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.45);
}
.week-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 4px 12px;
}
.week-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.add {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  border-radius: 999px; padding: 6px 12px; font-size: 0.75rem; font-weight: 700;
}
.add:active { opacity: 0.8; }

/* The head and the body share one column template, so a day's name, date and
   weather sit exactly over the column its entries fall in.  Column 1 is the
   hour axis; in RTL that puts it on the right, where the source sheet has it. */
.cols {
  display: grid;
  grid-template-columns: var(--gutter) repeat(7, minmax(0, 1fr));
  column-gap: 4px;
}

.dayhead { display: flex; flex-direction: column; align-items: center; gap: 1px;
           padding-bottom: 8px; min-width: 0; }
.dow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.dow--weekend { color: var(--accent); }
.dnum { height: 24px; display: inline-flex; align-items: center; justify-content: center;
        font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
        font-variant-numeric: tabular-nums; }
.dayhead--past  .dnum { color: var(--muted); }
.dayhead--today .dnum {
  width: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent); font-weight: 800;
}

/* ── Per-date weather ─────────────────────────────────────────────────────
   Under the date, above the day's column: the day's icon, then high over low.
   The icon carries the condition, the numbers carry the amount; neither has to
   be read to get the other.  Latin digits inside the RTL page need their own
   direction, or "24°/17°" comes out with the low first. */
.wx {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  width: 100%; height: var(--wx-slot); margin-top: 2px; line-height: 1;
  font-size: calc(var(--ev-text) + 1px); font-variant-numeric: tabular-nums;
}
/* The rain line only claims its space on a week that shows one, so a dry week
   loses no height to a line nobody sees. */
.week--pop { --wx-slot: 32px; }
.wx-row { display: flex; align-items: center; justify-content: center; gap: 3px;
          direction: ltr; unicode-bidi: isolate; }
.wx svg { width: 14px; height: 14px; flex: none; }
/* The small icon set draws its sun rays, rain drops and fog bars as strokes
   with no colour of their own, and its combo icons separate the sun from the
   cloud with a hard white halo — both are inherited from the e-ink parent,
   which is black on white.  Here the strokes take the day's hue and the halo
   takes the card, so the icons hold up on a dark card too. */
.wx svg [stroke="#fff"] { stroke: var(--card); fill: var(--card); }
.wx--sun   { color: var(--wx-sun); }
.wx--cloud { color: var(--wx-cloud); }
.wx--rain  { color: var(--wx-rain); }
.wx--storm { color: var(--wx-storm); }
.wx--snow  { color: var(--wx-snow); }
.wx--fog   { color: var(--wx-fog); }
.wx-temps { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.wx-hi { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.wx-lo { font-family: var(--font-display); font-weight: 500; color: var(--muted); }
/* Chance of rain, only when it is high enough to change the day's plan. */
.wx-pop {
  display: block; width: 100%; margin-top: 2px; text-align: center;
  direction: ltr; unicode-bidi: isolate;
  font-size: var(--ev-text); font-weight: 700; color: var(--wx-rain);
}
/* With no forecast at all — no API key, a failed fetch, or a week past the
   horizon — the slot would be empty on every day alike, so it is dropped
   rather than left as a blank band. */
.week--nowx .wx { display: none; }

/* ── The timeline ─────────────────────────────────────────────────────────
   One row, as tall as the hours the week spans.  Everything inside is placed
   against that height, so an entry's position on the page *is* its start time.
   --span is the number of hours drawn, set per week by the app. */
.body { position: relative; height: calc(var(--span) * var(--hour)); }

/* The hour rules are one repeating background, drawn on the axis and on every
   day alike so a line runs unbroken across the week. */
.gutter, .daycol {
  background-image: repeating-linear-gradient(
    to bottom, var(--line) 0 1px, transparent 1px var(--hour));
}
.gutter { position: relative; }
.hour {
  position: absolute; inset-inline: 0; top: calc(var(--t) * var(--hour));
  padding-top: 3px; text-align: center;
  font-family: var(--font-display);
  font-size: calc(var(--ev-text) + 1px); font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}

.daycol { position: relative; border-radius: 12px; min-width: 0; }
.daycol--weekend { background-color: var(--weekend); --line: var(--line-weekend); }
.daycol--today   { box-shadow: 0 0 0 2px var(--accent) inset; }
/* A day outside this month has no entries and no date; it keeps its column so
   the week still reads as seven days. */
.daycol--empty   { background-image: none; }

/* One block per entry, at the height its start time puts it: a solid bar in
   the activity's colour at the reading edge, a wash of the same hue behind it,
   the start time above the name and, when the name is not itself the answer,
   who it is.  Colour says what, position and the time say when, the text says
   both — no one of them carries the entry alone.  The 3px inset keeps a block
   clear of the column's own edge and of today's ring, drawn just inside it. */
.ev {
  position: absolute; inset-inline: 3px;
  top:    calc(var(--t) * var(--hour));
  height: calc(var(--len) * var(--hour));
  appearance: none; border: 0; border-inline-start: 2px solid var(--who);
  cursor: pointer; font: inherit; text-align: start;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  border-radius: 6px; padding: 2px 3px;
  font-size: var(--ev-text); line-height: 1.3; font-weight: 600; color: var(--ink);
  background: var(--card);
  background: color-mix(in srgb, var(--who) 16%, var(--card));
}
.ev:active { transform: scale(0.96); }
.ev-time {
  display: block; font-family: var(--font-display); font-weight: 600; color: var(--who);
  direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums;
}
/* Activity names must not split mid-word.  fitEvents() in the app shrinks the
   text until the longest one fits on a line, whatever Hebrew font the device
   happens to use; break-word is only the fallback. */
.ev-what { display: block; overflow-wrap: break-word; word-break: normal; hyphens: none; }
.ev-who  { display: block; font-weight: 600; color: var(--muted); font-size: 0.9em; }

/* Now, on the day it is: the one line on the calendar that moves. */
.nowline {
  position: absolute; inset-inline: 0; top: calc(var(--t) * var(--hour));
  height: 0; border-top: 2px solid var(--accent); opacity: 0.85; z-index: 2;
}
.nowline::after {
  content: ""; position: absolute; inset-inline-start: 0; top: -4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ── Legend / activities ──────────────────────────────────────────────────
   Every activity in the week, with its colour and how often it comes up.  Each
   row is a button: pressing it opens the colour picker, and the choice is kept
   in a cookie, so the reader's own colour scheme survives the visit. */
.legend {
  background: var(--card); border-radius: 22px; padding: 4px 12px 10px;
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.45);
}
.legend-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 0.8rem; font-weight: 700; color: var(--muted); padding: 12px 4px 8px;
}
.legend-hint { font-size: 0.68rem; font-weight: 600; }
.legend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.legend-item {
  appearance: none; border: 1px solid var(--line); background: transparent; cursor: pointer;
  font: inherit; color: var(--ink);
  display: flex; align-items: center; gap: 8px; min-width: 0;
  border-radius: 12px; padding: 8px 10px; text-align: start;
}
.legend-item:active { background: color-mix(in srgb, var(--who) 10%, var(--card)); }
.legend-swatch {
  flex: none; width: 14px; height: 14px; border-radius: 5px; background: var(--who);
}
.legend-name {
  font-size: 0.8rem; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.legend-count { margin-inline-start: auto; font-size: 0.7rem; font-weight: 700;
                color: var(--muted); font-variant-numeric: tabular-nums; }
/* The picker itself is the native colour input, held under the swatch it
   changes so the system UI opens over the right row. */
.legend-item input[type="color"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* ── Editor ───────────────────────────────────────────────────────────── */
dialog.sheet {
  border: 0; padding: 0; background: transparent; color: var(--ink);
  max-width: 420px; width: calc(100% - 24px);
  margin: auto auto 0; /* a sheet from the bottom on a phone */
}
dialog.sheet::backdrop { background: rgba(10, 11, 26, 0.55); backdrop-filter: blur(2px); }
.sheet-card {
  background: var(--card); border-radius: 22px 22px 0 0;
  padding: 18px 18px max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 -10px 40px -20px rgba(0, 0, 0, 0.6);
}
@media (min-width: 480px) {
  dialog.sheet { margin: auto; }
  .sheet-card { border-radius: 22px; }
}
.sheet-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.field input, .field select {
  appearance: none; font: inherit; font-size: 0.95rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; width: 100%;
}
/* appearance:none takes the native dropdown arrow with it, and a select that
   looks like a text box invites typing.  The caret goes on the inline-end
   side, which RTL puts on the left. */
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238a90ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 11px;
  padding-inline-start: 36px;
}
.field input[type="time"] { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-actions { display: flex; gap: 8px; margin-top: 4px; }
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
}
.btn:active { opacity: 0.75; }
.btn--primary {
  border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent); flex: 1;
}
.btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--muted); font-size: 0.75rem; padding: 0 6px;
}
.foot-btns { display: flex; gap: 8px; }
.foot .btn { padding: 8px 14px; font-size: 0.8rem; }
.noscript {
  background: var(--card); border-radius: 18px; padding: 16px 18px; line-height: 1.5;
  font-size: 0.9rem; box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.45);
}

/* ── A pointer, not a thumb ───────────────────────────────────────────────
   Everything on this page is tappable on a phone, where pressing is the only
   affordance there is.  On a machine with a pointer the same things should say
   so before they are pressed, so hover is added — and only there, or a phone
   would leave the "hovered" state stuck after a tap. */
@media (hover: hover) and (pointer: fine) {
  .ev:hover { background: color-mix(in srgb, var(--who) 28%, var(--card)); }
  .legend-item:hover { border-color: var(--who); background: color-mix(in srgb, var(--who) 8%, var(--card)); }
  .btn:hover { border-color: var(--accent); color: var(--accent); }
  .btn--primary:hover, .add:hover { filter: brightness(1.07); }
  .btn--danger:hover { border-color: var(--danger); color: var(--danger); }
  .field input:hover, .field select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  /* Pressing is still what happens; it just stops being the only signal. */
  .ev, .legend-item, .btn, .add { transition: background 0.12s, border-color 0.12s, filter 0.12s; }
}

/* ── Desktop ──────────────────────────────────────────────────────────────
   The phone layout is one column as wide as a thumb's reach.  A desktop window
   is neither, and stretching that column across it would leave a 460px ribbon
   in a field of background.  So above 900px the page becomes what it actually
   is on a big screen: a week, at a size worth reading, with the activities
   beside it rather than under it.

   Only three kinds of thing change — the frame, the scale, and where the
   legend sits.  Every measurement below the timeline still derives from
   --hour and --ev-text, so raising those two is most of the work. */
@media (min-width: 900px) {
  :root {
    --hour: 76px;          /* a 45-minute block becomes 57px: three real lines */
    --gutter: 54px;
    --ev-text: 12px;
    --wx-slot: 30px;
  }
  .week--pop { --wx-slot: 42px; }

  body { padding: 28px 32px 40px; }

  /* Hero across the top, the week and the activities side by side under it.
     Column 1 is the wide one and RTL puts it on the right, so the calendar
     keeps the reading edge and the legend takes the far side. */
  .wrap {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
      "hero   hero"
      "weeks  legend"
      "foot   foot";
    align-items: start;
    gap: 20px;
  }
  .hero     { grid-area: hero; padding: 26px 32px 24px; border-radius: 26px; }
  #weeks    { grid-area: weeks; display: flex; flex-direction: column; gap: 20px; }
  .legend   { grid-area: legend; position: sticky; top: 28px; }
  .foot     { grid-area: foot; }
  .noscript { grid-column: 1 / -1; }

  /* Type scale: the phone sizes are floors, not the design. */
  .hero-month { font-size: 2.1rem; }
  .hero-today { font-size: 1.05rem; margin-top: 6px; }
  .hero-list  { flex-direction: row; flex-wrap: wrap; justify-content: flex-end;
                max-width: 58%; gap: 8px; }
  .hero-pill  { font-size: 0.85rem; padding: 6px 14px; }
  .hero-time  { font-size: 0.8rem; }

  .week { padding: 20px 18px 20px; border-radius: 26px; }
  .week-bar { padding: 2px 6px 16px; }
  .week-label { font-size: 0.95rem; }
  .add { font-size: 0.85rem; padding: 8px 16px; }

  .cols { column-gap: 8px; }
  .dow  { font-size: 0.8rem; }
  .dnum { height: 34px; font-size: 1.3rem; }
  .dayhead--today .dnum { width: 34px; }
  .dayhead { padding-bottom: 12px; gap: 3px; }

  .wx svg { width: 19px; height: 19px; }
  .wx-row { gap: 5px; }

  .daycol { border-radius: 14px; }
  .ev { inset-inline: 5px; border-radius: 8px; padding: 4px 7px; gap: 1px;
        border-inline-start-width: 3px; }
  .hour { padding-top: 5px; }
  .nowline::after { width: 9px; height: 9px; top: -5.5px; }

  /* In a 300px rail the activities read better as a list than as a pair of
     narrow columns, and the row has the width to be comfortable. */
  .legend { padding: 6px 16px 14px; border-radius: 26px; }
  .legend-title { font-size: 0.95rem; padding: 16px 4px 10px; }
  .legend-hint  { font-size: 0.72rem; }
  .legend-grid  { grid-template-columns: 1fr; gap: 6px; }
  .legend-item  { padding: 10px 12px; }
  .legend-swatch { width: 16px; height: 16px; }
  .legend-name  { font-size: 0.9rem; }

  .foot { font-size: 0.85rem; padding: 4px 8px; }
  .foot .btn { font-size: 0.85rem; padding: 9px 18px; }
}

/* Between the phone and that: one column still, but a roomier one — the
   calendar takes the extra width rather than the margins. */
@media (min-width: 560px) and (max-width: 899px) {
  :root { --hour: 68px; --gutter: 44px; --ev-text: 10px; --wx-slot: 26px; }
  .week--pop { --wx-slot: 36px; }
  .wrap { max-width: 720px; }
  body { padding: 24px 24px 32px; }
  .hero-month { font-size: 1.8rem; }
  .dnum { height: 30px; font-size: 1.15rem; }
  .dayhead--today .dnum { width: 30px; }
  .ev { inset-inline: 4px; padding: 3px 5px; }
  .legend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A very wide window: the week can take more of it, and the day columns stop
   growing past the point where a 45-minute block looks like a poster. */
@media (min-width: 1400px) {
  .wrap { max-width: 1340px; grid-template-columns: minmax(0, 1fr) 340px; }
  :root { --hour: 84px; }
}