/* styles/phone-assets.css — the phone Assets page + asset window (src/PhoneAssets.jsx, 6 Oct 2026, phone pages
   group 3). Built on the phone kit (styles/phone-kit.css). Phone tier only, tokens only, every control >= 40px. */

/* ════════ PAGE — Hugo's phone mockup 03 (6 Oct 2026), measured at 412 CSS px ════════
   The project's band over the photo (PROJECT · the project's title · the album / video chips · DEVELOPMENT and the
   online pill), then ONE navy glass panel from y136 that runs under the bottom bar: ASSETS, the categories (8 Oct 2026:
   the desktop's text tabs in one sideways row, the ☰ with New item / Add piece at their left), then the items -
   Packaging grouped per album (bold name · "• 1 piece"), each item a card (picture · CD BOOKLET · PENDING · ›). The
   photo glows at the panel's sides. Small controls keep a 40px tap area (transparent border, equal negative margin,
   the corner R / R + border). */

/* the photo behind the band and the panel's sides: a soft veil (an overlay - the photo itself is never touched) */
body[data-ui-tier="s"][data-skin-family="glass"] .main-content:has(> .pas-page) {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--shl-veil) 34%, transparent) 0, color-mix(in srgb, var(--shl-veil) 30%, transparent) 136px, color-mix(in srgb, var(--shl-veil) 32%, transparent) 100%);
}
/* the panel: navy frosted glass, the photo glowing at its sides; it is the page's scroller and runs under the bar */
body[data-ui-tier="s"] .main-content > .pk-page.pas-page {
  flex: 0 1 auto; margin: 0.8px 9.3px 0 8.9px; gap: 0; padding: 0 0 13px; border-radius: var(--pk-radius-card);
  background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 58%, var(--bg)) 76%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 13%, transparent), inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent);
  -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1);
}
body[data-ui-tier="s"] .pas-page > .pk-page-body { gap: 0; padding: 0 12.8px 0 14px; }

/* ASSETS (its own row; Download all and New item left it on 8 Oct 2026) */
body[data-ui-tier="s"] .pas-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 9.6px; min-width: 0; height: 24.6px; margin: 9.7px -2.7px 0 0; }
body[data-ui-tier="s"] .pas-page-title { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-size: 27.4px; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
body[data-ui-tier="s"][data-skin-family="glass"] .pas-page-title { color: var(--white); text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 55%, transparent); }

/* 8 Oct 2026 — Hugo: "I dont like all those pills for the categories ... they should be more like the tabs on the desktop
   app. Much cleaner." The categories are the kit's tabs (.pk-tabs, the desktop's look): ONE row that scrolls sideways
   to the panel's right edge; the ☰ (New item, Add piece) at its left - its square on the panel's gutter */
body[data-ui-tier="s"] .pas-tabbar { position: relative; z-index: 4; display: flex; align-items: flex-end; gap: 2px; min-width: 0; margin: 6px -12.8px 6px -8px; }
body[data-ui-tier="s"] .pas-tabbar > .pk-tabs { flex: 1 1 auto; padding-right: 12.8px; }
body[data-ui-tier="s"] .pas-tabbar > .pk-tabs:first-child { padding-left: 8px; }
/* the ☰: the phone Overview's shot-list ☰ (.pov-tools-btn, phone-overview.css), same values; ✕ with an amber rim while open */
body[data-ui-tier="s"] .pas-tools { position: relative; flex: 0 0 40px; width: 40px; height: 40px; margin-bottom: -3px; }
body[data-ui-tier="s"] .pas-tools-btn {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; margin: 0;
  border: 0; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pas-tools-btn::before {
  content: ""; position: absolute; inset: 8px; border-radius: var(--pk-radius-control);
  background: var(--shl-recess); box-shadow: inset 0 0 0 1px var(--shl-recess-rim);
}
body[data-ui-tier="s"] .pas-tools-btn.is-on::before { box-shadow: inset 0 0 0 1px var(--shl-amber-rim); }
body[data-ui-tier="s"] .pas-tools-btn svg { position: relative; width: 14px; height: 14px; }
body[data-ui-tier="s"] .pas-tools-btn:disabled { opacity: 0.4; cursor: default; }
/* its panel FLOATS under it, over the list (nothing below moves); the Overview panel's buttons (its .pill-button pills:
   40 to tap, 32 to see, the recessed glass; New item = its amber-lit Add shot) */
body[data-ui-tier="s"] .pas-tools-panel {
  position: absolute; z-index: 6; top: calc(100% + 4px); left: 8px; display: flex; gap: 6px; width: max-content; max-width: calc(100vw - 40px);
  padding: 2px 6px; border-radius: var(--pk-radius-card); background: color-mix(in srgb, var(--card-bg-solid) 58%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 13%, transparent), 0 10px 28px color-mix(in srgb, var(--black) 45%, transparent);
}
body[data-ui-tier="s"] .pas-tools-panel .pill-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-height: 40px; margin: 0; padding: 0 12px;
  border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); transform: none;
  color: var(--ink); font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-semi); white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"][data-skin-family="glass"] .pas-tools-panel .pill-button { background-color: var(--shl-recess); box-shadow: inset 0 0 0 1px var(--shl-recess-rim); }
body[data-ui-tier="s"] .pas-tools-panel .pill-button.pill-button--add {
  background-color: var(--shl-amber-glass); box-shadow: inset 0 0 0 1px var(--shl-amber-rim); filter: drop-shadow(0 0 6px var(--shl-amber-glow)); color: var(--ink);
}
body[data-ui-tier="s"] .pas-tools-panel .pill-button svg { flex: 0 0 auto; width: 13px; height: 13px; }
body[data-ui-tier="s"] .pas-tools-panel .pill-button:disabled { opacity: 0.45; cursor: default; filter: none; }

/* Paradise Found keeps its desktop Assets page on the phone: src/PhoneAssets.jsx gives its tab row the kit's tab classes
   (pk-tabs / pk-tab / pk-tab-n) and puts the ☰ at the row's left (.pas-pf-host); the row's own + (New item in the ☰) and
   Download all are gone. A library tab of another project embeds the same desktop section: no Download all there either */
body[data-ui-tier="s"] .pas-pf > .vp-tabs.pk-tabs { margin-left: 34px; width: auto; max-width: none; }
body[data-ui-tier="s"] .pas-pf > .pas-pf-host { position: absolute; z-index: 31; left: 12px; width: 40px; height: 40px; }
body[data-ui-tier="s"] .pas-pf > .pas-pf-host > .pas-tools { margin: 0; }
body[data-ui-tier="s"] .pas-pf .vp-tabs-actions .assets-dl-tab, body[data-ui-tier="s"] .pas-pf .vp-tabs-actions .vp-tab-add-btn:not(.vp-tab-merge-btn) { display: none; }
body[data-ui-tier="s"] .pas-desk .vp-tabs-actions .assets-dl-tab { display: none; }

