/* MEDUSA — the platform's one stylesheet.
 *
 * Every human-facing page links this file: the front page, the map and the
 * administration page, which nginx serves from disk, and the data pages, which
 * the deposit service renders in Python inside its own container. One file
 * means the platform's look is changed in one place, by anyone, with no build
 * step and nothing to compile.
 *
 * Colours are custom properties so the dark variant only restates colour and
 * never layout. Add a page, link this file, use these class names.
 */

:root {
  --bg:#f2f5f7; --panel:#ffffff; --line:#e2e6ea; --line-strong:#cdd5dd;
  --ink:#16202a; --muted:#5b6b7a; --faint:#8b98a5;
  --accent:#0d6273; --accent-soft:#e6f1f3;
  --ok-bg:#e7f6ec; --ok-line:#b6e0c4; --ok-ink:#12492a;
  --err-bg:#fdeceb; --err-line:#f3c2be; --err-ink:#7d1f18;
  --radius:12px; --bar:58px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f1419; --panel:#182028; --line:#2a3540; --line-strong:#33404d;
    --ink:#e7edf3; --muted:#94a3b1; --faint:#6f7f8c;
    --accent:#5fd0e0; --accent-soft:#12272c;
    --ok-bg:#12291c; --ok-line:#1f5133; --ok-ink:#a9e3bf;
    --err-bg:#2b1614; --err-line:#5d2a24; --err-ink:#f0b4ae;
  }
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
a { color:var(--ink); }

/* ---- the bar every page carries ---------------------------------------- */
.topbar { position:sticky; top:0; z-index:1200; display:flex; align-items:center;
          gap:18px; height:var(--bar); padding:0 20px; background:var(--panel);
          border-bottom:1px solid var(--line); }
.topbar .brand { display:flex; align-items:center; gap:10px;
                 text-decoration:none; color:inherit; }
.topbar .brand img { height:26px; width:auto; display:block; }
.topbar .brand b { font-size:17px; letter-spacing:.03em; }
.topbar nav { display:flex; gap:2px; }
.topbar nav a { padding:7px 12px; border-radius:8px; text-decoration:none;
                color:var(--muted); font-size:15px; white-space:nowrap; }
.topbar nav a:hover { background:var(--accent-soft); color:var(--ink); }
.topbar nav a[aria-current="page"] { background:var(--accent-soft); color:var(--ink);
                                     font-weight:600; }
.topbar .who { margin-left:auto; display:flex; align-items:center; gap:12px;
               font-size:14px; color:var(--muted); white-space:nowrap; }
.topbar .who a { color:var(--muted); }
.topbar .who b { color:var(--ink); font-weight:600; }
@media (max-width:620px) {
  /* Two rows: the name and the account above, the sections below. The map page
     sizes itself from --bar, so raising it here keeps the map clear of the bar
     instead of hiding its first centimetre. */
  :root { --bar:94px; }
  .topbar { height:var(--bar); flex-wrap:wrap; align-content:center;
            gap:8px; row-gap:2px; padding:0 12px; }
  .topbar .who { font-size:13px; }
  .topbar .who .name { display:none; }
  .topbar nav { order:3; width:100%; overflow-x:auto; }
  .topbar nav a { padding:6px 8px; font-size:14px; }
}

/* ---- page frame --------------------------------------------------------- */
.shell { max-width:1000px; margin:0 auto; padding:44px 24px 72px; }
.shell.narrow { max-width:460px; }
h1 { margin:0 0 8px; font-size:34px; letter-spacing:-.025em; }
h2 { margin:0 0 6px; font-size:15px; }
.sub { color:var(--muted); font-size:14px; }
p.sub { margin:0 0 34px; font-size:16px; }

/* The name spelled out. The six letters are picked out in the accent colour
   so the acronym reads as an acronym without a word of explanation. */
.acronym { margin:0 0 16px; font-size:15px; color:var(--muted); font-style:italic; }
.acronym b { color:var(--accent); font-weight:700; font-style:normal; }

/* Institutional logos are never recoloured, and several of them are black line
   art on a transparent or white canvas, so they sit on a plaque that stays
   white in both themes rather than vanishing into the dark one. */
