/* =========================================================================
   MarinovOS — records.css
   Owner: records worker. Scoped under .app-records. Consumes shell.css
   tokens and shared classes only.

   Layout contract (Deep Audit "03 Records", revised after the strict review
   of 2026-09-10):
     landing content area ~920px. An identity band (name, status, one line,
     one amber action) sits above a two-column feature row: a SMALL record
     object (stage 200–260px tall) beside a LARGER capture of the website,
     which is itself the control that opens that project's website view.
     Handling the object is a disclosure below the row; the artwork credit
     is not.
     case: one header block (small anchor, name, status, one sentence, one
     disclosure), then tabs, then the capture. On a website tab the page
     chips, device toggle and live link ride inside the capture's own chrome
     bar so the capture is the dominant element on first paint.
   ========================================================================= */

.app-records{
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--space-6);
}
.app-records > *{ max-width:920px; margin-left:auto; margin-right:auto; }
.app-records h2,.app-records h3{ margin:0; }
.app-records p{ margin:0; }
.app-records img{ display:block; }

/* =========================== LANDING ================================== */
.app-records .rec-landing{ display:flex; flex-direction:column; gap:var(--space-4); }

.app-records .rec-landing-head{ display:flex; flex-direction:column; gap:2px; }
.app-records .rec-landing-title{
  font-family:var(--font-serif);
  font-size:28px; font-weight:500; letter-spacing:-.01em; line-height:1.1;
}
.app-records .rec-landing-line{ color:var(--ink-2); font-size:13.5px; max-width:74ch; }

