/* styles/phone-documents.css — the phone Documents page (src/PhoneDocuments.jsx, 6 Oct 2026, phone pages group 3).
   Built on the phone kit. Phone tier only, tokens only.
   THE MOCKUP 15 PASS (6 Oct 2026, measured at 412 CSS px): Hugo: each phone page must look EXACTLY like his mockup.
   One big frosted panel over the project photo holds the page: DOCUMENTS, View as, Document type, the document
   cards (a second, bluer glass layer), and "+ Upload document" pinned at the panel's foot just above the tab bar.
   Every size is the mockup's own (ours / mockup within 0.95-1.05 on the bench); text is sized from the mockup's cap
   heights. Pills keep a 40px TAP area (a transparent top / bottom border + an equal negative margin; elliptical corner
   R / R + border so the visible corner is R). */

/* ════════ THE PAGE + THE PANEL ════════ */
body[data-ui-tier="s"] .main-content > .pk-page.pdc-page { padding-bottom: 0; }
body[data-ui-tier="s"] .pdc-page > .pk-page-body { padding: 0; gap: 0; flex: 1 0 auto; display: flex; flex-direction: column; }

body[data-ui-tier="s"] .pdc-panel {
  position: relative; flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; margin: 0 11.8px 0 11.7px; padding: 0 10.5px 15px 17.2px;
  border: 1px solid var(--pdc-panel-rim); border-bottom: 0; border-radius: var(--pk-radius-card) var(--pk-radius-card) 0 0;
  background: radial-gradient(150px 110px at 100% 0, var(--pdc-panel-warm), transparent),
    radial-gradient(210px 150px at 22% 86%, var(--pdc-panel-glow), transparent), radial-gradient(170px 130px at 88% 68%, var(--pdc-panel-glow), transparent), var(--pdc-panel-fill);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body[data-ui-tier="s"] .pdc-h { margin: 15.8px 0 0 0.4px; font-family: var(--font-display); font-weight: normal; font-size: 30px; line-height: 28px; letter-spacing: 0; text-transform: uppercase; color: var(--pdc-h-ink); }

/* a small tracked label (VIEW AS, DOCUMENT TYPE: 9.3px / 600 / .20em) and its pills */
body[data-ui-tier="s"] .pdc-group { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body[data-ui-tier="s"] .pdc-cap { height: 10px; margin: 0 0 5px 0.4px; font-size: 9.3px; line-height: 10px; font-weight: var(--fw-semi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--pdc-cap-ink); }
body[data-ui-tier="s"] .pdc-group--viewas { margin-top: 13.3px; }
body[data-ui-tier="s"] .pdc-group--viewas + .pdc-group { margin-top: 18.2px; }
body[data-ui-tier="s"] .pdc-panel > .pdc-h + .pdc-group:not(.pdc-group--viewas) { margin-top: 13.3px; }
body[data-ui-tier="s"] .pdc-saving { letter-spacing: normal; text-transform: none; font-weight: var(--fw-med); }
body[data-ui-tier="s"] .pdc-chips { display: flex; flex-wrap: wrap; gap: 6.3px 6.2px; min-width: 0; }
body[data-ui-tier="s"] .pdc-chips:has(> .pdc-chip--type) { gap: 6.3px 5.2px; }
body[data-ui-tier="s"] .pdc-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 40px; max-width: 100%; padding: 0 15.7px; margin: -6px 0; cursor: pointer;
  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);
  box-shadow: inset 0 0 0 1.5px var(--pdc-pill-rim); background-color: var(--pdc-pill-fill); color: var(--pdc-pill-ink);
  font-family: var(--font-body); font-size: 9.5px; font-weight: var(--fw-med); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent;
}
/* (a 1.5px transparent side border too, so the shortest pill - All, 37 wide - still has a 40px tap area) */
body[data-ui-tier="s"] .pdc-chip--type { min-width: 40px; padding: 0 13.2px; margin: -7px -1.5px; font-size: 8.8px; border-width: 7px 1.5px; border-radius: calc(var(--pk-radius-chip) + 1.5px) / calc(var(--pk-radius-chip) + 7px); }
body[data-ui-tier="s"] .pdc-chip.is-on { box-shadow: none; background-color: transparent; background-image: var(--pdc-on-fill); background-origin: border-box; color: var(--pdc-on-ink); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pdc-group--viewas .pdc-chip.is-on { font-size: 10px; padding: 0 16px; }

/* a document card: the second, bluer glass layer - the grey tile, the tracked TYPE, the chevron; the title (Bebas 24,
   two lines); who can see it (amber-rimmed tags) */
body[data-ui-tier="s"] .pdc-cards { display: flex; flex-direction: column; gap: 11.7px; min-width: 0; margin: 15.8px 0 0; padding: 0 0 24px; }
body[data-ui-tier="s"] .pdc-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-width: 0; padding: 12.7px 18.9px 13px 15.6px; margin: 0 6px 0 0; width: auto; text-align: left; cursor: pointer;
  border: 1px solid var(--pdc-card-rim); border-radius: var(--pk-radius-card); background: var(--pdc-card-fill); color: var(--ink); font-family: var(--font-body);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 22%, transparent); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pdc-card:active { transform: scale(0.99); }
