/* Fylunor — per-screen styles */

/* =========================================================
   1. SPLASH
   ========================================================= */
#screen-splash { display: none; place-items: center; position: relative; }
#screen-splash.is-active { display: grid; }

/* Studio credit — a two-line maker's signature, not a footer note: a hairline
   "FROM" rule, then the Lyvorian mark locked up with the domain. Absolute on
   the splash rather than a second grid row so the app mark stays optically
   centred and the signature sits on the bottom edge, clear of the Android
   gesture bar. `--flow` is the same lockup inside a normal stacking context
   (the auth footers), where nothing needs pinning. */
.studio-credit {
  position: absolute;
  bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin: 0;
}
.studio-credit--flow { position: static; margin-top: var(--s2); }

/* The rules stop short of the word on both sides; the inner span carries the
   tracking so the trailing letter-space does not push the word off centre. */
.studio-credit-from {
  display: flex; align-items: center; gap: 9px;
  font-size: 9px; line-height: 1; text-transform: uppercase;
  color: var(--text-3);
}
.studio-credit-from::before,
.studio-credit-from::after {
  content: ""; width: 22px; height: 1px;
  background: currentColor; opacity: .45;
}
.studio-credit-from > span { letter-spacing: .34em; padding-left: .34em; }

.studio-credit-lockup { display: inline-flex; align-items: center; gap: 8px; }
.studio-credit-mark { width: 20px; height: 20px; display: block; opacity: .95; }
.studio-credit-name {
  font-size: 12.5px; font-weight: 600; letter-spacing: .012em;
  color: var(--text-2);
}

.splash-stack { display: grid; justify-items: center; gap: var(--s6); }
.splash-mark { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.splash-mark::after {
  content: ""; position: absolute; inset: -34%; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 213, 176, .26), transparent 62%);
  filter: blur(18px); animation: splash-glow 2.6s var(--ease) infinite alternate;
}
.splash-mark .mark { position: relative; width: 132px; height: 132px; animation: mark-settle 1000ms var(--ease-out) both; }
@keyframes splash-glow { from { opacity: .35; transform: scale(.9); } to { opacity: .85; transform: scale(1.05); } }
@keyframes mark-settle { 0% { opacity: 0; transform: scale(.86) translateY(10px); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: none; } }

/* Sheets rising out of the tray. The outer sheets carry a rotation as an SVG
   presentation attribute, which maps to the same CSS `transform` this animates;
   the keyframe has no `to`, so each one settles onto its own rotation and the
   fan opens as they rise. The front sheet is unrotated and simply rises. */
.splash-mark .mark .sheet-rise { animation: sheet-rise 1100ms var(--ease-out) both; transform-origin: 50% 100%; }
.splash-mark .mark .sheet-rise-1 { animation-delay: 120ms; }
.splash-mark .mark .sheet-rise-5 { animation-delay: 180ms; }
.splash-mark .mark .sheet-rise-2 { animation-delay: 250ms; }
.splash-mark .mark .sheet-rise-4 { animation-delay: 310ms; }
.splash-mark .mark .sheet-rise-3 { animation-delay: 380ms; }
@keyframes sheet-rise { from { opacity: 0; transform: translateY(26px) scale(.94); } }

/* processing line */
.splash-line {
  width: 132px; height: 3px; border-radius: var(--r-pill);
  background: var(--surface-2); overflow: hidden;
}
.splash-line i {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: var(--brand-grad); transform-origin: left center;
  animation: line-fill 900ms var(--ease-out) 340ms both;
}
@keyframes line-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.splash-word { animation: rise var(--t-slow) var(--ease-out) 460ms both; text-align: center; }
.splash-word .wordmark { font-size: 30px; }
.splash-word p { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-3); letter-spacing: .01em; }

/* =========================================================
   2. ONBOARDING
   ========================================================= */
#screen-onboarding.is-active { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; }

.ob-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(var(--s5), env(safe-area-inset-top)) var(--s5) 0;
  width: min(100%, var(--page-max)); margin-inline: auto;
}
.ob-brand { display: flex; align-items: center; gap: 9px; }
.ob-brand .mark { width: 26px; height: 26px; }
.ob-brand span { font-weight: 650; letter-spacing: -.01em; font-size: var(--fs-h3); }

