/* Library shelves — sits on the projects page's base sheet.

   Sized so an asset can be judged in the grid rather than opened: cards fill
   the available width, the image keeps its own proportion instead of being
   cropped into a strip, and the type is the reading size used everywhere
   else in the product. */
.library{max-width:1760px}
.library-sub{max-width:720px;font-size:17px;line-height:1.6}
.shelf{margin-bottom:44px}
/* One wide row of categories; the chosen one is the only one built. */
.shelf-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.shelf-tab{display:inline-flex;align-items:center;gap:10px;flex:1 1 0;justify-content:center;min-height:52px;padding:12px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#4a5867;font:600 16px/1 "DM Sans",sans-serif;cursor:pointer;transition:border-color .16s,color .16s,background-color .16s}
.shelf-tab span{padding:3px 9px;border-radius:999px;background:#eef2f0;color:#647080;font:700 13px/1 "Space Mono",monospace}
.shelf-tab:hover{border-color:#c2ccd2;color:var(--ink)}
.shelf-tab.active{border-color:var(--coral);background:var(--coral);color:#fff}
.shelf-tab.active span{background:rgba(255,255,255,.22);color:#fff}
.shelf-tab:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
@media(max-width:760px){.shelf-tab{flex:1 1 140px}}
.shelf-title{margin:0 0 6px;font:400 30px/1.2 "Libre Caslon Display",Georgia,serif}
.shelf-title span{color:#8a95a2;font:700 15px/1 "Space Mono",monospace;letter-spacing:.08em;margin-left:10px}
.shelf-title{margin-bottom:18px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.shelf-note{grid-column:1/-1;margin:0;padding:30px;border:1px dashed #cfd8dd;border-radius:12px;color:var(--muted);text-align:center;font-size:16px}
.library-more{display:flex;justify-content:center;min-height:46px;margin:24px auto 0;border:1px solid var(--line);background:#fff;color:var(--ink)}

/* Justified rows, our own way: pictures at their true proportion packed edge
   to edge so a row uses the whole width, and the naming that identifies a file
   sits over the picture instead of pushing it smaller. */
.media-grid{display:flex;flex-wrap:wrap;gap:8px}
.media-tile{position:relative;flex:1 1 320px;height:240px;margin:0;overflow:hidden;border-radius:10px;background:#e9eeec}
.tile-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.media-tile img,.media-tile video{display:block;width:100%;height:100%;object-fit:cover}
.media-tile.is-video{background:#0d1c31}
.media-tile.is-video video{object-fit:contain}
.tile-meta{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:2px;padding:34px 14px 12px;color:#fff;
  background:linear-gradient(to top,rgba(8,16,28,.88),rgba(8,16,28,.55) 55%,transparent);
  opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s}
.media-tile:hover .tile-meta,.media-tile:focus-within .tile-meta{opacity:1;transform:none}
.tile-meta b{font:600 15px/1.35 "DM Sans",sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-meta small{color:rgba(255,255,255,.72);font:400 12px/1.3 "Space Mono",monospace}
.tile-actions{display:flex;gap:14px;margin-top:6px}
.tile-actions a,.tile-actions button{border:0;background:none;padding:0;color:#8fdcd2;font:600 13px/1 "DM Sans",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tile-actions button{color:#f5b3a5}
.tile-open:focus-visible{outline:2px solid var(--coral);outline-offset:-2px}
@media (max-width:640px){
  .media-tile{flex:1 1 100%;height:auto}
  .media-tile img,.media-tile video{height:auto}
  .tile-meta{opacity:1;transform:none}
}

.album{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:32px 16px;background:rgba(9,18,30,.93)}
.album-stage{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0;min-width:0}
.album-image{max-width:min(1600px,100%);max-height:78vh;width:auto;height:auto;border-radius:8px;background:#0d1c31}
.album-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px;color:#e7ecef}
.album-caption b{font:600 17px/1.4 "DM Sans",sans-serif}
.album-count{color:#93a2ae;font:400 14px/1 "Space Mono",monospace}
.album-actions{display:flex;gap:18px}
.album-actions a,.album-actions button{border:0;background:none;padding:2px 0;color:#7fd0c6;font:600 15px/1 "DM Sans",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.album-actions .album-delete{color:#f0a294}
.album-arrow{width:56px;height:56px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.album-arrow:hover:not(:disabled){background:rgba(255,255,255,.22)}
.album-arrow:disabled{opacity:.25;cursor:default}
.album-close{position:absolute;top:20px;right:24px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:1}
.album-close:hover{background:rgba(255,255,255,.24)}
.album-arrow:focus-visible,.album-close:focus-visible,.album-actions a:focus-visible,.album-actions button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

@media (max-width:640px){
  .shelf-title{font-size:25px}
  .album{grid-template-columns:1fr;padding:20px 12px}
  .album-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px}
  .album-prev{left:10px}
  .album-next{right:10px}
}

/* Text buttons across the platform.
   A permanent underline is a hyperlink in a document, not a control on a
   screen: several of them in a row read as raw text. They now sit on their
   own quiet ground, with the underline kept for hover and focus, where it
   confirms the thing under the cursor is the thing that will act. Weight and
   colour still carry the hierarchy, so nothing gets louder than the primary
   button beside it. */
.text-button{
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:8px 13px;border:1px solid transparent;border-radius:9px;
  background:none;color:#4a5867;
  font:600 15px/1 "DM Sans",sans-serif;cursor:pointer;
  text-decoration:none;
  transition:background-color .16s,color .16s,border-color .16s;
}
.text-button:hover{background:rgba(20,36,59,.05);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.text-button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.text-button:disabled{opacity:.45;cursor:default;background:none;text-decoration:none}
.text-button.quiet{color:#7f8a95}
.text-button.quiet:hover{color:var(--coral-dark);background:rgba(238,117,91,.08)}