/* Contract: contracts/web/rules.md
 * Human work handoff. Requests keep their own conversation workspace; this is
 * the other surface, and the two are mutually exclusive rather than stacked —
 * see the requestview rule below.
 */

body.in-work .results { display: none !important; }
body.in-work .requestview { display: none !important; }
body.in-work .workboard { display: flex; }
body.in-work .workspace { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
body.in-work .inspector { display: none; }

/* The control that belongs to the grid and travels with it.
 *
 * `#filters` narrows a query neither of these views is asking, so it stood on a
 * surface it could not act on. Written here and in 10-requests.css rather than
 * once in a shared sheet, because the views are mutually exclusive and each
 * already owns its own body class; a class meaning "not the grid" would be a
 * mode nothing sets. There was a second rule here for the selection bar, which
 * was fixed to the bottom of the WINDOW rather than to the grid; that bar no
 * longer exists.
 *
 * The SIDEBAR deliberately stays, projects and all. `setUpWorkBoard` and
 * `setUpRequestsView` are both handed `property: () => currentProperty()`, so
 * the starred projects are the one thing over there these views genuinely read.
 * Hiding them would take away a filter that works. */
body.in-work #filters { display: none; }

.workboard {
  min-width: 0; min-height: 0; overflow: hidden;
  flex-direction: column; background: var(--bg);
}
.workboard-head {
  display: flex; align-items: center; gap: 18px; flex: none;
  padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.workboard-head h2 { margin: 0; font-size: 18px; }
.workboard-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.workboard-actions button { height: 34px; }
.workcolumns {
  display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px;
  min-height: 0; overflow: auto; padding: 16px;
}
.workcolumn {
  min-height: 260px; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--panel-2) 45%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.workcolumn > header {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  border-bottom: 1px solid var(--line); color: var(--ink-dim); font-size: 13px;
}
.workcolumn > header strong { color: var(--ink); }
.workcolumn > header span { min-width: 20px; padding: 1px 6px; border-radius: 9px; background: var(--panel-2); text-align: center; font-size: 11px; }
.workcards { min-height: 180px; display: flex; flex-direction: column; gap: 8px; padding: 9px; }
.workcards.dragover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.work-empty { padding: 18px 8px; color: var(--ink-dim); font-size: 12px; text-align: center; }
.workcard {
  padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  cursor: grab; box-shadow: 0 1px 1px rgba(0,0,0,.06);
}
.workcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.workcard:active { cursor: grabbing; }
.workcard-title { display: block; margin-bottom: 6px; font-size: 13.5px; line-height: 1.35; }
.workcard-body { display: -webkit-box; overflow: hidden; color: var(--ink-dim); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.workcard-meta { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink-dim); font-size: 11px; }
.worktag { padding: 2px 6px; border-radius: 5px; background: var(--panel-2); }
.worktag.approved { background: color-mix(in srgb, var(--ok) 24%, var(--panel)); color: var(--ok); }
/* Who is on it. Read as a person rather than as another label: the accent and
   the weight are there because this is the one thing on the card that stops
   two workers starting the same piece of work, and the board is worked from
   two places now. */
.workclaim { padding: 2px 6px; border-radius: 5px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent); }
/* The card's meta is one line that wraps, and wrapping it mid-fact put "1" on
   one line and "note" on the next. Each fact is a box that will not be broken,
   and the row wraps between them. */
.workcard-meta > * { white-space: nowrap; }
.workcard-meta { flex-wrap: wrap; row-gap: 4px; }
.workcard-lineage { margin-left: auto; }
.workasset-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.workasset-chip { display: flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; color: var(--ink-dim); }
.workasset-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workasset-chip button { border: 0; background: none; color: var(--ink-dim); cursor: pointer; }
.workattach-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.workattach-line button { white-space: nowrap; }
.workattach-line strong { margin-right: auto; font-size: 13px; }
.workattach-line select { height: 30px; padding: 0 7px; border-radius: 7px; }
.workdlg { width: min(560px, calc(100vw - 28px)); }
.workdlg label { margin-top: 13px; }
.workdlg input, .workdlg textarea, .workdlg select { width: 100%; }
.workdetaildlg { width: min(760px, calc(100vw - 28px)); max-height: min(780px, calc(100dvh - 28px)); padding: 0; }
.workdetail-inner { display: flex; flex-direction: column; max-height: min(780px, calc(100dvh - 28px)); }

/* THE HEAD IS TWO ROWS, and it is the fix for the one thing everybody saw
   first: it was one row, with the title in a flex child and five buttons in
   another, and the buttons won. A four-word title came out one word per line
   beside a tidy row of controls. The title now has the width to itself and the
   controls have the row under it, which is also the order they are read in. */
.workdetail-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
  flex: none; padding: 16px 18px 13px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.workdetail-heading { min-width: 0; }
.workdetail-head h3 { margin: 0; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.workdetail-facts {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 4px;
  margin: 7px 0 0; color: var(--ink-dim); font-size: 11.5px;
}
.workdetail-facts > * { white-space: nowrap; }
.workarchived-flag {
  padding: 2px 6px; border-radius: 5px;
  background: var(--panel-2); text-transform: uppercase; letter-spacing: .05em; font-size: 10px;
}
/* Escape already closes a <dialog>, so this is for the pointer and nothing
   else: a mark in the corner rather than the fifth button of five. */
.workdetail-close {
  grid-row: 1; grid-column: 2; align-self: start;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: 7px;
  background: none; color: var(--ink-dim); font: inherit; font-size: 13px; cursor: pointer;
}
.workdetail-close:hover { border-color: var(--line); color: var(--ink); background: var(--panel-2); }
.workdetail-actions {
  grid-row: 2; grid-column: 1 / -1;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 11px;
}
.workdetail-actions button { height: 30px; padding: 0 10px; font-size: 12px; }
/* The stage select sits first and reads as the state rather than as an action:
   it is the one control here that says where the work IS, and the buttons
   beside it are things you can do to it. */
.workpick {
  display: flex; align-items: center; gap: 6px; height: 30px;
  padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--ink-dim); font-size: 11px;
}
/* Never broken across two lines: the pill has a fixed height, and "ATTACH AS"
   wrapping inside it on a phone made it twice as tall as the button beside it. */
.workpick > span { white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
.workpick select {
  height: 26px; padding: 0 4px; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: 12px; font-weight: 560; cursor: pointer;
}
.workpick select:disabled { cursor: default; opacity: .6; }

/* A question asked where the button was. See askInline in web/work-detail.js
   for why none of these is a window.confirm. */
.workask {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 5px 5px 5px 10px; border: 1px solid var(--accent); border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}
.workask-q { font-size: 12px; }
.workask button { height: 26px; padding: 0 9px; font-size: 12px; }
.workask-field {
  min-width: min(280px, 52vw); height: 26px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 12px;
}
.workask-check { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.workask-check input { margin: 0; }

.workdetail-scroll { overflow-y: auto; padding: 15px 18px 22px; }
.workdetail-err { margin: 0 0 12px; }
.workdetail-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; }
.workdetail-section { margin-top: 20px; }
.workdetail-section:first-child { margin-top: 0; }
.workdetail-section > h4 { margin: 0 0 8px; font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; }
.worknotes { display: flex; flex-direction: column; gap: 9px; }
.worknote { padding: 9px 10px; background: var(--panel-2); border-radius: 7px; }
.worknote p { margin: 0; white-space: pre-wrap; font-size: 13px; }
.worknote time { display: block; margin-top: 5px; color: var(--ink-dim); font-size: 10px; }
.worknote-form { display: flex; gap: 8px; margin-top: 10px; }
/* Styled here rather than inherited, and that is the trap this dialog sits in:
   every other dialog in the archive carries `.dlg`, which is where the input
   styling lives — see 04-actions.css. This one does not, because it is a panel
   rather than a form, so a bare <textarea> in it came out as the browser's own
   monospace box at 13.33px. Anything typed into here needs the same rule. */
.worknote-form textarea {
  flex: 1; min-height: 60px; padding: 8px 10px; resize: vertical;
  background-color: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 13px; line-height: 1.45;
}
.worknote-form button { align-self: flex-end; }

/* Every tile the same height whatever is in it: a picture and a PDF sat side by
   side at two different heights, because one was a square thumbnail and the
   other was a glyph in a box that fitted it. */
.workdetail-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.workdetail-asset { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }
.workdetail-asset-shot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; background: var(--panel);
}
.workdetail-asset-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.workasset-placeholder { font-size: 22px; opacity: .7; }
.workdetail-asset-label { padding: 6px 7px; }
/* The role first and in the accent, because it is the fact that decides what a
   picture IS on a piece of work — source, or the thing that came back. The
   filename under it is the label, and it is the half that may truncate. */
.workrole {
  display: block; color: var(--accent); font-size: 9.5px; font-weight: 640;
  text-transform: uppercase; letter-spacing: .06em;
}
.workfile {
  display: block; overflow: hidden; margin-top: 2px;
  text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--ink-dim);
}
.workdetail-lineage { display: flex; flex-wrap: wrap; gap: 6px; }
.workdetail-lineage span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; }

/* The way back to the thread a card was raised off. A box rather than a bare
   button because the sentence above it is the part that matters — it says the
   conversation still exists somewhere else, which is not obvious from a board. */
.workdetail-raised {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--panel-2); border-radius: 7px;
}
.workdetail-raised p { flex: 1 1 220px; min-width: 0; }

@media (max-width: 900px) {
  body.in-work .workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .workcolumns { grid-template-columns: repeat(4, minmax(260px, 1fr)); padding: 12px; }
  .workboard-head { align-items: flex-start; flex-direction: column; padding: 14px; }
  .workboard-actions { margin-left: 0; }
  /* The head's two rows become three on a narrow screen: the controls wrap on
     their own already, and the close has nothing to sit beside. */
  .workdetail-head { padding: 14px; }
  .workask-field { min-width: 0; flex: 1; }
}