.ob-track { overflow: hidden; }
.ob-rail {
  display: flex; height: 100%;
  transition: transform var(--t-slow) var(--ease-out);
}
.ob-slide { flex: 0 0 100%; display: grid; align-content: center; gap: var(--s6); padding: var(--s6) var(--s5); }
.ob-art {
  width: min(100%, 300px); aspect-ratio: 4 / 3; margin-inline: auto;
  display: grid; place-items: center;
}
.ob-art svg { width: 100%; height: 100%; overflow: visible; }
.ob-slide h1 { font-size: var(--fs-h1); font-weight: 680; letter-spacing: -.025em; line-height: 1.2; }
.ob-slide > p { margin-top: 8px; color: var(--text-2); line-height: 1.6; }
.ob-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); margin-top: var(--s5); }
.ob-list li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--text-2); }
.ob-list li::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: var(--brand-grad); opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ob-bottom {
  width: min(100%, var(--page-max)); margin-inline: auto;
  padding: var(--s5) var(--s5) max(var(--s6), env(safe-area-inset-bottom));
  display: grid; gap: var(--s5);
}
.ob-dots { display: flex; justify-content: center; gap: 7px; }
.ob-dots i {
  width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--line-strong);
  transition: width var(--t-med) var(--ease), background var(--t-med);
}
.ob-dots i.on { width: 24px; background: var(--brand-grad); }
.ob-nav { display: flex; align-items: center; gap: var(--s3); }
.ob-nav .btn-quiet { width: auto; min-width: 64px; }
.ob-nav .btn-primary { flex: 1; }

/* =========================================================
   3. LOGIN / WELCOME
   ========================================================= */
#screen-login.is-active,
#screen-returning.is-active { display: grid; align-content: center; min-height: 100dvh; padding-block: var(--s7); }

.auth-head { display: grid; justify-items: center; gap: var(--s3); text-align: center; margin-bottom: var(--s7); }
.auth-head .mark { width: 66px; height: 66px; filter: drop-shadow(0 10px 26px var(--accent-soft)); }
.auth-head .wordmark { font-size: 32px; }
.auth-head p { color: var(--text-2); font-size: var(--fs-body); }

.auth-card { padding: var(--s6) var(--s5); display: grid; gap: var(--s5); }
.auth-opt { display: grid; gap: 9px; }
.auth-opt .hint { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.5; text-align: center; }

.auth-sep { display: flex; align-items: center; gap: var(--s3); color: var(--text-3); font-size: var(--fs-xs); letter-spacing: .1em; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-foot { margin-top: var(--s6); display: grid; gap: var(--s3); justify-items: center; text-align: center; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; font-size: var(--fs-sm); }
/* Standalone links, not prose, so they take the full touch minimum. The
   padding also supplies the spacing the row's old gap provided. */
.auth-links a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: 0 8px; color: var(--text-2); text-decoration: none;
}
.auth-links a:hover { color: var(--text); text-decoration: underline; }
.auth-foot .ver { font-size: var(--fs-xs); color: var(--text-3); }

/* Returning user */
.ret-card { padding: var(--s7) var(--s5) var(--s6); display: grid; gap: var(--s5); justify-items: center; text-align: center; }
.avatar {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font-size: 28px; font-weight: 650; color: var(--on-accent); background: var(--brand-grad);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent-soft);
}
.ret-card h1 { font-size: var(--fs-h1); font-weight: 660; letter-spacing: -.02em; }
.ret-actions { display: grid; gap: var(--s3); width: 100%; }

/* =========================================================
   4. DASHBOARD SHELL
   ========================================================= */
#screen-app.is-active { display: block; padding-bottom: calc(var(--navbar-h) + env(safe-area-inset-bottom) + var(--s6)); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: screen-in var(--t-med) var(--ease-out) both; }

/* Header */
.dash-head { padding-top: max(var(--s5), calc(env(safe-area-inset-top) + var(--s3))); }
.dash-head-row { display: flex; align-items: flex-start; gap: var(--s4); }
.greet { flex: 1; min-width: 0; }
.greet h1 {
  font-size: var(--fs-h1); font-weight: 680; letter-spacing: -.028em; line-height: 1.15;
  animation: rise var(--t-slow) var(--ease-out) both;
}
.greet .date { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-3); }
.greet .sub { margin-top: 10px; font-size: var(--fs-sm); color: var(--text-2); }
.head-actions { display: flex; align-items: center; gap: var(--s2); }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line);
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .badge {
  position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--bg);
}
.avatar-btn { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; overflow: hidden; border: 1px solid var(--line-strong); }
.avatar-btn .avatar { width: 100%; height: 100%; font-size: 15px; box-shadow: none; }