/* an album of Packaging: its name bold, "• 1 piece" grey, then its items */
body[data-ui-tier="s"] .pas-page .pas-album { gap: 0; margin-top: 12.9px; }
body[data-ui-tier="s"] .pas-page .pas-album + .pas-album { margin-top: 13.5px; }
body[data-ui-tier="s"] .pas-album-head { display: flex; align-items: baseline; gap: 0; min-width: 0; height: 14px; padding: 0 0 0 0; margin-top: -2.5px; margin-bottom: 2.5px; }
body[data-ui-tier="s"] .pas-album-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-body); font-size: 10.8px; font-weight: var(--fw-bold); color: var(--ink); }
body[data-ui-tier="s"] .pas-album-n { flex: 0 0 auto; margin-left: 5.8px; font-family: var(--font-body); font-size: 8px; color: var(--ink-muted); }
body[data-ui-tier="s"] .pas-album-dot { margin-right: 4.4px; }

/* 30 Oct 2026 — a parent category's group page (Buildings / Units, src/PhoneAssets.jsx + src/assetGroups.js): the kit's text
   button "‹ Buildings" (.pk-btn), then one kit tab per group (civilisation) on ONE row that scrolls sideways, the open group's
   tab underlined and scrolled into view (PhoneTabs); the sections under it are the album sections above */
body[data-ui-tier="s"] .pas-crumb { display: flex; align-items: center; gap: var(--pk-2); min-width: 0; margin-top: 3.1px; }
body[data-ui-tier="s"] .pas-crumb-back { flex: 0 0 auto; gap: var(--pk-1); padding: 0 var(--pk-3) 0 var(--pk-2); }
body[data-ui-tier="s"] .pas-crumb-back svg { flex: 0 0 auto; width: 18px; height: 18px; }
body[data-ui-tier="s"] .pas-crumb > .pas-grouptabs { flex: 1 1 auto; min-width: 0; }

/* an item: a card - picture | name + status | chevron; the whole card opens the asset window */
body[data-ui-tier="s"] .pas-rows { display: flex; flex-direction: column; gap: 3.9px; min-width: 0; margin-top: 3.1px; padding: 0 0 0 0.4px; }
body[data-ui-tier="s"] .pas-row {
  display: flex; align-items: center; gap: 0; width: 100%; min-width: 0; height: 76.8px; min-height: 0; padding: 0 0 0 9.3px; margin: 0; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--pk-radius-row); background: color-mix(in srgb, var(--card-bg-solid) 97%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sk-a2, var(--ink)) 26%, transparent); color: var(--ink); font-family: var(--font-body); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"][data-skin-family="glass"] .pas-page .pas-row {
  background: color-mix(in srgb, oklch(from var(--card-bg-solid) calc(l + 0.045) calc(c * 0.72) h) 56%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sk-a2, var(--ink)) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
body[data-ui-tier="s"] .pas-row:active { transform: scale(0.99); }
body[data-ui-tier="s"] .pas-row-pic {
  position: relative; flex: 0 0 112.8px; width: 112.8px; max-width: none; height: 67.6px; aspect-ratio: auto; overflow: hidden; display: grid; place-items: center;
  border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sk-a2, var(--ink)) 22%, transparent);
}
body[data-ui-tier="s"] .pas-row-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 30 Oct 2026 — the buildings family (src/assetGroups.js WIDE) shows its picture on a 16:9 frame, filled (the row keeps
   its height: 67.6 px tall, 120.2 px wide) */
body[data-ui-tier="s"] .pas-row-pic.pas-row-pic--wide { flex-basis: 120.2px; width: 120.2px; }
body[data-ui-tier="s"] .pas-row-pic .pas-row-pdf,
body[data-ui-tier="s"] .pas-row-pic .pas-row-pdf canvas,
body[data-ui-tier="s"] .pas-row-pic .pas-row-pdf img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pas-row-initials { font-family: var(--font-display); font-size: var(--fs-20); color: var(--ink-muted); }
body[data-ui-tier="s"] .pas-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-left: 15.3px; padding-top: 1px; }
body[data-ui-tier="s"] .pas-row-name { max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-family: var(--font-display); font-size: 13.95px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; margin-top: 3px; }
body[data-ui-tier="s"][data-skin-family="glass"] .pas-row-name { color: var(--white); text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 55%, transparent); }
body[data-ui-tier="s"] .pas-row-main .pas-status { margin-top: 6.2px; }
body[data-ui-tier="s"] .pas-row-chev { flex: 0 0 auto; display: grid; place-items: center; width: 10px; margin: 0 12.3px 0 8px; color: var(--ink); }
body[data-ui-tier="s"] .pas-row-chev svg { width: 18.4px; height: 18.4px; stroke-width: 1.3; }

/* a status pill (outlined, the stage's dot) */
body[data-ui-tier="s"] .pas-status {
  display: inline-flex; align-items: center; gap: 6.5px; height: 16.2px; min-height: 0; padding: 0 10.5px 0 7.4px; max-width: 100%;
  border: 0; border-radius: var(--pk-radius-chip); background: color-mix(in srgb, var(--card-bg-solid) 86%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 26%, transparent);
  font-family: var(--font-body); font-size: 6px; font-weight: var(--fw-med); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-ui-tier="s"] .pas-status-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--pas-st, var(--ink-muted)); }
body[data-ui-tier="s"] .pas-page .pas-status { gap: 7.6px; font-size: 6.6px; letter-spacing: 0.012em; }
body[data-ui-tier="s"] .pas-page .pas-status-dot { flex: 0 0 4.7px; width: 4.7px; height: 4.7px; }
body[data-ui-tier="s"][data-skin-family="glass"] .pas-page .pas-status { --st-pending-2: oklch(from var(--sk-a2, var(--ink-muted)) calc(l - 0.104) calc(c * 0.36) calc(h + 8.6)); }

/* a library tab borrows the desktop page's section */
body[data-ui-tier="s"] .pas-desk { min-width: 0; margin-top: 12px; }
body[data-ui-tier="s"] .pas-page .pk-empty { margin-top: 16px; }

