/* ── The indexed sub-goal checklist, and its day pills ────────────────
   Split out of styles/goal-board.css on 2026-09-20, when the day pills pushed
   that sheet past its size line. Loaded right AFTER it (index.html) and scoped
   the same way — every rule sits under `.gb-subgoal…` on the card's own list
   mount — so nothing here depends on the split: the cascade reads exactly as
   it did when these rules were one file. */

/* ── The list ─────────────────────────────────────────────────────────
   A weekly goal's parts, drawn as separate ROWS rather than as the Tiptap
   document a daily goal's checklist is (js/subgoals/subgoal_item_list.js says
   why). The mount also wears `.gd-daily-subgoals`, which is what supplies the
   28px indent, the disclosure header's styling and — load-bearing, not
   decorative — the drag layer's hard veto and the card's press-to-open-menu
   exemption, both of which key on that class name.

   Down the left edge is the GRIP, not a number. The order of these rows is real
   — they are steps — but a printed position reads as the row's name, and the
   row's name is its id, which nothing here shows. What the left column is for is
   the one gesture the rest of the row cannot offer: everything else on it (the
   tick, the words, the ×) already answers to a press. */
.gb-subgoal-body {
  grid-column: 1 / -1;
  grid-row: 2;
}
.gb-subgoal-list {
  list-style: none;   /* an ordered list for the ORDER, not for the markers */
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gb-subgoal {
  display: grid;
  /* grip · tick · words · × — the goal card's own row order, one size down. */
  grid-template-columns: 14px 16px 1fr auto;
  align-items: start;
  column-gap: 5px;
  padding: 1px 0;
}
/* Six dots, drawn as ONE tiled radial-gradient rather than six nodes — the same
   trick the Brain Dump's grip uses (`brain-dump-sidebar.css`), and for the same
   reason: this list can be long and the dot size then lives in one place. */
.gb-subgoal-grip {
  align-self: center;
  justify-self: end;
  height: 13px;
  width: 8px;
  background-image: radial-gradient(currentColor 1px, transparent 1.3px);
  background-position: 0 0;
  background-size: 4px 4.5px;
  color: rgba(var(--overlay-rgb), 0.28);
  cursor: grab;
  touch-action: none;   /* the gesture is a pointer drag; a finger must not scroll instead */
}
.gb-subgoal:hover .gb-subgoal-grip { color: rgba(var(--overlay-rgb), 0.5); }
/* An archived list: the dots go, the box stays, so every row's tick keeps its
   column. Same rule `bds-grip--off` follows. */
.gb-subgoal-grip--off {
  cursor: default;
  visibility: hidden;
}
/* The card that would receive a dropped sub-goal. The board's own column
   highlight is `.gb-drop-target`; this is deliberately a different class on a
   different element, so a card lit as "your sub-goal lands here" is never
   mistaken for a column lit as "your goal lands here". */
.gb-subgoal-drop-target {
  outline: 2px dashed rgba(var(--overlay-rgb), 0.45);
  outline-offset: 1px;
}
/* The row under the pointer while it is being carried. Mounted on the body (see
   `subgoal_item_drag.js`), so it needs the padding and the surface the list
   around it would have given it. */
.gb-subgoal-carry {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  margin: 0;
  padding: 3px 8px;
  border-radius: 6px;
  /* The row is as wide as the card it came out of, which near the right-hand
     column puts most of the thing in your hand off the edge of the screen. The
     words wrap instead. */
  max-width: min(320px, 60vw);
  /* 🔴 `--card-surface`, the same RESOLVED opaque colour the card under it uses
     (see the note at the top of this file) — not `--surface`, which no theme
     defines here, so the carry came out as a white slab in dark mode with the
     row's own pale text on it: unreadable, and the one thing you are looking at.
     The text colour has to be restated for the same reason: the clone is on the
     BODY, so it inherits none of the card's. */
  background: var(--card-surface-strong, var(--card-surface));
  color: var(--text-primary);
  border: 1px solid rgba(var(--overlay-rgb), 0.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  pointer-events: none;
  opacity: 0.96;
}
/* The grip is being held, so it says so — and the × on a copy you cannot press
   is noise. */
.gb-subgoal-carry .gb-subgoal-grip { cursor: grabbing; }
.gb-subgoal-carry .gb-subgoal-remove { visibility: hidden; }
.gb-subgoal-check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(var(--overlay-rgb), 0.55);
  cursor: pointer;
}
.gb-subgoal-check:hover { color: rgba(var(--overlay-rgb), 0.9); }
/* A ticked or dropped sub-goal is still readable — it is a record of what was
   planned, and the list is about to be quoted elsewhere. Dimmed, not hidden. */
.gb-subgoal--checked .gb-subgoal-text,
.gb-subgoal--x .gb-subgoal-text {
  text-decoration: line-through;
  opacity: 0.55;
}
.gb-subgoal--checked .gb-subgoal-check { color: var(--ltg-row-color, currentColor); }
.gb-subgoal-text {
  width: 100%;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  /* A one-line-looking textarea that WRAPS rather than scrolling a long sub-goal
     out of sight — the `.ltg-text` treatment, which `autosizeLtgTextField` grows. */
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
}
.gb-subgoal-text:focus { outline: none; }
.gb-subgoal-text::placeholder { color: rgba(var(--overlay-rgb), 0.3); }
/* 🔴 Always drawn, never revealed on hover. A hidden × is a delete you have to
   already know is there, and this list is written and rewritten constantly — the
   Brain Dump's row keeps its × out for the same reason. It is quiet (0.3) rather
   than absent, so a column of them does not read as a column of buttons. */
.gb-subgoal-remove {
  border: 0;
  background: transparent;
  padding: 0 2px;
  font-size: 13px;
  line-height: 18px;
  color: rgba(var(--overlay-rgb), 0.3);
  cursor: pointer;
}
.gb-subgoal:hover .gb-subgoal-remove { color: rgba(var(--overlay-rgb), 0.55); }
.gb-subgoal-remove:hover { color: #c22; }
.gb-subgoal-add {
  margin: 3px 0 1px 19px;   /* under the words, past the grip and tick columns */
  padding: 1px 3px;
  border: 0;
  background: transparent;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(var(--overlay-rgb), 0.4);
  cursor: pointer;
}
.gb-subgoal-add:hover { color: rgba(var(--overlay-rgb), 0.8); }

/* ── The day pills ────────────────────────────────────────────────────────
   Seven round buttons under a sub-goal's words — Google Calendar's "repeat on"
   row (M T W T F S S), inline rather than in a dialog. A lit pill means a copy
   of this sub-goal stands on that day of the card's week (js/subgoals/
   subgoal_day_pills.js draws them; subgoal_repeat.js writes the days).
   The lit colour is the GOAL'S, so a card's pills say which goal they belong
   to the same way its tick and its chips do. */
.gb-subgoal-days {
  /* From the tick column to the edge: seven 20px pills at a 3px gap are 158px,
     which a 265px column card fits only if the row starts under the tick
     rather than under the words. Wrapping is the fallback, not the layout. */
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 2px 0 3px;
}
.gb-subgoal-day {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--overlay-rgb), 0.09);
  color: rgba(var(--overlay-rgb), 0.6);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.gb-subgoal-day:hover:not(:disabled) {
  background: rgba(var(--overlay-rgb), 0.16);
  color: rgba(var(--overlay-rgb), 0.9);
}
.gb-subgoal-day--on {
  background: var(--ltg-row-color, #1a73e8);
  color: #fff;
}
.gb-subgoal-day--on:hover:not(:disabled) {
  background: var(--ltg-row-color, #1a73e8);
  color: #fff;
  filter: brightness(1.08);
}
/* What the copy on that day says, read back from the day: ticked = green,
   marked x = red. The goal colour is the plain "stands there, open" face. */
.gb-subgoal-day--on.gb-subgoal-day--checked,
.gb-subgoal-day--on.gb-subgoal-day--checked:hover:not(:disabled) {
  background: #34a853;
}
.gb-subgoal-day--on.gb-subgoal-day--x,
.gb-subgoal-day--on.gb-subgoal-day--x:hover:not(:disabled) {
  background: #d93025;
}
/* The day is being written; a second press must wait for the first. */
.gb-subgoal-day--busy { opacity: 0.6; cursor: progress; }
/* An archived goal's pills are a record — readable, not pressable. */
.gb-subgoal-day:disabled { cursor: default; }
/* A ticked or dropped sub-goal dims its words (above); its pills dim with them. */
.gb-subgoal--checked .gb-subgoal-days,
.gb-subgoal--x .gb-subgoal-days { opacity: 0.55; }

/* Hover is not a thing a finger does. The × no longer needs this — it is always
   drawn — but the grip's hover state is the only thing that makes the dots
   readable, so a touch screen gets that shade permanently. */
@media (hover: none) {
  .gb-subgoal-grip { color: rgba(var(--overlay-rgb), 0.5); }
  .gb-subgoal-remove { color: rgba(var(--overlay-rgb), 0.5); }
}

/* ── Phone ────────────────────────────────────────────────────────────────
   Two separate problems, so two separate queries, matching the split the rest
   of the app uses: WIDTH is about how much room there is (the query is
   `PHONE_QUERY`'s text, as in styles/mobile.css), POINTER is about what is
   doing the pressing (events.css's resize handle is the precedent). */

/* Width: the shared mount's 28px indent sits under the goal words of a
   desktop row. On a 390px card it is 28px of nothing on every sub-goal line,
   and the words wrap a line early to pay for it. The grip column already says
   "this row belongs to the goal above". */
@media (max-width: 900px), (pointer: coarse) and (max-height: 520px) {
  .gb-subgoals.gd-daily-subgoals {
    margin-left: 0;
  }
}

/* Finger: every control on the row was sized for a mouse — a 16x18 tick, a
   12x18 ×, 20px day pills 3px apart, an 8x13 grip. A fingertip covers ~40px,
   so each control gets a ~32px box around the SAME glyph: the row looks the
   same, it just stops eating presses meant for its neighbour. */
@media (pointer: coarse) {
  .gb-subgoal {
    grid-template-columns: 24px 32px 1fr 32px;
    column-gap: 2px;
    padding: 0;
  }
  /* The dots stay 8x13; the padding is the hit area. `content-box` on both the
     box and the background keeps the tiled dots inside the padding. */
  .gb-subgoal-grip {
    box-sizing: content-box;
    padding: 9px 8px;
    background-clip: content-box;
    background-origin: content-box;
    justify-self: center;
  }
  .gb-subgoal-check {
    width: 32px;
    height: 32px;
  }
  /* Centred on the 32px buttons beside it for a one-line sub-goal; a wrapped
     one grows downward from the same first line. */
  .gb-subgoal-text {
    padding: 7px 0;
  }
  .gb-subgoal-remove {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    line-height: 32px;
  }
  /* 7 × 28px + 6 × 6px = 232px — fits the phone card from the tick column on.
     Wrapping stays the fallback for a narrow multi-column touch layout. */
  .gb-subgoal-days {
    gap: 6px;
    padding: 0 0 6px;
  }
  .gb-subgoal-day {
    width: 28px;
    height: 28px;
    font-size: 11px;
    line-height: 28px;
  }
  .gb-subgoal-add {
    margin: 2px 0 2px 20px;
    padding: 8px 6px;
    font-size: 13px;
  }
}