/* The Blueprints list as sheets (owner panel 2026-10-25): the same Icons / List, sort, filter chips, Select all row and bulk bar as the
   Projects list, plus a Saved / Templates tablist. A stylesheet of its own, loaded after projects-folder.css and before
   accessibility.css. It reuses the Projects classes that are global (.project-view-toggle, .project-list-tools, .project-bulk-bar,
   .project-select-row, .status-filter-chip, .project-tabs / .project-tab, .project-select-control, .project-card-head) and only adds what
   those scope to #projectList / #projectListPanel. Everything here is scoped to #view-blueprints, #blueprintListPanel or
   #blueprintSavedList, so no other screen changes. Tokens only; no new colour, no motion. */

/* ---- the page is plain, like Projects: the sheets carry their own frame -------------------------------------------------------- */
#blueprintListPanel.panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#blueprintListPanel > .panel-head {
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 0;
  border-bottom: 0;
}

/* The view's enter animation leaves an identity transform on the view, which would make it the containing block of the docked bulk bar on
   a phone (see #view-projects in projects-folder.css). This view fades in only. */
#view-blueprints:not([hidden]) {
  animation-name: ui-view-fade;
}

/* ---- Saved / Templates ---------------------------------------------------------------------------------------------------------- */
#blueprintListPanel > .bp-tabs {
  margin: 4px 0 14px;
  border-bottom-color: var(--line-strong);
}

.bp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bp-tab-count {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-strong);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bp-tab-count:empty {
  display: none;
}

/* A panel that is only text is focusable (tabindex 0): it shows the same ring as a tab. */
#blueprintList > .blueprint-library-section:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 6px;
}

/* The two panels are alternatives, not a stack: the old rule that fenced the second section off from the first no longer applies. */
#blueprintList > .blueprint-library-section + .blueprint-library-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---- the Saved tab's controls ------------------------------------------------------------------------------------------------------ */
.bp-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.bp-list-head .blueprint-search {
  flex: 1 1 260px;
  margin: 0;
}

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

/* Every control of the toolbar and the chips under it is 36px tall, as on the Projects page. */
.bp-list-head .project-list-tools select,
.bp-list-head .blueprint-search input {
  min-height: 36px;
  border-color: var(--muted-3);
  background: var(--stone-tint);
}

@media (min-width: 681px) {
  .bp-list-head .project-list-tools select {
    width: auto;
  }
}

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

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

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

#blueprintSelectRow {
  margin: 0 0 10px;
}

#blueprintBulkStatus {
  margin: 8px 0 0;
}

#blueprintBulkStatus:empty {
  margin: 0;
  padding: 0;
}

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

@media (max-width: 680px) {
  .bp-list-head .project-list-tools {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

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

  .bp-list-head .blueprint-search {
    flex-basis: 100%;
    max-width: none;
  }
}

/* The bar docks at the bottom of a phone screen while something is ticked, like the Projects bar: three targets, 44px tall. */
@media (max-width: 640px) {
  #blueprintListPanel .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);
  }

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

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

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

  #blueprintListPanel .project-bulk-actions button:last-child {
    grid-column: 1 / -1;
  }

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

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

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

/* ---- the list: sheet tiles (Icons) or a row table (List) -------------------------------------------------------------------------- */
#blueprintSavedList > p {
  grid-column: 1 / -1;
}

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

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

#blueprintSavedList .blueprint-saved-card {
  position: relative;
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

#blueprintSavedList .blueprint-saved-card:hover {
  border-color: var(--muted-3);
}

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

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

#blueprintSavedList .bp-sheet-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
}

#blueprintSavedList .bp-sheet-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

#blueprintSavedList .bp-card-title {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  padding-top: 2px;
}

#blueprintSavedList .bp-card-title h4 {
  flex: 1 1 100%;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#blueprintSavedList .bp-card-title .pill {
  flex: none;
}

#blueprintSavedList .blueprint-card-main {
  gap: 8px;
}

