/*
 * PansophIQ-Dossier server pages: structure and role references only.
 *
 * Every visual decision here is a named `--pq-*` role (application look,
 * served at /look/<version>/<etag>.css and linked after this file). No colour,
 * typeface or px type size is written in this file; the token lint
 * (look-lint.json) fails the build if one appears. Layout (position, order,
 * navigation) is structure and lives here; looks restyle, they do not
 * rearrange.
 */

:root { color-scheme: light; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pq-canvas);
  color: var(--pq-ink);
  font-family: var(--pq-font);
  font-size: var(--pq-fs-md);
  line-height: 1.4;
}

/* ---- frame: top bar, navigation, breadcrumb ---------------------------- */

.topbar {
  background: var(--pq-frame);
  color: var(--pq-frame-ink);
  display: flex;
  align-items: center;
  gap: var(--pq-space-5);
  padding: 0 var(--pq-space-5);
  min-height: calc(var(--pq-row) * 1.7);
}
.topbar .brand {
  color: var(--pq-frame-ink);
  font-weight: 600;
  font-size: var(--pq-fs-lg);
  text-decoration: none;
  white-space: nowrap;
}
.topbar nav { display: flex; align-items: stretch; align-self: stretch; gap: var(--pq-space-2); flex: 1; }
.topbar nav a, .topbar .signout {
  color: var(--pq-frame-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0 var(--pq-space-3);
  border-bottom: var(--pq-sel-rule) solid transparent;
  opacity: 0.85;
}
.topbar nav a:hover, .topbar .signout:hover { opacity: 1; text-decoration: underline; }
.topbar nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--pq-frame-ink); font-weight: 600; }
.topbar .user { color: var(--pq-frame-ink); opacity: 0.8; white-space: nowrap; }
.topbar a:focus-visible { outline: var(--pq-sel-rule) solid var(--pq-frame-ink); outline-offset: calc(var(--pq-sel-rule) * -1); }

.crumbs {
  background: var(--pq-surface);
  border-bottom: 1px solid var(--pq-grid);
  padding: var(--pq-space-2) var(--pq-space-5);
  font-size: var(--pq-fs-sm);
  color: var(--pq-ink2);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pq-space-2); }
.crumbs li { margin: 0; font-size: inherit; }
.crumbs li + li::before { content: "\203A"; margin-right: var(--pq-space-2); color: var(--pq-ink2); }
.crumbs a { color: var(--pq-ink2); }
.crumbs [aria-current="page"] { color: var(--pq-ink); font-weight: 600; }

main { max-width: 90rem; margin: 0 auto; padding: var(--pq-space-5); }
main.narrow { max-width: 38rem; margin-top: var(--pq-space-7); }

/* ---- surfaces and type -------------------------------------------------- */

.card {
  background: var(--pq-surface);
  border: 1px solid var(--pq-grid);
  border-radius: var(--pq-r);
  padding: var(--pq-space-4) var(--pq-space-5);
  margin-bottom: var(--pq-space-4);
}
h1 { font-size: var(--pq-fs-xl); margin: 0 0 var(--pq-space-4); color: var(--pq-ink); }
h2 { font-size: var(--pq-fs-lg); margin: 0 0 var(--pq-space-3); color: var(--pq-ink); }
h2.spaced { margin-top: var(--pq-space-5); }
p, li { font-size: var(--pq-fs-md); }
.muted { color: var(--pq-ink2); font-size: var(--pq-fs-sm); }
.lead { margin-top: var(--pq-space-5); }
.spaced-top { margin-top: var(--pq-space-4); }
.inline-form { display: inline; }
.card.narrow { max-width: 34rem; margin: var(--pq-space-7) auto; }

a { color: var(--pq-primary); }
a:visited { color: var(--pq-primary); }
a:hover { color: var(--pq-primary-strong); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--pq-sel-rule) solid var(--pq-focus);
  outline-offset: var(--pq-sel-rule);
}

/* ---- tables: dense, data first ------------------------------------------ */

table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left;
  padding: calc(var(--pq-row) / 6) var(--pq-space-3);
  border-bottom: 1px solid var(--pq-grid);
  font-size: var(--pq-fs-md);
  vertical-align: top;
}
th { background: var(--pq-head); color: var(--pq-head-ink); font-weight: 600; font-size: var(--pq-fs-sm); }
tbody tr:hover td, tr:hover > td { background: var(--pq-surface-muted); }
hr.sep { border: 0; border-top: 1px solid var(--pq-grid); margin: var(--pq-space-4) 0; }

/* ---- controls ------------------------------------------------------------ */

/* One rule decides a control's ink, whatever element carries it: a link
   styled as a button must never inherit the page's link colour, in any state
   (a visited or hovered link on a filled button was unreadable). */
button, a.btn, a.btn:visited, a.btn:hover, a.btn:active {
  background: var(--pq-primary);
  color: var(--pq-primary-ink);
  border: 1px solid var(--pq-primary);
  border-radius: var(--pq-r);
  padding: calc(var(--pq-row) / 5) var(--pq-space-4);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.3;
}
button:hover, a.btn:hover { background: var(--pq-primary-strong); border-color: var(--pq-primary-strong); }
button.secondary, a.btn.secondary, a.btn.secondary:visited, a.btn.secondary:hover {
  background: var(--pq-surface);
  color: var(--pq-ink);
  border-color: var(--pq-grid-strong);
}
button.secondary:hover, a.btn.secondary:hover { background: var(--pq-surface-muted); }
button.danger, a.btn.danger, a.btn.danger:visited, a.btn.danger:hover {
  background: var(--pq-surface);
  color: var(--pq-bad);
  border-color: var(--pq-bad);
}
button.danger:hover, a.btn.danger:hover { background: var(--pq-surface-muted); }

input[type=text], input[type=number], input[type=email], select, textarea {
  padding: calc(var(--pq-row) / 6) var(--pq-space-3);
  border: 1px solid var(--pq-grid-strong);
  border-radius: var(--pq-r);
  background: var(--pq-surface);
  color: var(--pq-ink);
  font: inherit;
  width: 100%;
  max-width: 26rem;
}
textarea { min-height: 7rem; }
label { display: block; margin: var(--pq-space-3) 0 var(--pq-space-1); font-size: var(--pq-fs-sm); color: var(--pq-ink2); }
.check { display: block; margin: var(--pq-space-3) 0; }
.check input { width: auto; margin-right: var(--pq-space-2); }
.form-actions { margin-top: var(--pq-space-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--pq-space-2); }

/* ---- status and numbers --------------------------------------------------- */

.metric {
  display: inline-block;
  background: var(--pq-surface-muted);
  color: var(--pq-ink);
  border-radius: var(--pq-r);
  padding: var(--pq-space-2) var(--pq-space-4);
  margin: 0 var(--pq-space-3) var(--pq-space-2) 0;
}
.metric b { display: block; font-size: var(--pq-fs-lg); }
.error { color: var(--pq-bad); }
.notice { color: var(--pq-ink); border-left: var(--pq-sel-rule) solid var(--pq-primary); padding-left: var(--pq-space-3); }

@media (max-width: 40rem) {
  .topbar { flex-wrap: wrap; padding: var(--pq-space-2) var(--pq-space-4); }
  main { padding: var(--pq-space-3); }
}