/* SCF Sale Calendar, wave 10: the day tasks (docs/wave10-day-tasks.md section 6).

   Three seconds: a reader must see whose work is on a day and how far it has gone, without confusing any
   of it with a sale. The element that carries it is the chip's fill, which is the owner's colour and whose
   density IS the status.
   The organising idea, structural: status is drawn as how much of the owner's colour the chip is filled
   with, so a day reads as a row of part filled marks in five people's colours. Delete the fill and there is
   no status display, no owner display and no grouping left, only a list of titles.

   Every colour, curve and face comes from tokens.css. The owner colour arrives as the inline custom
   property --own, set from the task's own owner_colour, so a sixth person costs a row in the database and
   not a line here.

   How the fill stays readable in both themes, which is the one thing this file has to get right:
   --own is a --u- token and every one of them is a PASTEL, which means it is light on the light ground and
   still light on the dark one. That single fact decides the rest. Words sitting on the PAGE take
   --own-deep, the hue pulled 34 per cent toward the page's own ink, which darkens it on light and lifts it
   on dark. Words sitting on a FILL take --on-pastel, the dark one of the pair in either theme, because a
   pale chip needs dark words whichever ground it stands on. The weakest pairing of the five measures 5.1
   to 1 and the strongest 13.9, all of it printed by tools/person-colours.js, which refuses a colour that
   fails any state or that lands near a sale kind colour.

   What was cut before presenting: a second gauge inside the chip that drew the same status as a filled
   square, a per person class set that would have needed a line of CSS for every new face, and the good idea
   dropped is a count of the day's tasks standing in the corner of every square, which competed with the
   fill for the same three second read and told a reader less. */

/* 1. The chips in a day square.
      The cell is the only place a chip may sit. It never leaves the square, never spans a second day, takes
      no plate, no readiness rule and no channel bubbles, and stands half the height of a sale bar, so the
      two can be told apart at a glance and from across the room. */
.dt-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 100%;
  margin: 5px 6px 0;
  cursor: pointer;
}
/* A day with nothing on it keeps a door to the panel without taking a line of the square. The hint is drawn
   on hover only, or a month with no tasks would read as a page of empty prompts. */
.dt-chips.is-blank {
  min-height: 12px;
  border-radius: var(--r-sm);
}
@media (hover: hover) and (pointer: fine) {
  .dt-chips.is-blank:hover::before {
    content: "Add a task";
    font: 400 10px/1.2 var(--f-ui);
    color: var(--ghost);
  }
}
.dt-chips:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }

.dt-chip {
  --own: var(--muted);
  /* The hue, taken 34 per cent of the way toward the page's own ink. That darkens it on light paper and
     lifts it on the dark ground, so one declaration reads in both themes. The exact share is not a taste:
     tools/person-colours.js measures every person at every state and 34 is where the palest of the five
     clears 4.5 against the in progress wash. */
  --own-deep: color-mix(in srgb, var(--own) 34%, var(--ink));
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  height: 15px;
  padding: 0 5px;
  border-radius: 3px;
  font: 600 10.5px/1 var(--f-ui);
  letter-spacing: .01em;
  /* Not started: no fill at all, the owner's colour as a hairline and as the words. The chip is an outline
     waiting to be filled, which is exactly what the task is. */
  background: transparent;
  color: var(--own-deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--own) 70%, transparent);
}
/* In progress: the colour at part density, and the words go back to the page's own ink because they are now
   sitting on a wash rather than on the paper. Half the way to solid is the whole of the state. */
.dt-chip.is-doing {
  background: color-mix(in srgb, var(--own) 55%, var(--paper));
  color: var(--own-deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--own) 70%, transparent);
}
/* The wash carries a smaller share of the colour on the dark ground, and that is not a fudge. On white
   paper 55 per cent of a pastel is a tint; on a near black page the same tint is a bright slab that shouts
   louder than the finished state standing beside it. */
:root:not([data-theme="light"]) .dt-chip.is-doing {
  background: color-mix(in srgb, var(--own) 28%, var(--paper));
}
:root[data-theme="dark"] .dt-chip.is-doing {
  background: color-mix(in srgb, var(--own) 28%, var(--paper));
}
/* Done: the colour solid and the chip inverted, which is the loudest a chip ever gets and the only state
   that reads from the far side of a month. */
.dt-chip.is-done {
  background: var(--own);
  color: var(--on-pastel);
  box-shadow: none;
}
/* The title clips hard at the chip's right edge. It used to fade over the last 8px under a gradient mask,
   which is the sale bar's own signature device, copied on purpose by an earlier hand. In a wave whose whole
   brief was that a task must not read as a sale, borrowing the bar's most recognisable text treatment was
   the wrong instinct. A hard clip is plainer, it is not a dash or an ellipsis glyph, and it is nothing the
   bar does. */
.dt-t {
  position: relative;
  min-width: 0;
  padding-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
/* The crossing on a finished task is a rule element, never a dash character, so it can be drawn in the ink
   the chip is currently wearing and can never be read out as a word. */
.dt-x {
  position: absolute;
  left: 0;
  right: 8px;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: .78;
}
/* The overflow count carries no fill and no outline, so it can never be mistaken for a sixth person. */
.dt-more {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 3px;
  font: 700 10px/1 var(--f-ui);
  color: var(--muted);
}
/* The phone reading, off until the cell is too narrow to hold a word. */
.dt-fold { display: none; }

/* 2. The panel. One day, its tasks in full with their notes, grouped by person in team order. */
dialog.dt-panel {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}
.dt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 24px 16px;
}
.dt-head .h { margin-top: 4px; }
.dt-list { padding: 0 24px; }
.dt-empty { padding: 4px 0 20px; color: var(--muted); }
.dt-failed { color: var(--bad); }

