/* ================================================================
   Daylight — Today (the Home page). Scoped to body.surface-daylight.

   The approved board: "Today" and the date, the day as the thread on the left
   (the Calendar's own thread — its look lives in calendar.css, because it is
   the same code), and on the right a stack of tiles: what is left to do today
   with what slipped said quietly under it, Study with the day streak, and the
   pinned notes. Inside the page tile the tiles are drawn as cards with a
   hairline, so the kit's own insides (inset pins, white cards, the streak
   strip) keep the colours the board gave them.

   home-view.js builds this from the To-dos page's rows and groups and the
   Library's head; every rule here is held to #home-view so those pages keep
   their own look.
   ================================================================ */

body.surface-daylight {
  --today-check-line: #BDB6AD;
  --today-strip-off: var(--border);
  --today-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --today-ic-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --today-ic-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c.8 3.6 4.8 5 4.8 9.8a4.8 4.8 0 0 1-9.6 0c0-2.7 1.7-3.9 2-6.4 1 1 1.7 2.1 2.2 3.5.4-2.6-.3-4.7.6-6.9z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --today-ic-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black'/%3E%3C/svg%3E");
}
body.surface-daylight:not(.theme-light) {
  --today-check-line: #6B665F;
  --today-strip-off: color-mix(in srgb, var(--text-heading) 13%, var(--card-bg));
}

body.surface-daylight #home-view .home-scroll {
  padding: 24px 32px 96px;
  container-type: inline-size;
}

/* ---- The head: "Today" and the date on one baseline ---- */
body.surface-daylight #home-view .home-head {
  align-items: baseline; flex-wrap: wrap;
  gap: 4px 12px; margin: 0 0 20px;
}
body.surface-daylight #home-view .home-head .lib-title {
  font-family: var(--font-ui);
  font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-heading);
}
body.surface-daylight #home-view .home-head .lib-sub {
  font-size: 15px; line-height: 20px; color: var(--text-muted);
}
/* Study has a tile of its own here (home-view.js draws it under Daylight). */
body.surface-daylight #home-view .home-head .home-study { display: none; }

/* ---- Two columns: the day, and what is left in it ---- */
body.surface-daylight #home-view .home-cols {
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, 1fr);
  gap: 0 20px; max-width: 1240px;
}
@container (max-width: 820px) {
  body.surface-daylight #home-view .home-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Tiles ---- */
body.surface-daylight #home-view :is(.home-main, .home-side) > .todo-group {
  position: relative;
  margin: 0 0 16px; padding: 18px 20px 14px;
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(31, 28, 24, 0.04);
}
body.surface-daylight:not(.theme-light) #home-view :is(.home-main, .home-side) > .todo-group {
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, 0.3);
}
body.surface-daylight #home-view .todo-group-head {
  display: flex; align-items: baseline; gap: 8px;
  min-height: 24px; margin: 0 0 10px;
}
body.surface-daylight #home-view .todo-group-label {
  font-family: var(--font-ui);
  font-size: 15px; line-height: 20px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--text-heading);
}
body.surface-daylight #home-view .todo-group-label.plain:hover { color: var(--text-heading); }
body.surface-daylight #home-view .todo-group-count {
  font-size: 13px; line-height: 18px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* What slipped, said quietly: a small red word over the rows, inside the
   to-do tile rather than a red block of its own. */
body.surface-daylight #home-view .todo-group > .todo-group.late {
  margin: 8px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--border);
  border-radius: 0; background: none; box-shadow: none;
}
body.surface-daylight #home-view .todo-group.late > .todo-group-head { min-height: 18px; margin-bottom: 2px; }
body.surface-daylight #home-view .todo-group.late .todo-group-label,
body.surface-daylight #home-view .todo-group.late .todo-group-label.plain:hover {
  font-size: 13px; line-height: 18px; font-weight: 500;
  color: var(--danger);
}

/* Links out: small, in the accent. */
body.surface-daylight #home-view .home-more {
  display: inline-flex; align-items: center;
  margin: 6px 0 2px; padding: 0;
  font-size: 13px; line-height: 18px; font-weight: 500;
  color: var(--accent);
}
body.surface-daylight #home-view .home-more:hover {
  text-decoration: none;
  color: color-mix(in srgb, var(--accent) 78%, var(--text-heading));
}
body.surface-daylight #home-view .home-quiet {
  padding: 2px 0 6px;
  font-size: 14px; line-height: 20px; color: var(--text-muted);
}

