/*
 * crosscut-server pages: structure and role references only.
 *
 * Every visual decision here is a named --pq-* role. The look is served at
 * /look/<version>/<etag>.css and linked before this file; no colour, typeface
 * or px type size is written here (look-lint.json fails the build if one is).
 * Layout (position, order, navigation) is structure and lives here; looks
 * restyle, they do not rearrange.
 */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
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.45;
}

/* ---- 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 { display: flex; align-items: center; color: var(--pq-frame-ink); font-weight: 600; white-space: nowrap; }
.topbar .brand img { max-height: calc(var(--pq-row) * 1.2); max-width: 14rem; width: auto; display: block; }
.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:visited { color: var(--pq-frame-ink); }
.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 .signout, .topbar .signout:hover { background: none; border: 0; font: inherit; cursor: pointer; border-radius: 0; color: var(--pq-frame-ink); }
.topbar a:focus-visible, .topbar .signout:focus-visible { outline: var(--pq-sel-rule) solid var(--pq-frame-ink); outline-offset: calc(var(--pq-sel-rule) * -1); }
.topbar form { display: flex; align-self: stretch; margin: 0; }

.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; }

.wrap { max-width: 90rem; margin: 0 auto; padding: var(--pq-space-5); }
.wrap.narrow { max-width: 30rem; 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); font-weight: 600; margin: 0 0 var(--pq-space-1); color: var(--pq-ink); }
h2 { font-size: var(--pq-fs-lg); font-weight: 600; margin: 0 0 var(--pq-space-3); color: var(--pq-ink); }
h2::before {
  content: ""; display: inline-block; width: var(--pq-space-4); height: var(--pq-sel-rule);
  background: var(--pq-sel); margin-right: var(--pq-space-2); vertical-align: middle;
}
.lede { color: var(--pq-ink2); margin: 0 0 var(--pq-space-4); }
.sub, .mut { color: var(--pq-ink2); font-size: var(--pq-fs-sm); }
.lede .mut, p.mut { font-size: inherit; }
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, summary:focus-visible {
  outline: var(--pq-sel-rule) solid var(--pq-focus);
  outline-offset: var(--pq-sel-rule);
}
hr.sep { border: 0; border-top: 1px solid var(--pq-grid); margin: var(--pq-space-5) 0; }
.empty { color: var(--pq-ink2); padding: var(--pq-space-4) 0; }
.mono, code, pre { font-family: var(--srv-font-mono); font-size: var(--pq-fs-sm); }
.mono { color: var(--pq-ink2); word-break: break-all; }
.token-fresh { word-break: break-all; }
.error { color: var(--pq-bad); }
.strong { font-weight: 600; color: var(--pq-ink); }
details summary { cursor: pointer; color: var(--pq-primary); font-weight: 600; margin: var(--pq-space-2) 0; }
.pagehead { margin-bottom: var(--pq-space-4); }
.pagehead.split { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--pq-space-4); flex-wrap: wrap; }

/* ---- 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: middle;
}
th { background: var(--pq-head); color: var(--pq-head-ink); font-weight: 600; font-size: var(--pq-fs-sm); }
tbody tr:hover td { background: var(--pq-surface-muted); }
.tablewrap { overflow-x: auto; }

/* ---- 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. */
button, .btn, 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;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.btn, a.btn { display: inline-block; }
button:hover, .btn:hover, a.btn:hover { background: var(--pq-primary-strong); border-color: var(--pq-primary-strong); }
button.ghost, .btn.ghost, a.btn.ghost, a.btn.ghost:visited, a.btn.ghost:hover {
  background: var(--pq-surface);
  color: var(--pq-ink);
  border-color: var(--pq-grid-strong);
}
button.ghost:hover, .btn.ghost:hover, a.btn.ghost: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 { background: var(--pq-surface-muted); }
button.small, .btn.small { padding: calc(var(--pq-row) / 8) var(--pq-space-3); font-size: var(--pq-fs-sm); }
button:disabled { opacity: 0.55; cursor: default; }
button.linkbtn, button.linkbtn:hover {
  background: none; border: 0; padding: 0; color: var(--pq-primary); font-weight: 600;
}
button.linkbtn:hover { text-decoration: underline; }
form.inline { display: inline; margin: 0; }
.viewtoggle, .viewtoggle:hover { background: none; border: 0; padding: var(--pq-space-2); color: var(--pq-ink2); line-height: 0; }
.viewtoggle:hover { color: var(--pq-ink); }
.viewtoggle[data-next="rows"] [data-icon="cards"],
.viewtoggle[data-next="cards"] [data-icon="rows"] { display: none; }