/* ════════ THE ASSET WINDOW ════════ */
body[data-ui-tier="s"] .pas-sheet .pk-header { min-height: 56px; align-items: center; }
body[data-ui-tier="s"] .pas-sheet .pk-header-main { white-space: normal; overflow: visible; }
body[data-ui-tier="s"] .pas-sheet-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-ui-tier="s"] .pas-eyebrow { font-family: var(--font-body); font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--track-14); text-transform: uppercase; color: var(--ink-muted); }
body[data-ui-tier="s"] .pas-sheet-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--fs-22); line-height: 1.02; letter-spacing: var(--track-02); text-transform: uppercase; }
body[data-ui-tier="s"] .pas-gen { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 12px; margin: 0 2px 0 0; cursor: pointer; border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); background-color: var(--cta-bg); color: var(--cta-ink); font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
body[data-ui-tier="s"] .pas-sheet .pk-sheet-body { gap: 10px; padding-bottom: calc(var(--pk-6) + env(safe-area-inset-bottom, 0px)); }

/* the picture */
body[data-ui-tier="s"] .pas-hero { position: relative; flex: 0 0 auto; min-width: 0; }
body[data-ui-tier="s"] .pas-hero-media {
  display: grid; place-items: center; width: 100%; min-height: 200px; max-height: 62vh; overflow: hidden;
  border-radius: var(--pk-radius-card); background: color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .pas-hero-media > img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
body[data-ui-tier="s"] .pas-hero-pdf { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
body[data-ui-tier="s"] .pas-hero-pdf canvas,
body[data-ui-tier="s"] .pas-hero-pdf img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
body[data-ui-tier="s"] .pas-hero-empty { padding: 48px 16px; color: var(--ink-muted); font-size: var(--fs-14); }
body[data-ui-tier="s"] .pas-hero-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: var(--pk-2); }
body[data-ui-tier="s"] .pas-tool { width: 40px; height: 40px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer; border: 2px solid transparent; background-clip: padding-box; border-radius: 50%; color: var(--white); background-color: color-mix(in srgb, var(--black) 62%, transparent); -webkit-tap-highlight-color: transparent; }
body[data-ui-tier="s"] .pas-flash {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 24px);
  padding: 8px 14px; border-radius: var(--pk-radius-control); background: color-mix(in srgb, var(--black) 72%, transparent); color: var(--white);
  font-size: var(--fs-13); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
body[data-ui-tier="s"] .pas-flash.is-bad { color: var(--danger); }

/* the window's cards (lighter than the sheet) */
body[data-ui-tier="s"] .pas-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: var(--pk-radius-card); background: color-mix(in srgb, var(--ink) 4%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .pas-cap { display: inline-flex; align-items: center; gap: var(--pk-2); font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--track-14); text-transform: uppercase; color: var(--ink-muted); }
body[data-ui-tier="s"] .pas-text { margin: 0; font-size: var(--fs-14); line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pas-rule { height: 1px; margin: 4px 0; background: var(--card-border); }

/* references | locked */
body[data-ui-tier="s"] .pas-stats { flex-direction: row; align-items: center; gap: var(--pk-3); padding: 2px 8px 2px 12px; }
body[data-ui-tier="s"] .pas-stat { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; font-size: var(--fs-14); color: var(--ink); }
body[data-ui-tier="s"] .pas-stat:first-child { flex: 1 1 auto; }
body[data-ui-tier="s"] .pas-stat-icon { display: grid; place-items: center; color: var(--ink-muted); }
body[data-ui-tier="s"] .pas-stat-sep { align-self: stretch; width: 1px; margin: 6px 0; background: var(--card-border); }

/* status: one pill per stage, the current one outlined in its colour */
body[data-ui-tier="s"] .pas-statuses { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 -4px; }
body[data-ui-tier="s"] .pas-st { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 8px; margin: 0; cursor: pointer; border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 4px); box-shadow: inset 0 0 0 1px var(--card-border); background-color: color-mix(in srgb, var(--ink) 4%, var(--card-bg-solid)); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-med); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
body[data-ui-tier="s"] .pas-st.is-on { box-shadow: inset 0 0 0 1.5px var(--pas-st, var(--accent)); font-weight: var(--fw-semi); background-color: color-mix(in srgb, var(--pas-st, var(--accent)) 14%, var(--card-bg-solid)); }

/* imported from */
body[data-ui-tier="s"] .pas-imported-row { display: flex; align-items: center; gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .pas-imported-icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--pk-radius-small); border: 1px solid var(--card-border); color: var(--ink-muted); }
body[data-ui-tier="s"] .pas-imported-path { flex: 1 1 auto; min-width: 0; font-size: var(--fs-12); line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }

/* notes */
body[data-ui-tier="s"] .pas-notes-n { margin-left: 2px; }
body[data-ui-tier="s"] .pas-notes-scope { display: flex; align-items: flex-end; gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .pas-tabs { flex: 0 0 auto; display: flex; gap: var(--pk-1); }
body[data-ui-tier="s"] .pas-tab { min-height: 40px; padding: 0 10px; margin: 0; cursor: pointer; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink-muted); font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-med); -webkit-tap-highlight-color: transparent; }
body[data-ui-tier="s"] .pas-tab.is-on { color: var(--ink); border-bottom-color: var(--accent); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pas-notes-on { flex: 1 1 auto; min-width: 0; padding-bottom: 10px; font-size: var(--fs-11); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pas-notes-empty { margin: 2px 0; text-align: center; font-style: italic; font-size: var(--fs-13); color: var(--ink-muted); }
body[data-ui-tier="s"] .pas-notes-empty.is-bad { color: var(--danger); font-style: normal; }
body[data-ui-tier="s"] .pas-compose { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 8px; border: 1px solid var(--input-border); border-radius: var(--pk-radius-control); background: var(--input-bg); }
body[data-ui-tier="s"] .pas-compose .pas-compose-input {
  box-shadow: none; outline: none; border-radius: 0;
  width: 100%; min-height: 48px; padding: 4px 6px; margin: 0; resize: none; border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-16); line-height: 22px; box-sizing: border-box;
}
body[data-ui-tier="s"] .pas-compose .pas-compose-input:focus { outline: none; border: 0; background: transparent; box-shadow: none; }
body[data-ui-tier="s"] .pas-compose-input::placeholder { color: var(--ink-muted); }
body[data-ui-tier="s"] .pas-compose-send { align-self: flex-end; min-height: 40px; padding: 0 18px; margin: 0; cursor: pointer; border: 0; border-radius: var(--pk-radius-control); background: var(--cta-bg); color: var(--cta-ink); font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pas-compose-send:disabled { opacity: 0.45; cursor: default; }

/* versions: Hero | WIP | Archived, then a 2-column grid */
body[data-ui-tier="s"] .pas-buckets { display: flex; flex-wrap: wrap; gap: var(--pk-2); }
body[data-ui-tier="s"] .pas-bucket { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 13px; margin: 0; cursor: pointer; border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 4px); box-shadow: inset 0 0 0 1px var(--card-border); background-color: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-med); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
body[data-ui-tier="s"] .pas-bucket-n { min-width: 2.6ch; font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .pas-buckets { flex-wrap: nowrap; }
body[data-ui-tier="s"] .pas-bucket.is-on { box-shadow: none; background-color: var(--accent); color: var(--ink-on-accent); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
body[data-ui-tier="s"] .pas-tile {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; margin: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid));
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pas-tile > img,
body[data-ui-tier="s"] .pas-tile .pas-tile-pdf,
body[data-ui-tier="s"] .pas-tile .pas-tile-pdf canvas,
body[data-ui-tier="s"] .pas-tile .pas-tile-pdf img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pas-tile.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
body[data-ui-tier="s"] .pas-tile--add { grid-column: 1 / -1; aspect-ratio: auto; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed color-mix(in srgb, var(--ink) 26%, transparent); background: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-med); }
body[data-ui-tier="s"] .pas-grid-empty { grid-column: 1 / -1; padding: 16px 0; text-align: center; font-size: var(--fs-14); color: var(--ink-muted); }

/* full view */
body[data-ui-tier="s"] .pas-zoom {
  position: fixed; inset: 0; z-index: calc(var(--z-mobile-drawer) + 30); display: grid; place-items: center;
  background: var(--black); padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
body[data-ui-tier="s"] .pas-zoom > img { max-width: 100%; max-height: 100%; object-fit: contain; }
body[data-ui-tier="s"] .pas-zoom-close { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; color: var(--white); background: color-mix(in srgb, var(--black) 55%, transparent); }

/* a narrow phone (360): a long name gets a third line before it is cut */
@media (max-width: 379px) {
  body[data-ui-tier="s"] .pas-row-name { font-size: var(--fs-17); -webkit-line-clamp: 3; }
}

/* ════════ THE ASSET WINDOW — Hugo's phone mockup 21 (6 Oct 2026), measured at 412 CSS px ════════
   A page of the phone app: the shell's bar stays on top (flat navy while the window is open) and the bottom bar under
   it; the window fills the space between, on a flat deep-navy page (no photo here). Pinned: the PROJECT bar, then the
   card's head (COVER ART / the name · GENERATE · edit | ✕). Scroll: the picture + references | Locked (the card's
   body), STATUS, DETAILS + USED IN, then one card of boxes: IMPORTED FROM, NOTES, VERSIONS. Solid near-opaque navy
   cards with a cool hairline, no glow anywhere; light comes only from colour (the amber pills, the teal Approved rim,
   the amber rim of the picked version). Small controls keep a 40px tap area (transparent border, equal negative margin). */
/* every skin: its own page and card colours (a pale skin stays pale); the dark glass skins (Hugo's mockup) go deep navy */
body[data-ui-tier="s"] .pas-sheet {
  --pas-page: var(--bg);
  --pas-card: var(--card-bg-solid);
  --pas-box: color-mix(in srgb, var(--card-bg-solid) 94%, var(--ink));
  --pas-title-ink: var(--ink);
  --pas-line: color-mix(in srgb, var(--sk-a2, var(--ink)) 26%, transparent);
  --pas-line-2: color-mix(in srgb, var(--sk-a2, var(--ink)) 36%, transparent);
  --pas-ink: color-mix(in srgb, var(--ink) 88%, var(--sk-a2, var(--ink)));
  --pas-ink-2: color-mix(in srgb, var(--ink-muted) 80%, var(--sk-a2, var(--ink-muted)));
  --pas-cap-ink: color-mix(in srgb, var(--ink-muted) 90%, var(--sk-a2, var(--ink-muted)));
  --pas-amber-hi: color-mix(in srgb, var(--accent) 45%, var(--badge-phase, var(--amber, var(--accent))));
  top: calc(var(--shl-hdr-h, 48px) + env(safe-area-inset-top, 0px)); bottom: var(--mtab-h); z-index: calc(var(--z-mobile-nav) - 2);
  padding: 0; background: var(--pas-page); color: var(--pas-ink);
}
body[data-ui-tier="s"][data-skin-family="glass"]:has(.pas-sheet) {
  --pas-navy: oklch(from var(--sk-deep, var(--bg)) calc(l - 0.012) calc(c * 1.44) calc(h - 6));
  --pas-navy-card: oklch(from var(--sk-deep, var(--bg)) calc(l + 0.031) calc(c * 1.64) calc(h - 4.7));
  --pas-navy-box: oklch(from var(--sk-deep, var(--bg)) calc(l + 0.026) calc(c * 1.68) calc(h - 6));
  --pas-navy-input: oklch(from var(--sk-deep, var(--bg)) calc(l + 0.046) calc(c * 1.69) h);
  --pas-navy-pill: oklch(from var(--sk-deep, var(--bg)) calc(l + 0.053) calc(c * 1.73) calc(h - 2));
}
body[data-ui-tier="s"][data-skin-family="glass"] .pas-sheet {
  --pas-page: var(--pas-navy);
  --pas-card: var(--pas-navy-card);
  --pas-box: var(--pas-navy-box);
  --pas-input: var(--pas-navy-input);
  --pas-pill: var(--pas-navy-pill);
  --pas-title-ink: var(--white);
  --pas-line: color-mix(in srgb, color-mix(in srgb, var(--sk-a2, var(--ink)) 50%, var(--ink-muted)) 21%, transparent);
  --pas-line-2: color-mix(in srgb, color-mix(in srgb, var(--sk-a2, var(--ink)) 50%, var(--ink-muted)) 30%, transparent);
  --pas-ink-2: oklch(from var(--ink-muted) calc(l - 0.06) calc(c * 3.2) calc(h + 9.6));
  --pas-cap-ink: oklch(from var(--ink-muted) calc(l + 0.034) calc(c * 2.7) calc(h + 9));
  --pas-gold: oklch(from var(--badge-phase, var(--accent)) calc(l + 0.08) calc(c * 1.153) calc(h + 13.5));
  --pas-gold-2: oklch(from var(--badge-phase, var(--accent)) calc(l + 0.002) calc(c * 1.153) calc(h - 3));
  --pas-gold-rim: oklch(from var(--badge-phase, var(--accent)) calc(l + 0.055) calc(c * 1.15) calc(h + 14));
  /* the status pills' dots: the bright signals (as drawn); the skins' own --st-* are untouched everywhere else */
  --st-pending-2: oklch(from var(--sk-a2, var(--ink-muted)) calc(l - 0.126) calc(c * 0.75) calc(h + 12));
  --st-first-pass: oklch(from var(--signal-amber) calc(l - 0.077) calc(c * 1.084) calc(h - 18.5));
  --st-wip: oklch(from var(--blue) calc(l - 0.042) calc(c * 2.65) calc(h - 3.5));
  --st-retake: oklch(from var(--signal-red) calc(l + 0.063) calc(c * 1.02) calc(h - 14.3));
  --st-hero: oklch(from var(--signal-green) calc(l + 0.129) calc(c * 0.93) calc(h + 13.7));
}

/* the bottom bar stays under the asset window (the window is a page of the phone app; the shell's bar as everywhere) */
body[data-ui-tier="s"]:has(.pas-sheet) nav.mtab-bar { visibility: visible; }

/* ── pinned: the PROJECT bar + the card's head ── */
body[data-ui-tier="s"] .pas-sheet .pas-sheet-top { position: relative; z-index: 2; flex: 0 0 auto; border: 0; gap: 0; background: var(--pas-page); }
body[data-ui-tier="s"] .pas-projbar {
  display: flex; align-items: center; gap: 0; width: 386.7px; max-width: calc(100% - 25.3px); height: 40px; margin: 8.1px 0 -4px 13.7px; padding: 0 0 0 0;
  border: 3.55px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; cursor: pointer; text-align: left;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 3.55px);
  background-color: var(--pas-card); box-shadow: inset 0 0 0 1px var(--pas-line); color: var(--pas-ink); font-family: var(--font-body);
}
body[data-ui-tier="s"] .pas-projbar-k { flex: 0 0 auto; width: 93px; padding-left: 17px; font-size: 9.6px; font-weight: var(--fw-med); letter-spacing: 0.22em; text-transform: uppercase; color: var(--pas-cap-ink); }
body[data-ui-tier="s"] .pas-projbar-v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.2px; color: var(--pas-ink); }
body[data-ui-tier="s"] .pas-projbar-caret { flex: 0 0 auto; display: grid; place-items: center; width: 15.1px; margin: 0 15.9px 0 8px; color: var(--pas-ink); }
body[data-ui-tier="s"] .pas-projbar-caret svg { width: 17px; height: 17px; }
body[data-ui-tier="s"] .pas-sheet .pas-head {
  display: flex; align-items: flex-end; gap: 0; height: 54.6px; margin: 8.9px 8.2px 0 9.6px; padding: 0 7.6px 6px 14.4px;
  border-radius: var(--pk-radius-card) var(--pk-radius-card) 0 0; background: var(--pas-card);
  box-shadow: inset 1px 0 0 var(--pas-line), inset -1px 0 0 var(--pas-line), inset 0 1px 0 var(--pas-line);
}
body[data-ui-tier="s"] .pas-sheet .pas-sheet-title { position: relative; top: 4px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; min-width: 0; padding-bottom: 2.2px; }
body[data-ui-tier="s"] .pas-sheet .pas-eyebrow { position: relative; top: 2px; font-family: var(--font-body); font-size: 9.6px; font-weight: var(--fw-med); line-height: 1; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pas-cap-ink); }
body[data-ui-tier="s"] .pas-sheet .pas-sheet-name {
  display: block; margin-top: 7.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: 24.3px; line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--pas-title-ink);
}
body[data-ui-tier="s"] .pas-sheet .pas-gen {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 91px; height: 40px; min-height: 0; margin: 0 0 -5.65px 8px; padding: 0;
  border: 5.65px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 5.65px);
  background-color: transparent; background-image: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--black)));
  box-shadow: inset 0 1px 0 var(--pas-amber-hi); color: var(--white);
  font-family: var(--font-body); font-size: 10px; font-weight: var(--fw-semi); letter-spacing: 0.16em; text-transform: uppercase;
}
body[data-ui-tier="s"] .pas-sheet .pas-headicon {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 -11px -3.8px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--pas-ink);
}
body[data-ui-tier="s"] .pas-sheet .pas-edit { margin-left: -2.9px; }
body[data-ui-tier="s"] .pas-sheet .pas-edit svg { width: 23px; height: 23px; }
body[data-ui-tier="s"] .pas-sheet .pas-close svg { width: 20.2px; height: 20.2px; }
body[data-ui-tier="s"] .pas-sheet .pas-head-rule { flex: 0 0 auto; width: 0.7px; height: 24.6px; margin: 0 7.8px 1.8px 7.4px; background: var(--pas-line); }

