@layer components {
  /* Task detail

     A task is read as a line in a list and edited on its own page, and those
     two should feel like the same object. So the heading is the field: you type
     into the title where the title is, rather than into a box labelled "Title"
     inside a card. The controls underneath are properties of the thing above
     them, not a form to be filled in. */

  /* Who has it, then which one it is — one line above the title. The faces are
     the masthead's size, so a person is the same size wherever you meet them:
     the bar, the row, here. */
  .task-detail__who {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Nobody yet, at the size of the faces it stands in for. The icon is drawn
     at a fixed 18px, so growing the box alone leaves a list-sized ring inside
     a masthead-sized hole; it scales with it and keeps the proportion the row
     version has. */
  .task-detail__who .faces__empty { width: 2.25rem; height: 2.25rem; }
  .task-detail__who .faces__empty svg { width: 1.5rem; height: 1.5rem; }

  .task-detail__ref {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-label);
    color: var(--ink-faint);
  }

  /* Onto your day, at the far end of the line the faces and the number are on.
     Pushed there by the margin rather than by justifying the line, so the
     faces and the number keep the gap that pairs them and the button is the
     only thing that moves when the page is wide. */
  .task-detail__today {
    margin-inline-start: auto;
    color: var(--ink-muted);
  }

  .task-detail__today .menu__icon { opacity: 1; }

  /* Already on your day: the same accent the star wears when it is on, for the
     same reason — it is a fact about the reader rather than about the task. */
  .task-detail__today--on,
  .task-detail__today--on:hover { color: var(--accent); border-color: var(--accent); }

  .task-detail__title,
  .task-detail__notes {
    font: inherit;
    width: 100%;
    padding: var(--space) var(--space-2);
    margin-inline: calc(var(--space-2) * -1);
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    /* height, because autogrow sets one from scrollHeight on every keystroke
       and crossing a line boundary was a jump that took the notes, the
       properties and the whole timeline down the page with it. On the touch
       clock and not the arrival one: this can fire twice a second, and
       anything slower lags behind the caret it is following. */
    transition: background var(--transition), height var(--transition),
                var(--responds);
  }

  .task-detail__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
  }

  .task-detail__notes { display: block; }

  /* It is a textarea so that it wraps, and everything here is about making a
     textarea stop behaving like one: no drag handle in the corner of a
     heading, no scrollbar inside it, and no height of its own — autogrow sets
     that from the content on every keystroke.

     The size no longer drops on a phone. That step down was here because an
     input cannot wrap and a 32px title was being cut off mid-word on a 390px
     screen; now it runs onto a second line instead, which is the thing that
     was actually wanted. */
  .task-detail__title {
    display: block;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* Editable, but only says so when reached for. */
  /* No tint on hover. The other fields on this page are boxes that arrive
     under the pointer because you have to find their edges to click them; the
     title is the largest thing on the screen and nobody has ever had to hunt
     for it. */
  .task-detail__title:focus { background: var(--surface); }
  .task-detail__title::placeholder { color: var(--ink-faint); }

  /* The properties and the Waiting On fold, as one block.

     They are two elements and one region, and being two children of a loose
     stack cost 48px of nothing whenever the fold was closed — which is on
     every task that is not waiting on anybody, so nearly always. No gap of its
     own: when the fold opens, the rule and padding it carries are what
     separate it from the properties above, and fold.css transitions both. */
  .task-detail__controls { display: flex; flex-direction: column; }

  /* A grid rather than a wrapping row of flexible boxes. Wrapping put whatever
     happened to fit on each line and let the widest field push the rest along,
     so the labels never lined up twice running and Tags — the one field that
     asked for room — shunted the two people to the far right of the page.

     Three columns, in the order the work is thought about: what state it is in
     and who has it, then where it sits, when, and what it is called. Six
     properties, two even rows, every label on the same rail down the page.
     Tags used to take the whole of a third row as a line of text; it is a
     picker in a cell like the rest of them now, which is what closed the row
     up and stopped one decision looking like a different kind of thing. */
  .properties {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
  }

  @media (max-width: 60rem) { .properties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 40rem) { .properties { grid-template-columns: minmax(0, 1fr); } }

  /* The panel is folded rather than hidden now — see fold.css and the wrapper
     in show.html.erb. The class stays as the name of the thing. */

  .property {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space) / 2);
    min-width: 0;
  }

  /* Tags is a sentence, not a value; it gets the row. */
  .property--wide { grid-column: 1 / -1; }

  /* Borderless, because five boxed controls in a row is a form and this is a
     description of a task. The box arrives on hover, where it is useful. */
  .property__control {
    font: inherit;
    font-size: var(--text-base);
    color: var(--ink);
    height: var(--control-h-sm);
    padding: 0 var(--space);
    margin-inline: calc(var(--space) * -1);
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    width: 100%;
    transition: border-color var(--transition), background var(--transition), var(--responds);
  }

  .property__control:hover { background: var(--surface-hover); }
  .property__control:focus { border-color: var(--accent); background: var(--surface); }

  /* The pickers, and the labels above them, are shared components now —
     see picker.css. Status, assignee, support and project are pickers on this
     page; role is a picker on Members. What is left here is the plain fields
     beside them. */

  /* Still used by a project's page and by Your profile, which do have a footer
     with something in it. A task's does not any more — see the note under the
     trash below. */
  .task-detail__footer {
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
  }

  /* The star and the trash, under the properties and ranged right.

     A row of its own rather than a column, which is the point: given a track
     on the end they took width from the three the properties are in and
     shunted every one of them left, so actions nobody presses were setting how
     wide the things you use all day are. Spanning the full width and justified
     to the end costs the properties nothing and puts them where you look last.

     It was one button — the trash — and the star made it two. A wrapper rather
     than two grid children, so the pair moves as one thing and the gap between
     them is theirs rather than the grid's. */
  .task-detail__actions {
    grid-column: 1 / -1;
    justify-self: end;

    display: flex;
    align-items: center;
    gap: var(--space);
  }

  /* Beside the properties rather than under them, which is what a project's
     page needs and a task's does not.

     A task has six properties and fills two rows of three, so a full-width
     track below them reads as the end of the block. A project has two, so the
     same track opened a second row to hold one glyph — 44px of empty page with
     a star at the far end of it, sitting far enough below the two properties to
     read as something the page had dropped rather than as part of it. In the
     third cell it ends the line the properties are already on, which is what it
     does on a task's page too; there the line just happens to be the second
     one. */
  .task-detail__actions--inline { grid-column: auto; align-self: end; }

  /* Both of them, and the shape is the argument: no label and no colour until
     it is reached for — the same treatment the controls on a comment get, and
     for the same reason. An action that is not part of the work should be
     findable and never in the way. The trash used to be a worded button alone
     in a footer under the whole page, which spent a rule and eighty pixels on
     saying "Move to trash" once.

     --control-h-sm is the 44px floor, so a glyph with no words round it is
     still a target on a phone. */
  .task-detail__glyph {
    display: inline-grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), var(--responds);
  }

  .task-detail__glyph:hover { background: var(--surface-hover); color: var(--ink); }
  .task-detail__glyph .menu__icon { opacity: 1; }

  /* The one that ends in something being undone. It answers the pointer in the
     danger colour where the star answers in ink, which is the only difference
     between the two and the whole of what the reader needs. */
  .task-detail__glyph--danger:hover { color: var(--danger); }

  /* Starred. The outline is the offer and the fill is the answer, drawn
     in the accent because it is the one thing on this page that is a fact
     about the reader rather than about the task — the same colour the row you
     are already on wears in a menu.

     The fill overrules the SVG's own `fill="none"`, which is a presentation
     attribute and loses to any rule at all. Two states from one path is why
     the icon is not shipped twice. */
  .task-detail__glyph--on { color: var(--accent); }
  .task-detail__glyph--on:hover { color: var(--accent); }
  .task-detail__glyph--on .menu__icon { fill: currentColor; }

  /* A task in the trash offers neither, and `hidden` has to be said here to be
     obeyed: the rule above sets `display` in a class selector, which beats the
     UA sheet's `[hidden] { display: none }`. The standing warning is in
     forms.css; this is the fifth place it has mattered. */
  .task-detail__actions[hidden] { display: none; }
}