label { display: block; margin: 0 0 var(--pq-space-1); font-size: var(--pq-fs-sm); font-weight: 600; color: var(--pq-ink2); }
input, select, textarea {
  width: 100%;
  padding: calc(var(--pq-row) / 6) var(--pq-space-3);
  border: 1px solid var(--pq-grid-strong);
  border-radius: var(--pq-r);
  font: inherit;
  color: var(--pq-ink);
  background: var(--pq-surface);
}
input::placeholder, textarea::placeholder { color: var(--pq-ink2); opacity: 0.8; }
input[type=radio], input[type=checkbox] { width: auto; }
textarea.brief { max-width: 42rem; }
select.compact { width: auto; font-size: var(--pq-fs-sm); }
.row { display: flex; gap: var(--pq-space-4); align-items: flex-end; flex-wrap: wrap; }
.row > span { display: block; }
.choice { display: flex; align-items: center; gap: var(--pq-space-4); margin: 0 0 var(--pq-space-3); font-size: var(--pq-fs-md); font-weight: 600; color: var(--pq-ink); cursor: pointer; }
.choice small { display: block; font-weight: 400; color: var(--pq-ink2); font-size: var(--pq-fs-sm); }
.swatches { display: inline-flex; gap: var(--pq-space-1); }
.swatches i { width: var(--pq-row); height: var(--pq-row); border-radius: var(--pq-r); border: 1px solid var(--pq-grid); background: var(--sw); }
.dropzone {
  border: var(--pq-sel-rule) dashed var(--pq-grid-strong);
  border-radius: var(--pq-r);
  padding: var(--pq-space-5);
  text-align: center;
  background: var(--pq-surface-muted);
  cursor: pointer;
}
.dropzone.over { border-color: var(--pq-primary); }
.dropzone.compact { padding: var(--pq-space-4); }
.dropzone .title { font-weight: 600; font-size: var(--pq-fs-lg); color: var(--pq-ink); }

/* ---- status and numbers --------------------------------------------------- */
.pill { display: inline-block; border-radius: var(--pq-radius-pill); font-size: var(--pq-fs-sm); font-weight: 600; padding: 0 var(--pq-space-3); border: 1px solid var(--pq-grid); background: var(--pq-surface-muted); color: var(--pq-ink2); }
.pill.done { color: var(--pq-good); border-color: var(--pq-good); }
.pill.running { color: var(--pq-primary); border-color: var(--pq-primary); }
.pill.failed, .pill.cancelled { color: var(--pq-bad); border-color: var(--pq-bad); }
.pill.role { color: var(--pq-ink); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--pq-space-3); margin: var(--pq-space-2) 0 var(--pq-space-4); }
.kpi { background: var(--pq-surface-muted); border: 1px solid var(--pq-grid); border-radius: var(--pq-r); padding: var(--pq-space-3) var(--pq-space-4); }
.kpi b { display: block; font-size: var(--pq-fs-2xl); font-weight: 600; color: var(--pq-ink); }
.kpi span { font-size: var(--pq-fs-sm); font-weight: 600; color: var(--pq-ink2); }
.kpi .exp { display: block; font-weight: 400; margin-top: var(--pq-space-1); }
.note { background: var(--pq-surface-muted); border: 1px solid var(--pq-grid); border-left: var(--pq-sel-rule) solid var(--pq-warn); border-radius: var(--pq-r); padding: var(--pq-space-3) var(--pq-space-4); margin-bottom: var(--pq-space-4); }
.note b { color: var(--pq-warn); }
.note .tech { color: var(--pq-ink2); font-size: var(--pq-fs-sm); margin-top: var(--pq-space-1); }
.msg { padding: var(--pq-space-3) var(--pq-space-4); border-radius: var(--pq-r); margin-bottom: var(--pq-space-3); background: var(--pq-surface-muted); color: var(--pq-ink); border: 1px solid var(--pq-grid); border-left: var(--pq-sel-rule) solid var(--pq-good); }
.msg.error { border-left-color: var(--pq-bad); }

