/* One black theme (PO-2-07): quiet type, hairline borders, links underlined only on hover. */
:root {
  --bg: #000000; --fg: #ededed; --strong: #ffffff; --muted: #8b8b90; --faint: #5c5c61;
  --line: #1f1f22; --line-strong: #2e2e33; --card: #0a0a0b; --card-hover: #111113;
  --accent: #8ab4ff; --ok: #5fd39a; --flag: #ff7a6b; --flash: #14130c; --flash-line: #3b351a;
  --radius: 10px;
  color-scheme: dark;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); }
::selection { background: #2b3f66; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
code { font-family: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
       font-size: .85em; color: #c9c9ce; }

/* Header */
.top { position: sticky; top: 0; z-index: 1; display: flex; gap: 1.75rem; align-items: center;
       padding: .8rem 1.5rem; border-bottom: 1px solid var(--line); flex-wrap: wrap;
       background: rgba(0, 0, 0, .8); backdrop-filter: saturate(180%) blur(12px); }
.brand { font-weight: 600; letter-spacing: -0.02em; color: var(--strong); }
.brand:hover { text-decoration: none; }
.top nav { display: flex; gap: 1.25rem; }
.top nav a, .me > a { color: var(--muted); font-size: .9rem; }
.top nav a:hover, .me > a:hover { color: var(--strong); text-decoration: none; }
.me { margin-left: auto; display: flex; gap: 1rem; align-items: center; }
.top form { margin: 0; }
.top button.quiet { color: var(--muted); font-size: .9rem; }

main { max-width: 1120px; margin: 0 auto; padding: 1.5rem; }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }

/* Type */
h1, h2, h3 { color: var(--strong); font-weight: 600; }
h1 { margin: .75rem 0 .4rem; font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1.2; }
h2 { margin: 2.25rem 0 .75rem; font-size: .75rem; font-weight: 500; letter-spacing: .08em;
     text-transform: uppercase; color: var(--muted); }
h3 { font-size: .95rem; letter-spacing: -0.01em; margin: 1.25rem 0 .5rem; }
.lead { font-size: 1.05rem; color: #c4c4c9; max-width: 60ch; }
.muted { color: var(--muted); } .small { font-size: .82rem; }
.flash { background: var(--flash); border: 1px solid var(--flash-line); padding: .6rem .9rem;
         border-radius: var(--radius); font-size: .9rem; }
.error { color: var(--flag); display: block; font-size: .82rem; }

/* Cards: the whole card is the project, and its title is never underlined */
.cards { list-style: none; padding: 0; display: grid; gap: .75rem;
         grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.card { position: relative; background: var(--card); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 1rem 1.1rem;
        transition: border-color .15s ease, background .15s ease; }
.card:hover { border-color: var(--line-strong); background: var(--card-hover); }
.card .title { display: block; font-weight: 600; font-size: 1.02rem; letter-spacing: -0.015em;
               color: var(--strong); margin-bottom: .35rem; }
.card .title:hover { text-decoration: none; }
.card .title::after { content: ""; position: absolute; inset: 0; }  /* the whole card links */
.card p { margin: .5rem 0 0; color: #b4b4b9; font-size: .92rem; }
.card p.muted { color: var(--faint); }
.card.inactive { opacity: .5; }

/* Status pills */
.status { display: inline-block; font-size: .72rem; font-weight: 500; letter-spacing: .01em;
          padding: .05rem .5rem; border-radius: 99px; border: 1px solid var(--line-strong);
          color: var(--muted); }
.s-active, .s-proposing, .s-submitted, .s-selected, .s-under-contract {
  border-color: rgba(95, 211, 154, .35); color: var(--ok); background: rgba(95, 211, 154, .06); }
.s-flag { border-color: rgba(255, 122, 107, .35); color: var(--flag); background: rgba(255, 122, 107, .06); }

/* Project page */
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; gap: 1rem; } }
aside ul, section ul { padding-left: 1.1rem; }
aside ul { list-style: none; padding-left: 0; }
aside li, .docs li { margin: .4rem 0; }
.docs { list-style: none; padding-left: 0; }
.docs a { color: var(--fg); }
.docs a:hover { color: var(--strong); }
.amendments { padding-left: 0; list-style: none; }
.amendments li { margin: .5rem 0; }
.amendments li p { display: inline; }
.history { list-style: none; padding: 0; font-size: .82rem; color: var(--muted); }
.history li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.changes { font-size: .78rem; border-collapse: collapse; margin-top: .3rem; }
.changes th, .changes td { padding: .15rem .45rem; text-align: left; vertical-align: top;
                           max-width: 22rem; overflow-wrap: anywhere; }
summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
summary:hover { color: var(--strong); }

/* Forms */
.narrow { max-width: 520px; }
.stack { display: grid; gap: .7rem; margin: .6rem 0; }
.stack label { display: grid; gap: .25rem; font-size: .85rem; color: var(--muted); }
input, select, textarea, button, .button {
  font: inherit; font-size: .92rem; padding: .5rem .7rem; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--fg); }
input:focus, select:focus, textarea:focus { outline: none; border-color: #4a4a52;
  box-shadow: 0 0 0 3px rgba(138, 180, 255, .15); }
button, .button { background: var(--strong); color: #000; border-color: var(--strong);
                  font-weight: 500; cursor: pointer; display: inline-block;
                  transition: opacity .15s ease; }
button:hover, .button:hover { opacity: .85; text-decoration: none; }
button.quiet { background: none; color: var(--accent); border: none; padding: 0; font-weight: 400; }
button.quiet:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
form.inline { display: inline; margin-left: .35rem; }

/* Docs rendered from git */
.doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
       padding: 1.5rem 2rem; overflow-x: auto; }
