/* Wider task rail (Peter, 2026-08-07): 360 → 520px so rows breathe; the
   photo keeps the remaining width and reads smaller as a side effect. */
.workspace { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: var(--space-8); }
@media (max-width: 1000px) { .workspace { grid-template-columns: 1fr; } }
.workspace__panel-title { display: block; margin: 0 0 var(--space-3); }

/* spec sheet — the room's identity + numbers column */
.spec-sheet__floor { display: inline-block; text-decoration: none; margin-bottom: var(--space-2); }
.spec-sheet__floor:hover { color: var(--color-text); }
.spec-sheet h1 { margin: 0 0 var(--space-2); }
.spec-sheet__name--editable { cursor: text; }
.spec-sheet__status { display: flex; gap: var(--space-3); align-items: center;
  margin-bottom: var(--space-6); }
.spec-sheet__stats { border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0; margin-bottom: var(--space-6); }
.spec-sheet__stat { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-2); }
/* bare progress track — the pairs above already carry label + figure */
.spec-sheet__stats .stat-bar { grid-template-columns: 1fr; margin: var(--space-3) 0 0; }
.spec-sheet__stats .stat-bar__label, .spec-sheet__stats .stat-bar__value { display: none; }

.photo-stage { position: relative; width: 100%; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-2); }
.photo-stage--empty { aspect-ratio: 4 / 3; display: grid; place-items: center;
  color: var(--color-text-muted); font-size: var(--text-sm); box-shadow: none;
  border: 1px dashed var(--color-border); }
.photo-stage__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.photo-stage__pins { position: absolute; inset: 0; }
.photo-stage__meta { position: absolute; top: var(--space-2); right: var(--space-2);
  display: flex; gap: var(--space-2); align-items: center; }
.photo-stage__expand { position: absolute; right: var(--space-2); bottom: var(--space-2);
  background: var(--color-surface); color: var(--color-text-muted); cursor: pointer;
  border: var(--control-border-w) solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2); font-size: var(--text-base); line-height: 1;
  transition: color 120ms ease, border-color 120ms ease; }
.photo-stage__expand:hover { color: var(--color-text); border-color: var(--color-text); }

/* Full-size photo viewer — gallery wall: photo on the light glassy dim. */
/* No display on the base rule: it would override the UA's
   dialog:not([open]) { display:none } and leave the closed dialog
   rendering over the page. Only [open] lays it out. */
.photo-lightbox { padding: 0; border: none; background: transparent;
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  overflow: hidden; }
.photo-lightbox[open] { display: grid; place-items: center; }
.photo-lightbox::backdrop { background: var(--color-backdrop); backdrop-filter: blur(6px); }
.photo-lightbox__img { max-width: 92vw; max-height: 92dvh; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2); cursor: zoom-in; transition: none; }
.photo-lightbox__x { position: fixed; top: var(--space-4); right: var(--space-4);
  background: var(--color-surface); border: var(--control-border-w) solid var(--color-border);
  border-radius: var(--radius-pill); width: 34px; height: 34px; cursor: pointer;
  color: var(--color-text-muted); transition: color 120ms ease, border-color 120ms ease; }
.photo-lightbox__x:hover { color: var(--color-text); border-color: var(--color-text); }
.photo-stage__meta select { padding: var(--space-1) 30px var(--space-1) var(--space-3); }

.filmstrip { margin-top: var(--space-4); }
/* Pills wrap in the 340px column instead of clipping. */
.filmstrip__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.filmstrip__filter { border: var(--control-border-w) solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); cursor: pointer;
  font-size: var(--text-base); font-weight: 500;
  color: var(--color-text-muted); text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease; }
.filmstrip__filter:hover { color: var(--color-text); border-color: var(--color-text); }
.filmstrip__filter--active { background: var(--color-text); border-color: var(--color-text);
  color: var(--color-primary-contrast); }
.filmstrip__track { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); }
.filmstrip__thumb { position: relative; flex: 0 0 auto; border-radius: var(--radius-sm); overflow: hidden;
  outline: 1px solid var(--color-border); outline-offset: -1px;
  transition: outline-color 120ms ease; }