.status-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* Search */
.search {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5); padding: 0 var(--s3) 0 var(--s4);
  /* Derived, not fixed: at the largest text size a 52px row leaves the input
     itself under the (then larger) touch minimum. */
  min-height: calc(var(--tap-min) + 8px); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.search > svg { width: 19px; height: 19px; flex: none; color: var(--text-3); }
.search input {
  flex: 1; min-width: 0; align-self: stretch;   /* fill the row so the whole box is tappable */
  border: 0; background: none; outline: none;
  font-size: var(--fs-body); color: var(--text);
}
.search input::placeholder { color: var(--text-3); }
.search .icon-btn { width: 36px; height: 36px; background: var(--surface-2); border: 0; }
.search .icon-btn svg { width: 17px; height: 17px; }

.recents { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.recents button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  font-size: var(--fs-xs); color: var(--text-2); padding: 5px 10px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
}
.recents button:hover { color: var(--text); background: var(--surface-2); }

/* Primary actions */
.primary-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-top: var(--s6); }
.pa {
  display: grid; justify-items: center; gap: 9px; padding: var(--s4) 4px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast);
}
.pa:hover { background: var(--surface-2); border-color: var(--line-strong); }
.pa:active { transform: scale(.96); }
.pa .pa-ico {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  background: var(--brand-grad); color: var(--on-accent); box-shadow: 0 6px 16px rgba(12, 9, 6, .38);
}
.pa .pa-ico svg { width: 23px; height: 23px; }
/* All four tiles share the accent — the icon does the distinguishing. */
.pa span { font-size: var(--fs-sm); font-weight: 600; }

/* Continue working */
.file-card {
  width: 232px; flex: none; padding: var(--s3); display: grid; gap: var(--s3);
  text-align: left; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
}
.file-card:hover { border-color: var(--line-strong); }
.file-card:active { transform: scale(.985); }
.file-thumb {
  height: 104px; border-radius: var(--r-sm); position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--bg-3), var(--surface-solid));
  border: 1px solid var(--line); display: grid; place-items: center;
}
.file-thumb .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-thumb .lines { position: absolute; inset: 16px 18px auto 16px; display: grid; gap: 7px; }
.file-thumb .lines i { height: 4px; border-radius: 3px; background: var(--line-strong); }
.file-thumb .lines i:nth-child(2) { width: 82%; }
.file-thumb .lines i:nth-child(3) { width: 64%; }
.file-thumb .lines i:nth-child(4) { width: 74%; }
.file-thumb .type {
  position: absolute; left: 10px; bottom: 10px;
  padding: 3px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.file-meta { display: grid; gap: 5px; }
.file-meta .name { font-size: var(--fs-sm); font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta .sub { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-3); }
.file-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }

.filter-row { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s4); }
.filter-row::-webkit-scrollbar { display: none; }
/* A real 44px height rather than the pseudo hit area used elsewhere: this row
   scrolls horizontally, and an overflowing hit area would give it a second,
   vertical scroll axis. */
.filter-row button {
  /* min-width too: a short label like "All" is otherwise under 44px across. */
  flex: none; min-height: var(--tap-min); min-width: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 13px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 550;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--line);
  transition: all var(--t-fast);
}
.filter-row button.on { color: var(--on-accent); background: var(--brand-grad); border-color: transparent; font-weight: 640; }
/* Icons inside filter pills — an <svg> with only a viewBox is 300x150 otherwise */
.filter-row button > svg { width: 15px; height: 15px; flex: none; margin-right: 5px; vertical-align: -2px; }
/* The Back pill in the trash reuses the chevron, pointing the other way */
.filter-row button[data-id="all"] > svg { transform: rotate(180deg); }

/* ---------- folders ----------
   Flat, not nested: a file is in one folder or in none. */
