/* Per element and never inherited: the estimate pill's fills. */
@property --logged { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --blocked { syntax: '<number>'; inherits: false; initial-value: 0; }

@layer components {
/* ── rows ───────────────────────────────────────────────────────── */
.row {
  display: flex; align-items: baseline; min-height: 1.4rem;
  position: relative;                             /* the rowtl echo anchors here */
  transition: background var(--bleed);

  .sigil {
    font-family: var(--mono); color: var(--dim);
    flex: none; padding: .1rem .5ch .1rem .3ch; margin-left: -.3ch;
    white-space: pre;
    user-select: none; -webkit-user-select: none; cursor: pointer;
  }
  &:where([data-kind="heading"]) .sigil { color: var(--rubric, var(--dim)); }
  /* a slide on a task box is its pie, and in drag mode one on any mark
     moves its block (web/reorder.js), so the browser must not read
     either as a scroll. Elsewhere the sigil column scrolls. */
  &[data-kind="task"] > .sigil, body.handles & > .sigil { touch-action: none; }
  .body, .fmt {
    flex: 1; min-width: 1ch; outline: none;
    white-space: pre-wrap; overflow-wrap: anywhere;
  }
  /* editing is modal per row: formatted at rest, raw plaintext (and
     nothing highlighted) while the caret is in it */
  &.rich.editing .fmt { display: none; }
  &.rich:not(.editing) .body { display: none; }
  .fmt {
    cursor: text;

    code {
      font-family: var(--mono); font-size: .85em;
      background: var(--well); padding: 0 .25ch; border-radius: calc(.2rem * var(--round));
    }
    .pri-high { color: var(--warn); }
    .pri-med { color: var(--amber); }
    .pri-low { color: var(--dim); }
    .des-fun { color: var(--fun); }
    .des-meh { color: var(--meh); }
    .des-ugh { color: var(--ugh); }
    /* the alertness mark: the word names its level, one hue carries them all */
    :is(.alert-high, .alert-med, .alert-low) { color: var(--alert); }
    /* an estimate is a pill whose fill is the clock against it: green to
       --logged is logged, blue on to --blocked is time blocked but not
       worked yet, and the rest of the estimate is unaccounted for. Both
       are fractions of it, written by panes.js paintRows. */
    .est {
      color: color-mix(in oklab, var(--ink) 56%, var(--bg)); font-size: .85em; padding: 0 .45ch; border-radius: calc(1em * var(--round));
      background: linear-gradient(90deg,
        color-mix(in oklab, var(--spent) 16%, transparent) calc(var(--logged) * 100%),
        color-mix(in oklab, var(--alert) 14%, transparent) 0 calc(var(--blocked) * 100%), var(--well) 0);

      /* logged reached the estimate: target met */
      &.met { color: var(--spent); }
    }
    /* concrete times all read in accent: a task's clock time-block, a day
       anchor, and a parsed when-span (the tint is the feedback that the
       timestamp parsed) */
    :is(.time, .day, .when) { color: var(--accent); font-variant-numeric: tabular-nums; }
    /* a clock pinned to another zone: the token stands as written, and
       a faint rule says the hover has what it means here */
    :is(.time, .when).zoned { cursor: help; }
    :is(.time, .when).zoned, .flink {
      text-decoration: underline dotted color-mix(in oklab, currentColor 50%, transparent);
      text-decoration-thickness: 1px; text-underline-offset: .16em;
      &:hover { text-decoration-color: currentColor; }
    }
    /* a closed span flips its spelling on a tap, 9:45-10:45 ⇄ 1h@9:45 */
    :is(.time, .when).respell { cursor: pointer; }
    /* the roll marks ride quietly — ↑since carried, →dest left behind */
    .roll { color: var(--dim); font-size: .85em; font-variant-numeric: tabular-nums; }
    /* a recurrence rule is a standing order: the alert blue, apart from
       the accent a concrete time wears */
    .recur { color: var(--alert); }
    /* a ↻ stamp is a slide surface, like the task box: it never takes a
       caret, and a drag over it aims the pie rather than selecting */
    .inst {
      color: var(--dim); cursor: pointer;
      user-select: none; -webkit-user-select: none; touch-action: none;
    }
    /* a deadline reads as a concrete time, and red once it has passed */
    .due { color: var(--accent); font-variant-numeric: tabular-nums; }
    /* the word a late task wears (rows.js markLate): missed, quiet, since
       it is no longer owed; overdue, red, since it still is */
    .late { color: var(--dim); font-size: .72rem; font-style: italic; margin-left: .6ch; white-space: nowrap; }
    .ref { color: var(--accent); cursor: pointer; }
    :is(.ref, .tag).unresolved { color: var(--amber); text-decoration: underline wavy var(--amber); }
    .backs { color: var(--dim); font-size: .8em; margin-left: .5em; cursor: pointer; }
    /* a [W26/work.bs] file link is followable — a tap navigates to its file */
    .flink { cursor: pointer; }
    /* a when-span's tense recolours it — now live (amber, bold), past
       faded (dim); the future keeps the base accent */
    .when-now { color: var(--amber); font-weight: 600; }
    .when-past { color: var(--dim); }
    a { color: var(--accent); }
    .yr, .hpath { color: var(--dim); font-weight: 400; }
  }
  &[data-late="overdue"] .fmt :is(.due, .late) { color: var(--warn); }
  &.hid { display: none; }
  &[data-tot] .body { flex: 0 1 auto; }         /* the totals hug the text */
  &[data-tot]::after {
    content: attr(data-tot);
    color: var(--dim); font-size: .72rem; font-weight: 400;
    margin-left: .6ch; white-space: nowrap;
  }
  &[data-kind="heading"] {
    font-weight: 600; margin-top: .4rem; font-size: 1.05rem;
    &.folded .sigil { color: var(--accent); }
    &.folded::after { content: '… ' attr(data-fold) '  ' attr(data-tot); color: var(--dim); font-size: .72rem; font-weight: 400; margin-left: .6ch; white-space: nowrap; }
  }
  &[data-kind="comment"], &[data-kind="attrs"] { color: var(--dim); font-size: .85rem; }
  /* an empty ¶ at rest reads as a quiet separator, not a blank gap; a
     caret in it (.editing) restores the plain blank line for typing */
  &[data-kind="para"]:not(.editing):has(.body:empty) .fmt::after {
    content: ''; display: block; width: 8ch;
    border-top: 1px solid var(--line); margin: .55rem 0;
  }
  &:is([data-kind="code"], [data-kind="pre"], [data-kind="clock"]) :is(.body, .fmt) {
    font-family: var(--mono); font-size: .85rem;
  }
  &[data-kind="code"], &[data-kind="pre"] {
    background: var(--well); border-radius: calc(.3rem * var(--round)); padding: .15rem .3rem; margin: .15rem 0;
  }
  &[data-kind="quote"] .body { font-style: italic; color: color-mix(in oklab, var(--ink) 72%, var(--bg)); }
  /* a blank line splitting a run: the row starts a fresh block, set off
     above. Placed past the code/pre box so its margin shorthand can't win. */
  &[data-gap] { margin-top: 1.4rem; }
  &[data-kind="link"] .sigil { color: var(--accent); }
  &:is([data-status="done"], [data-status="cancelled"]) :is(.body, .fmt) {
    color: var(--dim); text-decoration: line-through;
  }
  &[data-status] .sigil { color: var(--ink); }
  &[data-status="in-progress"] .sigil { color: var(--accent); }
  &[data-pri^="high"] .sigil { color: var(--warn); }
  &[data-pri^="med"] .sigil { color: var(--amber); }
  &[data-pri^="low"] .sigil { color: var(--dim); }
  /* a crossed-out row is all the way quiet: no priority or fun/ugh tint */
  &:is([data-status="done"], [data-status="cancelled"]) .sigil { color: var(--ink); }
  &:is([data-status="done"], [data-status="cancelled"]) .fmt
    :is(.pri-high, .pri-med, .pri-low, .des-fun, .des-meh, .des-ugh,
        .alert-high, .alert-med, .alert-low) { color: inherit; }
  /* a deferred task is roll's breadcrumb: the work itself is in the day
     it went to, and what is left here is a trace of where it left from */
  &[data-status="deferred"] :is(.body, .fmt, .sigil) { color: var(--dim); }
  /* on a done task the estimate grades itself: spot-on reads green and
     an underestimate amber */
  &[data-status="done"] .fmt .est.spot { color: var(--spent); }
  &[data-status="done"] .fmt .est.under { color: var(--amber); }
  &[data-kind="clock"] :is(.sigil, .time) { color: var(--spent); }
  &.err { box-shadow: -3px 0 0 var(--warn); }
  /* translucent, so the timeline connector shows through */
  &:focus-within { background-color: color-mix(in oklab, var(--accent) 3%, transparent); border-radius: calc(.3rem * var(--round)); }
}

/* ghost previews: recurrences projected onto this day, display only
   but for the ↻'s pie. They live outside .doc, so a save never sees them */
.ghosts {
  padding: 0 .55rem .8rem;

  .row.ghost {
    opacity: .5; font-style: italic;

    .sigil, .fmt { cursor: default; }
  }
}

/* a file that does not parse: edit it raw until it reads again */
textarea.raw {
  width: 100%; font: .85rem/1.4 var(--mono); color: inherit;
  background: var(--well); border: 1px solid var(--line); border-radius: calc(.3rem * var(--round));
  padding: .4rem; resize: vertical;
}
} /* @layer components */