.filmstrip__thumb:hover { outline-color: var(--color-text-muted); }
.filmstrip__thumb--active { outline: var(--border-width-thick) solid var(--color-text); outline-offset: -2px; }
.filmstrip__thumb img, .filmstrip__thumb--empty { display: block; width: var(--size-thumb-w); height: var(--size-thumb-h);
  object-fit: cover; }
.filmstrip__thumb--empty { background: var(--color-status-empty); }
.filmstrip__badges { position: absolute; top: 2px; left: 2px; right: 2px; display: flex;
  justify-content: space-between; font-size: var(--text-xs); }
.filmstrip__pin-marker { background: var(--color-surface); border-radius: var(--radius-sm); padding: 0 4px; }
.filmstrip__upload { display: flex; flex-direction: column; gap: var(--space-1); }
.filmstrip__upload-tile { display: grid; place-items: center; width: var(--size-thumb-w); height: var(--size-thumb-h);
  cursor: pointer; border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--text-lg); color: var(--color-text-muted);
  transition: border-color 120ms ease, color 120ms ease; }
.filmstrip__upload-tile:hover { border-color: var(--color-text); color: var(--color-text); }
.filmstrip__kind { width: var(--size-thumb-w); }

.pin { position: absolute; transform: translate(-50%, -50%); width: var(--size-pin); height: var(--size-pin);
  border-radius: 50%; border: var(--border-width-thick) solid var(--color-primary-contrast);
  background: var(--color-text); color: var(--color-primary-contrast);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  cursor: pointer; box-shadow: var(--shadow-2);
  transition: transform 120ms ease, background-color 120ms ease; }
.pin.is-highlighted { background: var(--color-danger); transform: translate(-50%, -50%) scale(var(--scale-pin-highlight)); }
.task-row.is-highlighted { border-color: var(--color-text); }

.pin-popover { position: absolute; transform: translate(-50%, 12px); z-index: 10;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: var(--space-3); min-width: var(--size-popover-min-w); }
.pin-popover__actions { display: flex; gap: var(--space-2); }

.task-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: var(--space-2); background: var(--color-surface);
  transition: border-color 120ms ease; }
.task-row:hover { border-color: var(--color-text-muted); }
.task-row__index { display: grid; place-items: center; flex: 0 0 auto;
  width: var(--size-task-row-index); height: var(--size-task-row-index);
  border-radius: 50%; background: var(--color-text); color: var(--color-primary-contrast);
  font-family: var(--font-mono); font-size: var(--text-xs); }
.task-row__title { flex: 1; min-width: 0; font-weight: 500; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row__cost { white-space: nowrap; }
.task-row--done { opacity: var(--opacity-done); }

.task-add { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.task-add input[type="text"] { flex: 1; min-width: 0; }

/* Task modal: native <dialog> inside the task_modal turbo frame. Desktop is
   a fixed 420px card over a dim backdrop; ≤700px it takes the full screen
   with sticky top bar and footer. .task-edit remains the inner-content hook. */
.task-modal { padding: 0; border: 1px solid var(--color-text); border-radius: var(--radius-md);
  width: 580px; max-width: calc(100vw - 2 * var(--space-4));
  max-height: calc(100dvh - 2 * var(--space-8)); overflow: hidden;
  background: var(--color-surface); box-shadow: var(--shadow-2); }
/* Light, glassy backdrop: the room stays readable behind the modal. */
.task-modal::backdrop { background: var(--color-backdrop); backdrop-filter: blur(2.5px); }
.task-modal__inner { padding: var(--space-4); overflow-y: auto;
  max-height: calc(100dvh - 2 * var(--space-8)); }
.task-modal__top { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-3); }
.task-modal__x { background: none; border: none; cursor: pointer; padding: 0;
  color: var(--color-text-muted); font-size: var(--text-base); transition: color 120ms ease; }
.task-modal__x:hover { color: var(--color-text); }
/* The dialog takes initial focus (see autofocus in the shell partial);
   no ring on the container itself — Tab still rings the controls. */
.task-modal:focus-visible, .photo-lightbox:focus-visible { outline: none; }

.task-edit__title-row { display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-2); }
.task-edit__title-row .task-edit__title { margin: 0; }
.task-edit__title-sep { color: var(--color-border); }
.task-edit__edit-link { text-decoration: none; }
.task-edit__title { margin: 0 0 var(--space-2); }
.task-edit__badges { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.task-edit__meta { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-3); }
.task-edit__meta dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.task-edit__meta dd { margin: 0; text-align: right; }
.task-edit__notes { margin: 0 0 var(--space-3); }