/* ── scroll ── */
body[data-ui-tier="s"] .pas-sheet .pas-sheet-body {
  display: block; gap: 0; padding: 0 8.2px 0 9.6px; scrollbar-width: none;
  padding-bottom: max(10px, calc(100dvh - var(--mtab-h) - 152.5px - 633px));
}
body[data-ui-tier="s"] .pas-sheet .pas-sheet-body::-webkit-scrollbar { display: none; }
/* the card's body (continues the head): the picture, then references | Locked */
body[data-ui-tier="s"] .pas-sheet .pas-coverbody {
  padding: 6.3px 6.9px 2.7px 6.8px; border-radius: 0 0 var(--pk-radius-card) var(--pk-radius-card); background: var(--pas-card);
  box-shadow: inset 1px 0 0 var(--pas-line), inset -1px 0 0 var(--pas-line), inset 0 -1px 0 var(--pas-line);
}
body[data-ui-tier="s"] .pas-sheet .pas-hero { position: relative; }
body[data-ui-tier="s"] .pas-sheet .pas-hero-media {
  display: grid; place-items: center; width: 100%; height: calc((100vw - 31.5px) * 0.9695); min-height: 0; max-height: none; overflow: hidden;
  border-radius: var(--pk-radius-card); background: var(--black);
}
body[data-ui-tier="s"] .pas-sheet .pas-hero-media > img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
body[data-ui-tier="s"] .pas-sheet .pas-hero-tools { top: 10.9px; right: 15.7px; gap: 13.1px; }
body[data-ui-tier="s"] .pas-sheet .pas-tool {
  width: 40.3px; height: 40.3px; margin: -1px; border: 1px solid transparent; background-clip: padding-box;
  background-color: color-mix(in srgb, var(--pas-navy, color-mix(in srgb, var(--black) 50%, var(--bg))) 94%, transparent); color: var(--white);
}
body[data-ui-tier="s"] .pas-sheet .pas-tool svg { width: 16px; height: 16px; }
body[data-ui-tier="s"] .pas-sheet .pas-stats {
  display: flex; align-items: center; gap: 0; height: 37px; margin-top: 4.8px; padding: 0 5.4px 0 7.6px; border: 0; background: transparent;
}
body[data-ui-tier="s"] .pas-sheet .pas-stat-tile {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; margin: -4.25px -3px; padding: 0; cursor: pointer;
  border: 4.25px solid transparent; border-left-width: 3px; border-right-width: 3px; background-clip: padding-box;
  border-radius: calc(var(--pk-radius-control) + 3px) / calc(var(--pk-radius-control) + 4.25px); background-color: transparent; box-shadow: inset 0 0 0 1px var(--pas-line-2); color: var(--pas-ink);
}
body[data-ui-tier="s"] .pas-sheet .pas-stat-tile svg { width: 19px; height: 19px; }
body[data-ui-tier="s"] .pas-sheet .pas-stat-text { flex: 0 0 auto; margin-left: 10.2px; font-family: var(--font-body); font-size: 12.4px; color: var(--pas-ink); white-space: nowrap; }
body[data-ui-tier="s"] .pas-sheet .pas-stat-sep { flex: 0 0 auto; align-self: center; width: 0.7px; height: 27.4px; margin: 0 0 0 auto; background: var(--pas-line); }
body[data-ui-tier="s"] .pas-sheet .pas-stat-lock { flex: 0 0 auto; display: grid; place-items: center; width: 15.1px; height: 19.2px; margin-left: 35.3px; color: oklch(from var(--sk-a2, var(--ink-muted)) calc(l + 0.156) calc(c * 0.85) calc(h + 19)); }
body[data-ui-tier="s"] .pas-sheet .pas-stat-lock svg { width: 23.4px; height: 23.4px; }
body[data-ui-tier="s"] .pas-sheet .pas-stat-locked { margin-left: 20.8px; margin-right: 17px; }
body[data-ui-tier="s"] .pas-sheet .pk-toggle { flex: 0 0 auto; width: 58.9px; height: 40px; margin: -1.5px 0; }
body[data-ui-tier="s"] .pas-sheet .pk-toggle::before { left: 0; right: 0; top: 4.95px; height: 30.1px; background: var(--pas-box); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sk-a2, var(--ink)) 34%, transparent); }
body[data-ui-tier="s"] .pas-sheet .pk-toggle::after { left: 1.6px; top: 6.5px; width: 27px; height: 27px; border-radius: 50%; background: color-mix(in srgb, var(--sk-a2, var(--ink)) 62%, var(--ink)); box-shadow: none; }
body[data-ui-tier="s"] .pas-sheet .pk-toggle[aria-checked="true"]::before { background: color-mix(in srgb, var(--accent) 30%, var(--pas-box)); }
body[data-ui-tier="s"] .pas-sheet .pk-toggle[aria-checked="true"]::after { transform: translateX(28.7px); background: var(--accent); }