.doc h1 { font-size: 1.6rem; }
.doc h2 { font-size: 1.2rem; text-transform: none; letter-spacing: -0.02em; color: var(--strong);
          font-weight: 600; }
.doc a { text-decoration: underline; text-decoration-color: rgba(138, 180, 255, .35);
         text-underline-offset: 3px; }
.doc table { border-collapse: collapse; font-size: .88rem; }
.doc th, .doc td { border: 1px solid var(--line-strong); padding: .35rem .6rem; vertical-align: top; }
.doc th { background: var(--card-hover); color: var(--strong); font-weight: 500; }
.doc pre { overflow-x: auto; background: #050506; border: 1px solid var(--line);
           padding: .9rem 1rem; border-radius: 8px; }
.doc blockquote { margin: 0; padding-left: 1rem; border-left: 2px solid var(--line-strong);
                  color: #b4b4b9; }
.crumbs { margin: .5rem 0 1.25rem; color: var(--muted); font-size: .9rem; }

/* Library and search (PO-3) */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.filters input { flex: 1 1 260px; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows > li { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.rows .title { color: var(--strong); font-weight: 500; letter-spacing: -0.01em; }
.rows .title:hover { text-decoration: none; color: var(--accent); }
.rows .small { margin-top: .2rem; }
.refs { padding-left: 1.4rem; font-size: .9rem; }
.refs li { margin: .3rem 0; }
label.check { display: flex; gap: .5rem; align-items: center; }
.p-peer-reviewed { border-color: rgba(95, 211, 154, .35); color: var(--ok); }
.p-government { border-color: rgba(138, 180, 255, .4); color: var(--accent); }
.p-preprint, .p-internal { border-color: rgba(230, 190, 110, .4); color: #e6be6e; }
.p-lead { border-color: rgba(255, 122, 107, .35); color: var(--flag); }
.hit { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.hit blockquote { margin: .4rem 0 0; color: #c4c4c9; font-size: .93rem; }
.hit mark { background: rgba(138, 180, 255, .18); color: var(--strong); border-radius: 3px; padding: 0 .1em; }
.score { font-variant-numeric: tabular-nums; }

/* Topics (PO-4) */
table.list { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.list th { text-align: left; font-weight: 500; font-size: .72rem; letter-spacing: .08em;
                text-transform: uppercase; color: var(--muted); padding: .5rem .6rem;
                border-bottom: 1px solid var(--line-strong); }
table.list td { padding: .65rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:hover td { background: var(--card); }
table.list .title { color: var(--strong); font-weight: 500; }
table.list .title:hover { text-decoration: none; color: var(--accent); }
.nowrap { white-space: nowrap; }
.qa { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.qa p { margin: .2rem 0; }
.qa .answer { color: #c4c4c9; padding-left: 1rem; border-left: 2px solid var(--line-strong); }
.diff td { font-size: .85rem; line-height: 1.5; }
del { color: var(--flag); background: rgba(255, 122, 107, .1); text-decoration: line-through; }
ins { color: var(--ok); background: rgba(95, 211, 154, .1); text-decoration: none; }
.s-new, .s-shortlisted { border-color: rgba(138, 180, 255, .4); color: var(--accent); }
.s-screened-out, .s-passed, .s-not-selected, .s-withdrawn { color: var(--faint); }

/* Pursuits board (DEC-11) */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 800px) { .board { grid-template-columns: 1fr; } }
.column h2 { margin-top: .5rem; }
.column .card { display: grid; gap: .25rem; margin-bottom: .6rem; color: var(--fg); }
.column .card:hover { text-decoration: none; }
.s-evaluating { border-color: rgba(138, 180, 255, .4); color: var(--accent); }
.s-writing, .s-submitted, .s-awarded { border-color: rgba(95, 211, 154, .35); color: var(--ok); }
.s-no-bid, .s-withdrawn { color: var(--faint); }

/* Badges: a colour per value (markup.HUES), and how far away a date is */
.badge { --h: 210; display: inline-block; font-size: .72rem; font-weight: 500; line-height: 1.5;
         padding: 0 .45rem; border-radius: 6px; white-space: nowrap; vertical-align: 1px;
         color: hsl(var(--h) 85% 74%); background: hsl(var(--h) 70% 50% / .13);
         border: 1px solid hsl(var(--h) 70% 62% / .35); }
.badge.grey { color: var(--muted); background: transparent; border-color: var(--line-strong); }
.badges { display: inline-flex; gap: .3rem; flex-wrap: wrap; vertical-align: middle; }
.away { font-size: .78rem; white-space: nowrap; }
.away.urgent { color: #ff7a6b; font-weight: 600; }
.away.soon { color: #e6be6e; }
.away.later { color: var(--muted); }
.away.past { color: var(--faint); }

/* Library tabs: external documents and AI research reports (A-18) */
.tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--line); margin: .5rem 0 1rem; }
.tabs a { color: var(--muted); padding: .4rem 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--strong); text-decoration: none; }
.tabs a.on { color: var(--strong); border-bottom-color: var(--strong); }

/* Text with equations (A-19) */
.math-display { overflow-x: auto; margin: .75rem 0; }
.page-mark { color: var(--faint); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
             border-top: 1px solid var(--line); padding-top: .4rem; margin-top: 1.5rem; }

/* Phases (A-22) */
.phases { padding-left: 1.2rem; }
.phases li { margin: .6rem 0; }
.phases li.done strong { color: var(--muted); text-decoration: line-through; }
.phases .actions { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
button.check { background: none; border: none; color: var(--fg); font-size: 1.05rem; padding: 0 .3rem 0 0; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