#blueprintSavedList .blueprint-meta-line,
#blueprintSavedList .bp-card-org {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#blueprintSavedList .bp-card-org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tiles: a column that fills the tile's height, so every tile in a row is as tall as the tallest and the buttons sit at the bottom. */
#blueprintSavedList[data-view="icons"] .blueprint-saved-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px 18px 14px;
  border-radius: 10px;
}

#blueprintSavedList[data-view="icons"] .blueprint-card-main {
  flex: 1;
}

#blueprintSavedList[data-view="icons"] .blueprint-card-actions {
  justify-content: flex-start;
  margin-top: auto;
}

/* Two lines of purpose are always reserved, so the rows below line up from tile to tile. */
#blueprintSavedList[data-view="icons"] .blueprint-purpose {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: 3em;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
}

#blueprintSavedList[data-view="icons"] .bp-card-title h4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

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

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

/* No ring after a mouse click (Shift+click included), a 2px ink ring for a keyboard user (html.kbd, set in app.js). */
#blueprintSavedList .project-select-control input:focus,
#blueprintSavedList .project-select-control input:focus-visible {
  outline: none;
}

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

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

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

#blueprintSavedList[data-view="icons"] .blueprint-saved-card:hover .project-select-control:has(input:disabled),
#blueprintSavedList[data-view="icons"][data-selecting="true"] .project-select-control:has(input:disabled) {
  opacity: 0.45;
}

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

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

/* ---- the sheet drawing: shape carries the kind (dashed draft, filled system sheet), colour only helps ----------------------------- */
.bp-sheet-page {
  fill: var(--panel);
  stroke: var(--steel);
  stroke-width: 2;
  stroke-linejoin: round;
}

.bp-sheet-fold {
  fill: none;
  stroke: var(--steel);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bp-sheet-link {
  fill: none;
  stroke: var(--muted-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bp-sheet-node {
  fill: var(--ink);
}

.bp-sheet-svg[data-kind="builtin"] .bp-sheet-page {
  fill: var(--stone-tint);
  stroke: var(--ink);
  stroke-width: 2.5;
}

.bp-sheet-svg[data-kind="builtin"] .bp-sheet-fold {
  stroke: var(--ink);
}

.bp-sheet-svg[data-kind="draft"] .bp-sheet-page {
  stroke: var(--amber);
  stroke-dasharray: 5 3;
}

.bp-sheet-svg[data-kind="draft"] .bp-sheet-fold {
  stroke: var(--amber);
}

.bp-sheet-svg[data-kind="draft"] .bp-sheet-node {
  fill: var(--amber);
}

/* ---- List: one bordered table; Name with its purpose under it, Capabilities, Details, Organization, the buttons --------------------- */
.bp-list-columns {
  display: none;
}

@media (min-width: 861px) {
  #blueprintSavedList[data-view="list"] .bp-list-columns,
  #blueprintSavedList[data-view="list"] .blueprint-saved-card {
    display: grid;
    grid-template-columns: 36px 32px minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.7fr) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
  }

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

  #blueprintSavedList[data-view="list"] .bp-col-name {
    grid-column: 3;
  }

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

  #blueprintSavedList[data-view="list"] .blueprint-saved-card:last-child {
    border-bottom: 0;
    border-radius: 0 0 7px 7px;
  }

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

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

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

  /* The card's own wrappers dissolve, so every piece is placed on the row's columns. */
  #blueprintSavedList[data-view="list"] .blueprint-card-main,
  #blueprintSavedList[data-view="list"] .project-card-head {
    display: contents;
  }

  #blueprintSavedList[data-view="list"] .project-select-control { grid-column: 1; grid-row: 1 / span 2; border: 0; background: transparent; box-shadow: none; }
  #blueprintSavedList[data-view="list"] .bp-sheet-icon { grid-column: 2; grid-row: 1 / span 2; width: 32px; }
  #blueprintSavedList[data-view="list"] .bp-card-title { grid-column: 3; grid-row: 1; align-self: end; flex-wrap: nowrap; padding-top: 0; }
  #blueprintSavedList[data-view="list"] .bp-card-title h4 { flex: 0 1 auto; min-width: 0; font-size: 13.5px; }
  #blueprintSavedList[data-view="list"] .blueprint-purpose {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #blueprintSavedList[data-view="list"] .blueprint-cap-chips { grid-column: 4; grid-row: 1 / span 2; }
  #blueprintSavedList[data-view="list"] .blueprint-meta-line { grid-column: 5; grid-row: 1 / span 2; }
  #blueprintSavedList[data-view="list"] .bp-card-org { grid-column: 6; grid-row: 1 / span 2; }
  #blueprintSavedList[data-view="list"] .blueprint-card-actions { grid-column: 7; grid-row: 1 / span 2; margin: 0; }
  #blueprintSavedList[data-view="list"] .plan-notice,
  #blueprintSavedList[data-view="list"] .blueprint-builtin-note { grid-column: 3 / 7; grid-row: 3; margin: 6px 0 0; }
}