body[data-ui-tier="s"] .pdc-card-top { display: flex; align-items: center; gap: 0; min-width: 0; height: 40.1px; }
body[data-ui-tier="s"] .pdc-card-icon { flex: 0 0 40.1px; width: 40.1px; height: 40.1px; display: grid; place-items: center; border-radius: var(--pk-radius-small); background: var(--pdc-tile); color: var(--white); }
body[data-ui-tier="s"] .pdc-card-icon svg { width: 25px; height: 25px; }
body[data-ui-tier="s"] .pdc-card-type { flex: 1 1 auto; min-width: 0; margin-left: 20.1px; position: relative; top: -2.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.3px; font-weight: var(--fw-semi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--pdc-cap-ink); }
body[data-ui-tier="s"] .pdc-card-chev { flex: 0 0 auto; display: grid; place-items: center; color: var(--pdc-chev); }
body[data-ui-tier="s"] .pdc-card-chev svg { width: 12.2px; height: 16.5px; transform: scaleX(1.1); }
body[data-ui-tier="s"] .pdc-card-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 8.9px 30px 0 1.9px;
  font-family: var(--font-display); font-size: 24px; line-height: 23px; letter-spacing: 0; text-transform: uppercase; color: var(--pdc-h-ink); overflow-wrap: anywhere;
}
body[data-ui-tier="s"] .pdc-card-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px; font-size: 10px; line-height: 1.4; color: var(--pdc-cap-ink); }
body[data-ui-tier="s"] .pdc-card-access { display: flex; flex-wrap: wrap; gap: 6px 6.9px; margin-top: 8.5px; }
body[data-ui-tier="s"] .pdc-acc {
  display: inline-flex; align-items: center; height: 26.4px; padding: 0 12.6px; border: 1.5px solid var(--pdc-tag-rim); border-radius: var(--pk-radius-chip);
  background: var(--pdc-tag-fill); font-size: 8.9px; font-weight: var(--fw-med); color: var(--pdc-pill-ink);
}

/* + Upload document: the full-width amber bar pinned at the panel's foot, just above the tab bar */
body[data-ui-tier="s"] .pdc-upload {
  position: sticky; bottom: 15px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; width: auto; height: 40px; margin: auto 5.3px -4px -2.4px; padding: 0; cursor: pointer;
  border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-card) / calc(var(--pk-radius-card) + 4px); background-color: transparent; background-image: var(--pdc-up-fill);
  box-shadow: 0 2px 4px var(--pdc-up-shadow); color: var(--pdc-up-ink);
  font-family: var(--font-body); font-size: 12.1px; font-weight: var(--fw-semi); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pdc-upload svg { width: 17px; height: 17px; }