.folder-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s2); margin-bottom: var(--s4);
}
.folder-card {
  display: flex; align-items: center; gap: var(--s3); min-height: var(--tap-min);
  padding: var(--s3); text-align: left; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.folder-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.folder-card.is-new { border-style: dashed; color: var(--accent); }
.folder-glyph {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
.folder-glyph svg { width: 18px; height: 18px; }
.folder-body { min-width: 0; display: grid; gap: 2px; }
.folder-body .t { font-size: var(--fs-sm); font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-body .d { font-size: var(--fs-xs); color: var(--text-3); }

.folder-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
}
.folder-head .t { font-size: var(--fs-h3); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-head .d { font-size: var(--fs-xs); color: var(--text-3); }
/* Back out of a folder — the shared chevron points forward */
.folder-head .icon-btn svg { transform: rotate(180deg); }

/* ---------- files tab actions ---------- */
.files-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 var(--s4); }
.files-actions:empty { display: none; }
.files-actions .btn > svg { width: 16px; height: 16px; }

/* ---------- batch selection ---------- */
.selbar {
  position: fixed; left: 0; right: 0; z-index: 55;
  bottom: calc(var(--navbar-h) + env(safe-area-inset-bottom));
  display: grid; gap: var(--s2); padding: var(--s3) var(--s4);
  background: color-mix(in srgb, var(--bg-2) 94%, transparent);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -10px 30px rgba(12, 9, 6, .38);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.selbar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.selbar-count { font-size: var(--fs-sm); font-weight: 650; }
.selbar-acts { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.selbar-acts::-webkit-scrollbar { display: none; }
.selact {
  flex: 1 0 auto; min-width: 66px; min-height: var(--tap-min);
  display: grid; justify-items: center; gap: 4px; padding: 6px 8px;
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.selact .glyph { width: 26px; height: 26px; border-radius: 9px; background: none; }
.selact .glyph svg { width: 19px; height: 19px; }
.selact:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.selact:disabled { opacity: .38; }
.selact.is-danger { color: var(--danger); }

/* The page already clears the navbar; while the bar is up it must clear both. */
:root.sel-mode #screen-app.is-active {
  padding-bottom: calc(var(--navbar-h) + 116px + env(safe-area-inset-bottom) + var(--s6));
}

.file-card.is-picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.tick {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--on-accent);
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  border: 1.5px solid var(--line-strong);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Checked is a tick, not just a colour swap */
.tick.on { background: var(--accent); border-color: transparent; }
.tick svg { width: 15px; height: 15px; }

/* ---------- templates ---------- */
/* A saved template is one row with its own delete control alongside. */
.tpl-row { display: flex; align-items: center; gap: var(--s2); }
.tpl-row .rec { flex: 1; min-width: 0; }

/* ---------- duplicates ---------- */
.dupe-group {
  padding: var(--s3) var(--s4); margin-bottom: var(--s3);
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
}
.dupe-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.dupe-head .t { font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); }
.dupe-file { display: flex; align-items: center; gap: var(--s3); padding: 7px 0; }
.dupe-file .glyph { width: 32px; height: 32px; border-radius: 10px; }
.dupe-file .glyph svg { width: 16px; height: 16px; }
.dupe-file .rec-body { min-width: 0; display: grid; gap: 2px; }
.dupe-file .t { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dupe-file .d { font-size: var(--fs-xs); color: var(--text-3); }
/* The kept copy reads as kept without relying on the label alone */
.dupe-file:first-of-type .glyph { background: var(--accent-soft); color: var(--accent); }

/* ---------- favourites ----------
   The star sits over the thumbnail. It is a nested control inside a card that
   is itself a button, which the delegated click handler resolves by taking the
   nearest [data-act]. */
.star {
  position: absolute; top: 6px; right: 6px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-2);
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: color var(--t-fast), transform var(--t-fast) var(--ease);
}
.star svg { width: 17px; height: 17px; }
.star:hover { color: var(--text); }
/* The filled shape comes from #i-star-on in the markup, not from CSS: outer
   styles cannot reach inside a <use> shadow tree. */
.star.on { color: var(--accent); border-color: var(--accent-line); }
.star:active { transform: scale(.9); }

/* ---------- tags ---------- */
.tag-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.tag-lead { font-size: var(--fs-xs); color: var(--text-3); }
.tag {
  /* 36px painted + an 8px strip gap = 44px between centres, so the invisible
     44px hit areas meet without overlapping into the row above or below. */
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--line);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
button.tag:hover { color: var(--text); background: var(--surface-2); }
.tag.on { color: var(--on-accent); background: var(--brand-grad); border-color: transparent; }
.tag .n { font-size: 10px; opacity: .7; font-variant-numeric: tabular-nums; }
.tag.is-clear { border-style: dashed; }
/* Tags printed on a file card are labels, not controls */
.tag.is-static { min-height: 0; padding: 2px 8px; font-size: 10px; font-weight: 650; pointer-events: none; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* A trashed file is present but inert: no thumbnail emphasis, no tap-to-open. */
.file-card.is-trashed .file-thumb { opacity: .5; }
.file-card.is-trashed .file-foot .btn { flex: 1; padding: 0 var(--s3); }

/* Smart recommendations */
.rec {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.rec + .rec { margin-top: var(--s2); }
.rec:hover { background: var(--surface-2); border-color: var(--line-strong); }
.rec:active { transform: scale(.99); }
.rec-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rec-body .t { font-size: var(--fs-sm); font-weight: 620; }
.rec-body .d { font-size: var(--fs-xs); color: var(--text-3); }
.rec .go { color: var(--text-3); flex: none; }
.rec .go svg { width: 17px; height: 17px; display: block; }
.rec[data-tone="warn"]   .glyph { color: var(--text-2);   background: var(--accent-soft); }
.rec[data-tone="danger"] .glyph { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.rec[data-tone="ok"]     .glyph { color: var(--accent);     background: var(--accent-soft); }

/* Tool categories */
.cat-tabs { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s4); }
.cat-tabs::-webkit-scrollbar { display: none; }
/* Real height, not a pseudo hit area — this row scrolls horizontally (see
   .filter-row). */
.cat-tabs button {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap-min); min-width: var(--tap-min);
  padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 560;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--line);
}
.cat-tabs button svg { width: 15px; height: 15px; }
.cat-tabs button.on { color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s3); }
.tool {
  display: grid; justify-items: center; gap: 9px; padding: var(--s4) 6px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.tool:hover { background: var(--surface-2); border-color: var(--line-strong); }
.tool:active { transform: scale(.96); }
.tool span { font-size: var(--fs-xs); font-weight: 560; color: var(--text-2); text-align: center; line-height: 1.3; }
.tool .glyph { width: 38px; height: 38px; border-radius: 12px; }
.tool.is-pinned .glyph::after {
  content: ""; position: absolute; margin: -26px 0 0 26px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}

/* Pro / free cards */
.promo {
  position: relative; overflow: hidden; padding: var(--s5);
  display: grid; gap: var(--s3); border-radius: var(--r-lg);
  border: 1px solid var(--accent-line);
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft));
}
.promo::after {
  content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -70px;
  border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 68%);
}
.promo h3 { font-size: var(--fs-h3); font-weight: 660; }
.promo p { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
.promo .btn { width: auto; justify-self: start; }

/* The web placeholder is dashed and labelled on purpose — it must never be
   mistakable for a served ad. The native slot is an empty reservation: the real
   banner is an overlay drawn by the OS, not part of the page. */
.ad-slot {
  margin-top: var(--s6); min-height: 62px; border-radius: var(--r-md);
  display: grid; place-items: center; gap: 3px; padding: var(--s3) var(--s4);
  border: 1px dashed var(--line-strong); color: var(--text-3);
  background: var(--surface); text-align: center;
}
.ad-slot.is-native { border: 0; background: none; padding: 0; }
.ad-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: none;
  color: var(--text-2);
}
.ad-note { font-size: var(--fs-xs); line-height: 1.45; max-width: 34ch; }