/* Explicit, labelled three-project selector — no arrow-only navigation. */
.app-records .rec-select{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.app-records .rec-select-btn{
  display:flex; flex-direction:column; gap:1px; align-items:flex-start;
  min-height:46px;
  padding:6px var(--space-4);
  border-radius:var(--radius-md);
  background:var(--paper-2);
  border:1px solid var(--line);
  color:var(--ink-2);
  text-align:left;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.app-records .rec-select-btn:hover{ border-color:var(--line-2); }
.app-records .rec-select-name{ font-size:14px; font-weight:600; color:var(--ink); }
.app-records .rec-select-status{ font-size:11.5px; color:var(--ink-3); }
.app-records .rec-select-btn[aria-pressed="true"]{
  background:var(--blue-100); border-color:var(--blue-300);
}
.app-records .rec-select-btn[aria-pressed="true"] .rec-select-name,
.app-records .rec-select-btn[aria-pressed="true"] .rec-select-status{ color:var(--blue-700); }

/* Identity band. Name, status, one sentence and the single amber action sit
   on one row above the feature, so all four are visible without scrolling
   whatever height the feature row takes. */
.app-records .rec-ident{
  display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;
}
.app-records .rec-ident-text{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.app-records .rec-ident-top{ display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.app-records .rec-rail-name{
  font-family:var(--font-serif);
  font-size:24px; font-weight:500; letter-spacing:-.01em; line-height:1.15;
}
.app-records .rec-rail-status{ flex:none; align-self:center; }
.app-records .rec-rail-line{ color:var(--ink-2); font-size:13.5px; max-width:72ch; }
.app-records .rec-open{ flex:none; margin-left:auto; }

/* Feature row: a smaller record object beside a substantial capture of the
   website. The capture is the larger of the two and is itself the control
   that opens that project's website view. */
.app-records .rec-feature{
  --rec-stage-h:clamp(200px, 30vh, 260px);
  /* 1.72 / 1.16 — the object's own reserved box ratio, so the model fills its
     zone instead of floating in a taller one. The track is stated explicitly:
     an `auto` track would size itself from the object, which sizes itself
     from the track. */
  --rec-stage-w:calc(var(--rec-stage-h) * 1.4828);
  display:grid;
  grid-template-columns:minmax(0, var(--rec-stage-w)) minmax(0,1fr);
  gap:var(--space-5);
  align-items:stretch;
}
.app-records .rec-stage{
  min-width:0;
  height:var(--rec-stage-h);
  width:100%;
  display:grid;
  align-items:center; justify-items:start;
}
/* The object is anchored to the left of its reserved zone so the composition
   reads sleeve -> disc -> capture, instead of floating mid-column. */
.app-records .rec-stage-host{
  width:100%; height:100%;
  display:grid; align-items:center; justify-items:start;
}

.app-records .rec-preview{
  min-width:0; height:var(--rec-stage-h);
  display:flex; flex-direction:column; gap:6px; align-items:stretch;
  text-align:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.app-records .rec-preview:hover,
.app-records .rec-preview:focus-visible{ transform:translateY(-3px); }
.app-records .rec-preview-frame{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  border:1px solid var(--line-2);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--paper-2);
  box-shadow:10px 14px 30px rgba(12,20,44,.18);
}
.app-records .rec-preview-chrome{
  flex:none; height:20px;
  display:flex; align-items:center; gap:5px;
  padding:0 9px;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.app-records .rec-preview-body{
  flex:1 1 auto; min-height:0; display:grid; overflow:hidden;
}
.app-records .rec-preview-img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.app-records .rec-preview-fallback{
  place-self:center; padding:var(--space-4);
  font-size:12px; color:var(--ink-3); text-align:center;
}
.app-records .rec-preview-cap{ flex:none; font-size:11.5px; color:var(--ink-3); }
.app-records .rec-preview:hover .rec-preview-cap{ color:var(--ink-2); }

/* Everything that is not the identity, the object or the capture lives
   beneath the feature row. Handling the object is a disclosure; the artwork
   credit is not. */
.app-records .rec-below{ display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; }
.app-records .rec-object-tools{ width:100%; font-size:13px; color:var(--ink-2); }
.app-records .rec-object-tools-summary{
  cursor:pointer; width:fit-content;
  display:flex; align-items:center; gap:6px;
  min-height:32px;
  font-size:12.5px; color:var(--ink-2);
}
.app-records .rec-object-tools-summary:hover{ color:var(--ink); }
.app-records .rec-object-tools-body{
  display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start;
  margin-top:var(--space-2); padding-left:var(--space-3);
  border-left:2px solid var(--line);
}
.app-records .rec-objstate{ font-size:12px; color:var(--ink-3); min-height:1.2em; }
.app-records .rec-objcontrols{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.app-records .rec-ctl{ font-size:13px; }
.app-records .rec-inspect{ width:100%; }
.app-records .rec-inspect-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-2); }
.app-records .rec-inspect-note{
  font-size:11.5px; color:var(--ink-3);
  border-left:2px solid var(--line-2);
  padding-left:var(--space-3);
}
.app-records .rec-hint{ font-size:12px; color:var(--ink-3); }
.app-records .rec-model-note{ font-size:11.5px; color:var(--ink-3); max-width:74ch; }
.app-records .rec-credit{ font-size:11.5px; color:var(--ink-3); }

/* Blue Key's landing object: a paper site folio, not a record. Equal weight. */
.app-records .rec-paperobject{
  padding:0; background:none; border:0;
  width:min(100%, 84%);
  aspect-ratio:4/3;
  cursor:pointer;
  transform:translateY(0);
  transition:transform var(--dur-base) var(--ease-out);
}
.app-records .rec-paperobject:hover,
.app-records .rec-paperobject:focus-visible{ transform:translateY(-3px); }
.app-records .rec-paperobject-face{
  position:relative;
  width:100%; height:100%;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#efece4;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.8),
    inset 0 0 0 1px rgba(16,24,40,.12),
    10px 14px 30px rgba(12,20,44,.20);
}
.app-records .rec-paperobject-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top;
}
.app-records .rec-paperobject-fallback{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:12px; color:var(--ink-3);
}

/* =========================== CASE ===================================== */
.app-records .rec-case{ display:flex; flex-direction:column; gap:var(--space-3); }
.app-records .rec-case-top{ display:flex; }
.app-records .rec-back{ display:inline-flex; align-items:center; gap:6px; }
.app-records .rec-back svg{ width:18px; height:18px; }

/* The object shrinks to a small identity anchor; the work takes the space.
   One header block: anchor, name, status and one sentence. */
.app-records .rec-case-header{ display:flex; align-items:flex-start; gap:var(--space-4); }
/* The shared object refuses to build below S = 80 (its own floor), so the
   anchor reserves a smaller box and scales the built object down into it.
   Transform does not affect layout, so the header row stays this short and
   the object no longer runs over the sentence beside it. */
.app-records .rec-anchor{
  --rec-anchor-s:80;
  --rec-anchor-scale:.7;
  flex:none;
  width:calc(var(--rec-anchor-s) * 1.72px * var(--rec-anchor-scale));
  height:calc(var(--rec-anchor-s) * 1.16px * var(--rec-anchor-scale));
  display:grid; place-items:start;
}
.app-records .rec-anchor > .ro{
  transform:scale(var(--rec-anchor-scale));
  transform-origin:left top;
}
.app-records .rec-anchor-paper{
  width:74px; height:56px; border-radius:var(--radius-sm); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.14), 4px 6px 14px rgba(12,20,44,.18);
}
.app-records .rec-anchor-paper-img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.app-records .rec-case-id{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:4px; }
.app-records .rec-case-title-row{ display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.app-records .rec-case-name{
  font-family:var(--font-serif);
  font-size:28px; font-weight:500; letter-spacing:-.02em; line-height:1.15;
}
.app-records .rec-case-tag{ flex:none; align-self:center; }
.app-records .rec-case-line{ color:var(--ink-2); font-size:13.5px; max-width:70ch; }

/* Contribution + responsibilities are one disclosure inside the header: the
   summary carries the claim, the bullets carry the detail on request. */
.app-records .rec-responsibilities{ font-size:12.5px; color:var(--ink-2); }
.app-records .rec-responsibilities summary{
  cursor:pointer; width:fit-content;
  min-height:28px; display:flex; align-items:flex-start; gap:7px; line-height:1.4;
  color:var(--ink-2);
}
/* Marker rides the first line when the summary wraps (phone widths). */
.app-records .rec-responsibilities summary::before{ margin-top:.45em; }
.app-records .rec-responsibilities summary:hover{ color:var(--ink); }

/* Flex summaries drop the UA disclosure marker, so both disclosures in this
   app draw their own: one triangle, rotating on open. */
.app-records .rec-responsibilities summary,
.app-records .rec-object-tools-summary{ list-style:none; }
.app-records .rec-responsibilities summary::-webkit-details-marker,
.app-records .rec-object-tools-summary::-webkit-details-marker{ display:none; }
.app-records .rec-responsibilities summary::before,
.app-records .rec-object-tools-summary::before{
  content:''; flex:none;
  width:0; height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out);
}
.app-records .rec-responsibilities[open] > summary::before,
.app-records .rec-object-tools[open] > .rec-object-tools-summary::before{ transform:rotate(90deg); }
.app-records.is-motion-reduced .rec-responsibilities summary::before,
.app-records.is-motion-reduced .rec-object-tools-summary::before{ transition:none; }
.app-records .rec-resp-list{ margin:var(--space-2) 0 0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }

.app-records .rec-tabs{ overflow-x:auto; flex-wrap:nowrap; }
.app-records .rec-tabs > button{ flex:none; }
.app-records .rec-panel{
  min-height:220px; outline-offset:4px;
  display:flex; flex-direction:column; gap:var(--space-3);
}
.app-records .rec-panel > .rec-section + .rec-section{ margin-top:var(--space-5); }

/* ---------- pickers ---------- */
.app-records .rec-picker{
  display:flex; gap:var(--space-2);
  overflow-x:auto; padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.app-records .rec-chip{
  flex:none; min-height:40px; padding:0 15px;
  border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line);
  color:var(--ink-2); font-size:13px; white-space:nowrap;
}
.app-records .rec-chip[aria-pressed="true"]{ background:var(--blue-600); color:#fff; border-color:var(--blue-600); }
.app-records .rec-chip-sub{ min-height:34px; font-size:12.5px; padding:0 13px; }
.app-records .rec-picker-sub .rec-chip[aria-pressed="true"]{
  background:var(--blue-100); color:var(--blue-700); border-color:var(--blue-300);
}
.app-records .rec-tools{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.app-records .rec-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.app-records .rec-live svg{ width:16px; height:16px; }

/* ---------- Website tabs: one control row, inside the frame ---------- */
/* Page choice, device choice and the live link ride in the capture's own
   chrome bar, so the capture is the dominant element instead of the third
   row down. Destination grouping is not printed: the chips name it. */
.app-records .rec-max-row{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:nowrap; }
.app-records .rec-max-pages{ flex:1 1 auto; min-width:0; }
.app-records .rec-max-tools{ display:flex; align-items:center; gap:var(--space-3); flex:none; margin-left:auto; }

/* ---------- artifact frame ---------- */
.app-records .rec-artifact{ margin:0; display:flex; flex-direction:column; gap:var(--space-2); }
.app-records .rec-frame{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--paper);
}
.app-records .rec-frame-chrome{
  height:26px; display:flex; align-items:center; gap:6px;
  padding:0 10px; background:var(--paper-2); border-bottom:1px solid var(--line);
}
.app-records .rec-frame-dots{ display:flex; align-items:center; gap:6px; flex:none; }
.app-records .rec-frame-chrome.has-controls{
  height:auto; min-height:48px;
  padding:4px var(--space-3); gap:var(--space-3);
  flex-wrap:wrap;
}
.app-records .rec-frame-controls{
  display:flex; align-items:center; gap:var(--space-3);
  flex:1 1 auto; min-width:0;
}
/* Chips and the segmented control sit on the chrome's own paper-2 field, so
   they take the lighter surface to stay legible. */
.app-records .rec-frame-chrome .rec-chip{ background:var(--paper); padding:0 12px; }
.app-records .rec-frame-chrome .rec-chip[aria-pressed="true"]{
  background:var(--blue-600); color:#fff; border-color:var(--blue-600);
}
.app-records .rec-frame-chrome .seg{ background:var(--paper); }
.app-records .rec-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-2); }
.app-records .rec-frame-body{ background:var(--paper-2); max-height:min(64vh, 640px); overflow:hidden; }
.app-records .rec-frame-img{ width:100%; height:auto; }
/* Landscape scene renders: centre the crop instead of top-anchoring it, so
   the subject of the frame is what you see. */
.app-records .rec-artifact.is-centered .rec-frame-body{ height:min(42vh, 380px); }
.app-records .rec-artifact.is-centered .rec-frame-img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.app-records .rec-artifact.is-mobile .rec-frame{ max-width:300px; margin:0 auto; }
.app-records .rec-artifact.is-mobile .rec-frame-body{ max-height:min(46vh, 420px); }
/* When the frame carries the control row, the frame keeps its full width on
   the mobile device view and the phone capture is centred inside it — the
   controls must not be squeezed into a 300px column. */
.app-records .rec-artifact.is-mobile.has-controls .rec-frame{ max-width:none; margin:0; }
.app-records .rec-artifact.is-mobile.has-controls .rec-frame-body{
  max-height:min(58vh, 520px); display:grid; justify-items:center;
}
.app-records .rec-artifact.is-mobile.has-controls .rec-frame-img{ width:300px; max-width:100%; }
.app-records .rec-artifact-cap{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  font-size:12px; color:var(--ink-3);
}
.app-records .rec-inspect-btn{ font-size:12px; min-height:36px; }
.app-records .rec-fallback{
  min-height:160px; display:grid; place-items:center;
  padding:var(--space-4);
  color:var(--ink-3); font-size:13px; text-align:center;
  background:var(--paper-2);
}
.app-records .rec-pagenote{ color:var(--ink-2); font-size:13.5px; max-width:72ch; }

/* ---------- sections ---------- */
.app-records .rec-section{ display:flex; flex-direction:column; gap:var(--space-3); }
.app-records .rec-section-title{ font-size:18px; font-weight:600; line-height:1.3; }
.app-records .rec-section-line{ color:var(--ink-2); font-size:13.5px; max-width:74ch; }
.app-records .rec-provenance{ font-size:11.5px; color:var(--ink-3); max-width:74ch; }
.app-records .rec-gap{ font-size:12.5px; }

/* ---------- decisions ---------- */
/* The decision picker is a row; the selected decision's own artifact then sits
   BESIDE its explanation. Nothing changes an offscreen viewer. */
.app-records .rec-dec-list{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.app-records .rec-dec-item{
  text-align:left; min-height:44px;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  background:var(--paper-2); border:1px solid var(--line);
  color:var(--ink-2); font-size:14px;
}
.app-records .rec-dec-item[aria-pressed="true"]{
  background:var(--blue-100); color:var(--blue-700);
  border-color:var(--blue-300); font-weight:500;
}
.app-records .rec-dec-body{ display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr); gap:var(--space-5); min-width:0; align-items:start; }
.app-records .rec-dec-body .rec-frame-body{ max-height:min(38vh, 320px); }
.app-records .rec-dec-text{ display:flex; flex-direction:column; gap:var(--space-3); }
.app-records .rec-dec-title{ font-size:17px; font-weight:600; }
.app-records .rec-dec-kv{ display:block; }
.app-records .rec-dec-kv dt{ font-weight:500; color:var(--ink-3); font-size:12.5px; margin-top:var(--space-2); }
.app-records .rec-dec-kv dt:first-child{ margin-top:0; }
.app-records .rec-dec-kv dd{ margin:2px 0 0; color:var(--ink); font-size:13.5px; }
.app-records .rec-dec-limit{ font-size:12.5px; }

/* ---------- wipe comparison ---------- */
.app-records .rec-wipe-wrap{ display:flex; flex-direction:column; gap:var(--space-2); }
.app-records .rec-wipe-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.app-records .rec-wipe{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--paper-2);
  max-height:min(44vh, 400px);
}
.app-records .rec-wipe-img{ width:100%; height:auto; display:block; }
.app-records .rec-wipe-after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left; }
.app-records .rec-wipe-handle{
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--amber);
  box-shadow:0 0 0 1px rgba(16,24,40,.25);
  pointer-events:none;
  transform:translateX(-1px);
}
.app-records .rec-wipe-slider{ width:100%; min-height:40px; }
.app-records .rec-wipe-labels{ display:flex; justify-content:space-between; gap:var(--space-3); font-size:11.5px; color:var(--ink-3); }