/* ════════ THE MATERIAL (mockup 15) ════════
   Every skin reads its own tokens. The glass family (every dark skin, the mockup's own): the photo vivid behind the
   header + band, the panel a navy-slate frosted glass (~80%) with a faint light rim, the cards a second, bluer glass
   with a cool rim, a neutral grey doc tile; the active pill solid amber with dark ink, the others slate with a warm
   tan rim; the who-can-see tags amber-rimmed; Upload an amber gradient bar with dark ink. */
body[data-ui-tier="s"] .pdc-page {
  --pdc-panel-fill: color-mix(in srgb, var(--black) 5%, var(--card-bg-solid));
  --pdc-panel-rim: var(--card-border);
  --pdc-h-ink: var(--ink);
  --pdc-cap-ink: var(--ink-muted);
  --pdc-pill-fill: transparent;
  --pdc-pill-rim: color-mix(in srgb, var(--accent) 40%, var(--card-border));
  --pdc-pill-ink: var(--ink);
  --pdc-on-fill: linear-gradient(var(--accent), var(--accent));
  --pdc-on-ink: var(--ink-on-accent);
  --pdc-card-fill: color-mix(in srgb, var(--ink) 4%, var(--card-bg-solid));
  --pdc-card-rim: var(--card-border);
  --pdc-tile: color-mix(in srgb, var(--ink) 30%, var(--card-bg-solid));
  --pdc-chev: var(--ink-muted);
  --pdc-tag-fill: transparent;
  --pdc-tag-rim: color-mix(in srgb, var(--accent) 60%, transparent);
  --pdc-up-fill: linear-gradient(var(--accent), var(--accent));
  --pdc-up-ink: var(--ink-on-accent);
  --pdc-up-shadow: color-mix(in srgb, var(--accent) 20%, transparent);
  --pdc-panel-warm: transparent;
  --pdc-panel-glow: transparent;
}
body[data-ui-tier="s"][data-skin-family="glass"] .pdc-page {
  --pdc-panel-fill: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 70%, var(--bg)) 58%, transparent);
  --pdc-panel-warm: color-mix(in srgb, color-mix(in srgb, var(--accent) 34%, var(--bg)) 55%, transparent);
  --pdc-panel-glow: color-mix(in srgb, var(--accent) 12%, transparent);
  --pdc-panel-rim: color-mix(in srgb, var(--ink) 16%, transparent);
  --pdc-h-ink: color-mix(in srgb, var(--ink) 40%, var(--white));
  --pdc-cap-ink: color-mix(in srgb, var(--ink-muted) 88%, var(--card-bg-solid));
  --pdc-pill-fill: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 70%, var(--bg)) 95%, var(--ink-muted));
  --pdc-pill-rim: color-mix(in srgb, color-mix(in srgb, var(--accent) 50%, var(--ink-muted)) 60%, var(--card-bg-solid));
  --pdc-pill-ink: color-mix(in srgb, var(--ink-muted) 30%, var(--white));
  --pdc-on-fill: linear-gradient(color-mix(in srgb, var(--accent) 80%, var(--white)), color-mix(in srgb, var(--accent) 80%, var(--white)));
  --pdc-on-ink: color-mix(in srgb, var(--accent) 10%, var(--black));
  --pdc-card-fill: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 88%, var(--bg)) 92%, transparent);
  --pdc-card-rim: color-mix(in srgb, var(--ink-muted) 30%, var(--card-bg-solid));
  --pdc-tile: color-mix(in srgb, var(--white) 25%, var(--black));
  --pdc-chev: color-mix(in srgb, var(--ink-muted) 40%, var(--white));
  --pdc-tag-fill: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 70%, var(--bg)) 95%, var(--ink-muted));
  --pdc-tag-rim: color-mix(in srgb, var(--accent) 82%, var(--ink-muted));
  --pdc-up-fill: linear-gradient(180deg, color-mix(in srgb, var(--accent) 76%, var(--white)), color-mix(in srgb, var(--accent) 94%, var(--white)));
  --pdc-up-ink: color-mix(in srgb, var(--accent) 6%, var(--black));
  --pdc-up-shadow: color-mix(in srgb, var(--accent) 22%, transparent);
}
/* the page is see-through on the glass skins: the photo vivid behind the band, the panel's glass over it */
body[data-ui-tier="s"][data-skin-family="glass"] .main-content > .pk-page.pdc-page { background: transparent; }
body[data-ui-tier="s"][data-skin-family="glass"] .main-content:has(> .pdc-page) {
  background-image:
    linear-gradient(to left, color-mix(in srgb, var(--accent) 24%, transparent) 0, transparent 12px),
    linear-gradient(to bottom, color-mix(in srgb, color-mix(in srgb, var(--accent) 26%, var(--black)) 30%, transparent) 0, color-mix(in srgb, color-mix(in srgb, var(--accent) 26%, var(--black)) 22%, transparent) 118px, transparent 168px),
    linear-gradient(to bottom, color-mix(in srgb, var(--shl-veil) 11%, transparent) 0, color-mix(in srgb, var(--shl-veil) 16%, transparent) 160px, color-mix(in srgb, var(--shl-veil) 22%, transparent) 100%);
}