/* Space for the native banner, which floats above the page above the navbar. */
:root.has-ad #screen-app.is-active {
  padding-bottom: calc(var(--navbar-h) + 62px + env(safe-area-inset-bottom) + var(--s6));
}

/* The Free ceiling, surfaced in the selection bar rather than sprung on action */
.selbar-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap-min); width: 100%; padding: 0 var(--s3);
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 620;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.selbar-note svg { width: 15px; height: 15px; flex: none; }

/* Empty state */
.empty { display: grid; gap: var(--s5); justify-items: center; text-align: center; padding: var(--s7) 0 var(--s6); }
.empty .art { width: 168px; }
.empty h2 { font-size: var(--fs-h2); font-weight: 660; }
.empty p { font-size: var(--fs-sm); color: var(--text-2); }
.empty-actions { display: grid; gap: var(--s3); width: 100%; }
.empty-act {
  display: flex; align-items: center; gap: var(--s3); text-align: left;
  padding: var(--s4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.empty-act:hover { background: var(--surface-2); }
.empty-act .t { font-size: var(--fs-sm); font-weight: 620; }
.empty-act .d { font-size: var(--fs-xs); color: var(--text-3); }

/* =========================================================
   5. BOTTOM NAVIGATION
   ========================================================= */
.navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--navbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.nav-item {
  display: grid; justify-items: center; gap: 4px; color: var(--text-3);
  font-size: 10.5px; font-weight: 580; padding: 6px 0;
  transition: color var(--t-fast);
}
.nav-item svg { width: 22px; height: 22px; }
.nav-item.on { color: var(--accent); }
.nav-item.on svg { filter: drop-shadow(0 0 10px var(--accent-line)); }

.nav-create { position: relative; }
.nav-create .fab {
  width: 54px; height: 54px; margin-top: -22px; border-radius: 19px;
  display: grid; place-items: center; color: var(--on-accent);
  background: var(--brand-grad); box-shadow: 0 10px 26px rgba(12, 9, 6, .42);
  transition: transform var(--t-fast) var(--ease);
}
.nav-create .fab svg { width: 26px; height: 26px; }
.nav-create:active .fab { transform: scale(.93); }
.nav-create span { color: var(--text-3); }

/* =========================================================
   6. SHEETS / MODALS
   ========================================================= */
.scrim {
  position: fixed; inset: 0; z-index: 40; background: var(--scrim);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease);
}
.scrim.on { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  width: min(100%, var(--page-max)); margin-inline: auto;
  max-height: 86dvh; overflow-y: auto;
  padding: var(--s3) var(--s5) max(var(--s6), calc(env(safe-area-inset-bottom) + var(--s4)));
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-2);
  transform: translateY(102%); transition: transform var(--t-slow) var(--ease-out);
}
.sheet.on { transform: none; }
.sheet-grab { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line-strong); margin: 0 auto var(--s5); }
.sheet h2 { font-size: var(--fs-h2); font-weight: 660; letter-spacing: -.015em; }
.sheet .sheet-sub { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-2); }