/* ---------- paired, annotated ---------- */
.app-records .rec-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); align-items:start; }
.app-records .rec-pair-item{ margin:0; display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.app-records .rec-pair-title{ font-size:12.5px; font-weight:600; color:var(--ink); }
.app-records .rec-pair-img{
  width:100%; height:auto; max-height:300px; object-fit:cover; object-position:top;
  border-radius:var(--radius-md); border:1px solid var(--line); background:var(--paper-2);
}
.app-records .rec-pair-note{ font-size:12px; color:var(--ink-3); }

/* ---------- gallery quality ---------- */
.app-records .rec-quality-body{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:var(--space-4); align-items:start; }
.app-records .rec-quality-img{ width:100%; border-radius:var(--radius-md); border:1px solid var(--line); }
.app-records .rec-quality-side{ display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; }
.app-records .tag.rec-tag-included{ background:rgba(31,143,95,.14); color:var(--ok); }
.app-records .tag.rec-tag-excluded{ background:rgba(181,98,14,.14); color:var(--warn); }
.app-records .rec-quality-reason{ color:var(--ink-2); font-size:13px; }
.app-records .rec-note-details summary{ cursor:pointer; font-weight:500; color:var(--ink); }
.app-records .rec-check-steps{ margin:var(--space-3) 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }

/* ---------- Kelley ---------- */
.app-records .rec-video-box{ display:flex; flex-direction:column; gap:var(--space-3); }
.app-records .rec-video{
  width:100%; max-height:min(46vh, 420px);
  border-radius:var(--radius-lg); background:#000; display:block;
}
.app-records .rec-video-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.app-records .rec-stillnav{ display:flex; flex-direction:column; gap:var(--space-3); }
.app-records .rec-journey-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-top:var(--space-2); }
.app-records .rec-journey-cell{
  padding:var(--space-3);
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--paper-2);
}
.app-records .rec-journey-label{ font-size:12.5px; font-weight:600; color:var(--ink); }
.app-records .rec-journey-sub{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.app-records .rec-making-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-5); align-items:start; }
.app-records .rec-making-text{ display:flex; flex-direction:column; gap:var(--space-4); }
.app-records .rec-making-part{ display:flex; flex-direction:column; gap:6px; }
.app-records .rec-making-title{ font-size:15px; font-weight:600; }
.app-records .rec-making-part p{ color:var(--ink-2); font-size:13.5px; }
.app-records .rec-making-evidence{ display:flex; flex-direction:column; gap:var(--space-4); }