/* One rhythm for every section boundary: a slate accent rule (the app's
   one hue, cf. before/after tags) with generous equal air on both sides —
   deliberately stronger than the muted hairlines inside tables. Header is
   a flex row with the count/summary pushed right. */
.task-edit__section { border-top: var(--border-width-thick) solid var(--color-info); margin-top: var(--space-6); padding-top: var(--space-6); }
.task-edit__section-h { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-2); margin: 0 0 var(--space-2); }
.task-edit__section-count { color: var(--color-text-muted); }
.materials__buy-form { display: inline; }

.task-edit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.task-edit__grid label { display: flex; flex-direction: column; gap: 2px; }
/* Typography comes from the h2 role in base.css — layout only here. */
.task-edit__title-input { flex: 1; min-width: 0; box-sizing: border-box; }
.task-edit__title-row--edit .btn { white-space: nowrap; }
.task-edit__notes-field { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }
.task-edit__notes-field textarea { width: 100%; box-sizing: border-box; }
.task-edit__delete-mobile { display: none; }
.task-edit__pins { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.task-edit__pin-thumb { display: block; border-radius: var(--radius-sm); overflow: hidden;
  outline: 1px solid var(--color-border); outline-offset: -1px;
  transition: outline-color 120ms ease; }
.task-edit__pin-thumb:hover { outline-color: var(--color-text); }
.task-edit__pin-thumb img { display: block; width: var(--size-thumb-w); height: var(--size-thumb-h);
  object-fit: cover; }
.task-edit__footer { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-6);
  padding-top: var(--space-6); border-top: var(--border-width-thick) solid var(--color-info); }
.task-edit__footer strong { margin-right: auto; }

.task-row__comments { display: inline-flex; align-items: center; gap: 3px;
  color: var(--color-text-muted); white-space: nowrap; }
.task-row__comments .icon-comment { width: 13px; height: 13px; display: block; }
.task-approval-badge { text-decoration: none; }

/* Comments read like gallery wall labels: ink rule, strong author, mono time. */
.task-comments__item { border-left: 2px solid var(--color-text);
  padding: var(--space-1) 0 var(--space-1) var(--space-3); margin: var(--space-3) 0; }
.task-comments__meta { display: flex; align-items: baseline; gap: var(--space-2); }
.task-comments__author { font-weight: 500; }
.task-comments__meta .t-data { color: var(--color-text-muted); }
.task-comments__body { margin: 2px 0 0; }
.task-comments__photo { display: inline-block; margin-top: var(--space-2);
  border-radius: var(--radius-sm); overflow: hidden;
  outline: 1px solid var(--color-border); outline-offset: -1px;
  transition: outline-color 120ms ease; }
.task-comments__photo:hover { outline-color: var(--color-text); }
.task-comments__photo img { display: block; width: var(--size-thumb-w); height: var(--size-thumb-h);
  object-fit: cover; }
.task-comments__edit { color: var(--color-text-muted); text-decoration: none;
  transition: color 120ms ease; }
.task-comments__edit:hover { color: var(--color-text); }
.task-comments__delete { background: none; border: none; color: var(--color-text-muted);
  cursor: pointer; transition: color 120ms ease; }
.task-comments__delete:hover { color: var(--color-danger); }
.task-comments__delete-form { display: inline; margin-left: auto; }
.task-comments__edit-form textarea { width: 100%; box-sizing: border-box; }
.task-comments__form { margin-top: var(--space-3); }
.task-comments__form textarea { width: 100%; box-sizing: border-box; }
.task-comments__form-actions { display: flex; align-items: center;
  gap: var(--space-2); margin-top: var(--space-1); }
.task-comments__attach { cursor: pointer; }
.task-comments__picked { color: var(--color-text-muted); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-comments__form-actions .btn[type="submit"],
.task-comments__form-actions input[type="submit"] { margin-left: auto; }

.mention { background: var(--color-info-bg); color: var(--color-info);
  border-radius: var(--radius-sm); padding: 0 2px; }

.task-comments__composer { position: relative; }
.mention-menu { position: absolute; top: 100%; left: 0; z-index: 10;
  margin: 2px 0 0; padding: var(--space-1) 0; min-width: 160px; max-height: 200px;
  overflow-y: auto; list-style: none; background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.mention-menu[hidden] { display: none; }
.mention-menu__item { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.mention-menu__item[aria-selected="true"] { background: var(--color-status-active); }

.materials { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.materials td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.materials td:nth-child(4), .materials td:nth-child(5) { text-align: right; white-space: nowrap; }
.materials__row--purchased td { color: var(--color-text-muted); text-decoration: line-through; }
.materials__row--purchased td:nth-child(1), .materials__row--purchased td:nth-child(5),
.materials__row--purchased td:nth-child(6) { text-decoration: none; }
.materials__add { display: flex; gap: var(--space-1); margin: var(--space-2) 0; }
.materials__delete { background: none; border: none; color: var(--color-text-muted); cursor: pointer;
  transition: color 120ms ease; }
.materials__delete:hover { color: var(--color-danger); }

.form-errors { background: var(--color-danger-bg); color: var(--color-danger);
  border: 1px solid var(--color-danger); border-radius: var(--radius-sm); list-style: none;
  padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.compare__pane { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3); box-shadow: var(--shadow-1); }
.compare__label { margin: 0 0 var(--space-2); }
.compare__img { width: 100%; border-radius: var(--radius-sm); display: block; }
.compare__hint { padding: var(--space-8); text-align: center; }
.filmstrip__thumb--inactive { opacity: var(--opacity-thumb-inactive); }

@media (max-width: 700px) {
  .filmstrip__track { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .filmstrip__track > * { scroll-snap-align: start; }
  .pin-popover { position: fixed; left: 0 !important; right: 0; top: auto !important;
    bottom: 0; width: auto; border-radius: var(--radius-md) var(--radius-md) 0 0; z-index: 40;
    transform: none; }
}

/* Denkmalschutz row in the task panel: one plain question, details appear
   only once the answer is "Approval needed". */
.task-edit__denkmalschutz { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; }
.task-edit__denkmalschutz label { display: inline-flex; align-items: center; gap: var(--space-2); }
.task-edit__new-approval { font-size: var(--text-sm); color: var(--color-text-muted); }
.task-edit__new-approval:hover { color: var(--color-text); }

/* Task modal on phones — this block must stay at the end of the file:
   it overrides same-specificity base rules above (display, padding),
   which win on source order otherwise. */
@media (max-width: 700px) {
  .task-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border: none; border-radius: 0; }
  /* overflow-x: nothing inside may pan the modal sideways — the add-row
     did exactly that (Peter's panned screenshot, 2026-08-08). */
  .task-modal__inner { max-height: 100dvh; height: 100dvh; padding-top: 0; overflow-x: hidden; }
  /* Materials add-row: name gets its own line, the small fields share the
     next one and may shrink (min-width: 0 beats flex's min-content floor). */
  .materials__add { flex-wrap: wrap; }
  .materials__add input { min-width: 0; }
  .materials__add input[name="material_item[name]"] { flex: 1 1 100%; }
  .materials__add input:not([name="material_item[name]"]) { flex: 1 1 0; }
  .task-modal__top { position: sticky; top: 0; z-index: 2; background: var(--color-surface);
    padding: var(--space-3) 0; margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border); }
  /* 16px+ inputs so iOS doesn't zoom on focus; roomier touch targets. */
  .task-edit input, .task-edit select, .task-edit textarea { font-size: 16px; }
  .task-edit input:not([type="checkbox"]), .task-edit select { min-height: 42px; }
  /* The app-wide 44px .btn floor reads as a fat blob on the modal's small
     pills (Peter, 2026-08-08) — compact them back to real .btn--sm size.
     They sit inline beside the title, same as desktop. */
  .task-modal .btn--sm { min-height: 36px; padding: var(--space-1) var(--space-4); }
  .task-edit__title-row { flex-wrap: wrap; }
  .task-edit__footer { position: sticky; bottom: 0; z-index: 2; background: var(--color-surface);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
  /* Edit mode's footer only holds the desktop Delete — with that hidden,
     drop the whole (empty) bar; the end-of-scroll delete takes over. */
  .task-edit__footer--edit { display: none; }
  .task-edit__delete-mobile { display: block; margin-top: var(--space-4); }
}