.logos { display:inline-flex; align-items:center; gap:36px; flex-wrap:wrap; margin-bottom:30px;
         background:#fff; border:1px solid var(--line); border-radius:var(--radius);
         padding:18px 24px; }
.logos img { height:46px; width:auto; display:block; }
.logos img[data-logo="cardimed.png"] { height:66px; }
@media (max-width:620px) { .logos { gap:22px; padding:14px 16px; }
                           .logos img { height:36px; }
                           .logos img[data-logo="cardimed.png"] { height:52px; } }

/* ---- the figures strip on the front page -------------------------------- */
.figures { display:flex; flex-wrap:wrap; margin:26px 0 34px; background:var(--panel);
           border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.figure { flex:1 1 150px; padding:15px 20px; border-right:1px solid var(--line); }
.figure:last-child { border-right:0; }
.figure b { display:block; font-size:23px; letter-spacing:-.02em; line-height:1.25;
            white-space:nowrap; }
.figure span { font-size:13px; color:var(--muted); }

/* ---- cards, panels, strips ---------------------------------------------- */
.cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
a.card { display:block; padding:22px; background:var(--panel); border:1px solid var(--line);
         border-radius:var(--radius); text-decoration:none; color:inherit; }
a.card:hover { border-color:var(--line-strong); }
a.card b { display:block; font-size:17px; margin-bottom:5px; }
a.card span { color:var(--muted); font-size:14px; }
.panel { background:var(--panel); border:1px solid var(--line);
         border-radius:var(--radius); padding:22px; margin-bottom:20px; }
.strip { margin-top:34px; padding:20px 22px; background:var(--panel);
         border:1px solid var(--line); border-radius:var(--radius); }
.strip p { margin:0 0 10px; font-size:14px; color:var(--muted); }
code { display:inline-block; max-width:100%; overflow-x:auto; vertical-align:bottom;
       font:13px ui-monospace,SFMono-Regular,Menlo,monospace;
       background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:5px 9px; }

/* ---- forms -------------------------------------------------------------- */
label { display:block; font-weight:600; font-size:14px; margin:16px 0 6px; }
label:first-child { margin-top:0; }
input, select { width:100%; padding:10px 12px; font:inherit; color:inherit;
                background:var(--panel); border:1px solid var(--line-strong); border-radius:8px; }
input[type=file] { padding:8px; }
.hint { font-size:13px; color:var(--muted); margin-top:8px; }
button { padding:10px 18px; font:inherit; font-weight:600; background:var(--ink);
         color:var(--panel); border:0; border-radius:8px; cursor:pointer; }
button:hover { opacity:.88; }
button.quiet { background:transparent; color:var(--err-ink); font-weight:500; padding:4px 8px; }
button.quiet:hover { background:var(--err-bg); opacity:1; }

/* ---- messages ----------------------------------------------------------- */
.ok, .err { padding:13px 15px; border-radius:9px; margin-bottom:20px; font-size:15px; }
.ok  { background:var(--ok-bg);  border:1px solid var(--ok-line);  color:var(--ok-ink); }
.err { background:var(--err-bg); border:1px solid var(--err-line); color:var(--err-ink); }

/* ---- listings ----------------------------------------------------------- */
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-weight:600; color:var(--muted); padding:8px 10px 8px 0;
     border-bottom:1px solid var(--line); font-size:13px; }
td { padding:9px 10px 9px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
td.num { text-align:right; color:var(--muted); white-space:nowrap; }
tr:last-child td { border-bottom:0; }
.crumbs { font-size:14px; margin-bottom:14px; color:var(--muted); }
.crumbs a { text-decoration:none; }
.tag { display:inline-block; font-size:12px; padding:2px 7px; border-radius:20px;
       background:var(--bg); color:var(--muted); margin-left:8px; }
.tag.mine { background:var(--ok-bg); color:var(--ok-ink); }
.yours { border-color:var(--ok-line); }

footer { margin-top:36px; font-size:13px; color:var(--faint); }
footer a { color:var(--faint); }

/* Hidden until the shared script learns the visitor is an administrator. */
[data-admin-only] { display:none; }