@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
/* Blush & Dark Espresso — single source of truth */
:root {
  --bg: #FAF7F5;
  --paper: #FFFFFF;
  --ink: #35221E;
  --muted: #79625A;
  --line: #E8D8D4;
  --accent: #C47F96;
  --accent-soft: #F8E8ED;
  --rose: #F1D7DE;
  --espresso: #35221E;
  --espresso-hover: #4B3029;
  --shadow: 0 14px 46px rgba(53,34,30,.065);
}*{box-sizing:border-box}body{margin:0;background:var(--bg);font:15px/1.6 Poppins,ui-sans-serif,system-ui,sans-serif;color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 max(28px,calc((100vw - 1160px)/2));gap:20px;background:#fff}.logo{display:flex;gap:9px;align-items:center;font-weight:750;letter-spacing:-.5px;font-size:20px}.symbol{color:var(--accent);font-size:25px}.subhead{margin-right:auto;font-size:12px;color:var(--muted);font-style:italic}.shell{max-width:1160px;margin:auto;padding:34px 22px 80px}.hero{border-radius:20px;background:linear-gradient(115deg,#F8E8ED,#FAF3F1 65%,#F1D7DE);padding:47px 52px 42px;box-shadow:var(--shadow)}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--accent);text-transform:uppercase}.hero h1{font:700 clamp(31px,5vw,48px)/1.16 Poppins,serif;letter-spacing:-1px;margin:13px 0}.hero p:not(.eyebrow){max-width:555px;color:#65483F;margin:0 0 25px}.hero-actions{display:flex;gap:10px}.hero .fineprint{font-size:12px!important;margin:16px 0 0!important;color:#8A7168!important}button{border-radius:9px;padding:9px 15px;border:1px solid transparent;font-weight:650}.primary{background:var(--espresso);color:white}.primary:hover{background:var(--espresso-hover)}.outlined{color:var(--espresso);background:#fff;border-color:var(--line)}.subtle{background:transparent;color:var(--muted);border-color:var(--line)}.danger{background:#fff2f1;color:#a34143;border-color:#f4d0d0}.progress{padding:18px 22px;background:#fff;margin-top:20px;border:1px solid var(--line);border-radius:12px}.progress-row{display:flex;justify-content:space-between;gap:15px}.progress-track{height:7px;background:#F3E5E3;border-radius:50px;overflow:hidden;margin-top:11px}#progressFill{height:100%;width:0%;background:var(--accent);transition:width .2s}.hidden{display:none!important}.toolbar{display:flex;gap:12px;margin:32px 0 25px}.search-wrap{flex:1;display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 16px;min-width:200px}.search-wrap span{font-size:23px;color:var(--muted)}.search-wrap input{width:100%;border:0;outline:0;padding:12px;background:transparent}.toolbar select{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;color:#65483F;max-width:190px}.list-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}.list-heading h2{font:700 25px Poppins,serif;margin:0}.list-heading h2 span{font:650 12px system-ui;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:5px 9px;vertical-align:middle;margin-left:8px}#note{font-size:12px;color:var(--muted)}.library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.fic-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:23px;min-height:275px;display:flex;flex-direction:column;box-shadow:var(--shadow);cursor:pointer;transition:transform .16s,border-color .16s}.fic-card:hover{transform:translateY(-3px);border-color:#C47F96}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.fandom{font-size:10px;font-weight:800;letter-spacing:1px;color:#A05E75;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heart{font-size:20px;color:#BA8D9E}.heart.faved{color:#B35E7D}.fic-card h3{font:700 21px/1.3 Poppins,serif;letter-spacing:-.2px;margin:16px 0 4px;overflow-wrap:anywhere}.byline{font-size:12px;color:var(--muted);margin-bottom:12px}.card-summary{font-size:13px;line-height:1.65;color:#65483F;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 15px}.tags{display:flex;gap:6px;flex-wrap:wrap}.tag{font-size:11px;border-radius:6px;padding:4px 8px;background:var(--accent-soft);color:#79445A;overflow-wrap:anywhere}.tag.character{background:#F6EEEA;color:#65483F}.tag.more{background:#F3EFED;color:#79625A}.card-bottom{border-top:1px solid var(--line);padding-top:12px;margin-top:auto;display:flex;gap:9px;justify-content:space-between;color:var(--muted);font-size:11px}.empty{text-align:center;padding:72px 20px;color:var(--muted)}.empty-symbol{color:var(--accent);font-size:60px}.empty h2{font:700 27px Poppins,serif;color:var(--ink);margin:0}.empty p{max-width:410px;margin:12px auto}footer{text-align:center;padding:25px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}dialog{border:1px solid var(--line);border-radius:16px;padding:0;box-shadow:0 25px 75px #35221E42;max-height:90vh;color:var(--ink)}dialog::backdrop{background:#35221E88}.detail-dialog,.edit-dialog{width:min(660px,94vw)}.dialog-body{padding:34px 40px;position:relative;overflow:auto;max-height:88vh}.close{position:absolute;top:12px;right:14px;background:transparent;font-size:26px;color:var(--muted);border:0}.dialog-body h2{font:700 30px/1.24 Poppins,serif;margin:7px 30px 3px 0}.muted{color:var(--muted)}.summary{white-space:pre-wrap;margin:24px 0;font-size:14px}.detail-meta{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}.action-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.edit-dialog label{display:block;font-weight:650;font-size:12px;color:#65483F;margin-top:13px}.edit-dialog label small{font-weight:400;color:var(--muted)}.edit-dialog input,.edit-dialog textarea,.edit-dialog select{width:100%;padding:9px 11px;margin-top:5px;border:1px solid #E8D8D4;border-radius:8px;background:white;color:var(--ink)}.reader-dialog{width:min(1000px,98vw);height:min(90vh,950px);max-height:none}.reader-head{display:flex;gap:12px;align-items:center;padding:15px 22px;border-bottom:1px solid var(--line);background:white}.reader-head>div{flex:1;min-width:0}.reader-head h2{font:700 16px Poppins,serif;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reader-head p{font-size:11px;color:var(--muted);margin:0}.reader-content{height:calc(100% - 81px);overflow:auto;padding:40px max(24px,calc((100% - 670px)/2));font:18px/1.9 Poppins,serif;white-space:pre-wrap;overflow-wrap:anywhere}.reader-content h3{margin-top:2em}.reader-content .reader-error{font:14px/1.7 system-ui;color:var(--muted)}@media(max-width:900px){.library{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar{flex-wrap:wrap}.search-wrap{flex-basis:100%}.toolbar select{flex:1;max-width:none}}@media(max-width:600px){.topbar{padding:0 16px}.subhead{display:none}.topbar .subtle{margin-left:auto}.shell{padding:20px 13px 60px}.hero{padding:30px 23px}.library{grid-template-columns:1fr}.dialog-body{padding:25px 20px}.reader-head{gap:5px;padding:10px}.reader-head button{padding:8px}.reader-content{padding:25px 20px}}

/* Public download control */
a.download-link {display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;border-radius:9px;padding:12px 18px;color:white;background:var(--espresso);font-weight:700}
a.download-link:hover {background:var(--espresso-hover)}
a.download-link[hidden] {display:none}
.auth-panel{max-width:480px;margin:65px auto;background:#fff;padding:38px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.auth-panel h1{font:700 31px Poppins,serif}.auth-panel label{display:block;font-weight:600;margin:15px 0}.auth-panel input{display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:5px}.auth-panel .primary{margin-top:8px}.error{color:#9c3333;font-size:13px;white-space:pre-wrap}.small-link{text-decoration:none;padding:7px 12px;border:1px solid #E8D8D4;border-radius:9px;font-size:13px}.admin-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px}.admin-actions button{font-size:12px;padding:7px 11px}.admin-card{cursor:default;min-height:230px}.progress-row{align-items:center}.edit-dialog label input[type=checkbox]{margin-right:7px}.admin-card .status{font-size:11px;font-weight:bold;color:var(--accent)}

/* Controlled, accessible tag picker: avoids enormous native dropdown menus. */
.toolbar{flex-wrap:wrap;align-items:stretch}
.toolbar>.search-wrap{flex:2 1 260px}
.toolbar>select,.toolbar>.tag-picker{flex:1 1 155px;min-width:0;max-width:none}
.toolbar>.tag-picker{position:relative}
.tag-picker-native{display:none!important}
.tag-picker-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);background:white;color:#65483F;border-radius:10px;text-align:left;font-weight:400}
.tag-picker-trigger span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tag-picker-trigger:focus-visible,.tag-picker-panel input:focus{outline:2px solid var(--accent);outline-offset:1px}
.tag-picker-panel{position:absolute;left:0;top:calc(100% + 5px);width:min(380px,calc(100vw - 30px));max-width:calc(100vw - 30px);z-index:50;padding:9px;border:1px solid var(--line);border-radius:12px;background:white;box-shadow:0 15px 45px #35221E33}
.tag-picker-panel[hidden]{display:none}
.tag-picker-panel input{display:block;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);margin:0 0 8px}
.tag-picker-list{max-height:min(330px,45vh);overflow-y:auto;overscroll-behavior:contain}
.tag-picker-group{font-size:11px;color:var(--accent);font-weight:750;padding:11px 9px 4px;letter-spacing:.04em;text-transform:uppercase}
.tag-picker-item{border:0;border-radius:7px;background:transparent;display:block;width:100%;text-align:left;padding:8px 9px;color:var(--ink);font-size:12px;line-height:1.35;font-weight:400;overflow-wrap:anywhere}
.tag-picker-item:hover,.tag-picker-item:focus-visible{background:var(--accent-soft)}
.tag-picker-item[aria-selected=true]{background:var(--accent-soft);color:var(--accent);font-weight:650}
.tag-picker-empty{padding:13px;color:var(--muted);font-size:12px}
@media(max-width:600px){.toolbar>.search-wrap{flex-basis:100%}.toolbar>select,.toolbar>.tag-picker{flex:1 1 calc(50% - 8px)}}

/* All toolbar dropdowns share the Tag Picker appearance. */
.toolbar>.tag-picker{flex:1 1 155px;min-width:0;max-width:none;position:relative}
.toolbar>.tag-picker .tag-picker-trigger{min-height:48px;height:100%;font-size:14px}
.toolbar>.tag-picker .tag-picker-panel{width:min(360px,calc(100vw - 32px));min-width:min(260px,calc(100vw - 32px));max-width:calc(100vw - 32px)}
.toolbar>.tag-picker .tag-picker-list{max-height:min(320px,45vh)}
@media(max-width:600px){.toolbar>.tag-picker{flex:1 1 calc(50% - 8px)}}

/* Reader features — same warm/purple design as the existing library */
.reader-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 20px}
.reader-tool-left,.reader-tool-right{display:flex;gap:8px;flex-wrap:wrap}
.reader-control{border:1px solid var(--line);background:var(--paper);color:var(--accent);padding:9px 13px;font-size:12px;border-radius:9px;font-weight:650;white-space:nowrap}
.reader-control:hover,.reader-control.active{background:var(--accent-soft);border-color:#E1B7C3}
.reader-control:focus-visible,.card-save:focus-visible,.similar-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#savedCount{display:inline-block;background:#F1D7DE;border-radius:99px;padding:1px 7px;margin-left:4px}
.card-badges{display:flex;gap:7px;align-items:center;min-width:0}.card-save{font-size:22px;line-height:1;border:0;background:transparent;color:var(--accent);padding:2px 4px}.card-save.is-saved{color:#B35E7D}
.compact-library{grid-template-columns:1fr;gap:9px}.compact-library .fic-card{min-height:0;padding:16px 19px;display:grid;grid-template-columns:minmax(165px,1fr) minmax(190px,2fr) auto;gap:4px 18px;align-items:start}
.compact-library .card-top{grid-column:1;grid-row:1}.compact-library .fic-card h3{grid-column:1;grid-row:2;font-size:18px;margin:4px 0}.compact-library .byline{grid-column:1;grid-row:3;margin:0}.compact-library .card-summary{grid-column:2;grid-row:1 / span 2;-webkit-line-clamp:2;margin:0}.compact-library .tags{grid-column:2;grid-row:3;max-height:56px;overflow:hidden}.compact-library .card-bottom{grid-column:3;grid-row:1 / span 3;align-self:center;min-width:116px;flex-direction:column;align-items:end;border:0;margin:0;padding:0}
.similar-section{border-top:1px solid var(--line);margin-top:24px;padding-top:15px}.similar-section h3{font:700 19px Poppins,serif;margin:0 0 12px}.similar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;color:var(--muted);font-size:13px}.similar-item{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:3px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:10px 12px;color:var(--ink);min-width:0;overflow-wrap:anywhere}.similar-item:hover{background:var(--accent-soft)}.similar-item strong{font:700 15px Poppins,serif}.similar-item span,.download-status{font-size:12px;color:var(--muted)}
@media(max-width:800px){.compact-library .fic-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.compact-library .card-bottom{grid-column:1 / -1;grid-row:4;flex-direction:row;align-items:center;border-top:1px solid var(--line);padding-top:8px}.compact-library .card-summary{grid-column:2;grid-row:1 / span 2}.compact-library .tags{grid-column:2;grid-row:3}}
@media(max-width:560px){.compact-library .fic-card{display:flex;gap:3px}.compact-library .card-summary{-webkit-line-clamp:2}.compact-library .card-bottom{width:100%}.reader-tool-left,.reader-tool-right{width:100%}.similar-grid{grid-template-columns:1fr}}
/* THE FIC SHELF — POPPINS FONT */

html,
body,
button,
input,
select,
textarea {
  font-family: 'Poppins', sans-serif;
}

/* Apply Poppins to all text, including headings and cards */
body * {
  font-family: 'Poppins', sans-serif;
}

.author-notice {
  max-width: 850px;
  margin: 60px auto 30px;
  padding: 24px;
  text-align: center;
  color: #79625A;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 1.9;
  border-top: 1px solid #E8D8D4;
}

.author-notice-title {
  font-size: 14px;
  font-weight: 600;
  color: #35221E;
  margin-bottom: 10px;
}

.author-notice a {
  color: #35221E;
  font-weight: 600;
  text-decoration: underline;
}

/* ==================================
   THE FIC SHELF — PAGE TRANSITIONS
   ================================== */

/* Page entrance */
body {
  animation: pageEnter 0.45s ease-out both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth fic card interactions */
.fic-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.fic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(70, 45, 85, 0.1);
}

/* Smooth buttons */
button,
.btn {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Smooth modal appearance */
dialog[open] {
  animation: modalEnter 0.28s ease-out both;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  body,
  .fic-card,
  button,
  .btn,
  dialog[open] {
    animation: none !important;
    transition: none !important;
  }
}

body.page-leaving {
  opacity: 0;
  transition: opacity 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.page-leaving {
    transition: none;
  }
}

/* THE FIC SHELF — CREATOR CREDIT */

.site-credits {
  text-align: center;
  padding: 12px 20px 30px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: #79625A;
}

.site-credits p {
  margin: 0;
}

.site-credits a {
  color: #35221E;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-credits a:hover {
  color: #A05E75;
  text-decoration: underline;
}


/* ======================================
   THE FIC SHELF — CONTENT TRANSITIONS
   ====================================== */

/* Filtering and sorting results */
@keyframes ficResultsEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fic-results-enter .fic-card {
  animation: ficResultsEnter 0.35s ease-out both;
}

/* Slight staggered entrance */
.fic-results-enter .fic-card:nth-child(2) {
  animation-delay: 35ms;
}

.fic-results-enter .fic-card:nth-child(3) {
  animation-delay: 70ms;
}

.fic-results-enter .fic-card:nth-child(4) {
  animation-delay: 105ms;
}

.fic-results-enter .fic-card:nth-child(n+5) {
  animation-delay: 140ms;
}

/* Similar fic modal transitions */
@keyframes ficDetailEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fic-detail-enter {
  animation: ficDetailEnter 0.3s ease-out both;
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .fic-results-enter .fic-card,
  .fic-detail-enter {
    animation: none !important;
  }
}

/* Unified interactive details and footer palette */
a:not(.download-link) { color: #9A506B; }
.site-credits a, .author-notice a { color: #9A506B; }
.site-credits a:hover, .author-notice a:hover { color: var(--espresso); }
.tag-picker-trigger:hover, .reader-control:hover { border-color: #D9A3B4; }
.tag-picker-item[aria-selected="true"], .reader-control.active { color: #79445A; background: var(--accent-soft); }
.tag-picker-panel input:focus-visible, .toolbar input:focus-visible, .edit-dialog input:focus-visible,
.edit-dialog textarea:focus-visible, .auth-panel input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* ===============================================
   THE FIC SHELF — PIN SCREEN (single rule set)
   Matches pin-lock.js: #ficPinOverlay, .fic-pin-card
   =============================================== */

/* The body entrance animation uses transform, which changes the containing
   block for fixed children. Disable it while the PIN screen is active. */
html.fic-pin-locked,
html.fic-pin-locked body {
  overflow: hidden !important;
}
html.fic-pin-locked body {
  animation: none !important;
  transform: none !important;
}

html.fic-pin-locked body > :not(#ficPinOverlay) {
  visibility: hidden;
}

#ficPinOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px;
  background: var(--bg);
  opacity: 1;
  visibility: visible;
  animation: none !important;
}

#ficPinOverlay .fic-pin-card {
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: 38px 30px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(53, 34, 30, .12);
}

.fic-pin-hint {
  margin: 10px 0 22px;
  color: #9A506B;
  font: 500 14px/1.6 Poppins, sans-serif;
  letter-spacing: .3px;
}

/* The animation must override the overlay's default opacity. */
#ficPinOverlay.fic-pin-unlocking {
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

@media (max-width: 480px) {
  #ficPinOverlay { padding: 16px; }
  #ficPinOverlay .fic-pin-card { padding: 30px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #ficPinOverlay.fic-pin-unlocking { transition: none; }
}


/* ============================================================
   THE FIC SHELF — RESPONSIVE LAYOUT (PUBLIC + ADMIN)
   Append to the END of style.css. No JS or Supabase changes.
   ============================================================ */

/* Prevent long titles, tag values, controls, and dialogs from widening page. */
html { width: 100%; overflow-x: clip; }
body { width: 100%; min-width: 0; }
.shell, .hero, .library, .fic-card, .toolbar, .reader-tools,
.dialog-body, .tag-picker, .tag-picker-trigger, .similar-item { min-width: 0; }
.fic-card h3, .dialog-body h2, .hero h1, .summary, .byline,
.tag, .card-summary, .similar-item { overflow-wrap: anywhere; }

/* All viewport widths: comfortably sized tappable inputs. */
.toolbar > select, .toolbar > .tag-picker, .tag-picker-trigger,
.reader-control, .primary, .outlined, .subtle { min-height: 44px; }
.toolbar > .tag-picker { position: relative; }
.tag-picker-panel { box-sizing: border-box; }
.tag-picker-panel input { font-size: 16px; }

@media (max-width: 900px) {
  .topbar { padding-inline: 22px; }
  .shell { padding: 26px 20px 60px; }
  .hero { padding: 36px 34px; }
  .toolbar { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
  .toolbar > .search-wrap { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .toolbar > select, .toolbar > .tag-picker { width: 100%; min-width: 0; max-width: none; }
  .toolbar > .tag-picker .tag-picker-trigger { min-width: 0; }
  .library { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .reader-tools { gap: 12px; }
  .tag-picker-panel, .toolbar > .tag-picker .tag-picker-panel {
    width: min(350px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    min-width: 0;
  }
  /* Last two filters should expand their panels toward the left. */
  .toolbar > .tag-picker:nth-last-child(-n+2) .tag-picker-panel { left: auto; right: 0; }
  .compact-library .fic-card { grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); }
  .compact-library .card-bottom { grid-column: 1 / -1; grid-row: 4; }
}

@media (max-width: 600px) {
  .topbar {
    height: auto; min-height: 60px; padding: 12px 16px;
    display: flex; flex-wrap: wrap; gap: 8px 12px;
  }
  .logo { font-size: 17px; letter-spacing: -.35px; }
  .symbol { font-size: 22px; }
  .subhead { display: none; }
  .topbar > a.small-link, .topbar > button { margin-left: auto; font-size: 12px; padding: 8px 10px; }
  .shell { padding: 16px 14px 48px; }
  .hero { border-radius: 16px; padding: 27px 22px; }
  .hero h1 { font-size: clamp(27px, 7.5vw, 35px); line-height: 1.18; letter-spacing: -.6px; }
  .hero p:not(.eyebrow) { font-size: 13px; line-height: 1.7; }
  .eyebrow { font-size: 10px; letter-spacing: 1.3px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions > button { flex: 1 1 150px; }

  .toolbar { margin: 24px 0 18px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .toolbar > .search-wrap { grid-column: 1 / -1; min-height: 48px; }
  .search-wrap { padding-inline: 12px; }
  .search-wrap input { font-size: 16px; min-width: 0; padding: 11px 8px; }
  .toolbar > select, .toolbar > .tag-picker { grid-column: auto; min-width: 0; width: 100%; max-width: none; }
  .toolbar > .tag-picker .tag-picker-trigger { font-size: 13px; padding: 10px; min-height: 46px; }
  .toolbar > .tag-picker .tag-picker-panel,
  .tag-picker-panel {
    position: absolute; width: min(330px, calc(100vw - 28px));
    max-width: calc(100vw - 28px); min-width: 0;
    top: calc(100% + 5px); left: 0; right: auto;
    z-index: 150; max-height: min(70dvh, 420px);
  }
  /* Keep picker safely within viewport whether column is left or right. */
  .toolbar > .tag-picker:nth-child(even) .tag-picker-panel { left: auto; right: 0; }
  .tag-picker-list { max-height: min(46dvh,300px); }
  .tag-picker-item { min-height: 40px; font-size: 13px; }

  .reader-tools { align-items: stretch; gap: 9px; }
  .reader-tool-left, .reader-tool-right { display: flex; flex-wrap: wrap; width: 100%; gap: 7px; }
  .reader-tool-left > .reader-control { flex: 1 1 auto; }
  .reader-tool-right > .reader-control { flex: 1 1 0; }
  .reader-control { font-size: 12px; padding: 8px 9px; white-space: normal; }
  .list-heading { gap: 8px; flex-wrap: wrap; align-items: baseline; }
  .list-heading h2 { font-size: 21px; }
  #note { font-size: 11px; }
  .library { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .fic-card { min-height: 0; padding: 18px; border-radius: 13px; }
  .fic-card h3 { font-size: 19px; margin-top: 12px; }
  .card-summary { font-size: 12px; }
  .tags { gap: 5px; }
  .tag { font-size: 10px; }
  .compact-library .fic-card { display: flex; gap: 3px; }
  .compact-library .card-summary { display: -webkit-box; -webkit-line-clamp: 2; }
  .compact-library .card-bottom { width: 100%; flex-direction: row; align-items: center; }

  /* Mobile modal: almost full-screen, independently scrollable. */
  dialog.detail-dialog, dialog.edit-dialog {
    width: calc(100vw - 24px); max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px); margin: auto;
    border-radius: 16px;
  }
  .dialog-body { max-height: calc(100dvh - 30px); padding: 27px 20px 24px; overflow-y: auto; overscroll-behavior: contain; }
  .dialog-body h2 { font-size: clamp(22px,6vw,29px); padding-right: 12px; }
  .close { top: 8px; right: 9px; min-width: 44px; min-height: 44px; }
  .detail-meta { font-size: 12px; }
  .summary { font-size: 13px; line-height: 1.75; }
  .similar-grid { grid-template-columns: 1fr; }
  .similar-item { min-height: 48px; }
  .action-row { align-items: stretch; gap: 8px; }
  .action-row > button, .action-row > a.download-link { flex: 1 1 165px; text-align: center; }
  .action-row > .download-status { flex-basis: 100%; }
  .edit-dialog input, .edit-dialog textarea, .edit-dialog select, .auth-panel input { font-size: 16px; }
  .auth-panel { margin: 25px auto; padding: 24px 20px; }
  .progress { padding: 14px; }
  .progress-row { flex-wrap: wrap; }
  .admin-actions button { min-height: 40px; }
  .author-notice { margin: 38px 14px 18px; padding: 20px 8px; }
  .site-credits { padding: 10px 14px 24px; }
  footer { padding: 24px 16px; }

  /* PIN overlay compatible with latest PIN screen implementation. */
  #ficPinOverlay { padding: 16px; }
  #ficPinOverlay .fic-pin-card { width: 100%; max-width: 400px; padding: 28px 20px; }
  #ficPinOverlay input { max-width: 100%; font-size: 18px; }
}

@media (max-width: 370px) {
  .shell { padding-inline: 10px; }
  .hero { padding: 22px 17px; }
  .toolbar { gap: 7px; }
  .toolbar > .tag-picker .tag-picker-trigger { font-size: 12px; }
  .reader-tool-left > .reader-control { flex-basis: calc(50% - 8px); }
  .fic-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fic-card, .reader-control, .tag-picker-trigger { transition: none !important; }
}


/* THE FIC SHELF — MOBILE FIC TILE OVERFLOW FIX
   Paste at the VERY END of style.css, after the previous mobile CSS. */

/* Prevent card content from forcing the grid wider than its container. */
.library,
.compact-library,
.library > .fic-card,
.compact-library > .fic-card,
.fic-card > *,
.fic-card .card-top,
.fic-card .card-badges,
.fic-card .tags,
.fic-card .card-bottom {
  min-width: 0;
  max-width: 100%;
}

.library,
.compact-library { width: 100%; }
.fic-card { width: 100%; box-sizing: border-box; }

/* Wrap long titles, summaries, authors, and tag values. */
.fic-card h3,
.fic-card .byline,
.fic-card .card-summary,
.fic-card .fandom,
.fic-card .tag,
.fic-card .card-bottom,
.fic-card .status {
  overflow-wrap: anywhere;
  word-break: normal;
}
.fic-card .tag { white-space: normal; max-width: 100%; }
.fic-card .tags { flex-wrap: wrap; }
.fic-card .card-top { flex-wrap: wrap; gap: 6px; }
.fic-card .card-badges { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.fic-card .fandom { flex: 1 1 125px; }
.fic-card .card-bottom { flex-wrap: wrap; }

@media (max-width: 600px) {
  /* Both display modes must remain one column on phones. */
  .library,
  .library.compact-library {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }

  /* Explicitly reset desktop compact view's three-column card grid. */
  .library .fic-card,
  .library.compact-library .fic-card {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 16px;
    gap: 5px;
  }

  .library .fic-card > *,
  .library.compact-library .fic-card > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0;
    max-width: 100%;
    width: auto;
  }

  .library .fic-card .card-top,
  .library.compact-library .fic-card .card-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
  }

  .library .fic-card .card-summary,
  .library.compact-library .fic-card .card-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 4px 0 10px;
  }

  .library.compact-library .fic-card .card-summary {
    -webkit-line-clamp: 2;
  }

  .library .fic-card .card-bottom,
  .library.compact-library .fic-card .card-bottom {
    width: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
  }

  .library .fic-card .tags,
  .library.compact-library .fic-card .tags {
    width: 100%;
    max-height: none;
    overflow: visible;
  }
}