/* The HCA document library and its page-turn reader.
   Inherits the shared tokens in styles.css (--ink, --surface, --edge, the two
   brand hues); no new palette, no new type, no decorative graphics. */

.doc-library{display:grid;gap:16px;margin-top:20px}
.doc-card{border:1px solid var(--edge);border-left:4px solid var(--accent-deep);border-radius:12px;background:var(--raise);padding:16px 18px;min-width:0}
.doc-card h2{margin:2px 0 6px;font-size:1.15rem;overflow-wrap:anywhere}
.doc-card-label{margin:0;font:600 .72rem/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-deep)}
.doc-card-subtitle{margin:0 0 6px;color:var(--ink-2)}
.doc-card-supplied,.doc-card-meta,.doc-card-resume{margin:2px 0;color:var(--mute);font-size:.92rem;overflow-wrap:anywhere}
.doc-card-supplied{color:var(--ink-2)}
.doc-card-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px}

.doc-reader-head h1{margin:6px 0 4px;font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem);overflow-wrap:anywhere}
.doc-reader-meta{margin:0 0 14px;color:var(--mute);font-size:.92rem;overflow-wrap:anywhere}

/* Two columns from 900px up, one below. minmax(0,…) keeps a 616-page book from
   pushing the grid wider than the viewport. */
.doc-reader-body{display:grid;gap:16px;min-width:0}
.doc-reader-body.has-outline{margin-top:4px}

.doc-reader-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--edge);border-radius:12px;background:var(--surface)}
/* Previous and Next are one control, always adjacent. */
.doc-turn{display:flex;gap:8px;align-items:center}
.doc-step{min-width:44px;min-height:44px}
.doc-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.doc-jump-label{font-size:.9rem;color:var(--ink-2)}
.doc-jump-input{width:7.5rem;min-height:44px;padding:8px 10px;border:1px solid var(--edge);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.doc-jump-input:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.doc-zoom{display:flex;flex-wrap:wrap;gap:6px}
.doc-zoom-btn{min-width:44px;min-height:44px}
.doc-zoom-fit{min-width:0}
.doc-download{min-height:44px;display:inline-flex;align-items:center}

.doc-reader-status{margin:12px 0 0;font:600 .82rem/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.05em;color:var(--ink-2)}
.doc-reader-save{margin:4px 0 0;color:var(--mute);font-size:.9rem;min-height:1.2em}
.doc-reader-save .btn{margin-left:6px}

.doc-reader-stage{min-width:0}
.doc-reader-stage:focus-visible{outline:3px solid var(--accent-deep);outline-offset:4px;border-radius:8px}
/* The page pans inside this box when it is zoomed wider than the column: the
   canvas keeps its full rendered width, the left edge stays at the box's left
   edge (auto margins collapse to 0 when the content is over-wide), and the
   document itself never gains a horizontal scrollbar. At fit width there is
   nothing to pan, so a horizontal touch is a page turn the reader can use. */
.doc-page{margin-top:14px;background:var(--ground);border:1px solid var(--edge);border-radius:10px;padding:10px;min-width:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-y pinch-zoom}
.doc-page:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.doc-page.doc-page-pannable{touch-action:pan-x pan-y pinch-zoom}
.doc-canvas{display:block;margin:0 auto;max-width:none;height:auto;background:#fff;box-shadow:var(--shadow)}
/* A subtle direction cue on a turn, clipped by the page box; no 3D, and no
   motion at all when the learner has asked the system for less. */
@keyframes doc-page-next{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes doc-page-previous{from{opacity:.4;transform:translateY(-6px)}to{opacity:1;transform:none}}
.doc-canvas.doc-turn-next{animation:doc-page-next .18s ease-out}
.doc-canvas.doc-turn-previous{animation:doc-page-previous .18s ease-out}

.doc-page-text{margin-top:20px;border-top:1px solid var(--grid);padding-top:12px}
.doc-page-text h3{margin:0 0 8px;font-size:1rem}
.doc-page-text-body{max-width:72ch;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.doc-page-text-body:empty{display:none}
.doc-page-notice{margin:0 0 10px}
.doc-page-notice[hidden]{display:none}
.doc-page-notice p{margin:0 0 8px;color:var(--bad)}

.doc-outline{border:1px solid var(--edge);border-radius:12px;background:var(--surface);padding:10px 12px;min-width:0}
.doc-outline[hidden]{display:none}
.doc-outline summary{cursor:pointer;font-weight:600;color:var(--ink)}
.doc-outline-body{margin-top:8px;max-height:60vh;overflow:auto}
.doc-outline-list{list-style:none;margin:0;padding-left:12px;display:grid;gap:2px}
.doc-outline-list .doc-outline-list{padding-left:14px}
.doc-outline-link{display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:7px 8px;min-height:36px;color:var(--ink-2);font:inherit;cursor:pointer}
.doc-outline-link:hover{background:var(--accent-wash);color:var(--accent-deep)}
.doc-outline-link:focus-visible{outline:3px solid var(--accent-deep);outline-offset:1px}
.doc-outline-flat{display:block;padding:7px 8px;color:var(--mute);font-size:.9rem;overflow-wrap:anywhere}

@media (min-width:900px){
  .doc-reader-body.has-outline{grid-template-columns:230px minmax(0,1fr);align-items:start}
  .doc-outline{position:sticky;top:12px}
}
@media (max-width:699px){
  .doc-reader-toolbar{gap:8px}
  /* The page-turn pair owns a full row of its own, jump and zoom share the
     rows below it, and every target stays 44px. */
  .doc-turn{flex:1 1 100%}
  .doc-turn .doc-step{flex:1 1 0}
  .doc-jump{flex:1 1 100%}
  .doc-jump-input{width:auto;flex:1 1 auto;min-width:5rem}
  .doc-zoom{flex:0 1 auto}
  .doc-download{flex:1 1 auto;justify-content:center}
  .doc-outline-body{max-height:none}
}
@media (max-width:320px){
  .doc-card{padding:14px}
  .doc-page{padding:6px}
}
@media (prefers-reduced-motion:reduce){
  .doc-canvas.doc-turn-next,.doc-canvas.doc-turn-previous{animation:none}
  .doc-page{scroll-behavior:auto}
}