/* The Name column is the flexible one and the buttons column is as wide as the widest row's buttons, the same in every row because the rows
   share the list's own columns (subgrid; the heading row too). A browser without subgrid keeps the fixed columns above. */
@media (min-width: 861px) {
  @supports (grid-template-columns: subgrid) {
    #blueprintSavedList[data-view="list"] {
      grid-template-columns: 36px 32px minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.7fr) minmax(0, 1fr) auto;
      column-gap: 12px;
    }

    #blueprintSavedList[data-view="list"] .bp-list-columns,
    #blueprintSavedList[data-view="list"] .blueprint-saved-card {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
  }
}

/* Narrow screens: a row is a short card -- the select box, the sheet and the name on top, everything else under them. */
@media (max-width: 860px) {
  #blueprintSavedList[data-view="list"] .blueprint-saved-card {
    display: grid;
    grid-template-columns: 36px 32px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  #blueprintSavedList[data-view="list"] .blueprint-saved-card:last-child { border-bottom: 0; }

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

  #blueprintSavedList[data-view="list"] .blueprint-saved-card > *,
  #blueprintSavedList[data-view="list"] .blueprint-card-main > *:not(.project-card-head) {
    grid-column: 1 / -1;
  }

  #blueprintSavedList[data-view="list"] .project-select-control { grid-column: 1; grid-row: 1; border: 0; background: transparent; box-shadow: none; }
  #blueprintSavedList[data-view="list"] .bp-sheet-icon { grid-column: 2; grid-row: 1; width: 32px; }
  #blueprintSavedList[data-view="list"] .bp-card-title { grid-column: 3; grid-row: 1; padding-top: 0; }
  #blueprintSavedList[data-view="list"] .bp-card-title h4 { font-size: 13.5px; }
  #blueprintSavedList[data-view="list"] .blueprint-purpose { white-space: normal; }
  #blueprintSavedList[data-view="list"] .blueprint-card-actions { justify-content: flex-start; }
}

/* Phone tiles: the actions stay a row (the stock phone rule would stack them), and Thai gets room. */
@media (max-width: 680px) {
  #blueprintSavedList[data-view="icons"] .blueprint-card-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Thai stacks tone marks above and below the line: the small text of the cards keeps at least 1.6. */
:lang(th) #blueprintSavedList .blueprint-purpose,
:lang(th) #blueprintSavedList .blueprint-meta-line,
:lang(th) #blueprintSavedList .bp-card-org,
:lang(th) #blueprintSavedList .blueprint-builtin-note,
:lang(th) #blueprintSavedList .bp-card-title h4,
:lang(th) .bp-list-columns,
:lang(th) .bp-tab-count {
  line-height: 1.6;
}

:lang(th) #blueprintSavedList[data-view="icons"] .blueprint-purpose {
  min-height: 3.2em;
}