/* ---------- Blue Key ---------- */
.app-records .rec-choices-copy{ display:flex; flex-direction:column; gap:var(--space-2); color:var(--ink-2); font-size:13.5px; max-width:74ch; }

/* ---------- footer ---------- */
.app-records .rec-footer{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--line);
}
.app-records .rec-footer > *:last-child{ margin-left:auto; }

/* =========================== NARROW WINDOWS (900px) ==================== */
/* Below 900px window width the Max Website row wraps: page chips on their
   own line, device toggle + live link on the next. Above 900px it stays one
   row per the correction contract. */
@media (max-width:900px){
  .app-records .rec-max-row{ flex-wrap:wrap; }
  .app-records .rec-max-pages{ flex:1 1 100%; }
  .app-records .rec-max-tools{ margin-left:0; }
}

/* =========================== SHORT WINDOWS ============================ */
@media (max-height:800px){
  .app-records{ padding:var(--space-4) var(--space-5); }
  .app-records .rec-case{ gap:var(--space-2); }
  .app-records .rec-case-header{ gap:var(--space-3); }
  .app-records .rec-case-name{ font-size:24px; }
  .app-records .rec-anchor{ --rec-anchor-scale:.62; }
  .app-records .rec-landing{ gap:var(--space-3); }
  .app-records .rec-feature{ gap:var(--space-4); }
  .app-records .rec-landing-title{ font-size:24px; }
  .app-records .rec-rail-name{ font-size:21px; }
  /* Short window: the capture still owns the view, it just stops short of
     pushing its own caption an entire screen down. */
  .app-records .rec-frame-body{ max-height:min(58vh, 520px); }
  .app-records .rec-frame-chrome.has-controls{ min-height:46px; padding:3px var(--space-3); }
}