.dt-group { padding: 16px 0; border-top: 1px solid var(--rule); }
.dt-group:first-child { border-top: 0; padding-top: 4px; }
/* The person's line layers a mark, a name and a count, each differing from its neighbour in face, size and
   colour, so the group reads as a heading and not as another row. */
.dt-who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font: 700 13px/1 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ink);
}
.dt-who-mark {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--own-deep);
}
.dt-who-c {
  margin-left: auto;
  font: 500 11px/1 var(--f-ui);
  letter-spacing: .06em;
  color: var(--muted);
}
.dt-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dt-row { position: relative; padding-left: 10px; }
/* The owner colour runs down the row at the same density a done chip wears, so the panel and the grid are
   speaking the same language about whose work this is. */
.dt-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 1px;
  background: var(--own-deep);
}
.dt-row.is-busy { opacity: .5; pointer-events: none; }
.dt-row-head { display: flex; align-items: center; gap: 8px; }
.dt-row-t {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  font: 500 14px/1.3 var(--f-ui);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dt-row-t.is-done { color: var(--muted); }
.dt-row-t .dt-x { right: 0; }

/* The status control wears the same fill as the chip it moves, so pressing it is visibly the thing that
   fills the mark out on the calendar behind. */
.dt-step,
.dt-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  font: 700 10px/1 var(--f-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--own-deep);
  box-shadow: inset 0 0 0 1px var(--own-deep);
}
.dt-step { cursor: pointer; transition: transform 120ms var(--ease); }
.dt-step:active { transform: scale(.96); }
.dt-step.is-doing,
.dt-state.is-doing {
  background: color-mix(in srgb, var(--own) 40%, var(--paper));
  color: var(--ink);
}
.dt-step.is-done,
.dt-state.is-done {
  background: var(--own-deep);
  color: var(--paper);
  box-shadow: none;
}

.dt-note {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 400 12.5px/1.45 var(--f-ui);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
/* Each line of the note is a separate entry made at a separate hour, so each carries its own quiet square
   and the list reads as a day filling up rather than as one paragraph that keeps changing. The mark is a
   square rather than a short rule, because a short rule is a dash wherever a reader finds one. */
.dt-note li { position: relative; padding-left: 12px; }
.dt-note li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 3px;
  height: 3px;
  background: var(--rule-2);
}
.dt-add-note { display: flex; gap: 6px; margin-top: 6px; }
.dt-add-note .dt-note-in { flex: 1 1 auto; min-width: 0; height: 30px; font-size: 12.5px; }

.dt-foot:empty { display: none; }
.dt-add { padding: 20px 24px 24px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.dt-add .eyebrow { margin-bottom: 2px; }
.dt-in-note { resize: vertical; }
.dt-add-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dt-add-go { margin-left: auto; }
.dt-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--linen-2); }
.dt-seg > button {
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  height: 26px;
  background: transparent;
  color: var(--muted);
  font: 600 11px/1 var(--f-ui);
  cursor: pointer;
}
.dt-seg > button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.dt-add.is-loading { opacity: .6; pointer-events: none; }
.dt-add-err:empty { display: none; }

/* 3. The filter, under the calendar's own facets bar. It is a select and not a row of chips, because the
      list grows with the team and a bar of eight toggles would outweigh the sale facets above it. It takes
      the facets bar's ground, padding and hairline so the two read as one instrument in two lines. */
.dt-filter-host {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.dt-filter-host:empty { display: none; }
.dt-filter { display: inline-flex; align-items: center; gap: 8px; }
.dt-filter-l { color: var(--muted); }
.dt-filter-sel { height: 30px; padding: 0 8px; font: 500 12.5px/1 var(--f-ui); width: auto; min-width: 104px; }

/* 4. Narrow. Under 620px a cell is under 90px wide and a title inside a chip is a fragment of a word, so the
      chips fold to one count in the quietest possible mark and the panel holds the facts. Nothing here
      widens a cell, so the grid never scrolls sideways. */
@media (max-width: 620px) {
  .dt-chips { gap: 2px; margin: 4px 4px 0; }
  .dt-chip,
  .dt-more { display: none; }
  .dt-fold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 3px;
    font: 700 10px/1 var(--f-ui);
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--rule-2);
  }
  .dt-head { padding: 20px 16px 12px; }
  .dt-list { padding: 0 16px; }
  .dt-add { padding: 16px; }
  .dt-add-go { margin-left: 0; width: 100%; justify-content: center; }
}

/* 5. Dark. Every value above is already a token expression that flips with the theme, so only two things
      are restated: the in progress wash, which needs a touch less of a light owner colour to stay clear of
      the ink sitting on it, and the blank hint, which is one step quieter on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dt-chip.is-doing,
  :root:not([data-theme="light"]) .dt-step.is-doing,
  :root:not([data-theme="light"]) .dt-state.is-doing {
    background: color-mix(in srgb, var(--own) 34%, var(--paper));
  }
  :root:not([data-theme="light"]) .dt-x { opacity: .7; }
}
:root[data-theme="dark"] .dt-chip.is-doing,
:root[data-theme="dark"] .dt-step.is-doing,
:root[data-theme="dark"] .dt-state.is-doing {
  background: color-mix(in srgb, var(--own) 34%, var(--paper));
}
:root[data-theme="dark"] .dt-x { opacity: .7; }

/* 6. Motion. Only transform and opacity move, on the house curve, and a person who has asked for less
      motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .dt-step { transition: none; }
  .dt-step:active { transform: none; }
}