.create-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.create-item {
  display: grid; justify-items: center; gap: 10px; padding: var(--s4) 6px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  animation: rise var(--t-med) var(--ease-out) both;
}
.create-item:hover { background: var(--surface-2); }
.create-item .glyph { width: 44px; height: 44px; border-radius: 14px; background: var(--brand-grad); color: var(--on-accent); }
.create-item span { font-size: var(--fs-xs); font-weight: 570; }

/* Permission explainer */
.perm { display: grid; gap: var(--s5); }
.perm-top { display: grid; justify-items: center; gap: var(--s3); text-align: center; }
.perm-top .glyph { width: 58px; height: 58px; border-radius: 19px; background: var(--brand-grad); color: var(--on-accent); }
.perm-top .glyph svg { width: 27px; height: 27px; }
.perm-rows { display: grid; gap: var(--s3); }
.perm-row { display: flex; gap: var(--s3); align-items: flex-start; }
.perm-row .glyph { width: 32px; height: 32px; border-radius: 10px; }
.perm-row .glyph svg { width: 16px; height: 16px; }
.perm-row .t { font-size: var(--fs-sm); font-weight: 620; }
.perm-row .d { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; margin-top: 2px; }
.perm-actions { display: grid; gap: var(--s2); }

/* Settings / customise rows */
.opt-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.opt-row:last-child { border-bottom: 0; }
.opt-row .t { flex: 1; font-size: var(--fs-sm); font-weight: 580; }
.opt-row .d { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); }
.seg button { min-height: 36px; padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.seg button.on { background: var(--brand-grad); color: var(--on-accent); }

.switch {
  width: 46px; height: 27px; border-radius: var(--r-pill); flex: none;
  background: var(--surface-2); border: 1px solid var(--line); position: relative;
  transition: background var(--t-fast);
}
.switch i {
  position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--text-3); transition: transform var(--t-med) var(--ease), background var(--t-med);
}
.switch.on { background: var(--brand-grad); border-color: transparent; }
.switch.on i { transform: translateX(19px); background: var(--on-accent); }