/* cards */
body[data-ui-tier="s"] .pas-sheet .pas-card {
  display: block; gap: 0; padding: 0; margin-top: 9.5px; border: 0; border-radius: var(--pk-radius-card);
  background: var(--pas-card); box-shadow: inset 0 0 0 1px var(--pas-line);
}
body[data-ui-tier="s"] .pas-sheet .pas-cap { display: block; font-family: var(--font-body); font-size: 9.6px; font-weight: var(--fw-med); line-height: 1; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pas-cap-ink); }
body[data-ui-tier="s"] .pas-sheet .pas-status-card { height: 65px; margin-left: 0.7px; padding: 9.6px 9px 0 12.3px; }
body[data-ui-tier="s"] .pas-sheet .pas-status-card .pas-cap { padding-left: 6.1px; }
body[data-ui-tier="s"] .pas-sheet .pas-statuses { display: flex; flex-wrap: nowrap; gap: 0 4.9px; margin: 6.3px 0 0; }
body[data-ui-tier="s"] .pas-sheet .pas-st {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7.6px; height: 40px; min-height: 0; margin: -4.25px 0; padding: 0 10.4px 0 9.5px;
  border: 4.25px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 4.25px);
  background-color: var(--pas-pill, color-mix(in srgb, var(--pas-card) 80%, var(--sk-a2, var(--card-bg-solid)))); box-shadow: inset 0 0 0 1px var(--pas-line-2);
  color: var(--pas-ink); font-family: var(--font-body); font-size: 10px; font-weight: var(--fw-reg, 400); white-space: nowrap;
}
body[data-ui-tier="s"] .pas-sheet .pas-st .pas-status-dot { flex: 0 0 11px; width: 11px; height: 11px; }
body[data-ui-tier="s"] .pas-sheet .pas-st.is-on {
  height: 40.7px; margin: -4.25px 0; background-color: var(--pas-box);
  box-shadow: inset 0 0 0 1.5px oklch(from var(--pas-st, var(--accent)) calc(l - 0.069) calc(c * 0.76) calc(h + 15)), inset 0 0 5px color-mix(in srgb, var(--pas-st, var(--accent)) 9%, transparent);
  font-weight: var(--fw-reg, 400);
}
body[data-ui-tier="s"] .pas-sheet .pas-details-card { height: 130px; margin-left: 0.7px; margin-top: 10.3px; padding: 11px 13px 0 18.4px; }
body[data-ui-tier="s"] .pas-sheet .pas-text { margin: 9.6px 0 0; font-family: var(--font-body); font-size: 13.6px; line-height: 20px; color: var(--pas-ink); overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pas-sheet .pas-text em { font-style: italic; }
body[data-ui-tier="s"] .pas-sheet .pas-text.is-empty { font-style: italic; margin-top: 6.6px; font-size: 13.4px; }
body[data-ui-tier="s"] .pas-sheet .pas-rule { height: 0.7px; margin: 8.2px 0 10.4px -0.6px; background: var(--pas-line); }

/* the card of boxes: IMPORTED FROM, NOTES, VERSIONS */
body[data-ui-tier="s"] .pas-sheet .pas-more-card { margin-top: 10.5px; padding: 9px 4.1px 0.6px; }
body[data-ui-tier="s"] .pas-sheet .pas-box {
  display: block; padding: 0; border-radius: var(--pk-radius-card); background: var(--pas-box); box-shadow: inset 0 0 0 1px var(--pas-line);
}
body[data-ui-tier="s"] .pas-sheet .pas-imported { position: relative; height: 69.1px; padding: 10.3px 11px 0 11.7px; }
body[data-ui-tier="s"] .pas-sheet .pas-imported-row { display: flex; align-items: flex-start; gap: 0; margin-top: 9.7px; }
body[data-ui-tier="s"] .pas-sheet .pas-imported-icon {
  flex: 0 0 32.9px; width: 32.9px; height: 35.6px; margin-top: 0; display: grid; place-items: center; border: 0;
  border-radius: var(--pk-radius-control); box-shadow: inset 0 0 0 1px var(--pas-line-2); color: var(--pas-ink);
}
body[data-ui-tier="s"] .pas-sheet .pas-imported-icon svg { width: 20px; height: 20px; }
body[data-ui-tier="s"] .pas-sheet .pas-imported-path {
  flex: 1 1 auto; min-width: 0; max-height: 30px; margin: 1.5px 0 0 11.6px; display: block; overflow: hidden;
  font-family: var(--font-body); font-size: 11px; line-height: 15px; color: var(--pas-ink-2); overflow-wrap: anywhere;
}
body[data-ui-tier="s"] .pas-sheet .pas-imported-copy {
  position: absolute; right: 7.5px; top: 15.2px; display: grid; place-items: center; width: 40.9px; height: 40.9px; margin: 0; padding: 0; cursor: pointer;
  border: 4px solid transparent; background-clip: padding-box; border-radius: 50%; background-color: transparent; box-shadow: inset 0 0 0 1px var(--pas-line-2); color: var(--pas-ink);
}
body[data-ui-tier="s"] .pas-sheet .pas-imported-copy svg { width: 16px; height: 16px; }
body[data-ui-tier="s"] .pas-sheet .pas-imported-path::before { content: ""; float: right; width: 30px; height: 15px; }
body[data-ui-tier="s"] .pas-sheet .pas-imported + .pas-notes { margin-top: 13.7px; }
body[data-ui-tier="s"] .pas-sheet .pas-notes { position: relative; display: block; min-height: 165.6px; padding: 6.2px 9.2px 9.7px 8.2px; }
body[data-ui-tier="s"] .pas-sheet .pas-notes .pas-cap { padding-left: 3.5px; }
body[data-ui-tier="s"] .pas-sheet .pas-notes-scope {
  position: relative; display: flex; align-items: flex-end; gap: 0; height: 33.5px; margin-top: 2.6px; box-shadow: inset 0 -0.7px 0 var(--pas-line);
}
body[data-ui-tier="s"] .pas-sheet .pas-tabs { display: flex; gap: 10.8px; padding-left: 0; }
body[data-ui-tier="s"] .pas-sheet .pas-tab:not(.is-on) { width: 61.6px; }
body[data-ui-tier="s"] .pas-sheet .pas-tab {
  min-height: 0; height: 40px; margin: 0; padding: 0 0 7px; display: inline-flex; align-items: flex-end; justify-content: center; border: 0; border-radius: 0;
  border-bottom: 2.5px solid transparent; background: transparent; color: color-mix(in srgb, var(--pas-ink) 70%, var(--pas-ink-2)); font-family: var(--font-body); font-size: 13.2px; font-weight: var(--fw-reg, 400);
}
body[data-ui-tier="s"] .pas-sheet .pas-tab.is-on { width: 96.5px; color: var(--pas-ink); border-bottom-color: var(--pas-gold-rim, var(--pas-amber-hi)); font-weight: var(--fw-reg, 400); }
body[data-ui-tier="s"] .pas-sheet .pas-notes-on {
  flex: 1 1 auto; align-self: flex-start; margin: -5px 0 0 28px; padding: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal;
  overflow: hidden; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 8.6px; line-height: 12.3px; font-style: italic; color: var(--pas-ink-2);
}
body[data-ui-tier="s"] .pas-sheet .pas-notes-on em { font-style: italic; }
body[data-ui-tier="s"] .pas-sheet .pas-notes-empty { margin: 13px 0 0; text-align: center; font-family: var(--font-body); font-size: 13.4px; font-style: italic; color: var(--pas-ink-2); }
body[data-ui-tier="s"] .pas-sheet .pas-notes .psh-note-list { margin-top: 10px; }
body[data-ui-tier="s"] .pas-sheet .pas-compose {
  position: relative; display: block; height: 63.6px; margin: 7.3px 0 0 3.4px; padding: 0; border: 0; border-radius: var(--pk-radius-control);
  background: var(--pas-input, color-mix(in srgb, var(--pas-box) 82%, var(--sk-a2, var(--card-bg-solid)))); box-shadow: inset 0 0 0 1px var(--pas-line-2);
}
body[data-ui-tier="s"] .pas-sheet .pas-compose .pas-compose-input {
  display: block; width: 100%; height: 100%; min-height: 0; padding: 11px 128px 8px 12.4px; margin: 0; border: 0; resize: none; background: transparent; box-shadow: none;
  color: var(--pas-ink); font-family: var(--font-body); font-size: 13.4px; line-height: 18px;
}
body[data-ui-tier="s"] .pas-sheet .pas-compose-input::placeholder { color: var(--pas-ink-2); }
body[data-ui-tier="s"] .pas-sheet .pas-compose-send {
  position: absolute; right: 3.6px; bottom: 5.4px; width: 109.5px; height: 40px; min-height: 0; margin: 0 0 -3.25px; padding: 0;
  border: 3.25px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 3.25px);
  background-color: transparent; background-image: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 66%, var(--black)));
  box-shadow: inset 0 1px 0 var(--pas-amber-hi); color: var(--white); font-family: var(--font-body); font-size: 12.2px; font-weight: var(--fw-med);
}
body[data-ui-tier="s"] .pas-sheet .pas-compose-send:disabled { opacity: 1; cursor: default; }
body[data-ui-tier="s"] .pas-sheet .pas-versions { margin-top: 11.7px; min-height: 363.4px; padding: 8.2px 7.6px 8.7px 6.2px; }
body[data-ui-tier="s"] .pas-sheet .pas-versions .pas-cap { padding-left: 3.4px; }
body[data-ui-tier="s"] .pas-sheet .pas-buckets { display: flex; flex-wrap: nowrap; gap: 0 8.8px; margin: 7.5px 0 0 2.7px; }
body[data-ui-tier="s"] .pas-sheet .pas-bucket {
  display: inline-flex; align-items: center; justify-content: center; gap: 0; min-width: 95.1px; height: 40px; min-height: 0; margin: -6px 0; padding: 0 18px;
  border: 6px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 6px);
  background-color: var(--pas-pill, color-mix(in srgb, var(--pas-box) 84%, var(--sk-a2, var(--card-bg-solid)))); box-shadow: inset 0 0 0 1px var(--pas-line-2);
  color: var(--pas-ink); font-family: var(--font-body); font-size: 12.3px; font-weight: var(--fw-reg, 400); white-space: nowrap;
}
body[data-ui-tier="s"] .pas-sheet .pas-bucket.is-on {
  height: 40px; border-width: 6px; border-left-width: 0; border-right-width: 0; margin: -6px 0;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 6px);
  background-color: transparent; background-image: linear-gradient(to bottom, var(--pas-gold, var(--badge-phase, var(--pas-amber-hi))), var(--pas-gold-2, color-mix(in srgb, var(--accent) 50%, var(--badge-phase, var(--accent))))); box-shadow: none; color: color-mix(in srgb, var(--bg) 70%, var(--black)); font-weight: var(--fw-med);
}
body[data-ui-tier="s"] .pas-sheet .pas-grid { display: grid; grid-template-columns: 177.9px 1fr; gap: 11.7px 8.9px; margin-top: 7px; padding-left: 0; }
body[data-ui-tier="s"] .pas-sheet .pas-tile {
  width: 100%; height: 98.2px; aspect-ratio: auto; border: 0; border-radius: var(--pk-radius-control); background: var(--black);
  box-shadow: inset 0 0 0 1px var(--pas-line-2);
}
body[data-ui-tier="s"] .pas-sheet .pas-tile.is-on { box-shadow: none; }
body[data-ui-tier="s"] .pas-sheet .pas-tile.is-on::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--pk-radius-control); pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--pas-gold-rim, var(--badge-phase, var(--accent)));
}
body[data-ui-tier="s"] .pas-sheet .pas-tile--add {
  grid-column: 1 / -1; height: 75.3px; min-height: 0; margin: 1.3px 0 0 1.4px; width: calc(100% - 1.4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  border: 1.5px dashed color-mix(in srgb, var(--sk-a2, var(--ink)) 45%, transparent); border-radius: var(--pk-radius-control);
  background: var(--pas-pill, color-mix(in srgb, var(--pas-box) 88%, var(--sk-a2, var(--card-bg-solid)))); box-shadow: none;
  color: var(--pas-ink-2); font-family: var(--font-body); font-size: 13.4px; font-weight: var(--fw-reg, 400);
}
body[data-ui-tier="s"] .pas-sheet .pas-add-plus { display: grid; place-items: center; width: 22px; height: 22px; color: var(--pas-ink); }
body[data-ui-tier="s"] .pas-sheet .pas-add-plus svg { width: 26px; height: 26px; }
body[data-ui-tier="s"] .pas-sheet .pas-flash { bottom: 14px; }

/* ════════ THE ASSET WINDOW, ROUND 2 (6 Oct 2026) — the shell under and over it, as mockup 21 draws them ════════
   Only while the window is open (the shell's own header row and bottom bar are unchanged on every other page). */
/* the card's head runs on into whatever scrolls under it: a 6px skirt of the card (its side rims) hides the top rim of
   the card passing beneath, so the title row and IMPORTED FROM read as ONE card (no seam) */
body[data-ui-tier="s"] .pas-sheet .pas-head { position: relative; }
body[data-ui-tier="s"] .pas-sheet .pas-head::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; pointer-events: none;
  background: var(--pas-card); box-shadow: inset 1px 0 0 var(--pas-line), inset -1px 0 0 var(--pas-line);
}