/* ════════ THE DOCUMENT (full screen) + THE UPLOAD FORM ════════ */
body[data-ui-tier="s"] .pdc-sheet .pk-header-main { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-transform: uppercase; }
body[data-ui-tier="s"] .pdc-sheet-head { display: flex; align-items: center; gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .pdc-sheet-meta { min-width: 0; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .pdc-sheet-text { display: flex; flex-direction: column; gap: var(--pk-2); }
body[data-ui-tier="s"] .pdc-sheet-text > p { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pdc-file { padding: 10px 12px; border: 1px solid var(--card-border); border-radius: var(--pk-radius-row); font-size: var(--fs-13); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pdc-file.is-none { color: var(--ink-muted); font-style: italic; white-space: normal; }
body[data-ui-tier="s"] .pdc-msg { font-size: var(--fs-13); color: var(--ink-muted); }
body[data-ui-tier="s"] .pdc-msg.is-bad { color: var(--danger); }
body[data-ui-tier="s"] .pdc-open { flex: 1 1 auto; text-decoration: none; }
body[data-ui-tier="s"] .pdc-sheet .pdc-chip { height: auto; min-height: 40px; margin: 0; padding: 0 12px; border-width: 3px 0; font-size: var(--fs-13); border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--card-border)); background-color: transparent; color: var(--ink); }
body[data-ui-tier="s"] .pdc-sheet .pdc-chips { gap: 0 6px; }
body[data-ui-tier="s"] .pdc-sheet .pdc-cap { height: auto; margin: 0; font-size: var(--fs-11); line-height: 1.3; letter-spacing: var(--track-18); color: var(--ink-muted); }
body[data-ui-tier="s"] .pdc-sheet .pdc-group { gap: 4px; }

/* the upload form */
body[data-ui-tier="s"] .pdc-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body[data-ui-tier="s"] .pdc-pick { display: flex; align-items: center; gap: var(--pk-3); width: 100%; min-height: 52px; padding: 0 14px; margin: 0; cursor: pointer; text-align: left; border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); border-radius: var(--pk-radius-row); background: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pdc-pick > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pdc-field { display: flex; flex-direction: column; gap: var(--pk-2); min-width: 0; }
body[data-ui-tier="s"] .pdc-input { width: 100%; min-height: 40px; padding: 8px 12px; margin: 0; box-sizing: border-box; border: 1px solid var(--input-border); border-radius: var(--pk-radius-control); background: var(--input-bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-16); }
body[data-ui-tier="s"] .pdc-textarea { resize: vertical; line-height: 1.4; }
body[data-ui-tier="s"] .pdc-input:focus { outline: none; border-color: var(--accent); }

/* in the document and the upload form a ticked role is tinted, not filled (several can be on at once) */
body[data-ui-tier="s"] .pdc-sheet .pdc-chip:not(.pdc-chip--type).is-on { box-shadow: inset 0 0 0 1.5px var(--accent); background-color: color-mix(in srgb, var(--accent) 16%, transparent); background-image: none; color: var(--ink); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pdc-sheet .pdc-chip--type.is-on { background-color: var(--accent); background-image: none; color: var(--ink-on-accent); }