/* =========================== MOBILE =================================== */
@media (max-width:760px){
  .app-records{ padding:var(--space-4); }
  /* The capture stacks above the object: the website is the point. */
  .app-records .rec-feature{
    --rec-stage-h:clamp(180px, 26vh, 240px);
    grid-template-columns:minmax(0,1fr); gap:var(--space-4);
  }
  .app-records .rec-preview{ order:1; height:auto; width:100%; }
  .app-records .rec-preview-frame{ aspect-ratio:16/10; }
  .app-records .rec-stage{ order:2; width:100%; justify-items:center; }
  .app-records .rec-stage-host{ justify-items:center; }
  /* Column flex reinterprets flex-basis as a height, so the text block must
     drop its 320px row basis or it grows into a blank band. */
  .app-records .rec-ident{ flex-direction:column; align-items:stretch; gap:var(--space-3); }
  .app-records .rec-ident-text{ flex:0 0 auto; }
  .app-records .rec-open{ margin-left:0; width:100%; }
  .app-records .rec-select{ display:grid; grid-template-columns:1fr; }
  .app-records .rec-select-btn{ min-height:52px; }
  .app-records .rec-paperobject{ width:min(100%, 88%); }
  .app-records .rec-frame-controls{ flex-wrap:wrap; }
  .app-records .rec-frame-chrome.has-controls{ padding:var(--space-2) var(--space-3); }

  .app-records .rec-case-header{ align-items:flex-start; }
  .app-records .rec-case-name{ font-size:24px; }
  .app-records .rec-dec-body{ grid-template-columns:1fr; gap:var(--space-4); }
  .app-records .rec-dec-list{ flex-wrap:nowrap; overflow-x:auto; }
  .app-records .rec-dec-item{ flex:none; }
  .app-records .rec-pair{ grid-template-columns:1fr; }
  .app-records .rec-quality-body{ grid-template-columns:1fr; }
  .app-records .rec-journey-strip{ grid-template-columns:1fr 1fr; }
  .app-records .rec-making-grid{ grid-template-columns:1fr; }
  .app-records .rec-tools{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .app-records .rec-live{ margin-left:0; flex:1 1 auto; justify-content:center; }
  .app-records .rec-max-tools{ flex-direction:row; flex-wrap:wrap; align-items:center; width:100%; }
  .app-records .rec-max-tools .seg,
  .app-records .rec-tools .seg{ flex:0 0 auto; }
  .app-records .rec-footer{ flex-direction:column; align-items:stretch; }
  .app-records .rec-footer > *:last-child{ margin-left:0; }

  /* 44px minimum touch targets without touching shell.css */
  .app-records .seg > button{ min-height:44px; }
  .app-records .btn.quiet{ min-height:44px; }
  .app-records .rec-chip{ min-height:44px; }
  .app-records .rec-chip-sub{ min-height:44px; }
  .app-records .rec-panel .btn,
  .app-records .rec-footer .btn,
  .app-records .rec-tabs > button[role="tab"],
  .app-records .rec-live{ min-height:44px; }
  .app-records .rec-dec-item{ min-height:48px; }
  .app-records .rec-wipe-slider{ min-height:44px; }
  .app-records .rec-inspect-btn{ min-height:44px; }
  .app-records .rec-object-tools-summary,
  .app-records .rec-responsibilities summary{
    min-height:44px; display:flex; align-items:center;
  }
  .app-records .rec-ctl{ min-height:44px; }
}

@media (max-width:400px){
  .app-records .rec-feature{ --rec-stage-h:clamp(170px, 24vh, 220px); }
  .app-records .rec-journey-strip{ grid-template-columns:1fr; }
}

/* Focused website presentation: render at the available width, never scale a
   desktop page into a small screenshot. The dock belongs to the outer shell. */
.app-records.rec-website-active { padding:16px 24px; }
.app-records.rec-website-active > .rec-case { max-width:none; gap:10px; }
.rec-website-active .rec-anchor { display:none; }
.rec-website-active .rec-case-header { gap:12px; }
.rec-website-active .rec-case-name { font-size:24px; }
.rec-website-active .rec-case-line { font-size:15px; max-width:85ch; }
.rec-website-active .rec-responsibilities { font-size:13px; }
.rec-website-active .rec-live-stage { width:100%; min-height:420px; flex:1; background:#171717; border-radius:10px; overflow:hidden; }
.rec-website-active .rec-live-frame { display:block; width:100%; height:100%; min-height:420px; border:0; }
.rec-website-active .rec-live-stage.is-mobile { max-width:390px; margin-inline:auto; }
.rec-website-active .rec-live-hint { margin:0; font-size:13px; color:var(--ink-2); line-height:1.4; }
.rec-website-active .rec-frame-controls { flex-wrap:wrap; gap:8px; }
.rec-website-active .rec-max-tools { flex-wrap:wrap; }
.rec-website-active .rec-frame-body { max-height:none; overflow:auto; }
@media(min-width:761px){
  .app-records.rec-website-active > .rec-case { height:100%; min-height:680px; }
  .rec-website-active .rec-panel { display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; }
}
@media(max-width:760px){
  .app-records.rec-website-active { padding:16px; }
  .rec-website-active .rec-live-frame { height:65vh; min-height:420px; }
}
.rec-website-focused .rec-case-top,
.rec-website-focused .rec-case-header,
.rec-website-focused .rec-tabs,
.rec-website-focused .rec-footer { display:none; }
.app-records.rec-website-focused > .rec-case { min-height:0; }
.rec-website-focused .rec-panel { padding:0; }
.app-records .rec-live-page { min-height:40px; padding:8px 30px 8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font:inherit; font-size:14px; }
.app-records.rec-website-focused .rec-max-row { gap:8px; }
.app-records.rec-website-focused .rec-max-tools { margin-left:auto; gap:8px; }
@media(max-width:760px){
  .app-records.rec-website-focused .rec-max-tools { width:100%; min-width:0; }
  .rec-website-focused .rec-max-tools [aria-label="Device"] { display:none; }
  .rec-website-focused .rec-live-hint { font-size:12px; }
}
.app-records.rec-website-active .rec-panel > .rec-frame-controls { flex:0 0 auto; }
.app-records.rec-website-focused .rec-live-stage { flex:1 1 0; }
.rec-live-stage:has(.rec-preview-status) { position:relative; }
.rec-preview-status { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:16px; padding:24px; background:#0d0d11; color:#f5f3ed; text-align:center; }
.rec-preview-status[hidden], .rec-preview-actions[hidden] { display:none; }
.rec-preview-status img { width:min(75%, 360px); border-radius:8px; }
.rec-preview-status p { margin:0; max-width:40ch; font-size:14px; }
.rec-preview-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.rec-preview-actions .btn { background:#f5f3ed; color:#171717; }

/* Evidence stays available without competing with the project overview. */
.app-records .rec-evidence{margin:20px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.app-records .rec-evidence>summary{cursor:pointer;min-height:32px;font-size:14px;font-weight:550;line-height:1.5;color:var(--ink)}
.app-records .rec-evidence[open]>summary{margin-bottom:18px}
.app-records .rec-contribution-note{font-size:13px;line-height:1.5;color:var(--ink-2);max-width:70ch;margin-top:8px}