/* 7 Oct 2026 — the asset window's note cards (mockup 21). They lived in phone-shots.css beside the shot window's; the
   shot window went back to the version Hugo approved ("it was perfect and I told you not to touch it"), so the asset
   window keeps its own copy here, scoped to .pas-sheet. */
body[data-ui-tier="s"] .pas-sheet .psh-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .pas-sheet .psh-note {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--pk-radius-control);
  background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--psh-hair, var(--card-border));
}
body[data-ui-tier="s"] .pas-sheet .psh-note.is-resolved { opacity: 0.6; }
body[data-ui-tier="s"] .pas-sheet .psh-note-av {
  flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, var(--card-bg-solid)); color: var(--ink); font-size: 10px; font-weight: var(--fw-bold);
}
body[data-ui-tier="s"] .pas-sheet .psh-note-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
body[data-ui-tier="s"] .pas-sheet .psh-note-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; width: 100%; }
body[data-ui-tier="s"] .pas-sheet .psh-note-who { font-size: 12px; font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pas-sheet .psh-note-when { font-size: 10.5px; color: var(--ink-muted); }
body[data-ui-tier="s"] .pas-sheet .psh-note-tag {
  padding: 1px 6px; border-radius: var(--pk-radius-small); font-size: 10px; color: var(--ink-muted); cursor: default; border: 0;
  background: color-mix(in srgb, var(--ink) 8%, transparent); font-family: var(--font-body);
}
body[data-ui-tier="s"] .pas-sheet .psh-note-tag.is-link { cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }
body[data-ui-tier="s"] .pas-sheet .psh-note-text { max-width: 100%; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
/* Resolve sits at the end of the name line (40px to tap, pulled into the card's padding so the line stays short) */
body[data-ui-tier="s"] .pas-sheet .psh-note-resolve {
  margin: -12px -8px -12px auto; min-height: 40px; padding: 0 8px; cursor: pointer; border: 0; border-radius: var(--pk-radius-control);
  background: transparent; color: var(--accent); font-family: var(--font-body); font-size: 11.5px; font-weight: var(--fw-semi);
}
body[data-ui-tier="s"] .pas-sheet .psh-notes-more {
  align-self: flex-start; min-height: 40px; padding: 0 12px; margin: 0 0 0 -6px; cursor: pointer; border: 0; border-radius: var(--pk-radius-control);
  background: transparent; color: var(--ink-muted); font-family: var(--font-body); font-size: 11.5px; font-weight: var(--fw-semi);
}
/* 26 Oct 2026 — a category with details_top (kids-series characters): the Details card leads with its short lines
   ("Where from: …", two lines at most each while the fold is shut); the sheet's own small text button (More / Less,
   .psh-notes-more) sits at the end of the Details caption (40 px to tap, pulled into the line like Resolve, so the
   caption keeps its height and the button never moves) and opens the rest below the lines; the card grows inside the
   sheet's scroll instead of keeping 130 px. */
body[data-ui-tier="s"] .pas-sheet .pas-aid-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body[data-ui-tier="s"] .pas-sheet .pas-details-card.is-fold { height: auto; min-height: 130px; padding-bottom: 11px; }
body[data-ui-tier="s"] .pas-sheet .pas-aid-line + .pas-aid-line { margin-top: 4px; }
body[data-ui-tier="s"] .pas-sheet .pas-aid-line.is-short { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body[data-ui-tier="s"] .pas-sheet .pas-aid-k { color: var(--pas-cap-ink); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pas-sheet .pas-aid-more { align-self: center; margin: -15px -8px -15px auto; }