/* ---- Schedule: the thread, with the way to the full day in the corner ---- */
body.surface-daylight #home-view .home-main > .todo-group:first-child > .home-more:last-child {
  position: absolute; top: 21px; right: 20px; margin: 0;
}
body.surface-daylight #home-view .home-main > .todo-group:first-child > .todo-group-head { padding-right: 190px; }
body.surface-daylight #home-view .home-main .cv-thread { margin: 4px 0 2px; }

/* ---- To-do rows: a round box, the words, and where they live under them ---- */
body.surface-daylight #home-view .home-cols .todo-row {
  position: relative;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 12px; row-gap: 1px;
  align-items: start;
  margin: 0; padding: 10px 0;
  border: 0; border-radius: 0;
  background: none;
}
body.surface-daylight #home-view .home-cols .todo-row:hover { background: none; }
body.surface-daylight #home-view .home-cols .todo-row + .todo-row::before {
  content: ''; position: absolute; left: 34px; right: 0; top: 0;
  border-top: 1px solid var(--border);
}
body.surface-daylight #home-view .home-cols .todo-box {
  width: 20px; height: 20px; margin: 0 1px;
  border: 0; border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--today-check-line);
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
body.surface-daylight #home-view .home-cols .todo-box:hover {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
body.surface-daylight #home-view .home-cols .todo-box.on { background: var(--accent); box-shadow: none; }
body.surface-daylight #home-view .home-cols .todo-box.on::after {
  content: ''; position: absolute; inset: 0;
  width: auto; height: auto;
  border: 0; transform: none;
  background: #FFFFFF;
  -webkit-mask: var(--today-ic-check) center / 12px 12px no-repeat;
  mask: var(--today-ic-check) center / 12px 12px no-repeat;
}
body.surface-daylight:not(.theme-light) #home-view .home-cols .todo-box.on::after { background: #161514; }
body.surface-daylight #home-view .home-cols .todo-text {
  font-size: 15px; line-height: 20px;
  color: var(--text-heading);
  overflow-wrap: anywhere;
}
body.surface-daylight #home-view .home-cols .todo-text:hover { color: var(--accent); }
body.surface-daylight #home-view .home-cols .todo-row.done .todo-text {
  color: var(--text-muted); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent);
}
body.surface-daylight #home-view .home-cols .todo-row > .todo-from {
  max-width: 100%; margin: 0; padding: 0;
  font-size: 13px; line-height: 18px;
  color: var(--text-muted);
}
body.surface-daylight #home-view .home-cols .todo-row > .todo-from:hover { color: var(--accent); }
/* The date as a quiet word, not a pill; late is the same word in red. */
body.surface-daylight #home-view .home-cols .todo-due {
  align-self: start;
  margin: 1px 0 0; padding: 0;
  border: 0; border-radius: 0; background: none;
  font-family: var(--font-ui);
  font-size: 13px; line-height: 18px; font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
body.surface-daylight #home-view .home-cols .todo-due:hover { color: var(--accent); background: none; border: 0; }
body.surface-daylight #home-view .home-cols .todo-due.now { color: var(--text-muted); border: 0; }
body.surface-daylight #home-view .home-cols .todo-due.late,
body.surface-daylight #home-view .home-cols .todo-due.bad {
  color: var(--danger); font-weight: 500;
  background: none; border: 0;
}
body.surface-daylight #home-view .home-cols .todo-row.done .todo-due { opacity: 1; }

/* ---- Study: how much is waiting, the way in, and the streak ---- */
body.surface-daylight #home-view .home-study-tile .todo-group-head .home-more { margin: 0 0 0 auto; }
body.surface-daylight #home-view .hst-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 16px;
  margin-top: 2px;
}
body.surface-daylight #home-view .hst-main { min-width: 0; }
body.surface-daylight #home-view .hst-count { display: flex; align-items: baseline; gap: 8px; }
body.surface-daylight #home-view .hst-n {
  font-size: 44px; line-height: 44px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
