/* The session's compact head (web/src/components/sheet/SheetHead.tsx, #62), so the conversation
   gets the room at every size: where the card shows and its lane are pills whose choices open in a
   menu (the board's own, grown out of the pill), the pencil shows the card's empty fields to fill,
   and the card's fields sit in the head as quiet lines, only the ones that say something. Laid
   over upstream's sheets, which stay theirs rule for rule: every rule here outranks the one it
   changes (#sheet) or is new. */

#sheet .sheet-head { padding: 16px 16px 10px 22px; }

/* The pills: the status pill is a button now, the lane a neutral pill with its color, the pencil a small round. */
.sheet-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sheet-pills button { border: 0; font-family: inherit; transition: transform 100ms ease-out, background-color 150ms ease, color 150ms ease; }
.sheet-pills button:not(:disabled):active { transform: scale(0.96); }
.sheet-pills button:disabled { cursor: default; }
.sheet-pills button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sheet-pills .updown { width: 10px; height: 10px; margin-right: -3px; stroke-width: 2; opacity: 0.75; }
.sheet-pills button:disabled .updown { display: none; }
.sheet-pills .status-pill:not(:disabled):hover,
.sheet-pills .status-pill[aria-expanded="true"] { background: color-mix(in srgb, var(--c, var(--gray)) 24%, transparent); }
.lane-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  background: var(--fill-2);
  color: var(--label-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lane-pill::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2.5px; background: var(--lane); }
.lane-pill > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lane-pill:not(:disabled):hover, .lane-pill[aria-expanded="true"] { background: var(--fill); color: var(--label); }
#sheet .sheet-properties-toggle {
  display: grid;
  place-items: center;
  align-self: auto;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: var(--label-3);
}
#sheet .sheet-properties-toggle::after { content: none; }
#sheet .sheet-properties-toggle svg { width: 14px; height: 14px; }
#sheet .sheet-properties-toggle:hover { background: var(--fill-2); color: var(--label-2); }
#sheet .sheet-properties-toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* The card's fields under the name: no grouped card, lines that read as the head's own. */
#sheet .sheet-card { flex: none; min-height: 0; max-height: 30cqh; margin-top: 6px; padding: 0; overflow: auto; cursor: auto; }
#sheet .sheet-card[hidden] { display: none; }
#sheet .sheet-card .group { margin: 0; border-radius: 0; background: none; box-shadow: none; }
#sheet .sheet-card .row { min-height: 28px; gap: 10px; padding: 2px 0; }
#sheet .sheet-card .row + .row { box-shadow: none; }
#sheet .sheet-card .row-label { width: 76px; font-size: 12px; }
/* What it does and what it waits for: a field that reads as the line's text and wraps when long,
   three lines at most (then it scrolls; the tooltip has it whole). */
#sheet .sheet-card .row:has(> textarea) { align-items: flex-start; }
#sheet .sheet-card .row:has(> textarea) > .row-label { padding-top: 3px; line-height: 18px; }
#sheet .sheet-card textarea {
  display: block;
  width: calc(100% + 6px);
  max-height: calc(3 * 18px + 6px);
  margin: -2px 0 -2px -6px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: none;
  color: var(--label);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  resize: none;
  field-sizing: content;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: background-color 120ms ease;
}
#sheet .sheet-card textarea::placeholder { color: var(--label-3); }
#sheet .sheet-card textarea:not(:disabled):hover, #sheet .sheet-card textarea:focus { background: var(--fill-2); }
/* The line under the name breaks between its facts, after a separator, as it did. */
.sheet-meta > .sep { white-space: normal; }
/* A question form to answer: the fields give way first, as they did under the head. */
#sheet .sheet-inner:has(.sheet-question .qa) .sheet-card { max-height: 64px; }

/* The helpers strip with none at work: a helper that ended says how and when in its mark's place
   ("stopped 1 d ago", web/src/models/helper-model.ts endedLine), quiet as the rows' clocks (#113). */
#sheet .helper-last.past { grid-template-columns: 22px minmax(0, 1fr) auto; }

/* A wide panel (upstream's container query puts the panel's parts side by side there). Tall
   enough, it reads as a narrow one: one column, the head across the top. */