/* ---- project list ---------------------------------------------------------- */
.projgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--pq-space-4); }
.projcard { background: var(--pq-surface); border: 1px solid var(--pq-grid); border-radius: var(--pq-r); padding: var(--pq-space-4); display: flex; flex-direction: column; gap: var(--pq-space-1); }
.projcard b { font-size: var(--pq-fs-lg); font-weight: 600; color: var(--pq-ink); }
.projcard .foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--pq-space-3); }
#projlist.view-cards .projrows { display: none; }
#projlist.view-rows .projgrid { display: none; }
.projrows { padding: 0; overflow-x: auto; }
.ailine { margin: var(--pq-space-3) 0 0; }

/* ---- run and setup logs ----------------------------------------------------- */
pre.log { margin: 0; padding: var(--pq-space-4); background: var(--pq-surface); border: 1px solid var(--pq-grid); border-radius: var(--pq-r); white-space: pre-wrap; word-break: break-word; color: var(--pq-ink); }

/* ---- file picker dialog ------------------------------------------------------ */
dialog.pk { overflow: hidden; max-height: calc(100vh - 2rem); border: 1px solid var(--pq-grid-strong); border-radius: var(--pq-r); padding: 0; box-shadow: var(--pq-shadow-lg); width: min(40rem, calc(100vw - 2rem)); color: var(--pq-ink); background: var(--pq-surface); }
dialog.pk::backdrop { background: var(--pq-ink); opacity: 0.35; }
.pk form { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); margin: 0; }
.pk-head { flex: none; padding: var(--pq-space-4) var(--pq-space-5) var(--pq-space-1); display: flex; flex-wrap: wrap; gap: var(--pq-space-1) var(--pq-space-4); align-items: baseline; }
.pk-head b { font-size: var(--pq-fs-lg); color: var(--pq-ink); }
.pk-tools { flex: none; display: flex; flex-wrap: wrap; padding: var(--pq-space-1) var(--pq-space-5) var(--pq-space-3); gap: var(--pq-space-1) var(--pq-space-2); white-space: nowrap; }
.pk-tools span { flex: 1; text-align: right; }
.pk-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--pq-grid); border-bottom: 1px solid var(--pq-grid); }
.pk-row { display: flex; align-items: center; gap: var(--pq-space-4); padding: var(--pq-space-2) var(--pq-space-5); font-weight: 500; color: var(--pq-ink); margin: 0; cursor: pointer; }
.pk-row:hover { background: var(--pq-surface-muted); }
.pk-row input { width: auto; flex: none; margin: 0; padding: 0; }
.pk-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row .rs { flex: none; color: var(--pq-ink2); font-size: var(--pq-fs-sm); text-align: right; max-width: 38%; }
.pk-row .sz { flex: none; color: var(--pq-ink2); font-size: var(--pq-fs-sm); min-width: 4rem; text-align: right; }
.pk-row.off .nm { color: var(--pq-ink2); }
.pk-foot { flex: none; display: flex; justify-content: flex-end; gap: var(--pq-space-3); padding: var(--pq-space-4) var(--pq-space-5); }
@media (max-width: 32rem) { .pk-row .rs { display: none; } }
@media (max-width: 40rem) {
  .topbar { flex-wrap: wrap; padding: var(--pq-space-2) var(--pq-space-4); }
  .wrap { padding: var(--pq-space-3); }
}