/* The dashboard overview at /admin/. Fonts are the editor's own copies in /admin/fonts/ (scripts/copy-cms.mjs). */
@font-face { font-family: 'Source Sans 3 Variable'; font-weight: 200 900; font-display: swap; src: url(/admin/fonts/source-sans-3-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Material Symbols Outlined'; font-weight: 100 700; font-display: block; src: url(/admin/fonts/material-symbols-outlined-latin-wght-normal.woff2) format('woff2'); }

/* ===== Tokens ===== */
:root {
  --navy: #0F172A; --orange: #D96B27; --rust: #C2410C;
  --bg: #F6F7FB; --panel: #FFFFFF; --side: #FBFBFD; --text: #0F172A; --text2: #475569; --text3: #64748B;
  --rule: #E2E8F0; --rule-strong: #CBD5E1; --hover: #F1F5F9; --link: #1D4ED8;
  --shadow: 0 1px 2px rgb(15 23 42 / .05), 0 4px 16px rgb(15 23 42 / .05);
  /* one colour per category, like a coloured index tab */
  --c-research: #C2410C; --c-activities: #0F766E; --c-teaching: #4338CA;
  --c-cv: #B45309; --c-people: #BE185D; --c-website: #0369A1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1120; --panel: #111A2E; --side: #0E1627; --text: #E2E8F0; --text2: #94A3B8; --text3: #8391A7;
    --rule: #1E293B; --rule-strong: #334155; --hover: #172238; --link: #93C5FD;
    --shadow: 0 1px 2px rgb(0 0 0 / .3);
    --c-research: #FB923C; --c-activities: #2DD4BF; --c-teaching: #A5B4FC;
    --c-cv: #FBBF24; --c-people: #F472B6; --c-website: #7DD3FC;
    color-scheme: dark;
  }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.45 'Source Sans 3 Variable', system-ui, sans-serif; }
h1, h2, h3, h4, p, ol { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms { font-family: 'Material Symbols Outlined'; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; flex-shrink: 0; }

.sec-research { --c: var(--c-research); } .sec-activities { --c: var(--c-activities); } .sec-teaching { --c: var(--c-teaching); }
.sec-cv { --c: var(--c-cv); } .sec-people { --c: var(--c-people); } .sec-website { --c: var(--c-website); }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid transparent; font: 600 14px/1.2 inherit; text-decoration: none; cursor: pointer; background: none; color: inherit; white-space: nowrap; }
.btn .ms { font-size: 18px; }
.btn-primary { background: linear-gradient(135deg, var(--orange), var(--rust)); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: rgb(255 255 255 / .25); color: #F8FAFC; }
.btn-ghost:hover { border-color: #F8FAFC; }

/* ===== Top bar ===== */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; background: var(--navy); color: #F8FAFC; border-bottom: 3px solid var(--orange); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 16px; }
.brand b { color: #FDBA74; font-weight: 600; }
.top-actions { display: flex; gap: 8px; }
.menu-toggle { display: none; }

/* ===== Layout ===== */
.layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.side { background: var(--side); border-right: 1px solid var(--rule); padding: 14px 0 40px; position: sticky; top: 55px; height: calc(100vh - 55px); overflow-y: auto; }
.main { padding: 28px 32px 64px; max-width: 1500px; width: 100%; }

/* ===== Sidebar, as in Pure ===== */
.side-home { display: flex; align-items: center; gap: 10px; margin: 0 10px 10px; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.side-home[aria-current] { background: #FFEDD5; color: #9A3412; }
@media (prefers-color-scheme: dark) { .side-home[aria-current] { background: #3B1D0B; color: #FDBA74; } }
.side-sec { padding: 6px 0; border-top: 1px solid var(--rule); }
.side-sec-title { padding: 8px 22px 2px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c); }
.side-cat summary { display: flex; align-items: center; gap: 10px; padding: 6px 22px; cursor: pointer; font-weight: 600; list-style: none; }
.side-cat summary::-webkit-details-marker { display: none; }
.side-cat summary::before { content: 'expand_more'; font-family: 'Material Symbols Outlined'; font-size: 16px; color: var(--text3); margin-left: -16px; width: 6px; transition: transform .15s; font-feature-settings: 'liga'; }
.side-cat:not([open]) summary::before { transform: rotate(-90deg); }
.side-cat summary .ms { color: var(--c); }
.side-cat a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 16px 5px 52px; text-decoration: none; color: var(--text); }
.side-cat a:hover { background: var(--hover); }
.side-cat a.sub { font-size: 14px; color: var(--text2); padding-left: 64px; }
.side-cat a.add { justify-content: flex-start; gap: 4px; color: var(--link); font-size: 14px; }
.side-cat a.add .ms { font-size: 17px; }
.pill { min-width: 26px; padding: 0 7px; border: 1px solid var(--rule-strong); border-radius: 6px; font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text2); background: var(--panel); }
.pill-empty { border-style: dashed; }
.quiet .pill { border-style: dotted; }

/* ===== Greeting and numbers ===== */
.hello { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 14px; color: #F8FAFC; background: radial-gradient(120% 140% at 100% 0%, #9A3412 0%, transparent 55%), linear-gradient(120deg, #0F172A 0%, #1E293B 100%); box-shadow: var(--shadow); }
.hello-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #FDBA74; flex-shrink: 0; }
.hello-day { font-size: 13px; letter-spacing: .04em; color: #FDBA74; }
.hello h1 { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 2px 0; }
.hello-sub { color: #CBD5E1; }

.notice { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 10px; border: 1px solid #FED7AA; background: #FFF7ED; color: #7C2D12; }
.notice-warn { border-color: #FDE68A; background: #FFFBEB; color: #78350F; }
@media (prefers-color-scheme: dark) { .notice { background: #2A1606; border-color: #7C2D12; color: #FED7AA; } .notice-warn { background: #2A2006; border-color: #78350F; color: #FDE68A; } }
.notice a:not(.btn) { color: inherit; font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.stat { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow); text-decoration: none; transition: transform .12s, border-color .12s; }
.stat:hover { transform: translateY(-2px); border-color: var(--orange); }
.stat .ms { grid-row: span 2; font-size: 26px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #FFEDD5; color: var(--rust); }
@media (prefers-color-scheme: dark) { .stat .ms { background: #3B1D0B; color: #FDBA74; } }
.stat b { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span:last-child { font-size: 13px; color: var(--text2); }
.loading .stat b, .loading .pill { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .loading .stat b, .loading .pill { animation: none; } .stat { transition: none; } }

/* ===== Tiles, as in Pure ===== */
.crumb { display: flex; align-items: center; gap: 2px; margin: 30px 0 4px; font-size: 18px; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 14px; margin-top: 12px; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c); margin-bottom: 6px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--rule); border-top: 3px solid var(--c); box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(15 23 42 / .09); }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }
.tile h3 { padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--rule-strong); }
.tile h3 a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 16px; font-weight: 600; }
.tile h3 .ms { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--c); font-size: 20px; }
@media (prefers-color-scheme: dark) { .tile h3 .ms { color: #0B1120; } }
.tile-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; text-decoration: none; }
.tile-main:hover span:first-child { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); }
.chip b { font-weight: 700; }
.chip.quiet { color: var(--text2); background: transparent; border: 1px dashed var(--rule-strong); }
.tile-link, .tile-add { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; font-size: 14px; text-decoration: none; color: var(--link); }
.tile-link .ms, .tile-add .ms { font-size: 17px; }
.tile-link { color: var(--text2); }
.tile-link:hover, .tile-add:hover { text-decoration: underline; }
.tile-add { margin-top: auto; padding-top: 8px; }

/* ===== Latest changes ===== */
.recent { margin-top: 34px; padding: 18px 20px; border-radius: 12px; background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.recent h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.recent ol { list-style: none; padding: 0; }
.recent li { display: grid; grid-template-columns: 10px 1fr auto; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); }
.recent .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.recent time { font-size: 13px; color: var(--text3); white-space: nowrap; }
.recent-note { margin-top: 10px; font-size: 13px; color: var(--text3); }

/* ===== Narrow screens ===== */
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .menu-toggle { display: inline-flex; }
  .side { display: none; position: fixed; top: 55px; left: 0; bottom: 0; width: min(300px, 85vw); z-index: 15; box-shadow: 0 0 40px rgb(0 0 0 / .25); }
  .side-open .side { display: block; }
  .main { padding: 16px 16px 48px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { padding: 10px 16px; }
  .brand span { display: none; }
  .top-actions .btn-ghost:not(.menu-toggle) { display: none; }
}
@media (max-width: 480px) { .hello { padding: 16px; } .hello-photo { width: 56px; height: 56px; } .hello h1 { font-size: 21px; } }