@container sheet (min-width: 680px) and (min-aspect-ratio: 5 / 4) and (height >= 600px) {
  #sheet .sheet-inner { display: flex; }
  #sheet .sheet-question { padding: 0 18px 10px 22px; }
  #sheet .sheet-helpers { padding: 0 18px 10px 22px; }
  #sheet .sheet-body { min-height: max(96px, min(36cqh, 280px)); padding: 2px 18px 16px 22px; }
  #sheet .composer { padding: 10px 14px 14px 18px; }
}
/* Low (at the bottom), one column would leave the conversation no room: the head, its fields in
   it, is a column down the left, wide enough for the head's lines as the narrow panel has them
   (the panel's buttons sit in its corner, so the lines take the column's whole width; the facts
   under the name stack); what it asks, the helpers, the conversation and the message box take the
   whole height beside it. */
@container sheet (min-width: 680px) and (min-aspect-ratio: 5 / 4) and (height < 600px) {
  #sheet .sheet-inner { grid-template-columns: clamp(360px, 36%, 480px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #sheet .sheet-head { position: relative; grid-column: 1; grid-row: 1 / -1; min-height: 0; overflow: auto; padding-bottom: 16px; box-shadow: inset -0.5px 0 0 var(--separator); }
  #sheet .sheet-tools { position: absolute; top: 12px; right: 16px; }
  #sheet .sheet-pills { padding-right: 72px; }
  #sheet .sheet-meta { display: flex; flex-direction: column; gap: 1px; }
  #sheet .sheet-meta > .sep { display: none; }
  #sheet .sheet-card, #sheet .sheet-inner:has(.sheet-question .qa) .sheet-card { max-height: none; overflow: visible; margin-top: 10px; }
  #sheet .sheet-card .sched-mini { align-items: flex-start; }
  #sheet .sheet-card .sched-mini .when { padding-top: 5px; }
  #sheet .sheet-card .sched-mini .text { display: -webkit-box; padding-top: 4px; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #sheet .sheet-question { grid-column: 2; grid-row: 1; padding-top: 16px; }
  #sheet .sheet-helpers { grid-column: 2; grid-row: 2; }
  #sheet .sheet-body { grid-column: 2; grid-row: 3; min-height: 0; padding-top: 14px; }
  #sheet .composer { grid-column: 2; grid-row: 4; }
}

/* The card's fields folded into one line, on a phone only (below). */
.sheet-fold { display: none; }

/* A phone (#100): the head stays short, so the conversation and the message box keep the room
   whatever the text size. The pills keep to one line (the lane gives way), the facts under the
   name to one, and the card's fields fold into the line that matters most (what it waits for,
   else what it does, else its sessions), a tap away; open, they show whole, with no scroll of
   their own. What gives way when the panel is short: the helpers first, then the conversation
   (down to 96px), then an open card's fields (the head scrolls); never the message box. */
@media (max-width: 760px) {
  #sheet .sheet-pills { flex-wrap: nowrap; }
  #sheet .sheet-pills > * { flex: none; }
  #sheet .sheet-pills > .lane-pill { flex: 0 3 auto; }
  #sheet .sheet-pills > .status-pill { flex: 0 1 auto; min-width: 0; }
  #sheet .status-pill > :not(.pill-label) { flex: none; }
  #sheet .status-pill > .pill-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #sheet .sheet-pills button { min-height: 26px; }
  #sheet .sheet-properties-toggle { display: none; }
  #sheet .sheet-meta { -webkit-line-clamp: 1; overflow-wrap: anywhere; }
  .sheet-fold {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--label);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: opacity 120ms ease-out;
  }
  .sheet-fold:active { opacity: 0.55; }
  .sheet-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
  .sheet-fold-label { flex: none; color: var(--label-2); font-size: 12px; }
  .sheet-fold-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sheet-fold .chevron { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--label-3); stroke-width: 1.8; transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sheet-fold[aria-expanded="true"] .chevron { transform: rotate(180deg); }
  #sheet .sheet-card { max-height: none; }
  #sheet .sheet-card[data-folded] { display: none; }
  #sheet .composer { flex: none; }
  #sheet .sheet-head { flex-shrink: 0; }
  #sheet .sheet-head:has(.sheet-card:not([hidden], [data-folded])) { flex-shrink: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #sheet .sheet-helpers { flex-shrink: 1; }
  #sheet .sheet-body { min-height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-pills button, .sheet-fold .chevron { transition: none; }
}