body.surface-daylight #home-view .hst-unit {
  font-size: 17px; line-height: 22px; font-weight: 500;
  color: var(--text-heading); white-space: nowrap;
}
body.surface-daylight #home-view .hst-none {
  font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-heading);
}
body.surface-daylight #home-view .hst-sub {
  margin-top: 6px;
  font-size: 13px; line-height: 18px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; text-wrap: pretty;
}
body.surface-daylight #home-view .hst-go {
  height: 36px; padding: 0 14px;
  border: 0; border-radius: 10px;
  background: var(--text-heading); color: var(--card-bg);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
}
body.surface-daylight #home-view .hst-go::before {
  content: ''; width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: var(--today-ic-play) center / contain no-repeat;
  mask: var(--today-ic-play) center / contain no-repeat;
}
body.surface-daylight #home-view .hst-go:hover { background: color-mix(in srgb, var(--text-heading) 88%, var(--card-bg)); }
body.surface-daylight #home-view .hst-go.secondary {
  background: var(--card-bg); color: var(--text-heading);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.surface-daylight #home-view .hst-go.secondary::before { display: none; }
body.surface-daylight #home-view .hst-go.secondary:hover { background: var(--dl-hover); }

body.surface-daylight #home-view .hst-streak {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 16px;
  margin: 18px 0 4px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
body.surface-daylight #home-view .hst-streak-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.surface-daylight #home-view .hst-flame {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dl-select);
}
body.surface-daylight #home-view .hst-flame::before {
  content: ''; width: 20px; height: 20px;
  background: var(--accent);
  -webkit-mask: var(--today-ic-flame) center / contain no-repeat;
  mask: var(--today-ic-flame) center / contain no-repeat;
}
body.surface-daylight #home-view .hst-streak-n {
  font-size: 15px; line-height: 20px; font-weight: 600;
  color: var(--text-heading); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.surface-daylight #home-view .hst-streak-sub {
  font-size: 13px; line-height: 18px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
body.surface-daylight #home-view .hst-strip { display: flex; gap: 4px; flex: none; }
body.surface-daylight #home-view .hst-day {
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--today-strip-off);
}
body.surface-daylight #home-view .hst-day.on { background: var(--accent); }
body.surface-daylight #home-view .hst-day.today:not(.on) {
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* ---- Pinned: two across, each a small inset card ---- */
body.surface-daylight #home-view .home-decks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: 2px 0 0;
}
body.surface-daylight #home-view .home-pin {
  position: relative; display: block;
  padding: 0; gap: 0;
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text-heading); font-size: 14px;
}
body.surface-daylight #home-view .home-pin:hover { background: var(--bg-tertiary); color: var(--text-heading); }
body.surface-daylight #home-view .home-pin-open {
  position: relative;
  width: 100%; min-height: 58px;
  display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 1px;
  padding: 10px 28px 10px 42px;
  border-radius: 14px; text-align: left;
}
body.surface-daylight #home-view .home-pin-open::before {
  content: ''; position: absolute; left: 14px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  background: var(--text-faint);
  -webkit-mask: var(--today-ic-note) center / contain no-repeat;
  mask: var(--today-ic-note) center / contain no-repeat;
}
body.surface-daylight #home-view .home-pin .deck-name {
  flex: none;
  font-size: 14px; line-height: 18px; font-weight: 500;
  color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.surface-daylight #home-view .home-pin-where {
  max-width: none;
  font-size: 13px; line-height: 18px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.surface-daylight #home-view .home-pin-x {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 15px; line-height: 22px;
  color: var(--text-muted);
}
body.surface-daylight #home-view .home-pin-x:hover { background: var(--dl-hover); color: var(--text-heading); }


/* ---- The day's study, as a tile in the right-hand column rather than a button
   in the head (home-view.js moves it under Daylight). In a tile it stacks: the
   count, then the way in across the full width, then the streak. ---- */
body.surface-daylight #home-view .home-side .home-study {
  margin-left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
body.surface-daylight #home-view .home-side .home-study-n {
  font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); white-space: normal;
}
body.surface-daylight #home-view .home-side .home-study-go {
  width: 100%; padding: 0; height: 36px; border-radius: 10px;
  font-size: 13px; font-weight: 500;
}

/* ---- The study tile's streak: fourteen days, filled for the ones reviewed.
   Home renders it (home-view.js); the numbers are the Study page's own log. ---- */
body.surface-daylight .home-streak {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
body.surface-daylight .home-streak-n { font-size: 14px; font-weight: 600; color: var(--text-heading); }
body.surface-daylight .home-streak-days { display: flex; gap: 4px; }
body.surface-daylight .home-streak-day { width: 11px; height: 11px; border-radius: 3px; background: var(--dl-segment); }
body.surface-daylight .home-streak-day.on { background: var(--accent); }
body.surface-daylight .home-streak-day.today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }