/* Projects as folders (owner decision 2026-10-20). A stylesheet of its own, loaded after styles.css and before
   accessibility.css: everything here is scoped to #view-projects / #projectList / the app dialog's lists, so no other
   screen changes, and the ID selectors win over styles.css's layers whatever the source order. */
/* ==========================================================================
   Projects as folders (owner decision 2026-10-20, three rounds on a demo)
   Appended last, scoped to #view-projects / #projectList so no other screen
   changes. The folder colours are the one place the owner allowed more than the
   MISUMI red accent: folder icon, status text, progress bar and chip dot of a
   status share one hue. Status is never colour alone (icon + word always).

   The status -> colour set is NOT defined here any more: since owner decision
   2026-10-21 ("the same status colours across the whole app") the tone table
   (--tone-text / --tone-fill / --tone-dot per tone) lives in status-tones.css,
   loaded before this file, and the rules below only read its tokens.
   ========================================================================== */
.project-folder-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tone-text, var(--muted));
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.project-folder-status .project-status-icon,
.project-folder-svg {
  flex: none;
  display: block;
}

/* ---- the view switch, next to Sort ---------------------------------------- */
.project-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
}

.project-view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.project-view-toggle button:hover {
  color: var(--ink);
  background: var(--stone-tint);
}

.project-view-toggle button[aria-pressed="true"] {
  color: #fff;
  background: var(--ink);
}

.project-view-toggle button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

/* Sort, the view switch and the auto-refresh pill share one row on a wide screen. */
@media (min-width: 681px) {
  #projectListPanel .project-list-tools select {
    width: auto;
  }
}

/* ---- breadcrumb ------------------------------------------------------------ */
/* The breadcrumb lives in the top bar (owner 2026-10-20, slice 2c-2): no box of its own, it is the title of the page. It is
   drawn only on a Projects route (the block at the end of this file) and emptied on logout. */
.project-crumbs {
  margin: 0;
  padding: 0;
}

/* Nothing is drawn until the list or a project has loaded (the text comes from the screen language, which is not ready at start-up). */
.project-crumbs:empty {
  display: none;
}

.project-crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.project-crumb {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.project-crumb + .project-crumb::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 8px 0 4px;
  border-top: 1.5px solid var(--muted-3);
  border-right: 1.5px solid var(--muted-3);
  transform: rotate(45deg);
}

.project-crumb-link,
.project-crumb-current {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.project-crumb-link {
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}

.project-crumb-link:hover {
  color: var(--ink);
  background: var(--stone-tint);
  text-decoration: underline;
}

.project-crumb-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.project-crumb-current {
  color: var(--ink);
  font-weight: 600;
}

/* A long name is cut with an ellipsis; the full text is in the title attribute. */
.project-crumb-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-crumb-link .project-crumb-text {
  max-width: 26ch;
}

.project-crumb-current .project-crumb-text {
  max-width: 48ch;
}

/* ---- the list: folder tiles (Icons) or a row table (List) --------------------------------------------------------------
   Owner 2026-10-20, slice 2c-2: the demo is the visual spec. The page itself is plain (no panel box); every project is a white
   tile with its own border, or a row of one bordered table. Both are the same card markup. */
#projectListPanel.panel,
#projectDetailPanel.project-folder-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#projectList[data-view="icons"] {
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 16px;
}

#projectList[data-view="list"] {
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

#projectList > .project-list-more,
#projectList > .empty-state,
#projectList > .loading-state {
  grid-column: 1 / -1;
}

#projectList[data-view="list"] > .empty-state,
#projectList[data-view="list"] > .loading-state,
#projectList[data-view="list"] > .project-list-more {
  margin: 12px;
}

#projectList .project-card {
  position: relative;
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

#projectList .project-card:hover {
  border-color: var(--muted-3);
}

#projectList .project-card[data-selected="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

#projectList .project-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin: 0;
}

#projectList .project-card-title {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}

#projectList .project-card-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* The name is the card's one real control (the whole card opens too): a button that reads as the title. */
#projectList .project-card-open {
  display: block;
  width: 100%;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: none;
  box-shadow: none;
  font: inherit;
  line-height: inherit;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

#projectList .project-card-open:hover {
  color: var(--ink);
  background: none;
  box-shadow: none;
  text-decoration: underline;
}

#projectList .project-card-open:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

#projectList .project-folder-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
}

#projectList .project-folder-icon svg {
  max-width: 100%;
  height: auto;
}

#projectList .project-card-desc {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

#projectList .project-folder-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

#projectList .project-folder-counts > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#projectList .project-tile-icon {
  flex: none;
}

/* Last run: "Run 6a7ccabe · when" on the left, the percentage on the right in the project's hue, the bar under both. */
#projectList .project-folder-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

#projectList .project-run-stamp {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#projectList .project-folder-pct {
  color: var(--tone-text, var(--muted));
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The bar is the project's hue; the track is the stone line colour (>= 3:1, see above). */
#projectList .project-folder-run .mini-track {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--line);
}

#projectList .project-card[data-tone] .mini-fill {
  background: var(--tone-fill, var(--muted));
}

/* "What next" is one quiet grey box with an arrow, not a coloured banner. Its words are the same ones the card always had. */
#projectList .project-card .project-action-strip,
#projectList .project-card .project-action-strip.teal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 8px;
  align-items: start;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--stone-tint);
}

#projectList .project-action-strip::before {
  content: "→";
  content: "→" / "";
  grid-row: 1 / span 2;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#projectList .project-action-strip b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

#projectList .project-action-strip span {
  grid-column: 2;
  font-size: 12px;
}

/* The live-progress box would repeat the bar and the line above it; the project page keeps it. */
#projectList .project-card > .project-live-progress {
  display: none;
}

#projectList .project-folder-updated {
  display: flex;
  min-width: 0;
  gap: 0;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

#projectList .project-folder-updated > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#projectList .project-folder-updated > span:first-child {
  flex: none;
}

#projectList .project-folder-owner::before {
  content: " · ";
  white-space: pre;
}

/* Tiles: a column that fills the tile's height, so every tile in a row is as tall as the tallest and the footer sits at the bottom. */
#projectList[data-view="icons"] .project-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 14px;
  border-radius: 10px;
}

/* The two-line clamp sits on a plain span inside the name button: a button computes to flow-root, and the clamp must not depend on newer
   `line-clamp` support for buttons (a long name was cut to one line with no ellipsis). The full name is also the button's title. */
#projectList .project-card-open-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Two lines of description are always reserved (an empty one too), so the rows below line up from tile to tile. */
#projectList[data-view="icons"] .project-card-desc,
#projectList[data-view="icons"] .project-card > .project-card-desc:empty {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3.2em;
}

#projectList[data-view="icons"] .project-folder-updated {
  margin-top: auto;
  padding-top: 2px;
}

/* The select box: a 36px target, shown on hover, on keyboard focus, on a selected card, and while anything is
   selected (always on touch screens). */
#projectList .project-select-control {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

#projectList .project-select-control input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}

/* No ring after a mouse click (Shift+click included: Chrome counts a Shift press as keyboard use, so :focus-visible
   alone would still draw one), and never on the wrapper. A keyboard user gets a 2px ink ring, switched on by
   html.kbd (set by a real Tab / arrow key, cleared by the mouse; see the listeners next to the Icons/List switch
   in app.js). This overrides accessibility.css's global ring for these checkboxes only. */
#projectList .project-select-control input:focus,
#projectList .project-select-control input:focus-visible,
.project-select-all input:focus,
.project-select-all input:focus-visible {
  outline: none;
}

html.kbd #projectList .project-select-control input:focus-visible,
html.kbd .project-select-all input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#projectList[data-view="icons"] .project-select-control {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  opacity: 0;
}

#projectList[data-view="icons"] .project-card:hover .project-select-control,
#projectList[data-view="icons"] .project-card:focus-within .project-select-control,
#projectList[data-view="icons"] .project-card[data-selected="true"] .project-select-control,
#projectList[data-view="icons"][data-selecting="true"] .project-select-control {
  opacity: 1;
}

#projectList[data-view="icons"] .project-card-head {
  padding-right: 30px;
}

@media (hover: none) {
  #projectList[data-view="icons"] .project-select-control { opacity: 1; }
}

#projectList[data-view="icons"] .project-card-head {
  padding-right: 30px;
}

/* Rows (a wide screen): one bordered table. Name with its description under it, Files, Last run, Status, Next step, Updated. */
@media (min-width: 861px) {
  #projectList[data-view="list"] .project-list-columns,
  #projectList[data-view="list"] .project-card {
    display: grid;
    grid-template-columns: 36px 40px minmax(0, 2.2fr) 72px minmax(130px, 1.2fr) 128px minmax(150px, 2fr) minmax(130px, 0.9fr);
    align-items: center;
    column-gap: 12px;
  }

  #projectList[data-view="list"] .project-list-columns {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    background: var(--stone-tint);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
  }

  #projectList[data-view="list"] .project-col-name {
    grid-column: 2 / 4;
  }

  #projectList[data-view="list"] .project-card {
    row-gap: 0;
    min-height: 76px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  #projectList[data-view="list"] .project-card:last-of-type {
    border-bottom: 0;
  }

  /* Thai stacks marks above and below the line: the row keeps even height with its 1.6 line-height. */
  :lang(th) #projectList[data-view="list"] .project-card {
    min-height: 84px;
  }

  #projectList[data-view="list"] .project-card:hover {
    background: var(--paper);
  }

  #projectList[data-view="list"] .project-card[data-selected="true"] {
    background: var(--stone-tint);
    box-shadow: inset 3px 0 0 var(--ink);
  }

  #projectList[data-view="list"] .project-card-head,
  #projectList[data-view="list"] .project-card-title {
    display: contents;
  }

  #projectList[data-view="list"] .project-select-control { grid-column: 1; grid-row: 1 / span 2; }
  #projectList[data-view="list"] .project-folder-icon { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 36px; }
  #projectList[data-view="list"] .project-card-title > h4 { grid-column: 3; grid-row: 1; align-self: end; min-width: 0; font-size: 13.5px; }
  #projectList[data-view="list"] .project-card > .project-card-desc {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #projectList[data-view="list"] .project-card > .project-folder-counts { grid-column: 4; grid-row: 1 / span 2; font-size: 13px; }
  #projectList[data-view="list"] .project-folder-counts .project-tile-icon,
  #projectList[data-view="list"] .project-folder-counts-bp { display: none; }
  #projectList[data-view="list"] .project-card > .project-folder-run { grid-column: 5; grid-row: 1 / span 2; }
  #projectList[data-view="list"] .project-folder-run .project-folder-pct,
  #projectList[data-view="list"] .project-folder-run .mini-track { display: none; }
  #projectList[data-view="list"] .project-card-title > .project-folder-status { grid-column: 6; grid-row: 1 / span 2; justify-self: start; }
  #projectList[data-view="list"] .project-card > .project-action-strip,
  #projectList[data-view="list"] .project-card > .project-action-strip.teal {
    grid-column: 7;
    grid-row: 1 / span 2;
    display: block;
    padding: 0;
    background: none;
  }

  #projectList[data-view="list"] .project-action-strip::before { display: none; }
  /* Next step: only the short title, two lines and an ellipsis (the whole sentence is the row's title attribute, and stays on the tile and the project page). */
  #projectList[data-view="list"] .project-action-strip b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-weight: 500; }
  #projectList[data-view="list"] .project-action-strip span { display: none; }
  #projectList[data-view="list"] .project-card > .project-folder-updated { grid-column: 8; grid-row: 1 / span 2; display: block; font-size: 13px; color: var(--ink); white-space: normal; }
  #projectList[data-view="list"] .project-folder-updated > span { display: block; overflow: visible; }
  #projectList[data-view="list"] .project-folder-updated > .project-folder-owner { display: none; }
}

/* The Name column is the only flexible one; the others are as wide as their content (capped), the same in every row because the
   rows share the list's own columns (subgrid). A browser without subgrid keeps the fixed columns above. */
@media (min-width: 861px) {
  @supports (grid-template-columns: subgrid) {
    #projectList[data-view="list"] {
      grid-template-columns: 36px 40px minmax(0, 1fr) auto fit-content(160px) auto fit-content(210px) fit-content(120px);
      column-gap: 12px;
    }

    #projectList[data-view="list"] .project-list-columns,
    #projectList[data-view="list"] .project-card {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
  }
}

/* Narrow screens: a row is a short card, the select box, the folder and the name on top. */
@media (max-width: 860px) {
  #projectList[data-view="list"] .project-list-columns { display: none; }

  #projectList[data-view="list"] .project-card {
    display: grid;
    grid-template-columns: 36px 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  #projectList[data-view="list"] .project-card:last-of-type { border-bottom: 0; }

  #projectList[data-view="list"] .project-card-head,
  #projectList[data-view="list"] .project-card-title {
    display: contents;
  }

  #projectList[data-view="list"] .project-card > * {
    grid-column: 1 / -1;
  }

  #projectList[data-view="list"] .project-select-control { grid-column: 1; grid-row: 1; }
  #projectList[data-view="list"] .project-folder-icon { grid-column: 2; grid-row: 1; width: 40px; height: 36px; }
  /* A row is a card here: the name and the next step's title wrap normally (the full text is their title attribute). */
  #projectList[data-view="list"] .project-card-title > h4 { grid-column: 3; grid-row: 1; min-width: 0; }
  #projectList[data-view="list"] .project-card-open-text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
  #projectList[data-view="list"] .project-card-title > .project-folder-status { grid-column: 3; grid-row: 2; justify-self: start; }
  #projectList[data-view="list"] .project-card > .project-action-strip,
  #projectList[data-view="list"] .project-card > .project-action-strip.teal {
    grid-column: 3;
    grid-row: 3;
    display: block;
    padding: 0;
    background: none;
  }

  #projectList[data-view="list"] .project-action-strip::before { display: none; }
  #projectList[data-view="list"] .project-action-strip b { display: block; font-weight: 500; overflow-wrap: anywhere; }
  #projectList[data-view="list"] .project-action-strip span { display: none; }
  #projectList[data-view="list"] .project-card > .project-folder-run { grid-column: 2 / -1; grid-row: 4; }
  #projectList[data-view="list"] .project-card > .project-card-desc,
  #projectList[data-view="list"] .project-card > .project-folder-counts,
  #projectList[data-view="list"] .project-card > .project-folder-updated {
    display: none;
  }
}

/* ---- the colour key, and "Select all" with its tip, always visible ----------------------- */
.project-folder-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.project-folder-key-title {
  font-weight: 600;
}

.project-folder-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-folder-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-folder-legend i {
  display: block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--tone-dot);
}

.project-select-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.project-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}

.project-select-all input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
  cursor: pointer;
}

.project-select-tip {
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.5;
}

@media (hover: none), (max-width: 640px) {
  .project-select-all {
    min-height: 44px;
  }
}

/* ---- the bulk bar ----------------------------------------------------------- */
.project-bulk-info {
  min-width: 0;
}


/* On a phone the bar is docked at the bottom of the screen (safe-area aware): two rows, Select all / Clear on
   top, the three actions under them, every target at least 44px. The list gets bottom padding while something is
   selected so the last card is never covered, and a language notice (fixed at the bottom) moves above the dock.
   #view-projects has no transform, so `position: fixed` stays tied to the viewport. */
/* The view's enter animation (ui-view-enter) leaves an identity transform on the view even after it ends, and that makes the
   view the containing block of `position: fixed` (measured: the dock sat 3,000px down the page). This view fades in
   only, so the dock below is tied to the screen. No transform is added anywhere on it. */
@keyframes ui-view-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

#view-projects:not([hidden]) {
  animation-name: ui-view-fade;
}

@media (max-width: 640px) {
  #projectListPanel .project-bulk-bar:not([hidden]) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--ink);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 20px rgba(28, 25, 23, 0.14);
  }

  #projectListPanel .project-bulk-bar .project-bulk-info span {
    display: none;
  }

  #projectListPanel .project-bulk-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  #projectListPanel .project-bulk-actions button {
    min-height: 44px;
    padding: 0 6px;
    font-size: 12.5px;
    white-space: normal;
    line-height: 1.5;
  }

  #projectListPanel .project-bulk-actions button:nth-child(-n + 2) { grid-column: span 3; }
  #projectListPanel .project-bulk-actions button:nth-child(n + 3) { grid-column: span 2; }

  #projectList[data-selecting="true"] {
    padding-bottom: 176px;
  }

  body:has(#projectBulkBar:not([hidden])) .language-notice {
    bottom: calc(176px + env(safe-area-inset-bottom));
  }
}

@media (hover: none) {
  #projectListPanel .project-bulk-actions button { min-height: 44px; }
}

#projectBulkStatus:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- the confirm question's lists (app-dialog.js details) -------------------- */
.app-dialog .app-dialog-details {
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow: auto;
}

.app-dialog .app-dialog-heading {
  margin: 8px 0 0;
  font-weight: 600;
  line-height: 1.5;
}

.app-dialog .app-dialog-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* ---- inside a project: the opened folder ------------------------------------- */
.project-folder-hero {
  margin: 0 0 12px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--stone-tint);
}

.project-folder-hero .project-folder-head {
  margin: 0 0 6px;
  padding: 0;
  border-bottom: 0;
  align-items: flex-start;
}

.project-folder-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.project-folder-main .project-folder-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 56px;
}

.project-folder-title {
  min-width: 0;
}

.project-folder-title .eyebrow {
  margin: 0 0 2px;
}

.project-folder-hero #projectDetailName {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
}

.project-folder-hero #projectDetailDesc {
  max-width: 72ch;
  margin: 0 0 6px 78px;
}

.project-folder-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-left: 78px;
}

.project-folder-meta .project-run-stamp {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.project-folder-facts {
  color: var(--muted);
  font-size: 12.5px;
}

#projectDetailPanel .project-folder-status[data-tone] {
  font-size: 13px;
}

@media (max-width: 680px) {
  .project-folder-hero {
    padding: 12px;
  }

  /* Phone: the folder and the name get the full width of the head. */
  .project-folder-hero .project-folder-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .project-folder-main .project-folder-icon {
    width: 52px;
    height: 46px;
  }

  .project-folder-main .project-folder-icon svg {
    width: 52px;
    height: auto;
  }

  .project-folder-hero #projectDetailName {
    font-size: 19px;
  }

  .project-folder-hero #projectDetailDesc,
  .project-folder-meta {
    margin-left: 0;
  }
}

/* Thai stacks tone marks above and below the line: the new text keeps at least 1.5. */
:lang(th) .project-folder-status,
:lang(th) .project-folder-counts,
:lang(th) .project-folder-updated,
:lang(th) .project-folder-facts,
:lang(th) .project-select-tip,
:lang(th) .project-select-all,
:lang(th) .project-folder-key,
:lang(th) .project-crumb-link,
:lang(th) .project-crumb-current,
:lang(th) #projectList .project-card-desc,
:lang(th) #projectList .project-card-head h4,
:lang(th) .project-folder-hero #projectDetailName {
  line-height: 1.6;
}

/* ==========================================================================
   Owner feedback 2026-10-20, slice 2c-2: less repetition on the Projects pages.
   Everything is scoped to the Projects view (#view-projects, or the top bar only while that view shows).
   ========================================================================== */

/* ---- 1/3: the breadcrumb is the top bar's title; Ask Copilot is at its right end --------------------------------------
   #viewTitle stays in the DOM (focus lands on it at every route change, and the static h2 is pinned by tests); on a Projects
   route it is cut to a screen-reader-only box, never display:none. The nav and the button are drawn only while the Projects view
   shows (and the button only with a project open); nothing else about the top bar changes on other pages. */
.topbar > .project-crumbs,
.topbar > div > .project-crumbs,
.topbar > #projectAskCopilotBtn {
  display: none;
}

.workbench:has(> #view-projects:not([hidden])) > .topbar {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  /* A grid item: without this the bar's content (a long file / run crumb) sets the width of the whole page column. */
  min-width: 0;
}

.workbench:has(> #view-projects:not([hidden])) > .topbar > div:first-child {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.workbench:has(> #view-projects:not([hidden])) > .topbar #viewTitle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.workbench:has(> #view-projects:not([hidden])) > .topbar > div > .project-crumbs:not(:empty) {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.workbench:has(> #view-projects:not([hidden]) #projectDetailPanel:not([hidden])) > .topbar > #projectAskCopilotBtn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  white-space: nowrap;
}

.topbar .project-crumb-list {
  padding: 0;
}

@media (max-width: 640px) {
  /* One line: "Projects" stays, the middle segments fold behind an ellipsis, the page you are on takes what is left. */
  .topbar .project-crumb-list {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .topbar .project-crumb:not(:first-child):not(:last-child) {
    display: none;
  }

  .topbar .project-crumb:first-child {
    flex: none;
  }

  .topbar .project-crumb:last-child {
    flex: 0 1 auto;
  }

  .topbar .project-crumb:first-child:not(:nth-last-child(-n + 2))::after {
    content: "…";
    content: "…" / "";
    margin: 0 0 0 2px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }

  .topbar .project-crumb-link .project-crumb-text,
  .topbar .project-crumb-current .project-crumb-text {
    max-width: 100%;
  }

  .workbench:has(> #view-projects:not([hidden]) #projectDetailPanel:not([hidden])) > .topbar > #projectAskCopilotBtn {
    padding: 0 10px;
    font-size: 12px;
  }
}

/* Thai stacks tone marks above and below the line: the text of the slice 2c-2 pieces keeps at least 1.6. */
:lang(th) .project-list-summary,
:lang(th) .project-list-hint,
:lang(th) #projectList .project-card-open,
:lang(th) #projectList .project-run-stamp,
:lang(th) #projectList .project-folder-counts,
:lang(th) #projectList .project-folder-updated,
:lang(th) #projectList .project-action-strip b,
:lang(th) #projectList .project-action-strip span,
:lang(th) .project-list-columns {
  line-height: 1.6;
}

/* ---- 2/5: the list head is one row: the count line on the left, sort, Icons / List and "Create Project" on the right ------------------
   (4/4b: with no panel box the page sits on the page background; see the list section above.) */
#projectListPanel > .panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 12px;
  padding: 0;
  border-bottom: 0;
}

#projectListPanel .project-list-summary {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#projectListPanel .project-list-summary:empty {
  display: none;
}

#projectListPanel .project-list-tools {
  flex: 0 1 auto;
  justify-content: flex-end;
  margin-left: auto;
}

/* Every control in the toolbar and the chips under it is 36px tall (the switch is 30px of buttons + its own 2px frame and padding). */
#projectListPanel .project-list-tools select {
  min-height: 36px;
}

#projectListPanel .project-view-toggle button {
  min-height: 30px;
}

#projectListPanel .project-create-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
}

#projectListPanel .project-create-toggle svg {
  flex: none;
}

/* "Not sure what to do next?": one quiet line with a plain link, no box. */
#projectListPanel .project-list-hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

#projectListPanel .project-list-hint-link {
  margin-left: 6px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

#projectListPanel .project-list-hint-link:hover {
  text-decoration: underline;
}

#createProjectForm[hidden] {
  display: none;
}


/* ---- 6: the Files tab's controls row: one height, one centre line ----------------------------------------------------------
   Main file label + select, the "N files" pill, Download all, the rows select, Run all tests and Run all full all share one
   36px box (the app has no control-height token; the 36px of the list's sort select and Create button is the compact size).
   `.project-next-actions` is shared by the run header, the next-step box and file rows, so everything is scoped to the Files
   tab's list head and to the status chips inside #projectFileTasks. A disabled button keeps its box. */
#projectFileTasks .project-review-head .project-next-actions {
  --project-control-h: 36px;
  align-items: center;
  gap: 8px;
}

#projectFileTasks .project-review-head .project-next-actions > :is(button, a, select, .pill) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--project-control-h);
  min-height: var(--project-control-h);
  margin: 0;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

#projectFileTasks .project-review-head .project-next-actions > select {
  display: block;
  width: auto;
  padding-right: 28px;
}

#projectFileTasks .project-review-head .project-next-actions > .pill {
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* "Main file [select]": the label sits to the left of its select, on the same centre line. */
#projectFileTasks .project-review-head .project-main-file {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: var(--project-control-h);
  white-space: nowrap;
}

#projectFileTasks .project-review-head .project-main-file select {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 240px;
  height: var(--project-control-h);
  min-height: var(--project-control-h);
}

@media (max-width: 640px) {
  /* A phone wraps the row; every line keeps the same control height, and the Main file pair takes a line of its own. */
  #projectFileTasks .project-review-head .project-main-file {
    flex: 1 1 100%;
  }

  #projectFileTasks .project-review-head .project-main-file select {
    max-width: none;
  }
}

/* The status chips: one height, the count centred in its own capsule. */
#projectFileTasks .status-filter .status-filter-chip {
  box-sizing: border-box;
  min-height: 36px;
  align-items: center;
}

#projectFileTasks .status-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  line-height: 1.5;
}

/* While the form is open the submit button is the one primary action: the toggle turns neutral (red stays rare). */
#projectListPanel .project-create-toggle[aria-expanded="true"] {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--panel);
}

#projectListPanel .project-create-toggle[aria-expanded="true"]:hover {
  color: var(--ink);
  border-color: var(--muted-3);
  background: var(--stone-tint);
}

/* The colour key and the status chips: one compact row each, chips as tall as the toolbar controls (36px). The key and the chips
   are app-only; the demo has no counterpart. */
#projectListPanel .project-folder-key {
  margin: 0 0 10px;
}

#projectListPanel #projectStatusFilter .status-filter {
  margin: 0 0 12px;
}

#projectListPanel .status-filter .status-filter-chip {
  box-sizing: border-box;
  min-height: 36px;
  align-items: center;
}

#projectListPanel .status-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  line-height: 1.5;
}

#projectListPanel .project-select-row {
  margin: 0 0 10px;
}

/* An empty status line takes no room, but stays in the page: it is a live region, and one that is display:none when its text arrives may not be announced. */
#createProjectStatus:empty {
  margin: 0;
  padding: 0;
}

@media (max-width: 680px) {
  /* Phone: the count line on its own line, then sort across the width, then the switch and "Create Project" (right). */
  #projectListPanel > .panel-head {
    align-items: flex-start;
  }

  #projectListPanel .project-list-summary {
    text-align: left;
  }

  #projectListPanel .project-list-tools {
    justify-content: flex-start;
    margin-left: 0;
  }

  /* Sort and the Icons / List switch share a row; "Create Project" takes the full width under them. */
  #projectListPanel .project-list-tools {
    width: 100%;
  }

  #projectListPanel .project-list-tools select {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  #projectListPanel .project-create-toggle {
    flex: 1 1 100%;
    justify-content: center;
    margin-left: 0;
  }
}

/* ==========================================================================
   The project page (look only): the tabs are a plain row of text on the page, and the tab's content sits straight on the page under it
   (owner 2026-10-20, slice 2c-2: one white sheet under the row; the TAB LOOK was put back to the original one the same day, slice 2c-3c;
   owner 2026-10-21, "เอาพื้นขาวกรอบเทาออกไปเลย": the white sheet and its grey frame are gone, so every tab panel is plain). The tab rules
   are styles.css's own (.project-tab: no box, no border, the selected one in bold ink with a 2px red underline sitting on the row's grey
   rule; hover is colour only), so nothing here restyles a tab. Only the row itself is placed: no gap under its rule. That rule is the one
   line between the tabs and the content now. The panel has no side padding: the page's own gutter already lines the row, the header
   and the content up on one left edge, so a padding here would be a second gutter. The cards and tables inside keep their own frames.
   The boxes that used to frame the content (the upload box, the file list, the run list) lose their own border and padding so no box sits
   in a box. Scoped to #projectDetailPanel.
   ========================================================================== */
#projectDetailPanel > .project-tabs {
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line-strong);
}

#projectDetailPanel > .project-tabpanel:not([hidden]) {
  padding: 16px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#projectDetailPanel > .project-tabpanel .project-file-tasks,
#projectDetailPanel > .project-tabpanel .project-bulk-upload,
#projectDetailPanel > .project-tabpanel .project-run-history {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 640px) {
  #projectDetailPanel > .project-tabs {
    padding: 0;
  }

  /* Five tabs (the Guide is the fifth, slice 2c-3b) have to fit a 360px row, Thai included: less padding at the sides. */
  #projectDetailPanel > .project-tabs .project-tab {
    padding: 8px 10px;
  }

  #projectDetailPanel > .project-tabpanel:not([hidden]) {
    padding: 12px 0 0;
  }
}

/* In the row table the select box is a bare checkbox, not a framed square. */
#projectList[data-view="list"] .project-select-control {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#createProjectForm:not([hidden]) {
  margin: 0 0 12px;
}

/* ==========================================================================
   Inside a project: the Files tab as a table, and a file's own page
   (owner decision 2026-10-20, Projects inner pages, slice 2a). Scoped to #view-projects:
   the ID wins over the `.file-task-row span { display: block }` rule of styles.css, which
   the file page's card still carries (its class is kept so Row Review and the smokes find it).
   ========================================================================== */
#view-projects .project-files-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

#view-projects .project-files-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

#view-projects .project-files-table th,
#view-projects .project-files-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}

#view-projects .project-files-table thead th {
  background: var(--stone-tint);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

#view-projects .project-files-table tbody tr:last-child > * {
  border-bottom: 0;
}

#view-projects .project-files-table tbody tr:hover {
  background: #fafaf9;
}

#view-projects .project-files-table th[data-col="rows"],
#view-projects .project-files-table td[data-col="rows"] {
  width: 84px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#view-projects .project-files-table th[data-col="blueprint"] { width: 24%; }
#view-projects .project-files-table th[data-col="last-run"] { width: 150px; }
#view-projects .project-files-table th[data-col="updated"] { width: 176px; }

/* Select column (owner request 2026-10-22, run chosen files): a narrow first column of checkboxes. */
#view-projects .project-files-table th[data-col="select"],
#view-projects .project-files-table td[data-col="select"] {
  width: 44px;
  padding-right: 0;
  text-align: center;
}

#view-projects .project-files-table input[data-file-select],
#view-projects .project-files-table input[data-file-select-all] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

#view-projects .project-files-table input[data-file-select]:disabled,
#view-projects .project-files-table input[data-file-select-all]:disabled {
  cursor: not-allowed;
}

#view-projects .project-files-table tbody tr[data-selected="true"] {
  background: var(--stone-tint);
}

/* Actions column (owner request 2026-10-22, a row's own run buttons and "…" menu). The table is wider with it, so a narrow
   window scrolls it sideways inside its box (as before) rather than squeezing the name. */
#view-projects .project-files-table.has-row-actions {
  min-width: 900px;
}

#view-projects .project-files-table th[data-col="actions"] {
  width: 252px;
}

/* With the Actions column the name keeps its room: Blueprint and Updated give up a little. */
#view-projects .project-files-table.has-row-actions th[data-col="blueprint"] { width: 19%; }
#view-projects .project-files-table.has-row-actions th[data-col="updated"] { width: 148px; }

#view-projects .project-file-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#view-projects .project-file-row-actions > button {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* The row menu's panel floats fixed to the viewport (placeTableKebabPanel in app.js), so the table's scroll box cannot clip it. */
#view-projects .kebab-panel.kebab-panel-floating {
  position: fixed;
  right: auto;
  z-index: 60;
}

/* Empty, the counter stays in the accessibility tree (visually hidden), so the first tick is announced by its aria-live. */
#view-projects .project-file-select-count:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#view-projects .project-files-table tbody th[data-col="name"] {
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

#view-projects .project-file-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#view-projects .project-file-icon {
  flex: none;
  color: var(--muted);
}

#view-projects .project-file-link {
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

#view-projects .project-file-link:hover .project-file-link-text {
  text-decoration: underline;
}

#view-projects .project-file-link-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-projects .project-files-table .pill {
  flex: none;
  display: inline-block;
  width: auto;
}

#view-projects .project-file-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 4px 0 0 24px;
  font-weight: 400;
}

#view-projects .project-files-table td[data-col="blueprint"],
#view-projects .project-files-table td[data-col="updated"] {
  overflow-wrap: anywhere;
}

#view-projects .project-file-never {
  font-size: 12.5px;
}

/* The Last run cell (owner request 2026-10-21): the status word, the run's bar under it, and Resume for a paused or failed run. The bar
   is the same one every other run row draws (runStatusBarHtml), only slimmer; Resume is a small outlined button, not a second red one. */
#view-projects .project-file-run {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}

#view-projects .project-file-run-bar {
  width: 100%;
  min-width: 0;
}

#view-projects .project-file-run-bar .mini-track,
#view-projects .project-file-run-bar .qa-bar {
  width: 100%;
  height: 6px;
  margin: 0;
}

#view-projects .project-row-resume {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  justify-content: flex-start;
  min-width: 0;
}

#view-projects .project-row-resume button {
  min-height: 30px;
  padding: 2px 12px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--panel);
  font-size: 12.5px;
  line-height: 1.5;
}

#view-projects .project-row-resume button:hover:not(:disabled) {
  background: var(--panel-strong);
}

/* A refusal comes in the server's words, under the button, inside this cell. */
#view-projects .project-row-resume .run-action-error {
  flex-basis: 100%;
  margin: 0;
  font-size: 12.5px;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Phone: each file is a stacked card, no horizontal scroll. The header row is kept for screen readers only. */
@media (max-width: 640px) {
  #view-projects .project-files-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  #view-projects .project-files-table {
    display: block;
    min-width: 0;
  }

  #view-projects .project-files-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #view-projects .project-files-table tbody,
  #view-projects .project-files-table tr,
  #view-projects .project-files-table tbody th,
  #view-projects .project-files-table td {
    display: block;
    width: auto;
  }

  #view-projects .project-files-table tr {
    margin: 0 0 8px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
  }

  #view-projects .project-files-table th,
  #view-projects .project-files-table td {
    padding: 4px 0;
    border-bottom: 0;
  }

  #view-projects .project-files-table tbody th[data-col="name"] {
    padding: 6px 0 4px;
  }

  #view-projects .project-files-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-align: right;
  }

  #view-projects .project-files-table td::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
  }

  #view-projects .project-files-table td[data-col="rows"] {
    width: auto;
    text-align: right;
  }

  #view-projects .project-files-table.has-row-actions {
    min-width: 0;
  }

  /* A row's actions: their own line in the card, buttons first, the menu beside them, touch-sized. */
  #view-projects .project-files-table td[data-col="actions"] {
    display: block;
    width: auto;
    padding-top: 8px;
  }

  #view-projects .project-files-table td[data-col="actions"]::before {
    content: none;
  }

  #view-projects .project-file-row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #view-projects .project-file-row-actions > button,
  #view-projects .project-file-row-actions .kebab-trigger {
    min-height: 44px;
  }

  #view-projects .project-file-row-actions .kebab-trigger {
    width: 44px;
  }

  /* The header row is visually hidden on a phone: its select-all box would be an invisible tab stop, so it is taken out. */
  #view-projects .project-files-table input[data-file-select-all] {
    display: none;
  }

  #view-projects .project-files-table td[data-col="select"] {
    width: auto;
    padding: 4px 0;
    text-align: right;
  }

  #view-projects .project-file-flags {
    margin-left: 0;
  }

  /* The Last run value sits at the right of its card row, as the other values do; its bar is a fixed short length, not the whole card. */
  #view-projects .project-file-run {
    justify-items: end;
  }

  #view-projects .project-file-run-bar {
    width: 140px;
    max-width: 100%;
  }

  #view-projects .project-row-resume {
    justify-content: flex-end;
  }

  /* A long file name wraps inside its card instead of stretching it past the screen. */
  #view-projects .project-files-table tr,
  #view-projects .project-files-table tbody th[data-col="name"] {
    min-width: 0;
    max-width: 100%;
  }

  #view-projects .project-file-name {
    flex-wrap: wrap;
  }

  #view-projects .project-file-link {
    flex: 1 1 0;
  }

  #view-projects .project-file-link-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

/* ---- the file's own page ---------------------------------------------------- */
/* Owner 2026-10-20, slice 2c-3c ("feel exactly like the demo"): the file page and the run page are one page on the white sheet, not a card in a
   card. Back link, a 40px tile with the name at 17px, outlined 40px buttons on the right, then one strip of bordered cells; the page's controls
   sit below in their own bordered card. Sizes are the demo's (index.html: .crumb-up, .dh, .facts, .stat, .stages), measured, not guessed. */
#view-projects .project-file-page {
  display: grid;
  gap: 0;
  min-width: 0;
}

#view-projects .file-page-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 8px;
  margin: -6px 0 8px -8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

#view-projects .file-page-back:hover {
  background: var(--stone-tint);
  color: var(--ink);
}

#view-projects .file-page-card {
  display: grid;
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#view-projects .file-page-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 14px;
  min-width: 0;
}

#view-projects .file-page-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--stone-tint);
  color: var(--muted);
}

#view-projects .file-page-title {
  min-width: 0;
}

#view-projects .file-page-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

#view-projects .file-page-name h4 {
  margin: 0;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#view-projects .file-page-name h4:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
  border-radius: 4px;
}

#view-projects .file-page-name .pill {
  display: inline-block;
  width: auto;
}

#view-projects .file-page-sub {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#view-projects .file-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#view-projects .file-page-actions button,
#view-projects .file-page-actions .download-btn {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

#view-projects .file-page-actions select {
  min-height: 40px;
}

#view-projects .file-page-actions .file-task-primary-reason {
  flex-basis: 100%;
  text-align: right;
}

/* The fact strip: cells at most four to five, each "label over value", on one bordered rounded strip. The cell borders are the demo's
   trick (a right and a bottom line, pulled out by -1px, clipped by the strip) so a wrapped row keeps its lines. */
#view-projects .file-page-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

#view-projects .file-page-fact {
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 -1px -1px 0;
}

#view-projects .file-page-fact dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

#view-projects .file-page-fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 3px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#view-projects .file-page-fact dd b {
  display: block;
  font-weight: 600;
}

#view-projects .file-page-card .project-folder-status {
  display: inline-flex;
  color: var(--tone-text, var(--muted));
  font-size: 13px;
}

#view-projects .file-page-card .project-folder-status span {
  display: inline;
  color: inherit;
  font-size: inherit;
}

#view-projects .file-page-run-link {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

#view-projects .file-page-card .pill {
  display: inline-block;
  width: auto;
}

#view-projects .file-page-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

/* The page's controls (blueprint, plan check, run details, the menu, the review) sit in their own bordered card under the strip. */
#view-projects .file-page-controls {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

#view-projects .file-page-card .file-page-controls .file-task-actions {
  margin: 0;
  padding: 0;
  border-top: 0;
}

#view-projects .file-page-empty {
  justify-items: start;
  text-align: left;
}

#view-projects .file-page-empty b:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  #view-projects .file-page-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  #view-projects .file-page-controls {
    padding: 12px;
  }

  #view-projects .file-page-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  #view-projects .file-page-actions .file-task-primary-reason {
    text-align: left;
  }

  /* Two cells to a row on a phone (one when the strip has an odd cell out, it fills the row), never a sideways scroll. */
  #view-projects .file-page-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Thai stacks tone marks above and below the line: the new text keeps at least 1.5. */
:lang(th) #view-projects .project-files-table,
:lang(th) #view-projects .file-page-sub,
:lang(th) #view-projects .file-page-fact dd,
:lang(th) #view-projects .file-page-fact dt,
:lang(th) #view-projects .file-page-back,
:lang(th) #view-projects .file-page-name h4 {
  line-height: 1.6;
}

/* ==========================================================================
   Inside a project: the Runs tab as a table, and a run's own page
   (owner decision 2026-10-20, Projects inner pages, slice 2b). Same visual language
   as the Files table above; scoped to #view-projects so the ID wins over styles.css's
   `.project-run-row` grid and `.project-run-row span { display: block }`, which the run
   page's card still carries (its class is kept so Row Review and the smokes find it).
   ========================================================================== */
#view-projects .project-runs-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

#view-projects .project-runs-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

#view-projects .project-runs-table th,
#view-projects .project-runs-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#view-projects .project-runs-table thead th {
  background: var(--stone-tint);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

#view-projects .project-runs-table tbody tr:last-child > * {
  border-bottom: 0;
}

#view-projects .project-runs-table tbody tr:hover {
  background: #fafaf9;
}

#view-projects .project-run-status {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}

#view-projects .project-runs-table th[data-col="run"] { width: 20%; }
#view-projects .project-runs-table th[data-col="status"] { width: 130px; }
#view-projects .project-runs-table th[data-col="qa"] { width: 22%; }
#view-projects .project-runs-table th[data-col="updated"] { width: 170px; }

#view-projects .project-runs-table tbody th[data-col="run"] {
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

#view-projects .project-run-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}

#view-projects .project-run-icon {
  flex: none;
  color: var(--muted);
}

#view-projects .project-run-link {
  flex: none;
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

#view-projects .project-run-link:hover .project-run-link-text {
  text-decoration: underline;
}

#view-projects .project-run-kind {
  font-size: 12px;
  font-weight: 400;
}

/* The pass / needs review / failed counts: green, amber and rose text with their words (never colour alone). */
#view-projects .run-qa-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

#view-projects .run-qa-count {
  white-space: nowrap;
}

#view-projects .run-qa-count small {
  font-size: 11.5px;
  font-weight: 500;
}

/* Pass / Review / Fail counts: the QA tones of status-tones.css (green, amber, rose). */
#view-projects .run-qa-count.is-pass,
#view-projects .run-qa-card.is-pass b,
#view-projects .run-qa-count.is-review,
#view-projects .run-qa-card.is-review b,
#view-projects .run-qa-count.is-fail,
#view-projects .run-qa-card.is-fail b { color: var(--tone-text); }

@media (max-width: 640px) {
  #view-projects .project-runs-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  #view-projects .project-runs-table {
    display: block;
    min-width: 0;
  }

  #view-projects .project-runs-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #view-projects .project-runs-table tbody,
  #view-projects .project-runs-table tr,
  #view-projects .project-runs-table tbody th,
  #view-projects .project-runs-table td {
    display: block;
    width: auto;
  }

  #view-projects .project-runs-table tr {
    margin: 0 0 8px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    min-width: 0;
    max-width: 100%;
  }

  #view-projects .project-runs-table th,
  #view-projects .project-runs-table td {
    padding: 4px 0;
    border-bottom: 0;
  }

  #view-projects .project-runs-table tbody th[data-col="run"] {
    padding: 6px 0 4px;
  }

  #view-projects .project-runs-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-align: right;
  }

  #view-projects .project-runs-table td::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
  }

  #view-projects .project-runs-table td[data-col="qa"] .run-qa-counts {
    justify-content: flex-end;
  }

  #view-projects .project-run-status {
    justify-items: end;
  }

  #view-projects .project-run-status .project-row-resume {
    justify-content: flex-end;
  }

  /* The short run id is one word: it stays whole, and the kind wraps beside or under it. */
  #view-projects .project-runs-table th[data-col="run"] {
    overflow-wrap: normal;
  }

  #view-projects .project-run-link,
  #view-projects .project-run-link-text {
    flex: none;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* ---- the run's own page ------------------------------------------------------ */
#view-projects .project-run-page {
  display: grid;
  gap: 0;
  min-width: 0;
}

#view-projects .run-page-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 8px;
  margin: -6px 0 8px -8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

#view-projects .run-page-back:hover {
  background: var(--stone-tint);
  color: var(--ink);
}

#view-projects .run-page-card.project-run-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#view-projects .run-page-head h4,
#view-projects .run-page-head h4:focus-visible {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#view-projects .run-page-head h4:focus-visible,
#view-projects .file-page-empty b[data-run-page-heading]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
  border-radius: 4px;
}

#view-projects .run-page-statusline {
  margin: 2px 0 0;
}

#view-projects .run-page-card .project-folder-status {
  display: inline-flex;
  color: var(--tone-text, var(--muted));
  font-size: 13px;
}

#view-projects .run-page-card .project-folder-status span {
  display: inline;
  color: inherit;
  font-size: inherit;
}

#view-projects .run-page-id {
  margin: 2px 0 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* "Progress 100%" over a 10px bar in the status's folder colour (the demo's .big-prog). */
#view-projects .run-page-progress {
  gap: 6px;
}

#view-projects .run-page-progress .mini-track {
  height: 10px;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
}

#view-projects .run-page-progress .mini-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--tone-fill, var(--muted));
}

#view-projects .run-page-progress {
  display: grid;
  gap: 6px;
}

#view-projects .run-page-progress-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  font-size: 13px;
}

#view-projects .run-page-progress-head b {
  display: inline;
  font-weight: 600;
}

#view-projects .run-page-progress-head span {
  display: inline;
  color: var(--muted);
  font-size: 13px;
}

#view-projects .run-qa-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#view-projects .run-qa-card {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

#view-projects .run-qa-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

#view-projects .run-qa-card b {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

#view-projects .run-qa-card b small {
  font-size: 12px;
  font-weight: 400;
}

#view-projects .run-qa-card > small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#view-projects .run-page-qa {
  display: grid;
  gap: 8px;
}

#view-projects .run-page-qa > b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

#view-projects .run-page-qa .qa-bar {
  max-width: none;
  height: 10px;
  margin-top: 0;
  border-radius: 5px;
}

#view-projects .run-page-facts {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* Stages: one bordered list, a row per node-log entry (only a run that carries its log has one). */
#view-projects .run-page-stages {
  display: grid;
  gap: 8px;
}

#view-projects .run-page-stages-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

#view-projects .run-page-stages-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

#view-projects .run-page-stages-summary {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

#view-projects .run-stage-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px 12px;
  white-space: nowrap;
}

#view-projects .run-stage-meta .run-node-log-time {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#view-projects .run-stages {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

#view-projects .run-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
}

#view-projects .run-stage:last-child {
  border-bottom: 0;
}

#view-projects .run-stage-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}

#view-projects .run-stage-name .project-run-icon {
  flex: none;
  color: var(--muted);
}

#view-projects .run-stage-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tone-text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

#view-projects .run-stage-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

#view-projects .run-stage-message {
  grid-column: 1 / -1;
  margin: 0;
  padding-left: 26px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#view-projects .run-page-file-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

#view-projects .run-page-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#view-projects .run-page-actions {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#view-projects .run-page-actions:not(:has(*)) {
  display: none;
}

@media (max-width: 640px) {
  #view-projects .run-page-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Like the demo, the three cards stay side by side on a phone, tighter (8px between, 10px inside, a 19px number). */
  #view-projects .run-qa-cards {
    gap: 8px;
  }

  #view-projects .run-qa-card {
    padding: 10px;
  }

  #view-projects .run-qa-card b {
    font-size: 19px;
  }

  #view-projects .run-page-head .file-page-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

:lang(th) #view-projects .project-runs-table,
:lang(th) #view-projects .run-page-id,
:lang(th) #view-projects .run-page-note,
:lang(th) #view-projects .run-qa-card span,
:lang(th) #view-projects .run-page-progress-head,
:lang(th) #view-projects .run-page-back,
:lang(th) #view-projects .run-stage,
:lang(th) #view-projects .run-stage-message,
:lang(th) #view-projects .run-page-stages-title,
:lang(th) #view-projects .run-page-stages-summary,
:lang(th) #view-projects .run-stage-meta,
:lang(th) #view-projects .run-page-head h4 {
  line-height: 1.6;
}

/* ---- the Why? link on the one-line next step, and the Guide tab (owner 2026-10-20, slice 2c-3b) --------------------------------
   The collapsed explainer under the next-step line is gone; its content is the fifth tab, shown open. The "Why?" link sits right after
   the line's text, only when the step is about checking rows. */
#view-projects #projectNextStep .project-next-why {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#view-projects #projectNextStep .project-next-why:hover {
  color: var(--ink);
}

/* The Guide: a quiet page of text on the white sheet: no amber, the explanation, the three steps and the QA 95 note one under the other. */
#view-projects #projectGuide .project-guide {
  display: grid;
  gap: 12px;
  max-width: 980px;
  margin: 0;
  padding: 0;
  border: 0;
}

#view-projects #projectGuide .project-guide > .project-tab-section-head {
  margin: 0;
  padding: 0;
  border: 0;
}

#view-projects #projectGuide #projectGuideHeading:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

#view-projects #projectGuide .project-guide-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  line-height: 1.6;
}

#view-projects #projectGuide .project-guide-count button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

#view-projects #projectGuide .review-why {
  border-color: var(--line);
  background: transparent;
}

#view-projects #projectGuide .review-why b {
  display: block;
  margin-bottom: 2px;
  line-height: 1.5;
}

#view-projects #projectGuide .qa95-playbook {
  margin-top: 0;
  border-color: var(--line);
  background: var(--paper);
}

:lang(th) #view-projects #projectGuide .project-guide-count,
:lang(th) #view-projects #projectGuide .review-why b,
:lang(th) #view-projects #projectGuide .review-checklist p b,
:lang(th) #view-projects #projectNextStep .project-next-why {
  line-height: 1.6;
}