@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);
  }

  .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. */
  .task-detail__title:hover { background: var(--surface-hover); }
  .task-detail__title:focus { background: var(--surface); }
  .task-detail__title::placeholder { color: var(--ink-faint); }

  /* 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 and when, then what it is called. Each
     property owns a cell, so every label starts on the same rail down the page
     whatever is next to it. */
  .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. */

  .task-detail__footer {
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
  }

  /* Move to trash is .button.button--danger.button--small now. It was written
     here first, as the quiet treatment, and then that treatment won — so the
     bespoke class is gone rather than sitting alongside the shared one saying
     the same thing in its own words. */
}