/* ---------- OCR ---------- */
.ocr-bar {
  height: 6px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--surface-2);
}
.ocr-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--brand-grad);
  transition: width var(--t-med) var(--ease);
}
.ocr-preview {
  margin-top: var(--s4); max-height: 34dvh; overflow: auto;
  padding: var(--s4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  color: var(--text-2);
}

/* ---------- compression ---------- */
.rec.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rec.on .glyph { color: var(--accent); }

.cmp-compare {
  display: flex; align-items: center; justify-content: center; gap: var(--s5);
  margin-top: var(--s5); padding: var(--s5);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
}
.cmp-compare > div { display: grid; gap: 4px; justify-items: center; }
.cmp-label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.cmp-size { font-size: var(--fs-h2); font-weight: 660; font-variant-numeric: tabular-nums; }
.cmp-size[data-good="true"] { color: var(--accent); }
.cmp-size[data-good="false"] { color: var(--danger); }
.cmp-arrow { color: var(--text-3); }
.cmp-arrow svg { width: 20px; height: 20px; display: block; }

/* ---------- form fields ---------- */
.form-field { display: grid; gap: 7px; margin-top: var(--s4); }
.form-field > span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.form-field input,
.form-field textarea {
  width: 100%; padding: 11px var(--s4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  outline: none; font-size: var(--fs-body); resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--accent-line); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--navbar-h) + 20px); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--surface-solid); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2); font-size: var(--fs-sm); font-weight: 560;
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-out);
  max-width: calc(100vw - 40px); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Placeholder tab panels */
.stub { display: grid; place-items: center; gap: var(--s3); text-align: center; padding: 22dvh 0; }
.stub .glyph { width: 56px; height: 56px; border-radius: 18px; }
.stub h2 { font-size: var(--fs-h2); font-weight: 650; }

/* =========================================================
   7. RESPONSIVE — tablet / desktop
   ========================================================= */
@media (min-width: 760px) {
  :root { --page-max: var(--tablet-max); }

  .primary-actions { max-width: 660px; }
  /* min-width:0 stops grid items from being floored at their min-content size */
  .dash-columns { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s7); align-items: start; }
  .dash-columns > * { min-width: 0; }
  .dash-columns > .section:first-child { margin-top: 0; }
  .dash-columns .section { margin-top: var(--s6); }
  .file-card { width: auto; }
  .continue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s3); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .auth-card, .ret-card { width: min(100%, 460px); margin-inline: auto; }
  .auth-head { margin-bottom: var(--s7); }
  .ob-slide { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s8); }
  .ob-art { width: 100%; max-width: 380px; }
  .sheet { border-radius: var(--r-xl); bottom: var(--s6); max-height: 78dvh; }
  .navbar { width: min(100%, 620px); left: 50%; transform: translateX(-50%); bottom: var(--s4); border-radius: var(--r-xl); border: 1px solid var(--line); }
  .empty-actions { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  .navbar { width: 660px; }
}

/* ---------- OCR review ----------
   Word boxes are positioned as PERCENTAGES of the page image, not pixels, so
   they stay aligned at any display size and need no measuring in JavaScript —
   the image can reflow, rotate on a phone, or be zoomed and the boxes follow. */
.ocr-page {
  position: relative; display: block; width: 100%;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.ocr-page img { display: block; width: 100%; height: auto; }

.ocr-word {
  position: absolute; padding: 0; border: 0; border-radius: 2px;
  background: transparent; cursor: pointer;
  outline: 1px solid transparent; transition: background var(--t-fast);
}
/* Only the doubtful ones are marked. Boxing every word would turn the page into
   a grid and hide the twenty that actually need a look. */
.ocr-word.is-low {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  outline-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
.ocr-word.is-edited {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  outline-color: var(--accent-line);
}
.ocr-word:hover, .ocr-word:focus-visible {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  outline-color: var(--accent);
}

.ocr-review-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-top: var(--s3);
}
.ocr-review-bar .count { font-size: var(--fs-sm); color: var(--text-2); }