/* Rotunda — "the review chamber". Warm parchment, near-black ink, one deep-pine
   accent. Display serif (Fraunces) over a clean system sans. Cardless,
   hairline-ruled, generous whitespace. */

:root {
  --paper:      #f6f3ec;
  --paper-2:    #fffefb;
  --ink:        #17150f;
  --ink-soft:   #40382c;
  --muted:      #766c5c;
  --line:       #e5dfd1;
  --line-soft:  #efe9dc;
  --accent:     #2f5d50;
  --accent-ink: #234a40;
  --accent-soft:#e8f0ec;
  --danger:     #9b2c2c;
  --amber:      #b7791f;

  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 68rem;
  --radius: 7px;
  --shadow: 0 1px 2px rgba(23,21,15,.05), 0 8px 24px -12px rgba(23,21,15,.12);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 550; color: var(--ink); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 2.3rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
small { color: var(--muted); }

/* ---- layout scaffolding ---- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 82%, white);
  backdrop-filter: saturate(1.1) blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.site-header .bar { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.wordmark { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.wordmark:hover { text-decoration: none; color: var(--accent-ink); }
.wordmark .dot { color: var(--accent); }
.nav { display: flex; gap: 1.25rem; margin-left: .5rem; }
.nav a { color: var(--ink-soft); font-size: .95rem; }
.nav a.active { color: var(--accent-ink); font-weight: 550; }
.spacer { flex: 1; }
.who { color: var(--muted); font-size: .88rem; }

main { padding: 2.5rem 0 5rem; animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- page header ---- */
.page-head { margin-bottom: 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head .lede { color: var(--muted); font-size: 1.02rem; max-width: 46ch; margin: .5rem 0 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--accent); font-weight: 650; margin-bottom: .5rem; }

/* ---- flash ---- */
.flash { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: .92rem; border: 1px solid; }
.flash.notice { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, white); color: var(--accent-ink); }
.flash.alert  { background: #f7eae9; border-color: color-mix(in srgb, var(--danger) 30%, white); color: var(--danger); }

/* ---- cardless rows ---- */
.rows { border-top: 1px solid var(--line); }
.row { display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem .25rem; border-bottom: 1px solid var(--line); transition: background .15s; }
.row:hover { background: color-mix(in srgb, var(--paper) 60%, white); }
.row .body { flex: 1; min-width: 0; }
.row .title { font-family: var(--serif); font-size: 1.18rem; }
.row .title a { color: var(--ink); }
.row .desc { color: var(--muted); font-size: .93rem; margin: .2rem 0 0; }
.row .actions { display: flex; gap: .5rem; align-items: center; white-space: nowrap; }
.row .meta { margin-top: .4rem; display: flex; gap: .5rem; flex-wrap: wrap; }

.section-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin: 2.25rem 0 .25rem; }
.section-label.first { margin-top: 0; }

/* ---- tags / chips ----
   Color means one thing: sharing exposure. A FILLED chip = shared beyond the
   owner (team=amber, public=green). Everything else — tier, count, tags, team
   names, private, system — is a quiet outline. Rule to enforce: if a chip has a
   fill, it's a visibility chip. */
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; padding: .12rem .5rem; border-radius: 999px; background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.chip.system { color: var(--muted); }
.chip.vis-team { background: #fff3df; border-color: #f0dcb4; color: var(--amber); }
.chip.vis-public { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, white); color: var(--accent-ink); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--sans); font-size: .9rem; font-weight: 550; padding: .5rem .95rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); cursor: pointer; transition: all .15s; line-height: 1; }
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-ink); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent-ink); padding-inline: .4rem; }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, white); background: transparent; }
.btn.danger:hover { background: #f7eae9; }
.btn.sm { font-size: .82rem; padding: .35rem .7rem; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ---- forms ---- */
.field { margin-bottom: 1.4rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.field .hint { color: var(--muted); font-size: .82rem; margin: -.2rem 0 .45rem; }
.field input[type=text], .field textarea, .field select {
  width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--ink);
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field textarea.prompt { min-height: 15rem; font-family: var(--mono); font-size: .86rem; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-narrow { max-width: 44rem; }
.field .req { color: var(--danger); font-weight: 700; }
/* Dependent sub-choice (the "Which teams?" reveal) reads as a contained block,
   not a stray field, using the app's own accent language. */
.field .subfield { margin-top: .8rem; padding: .8rem .95rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 30%, white);
  background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.field .subfield[hidden] { display: none; }
.field .subfield label { font-size: .82rem; }
/* Checkbox rows are values, not field labels — regular weight, inline. */
.field label.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin-bottom: .25rem; }

/* Restyle native selects so they match the custom inputs instead of falling back
   to OS chrome (a custom chevron replaces the native arrow). */
.field select, .toolbar .select-sm {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23877' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center; background-size: .7rem;
  padding-right: 1.9rem;
}

/* index search / filter / sort toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.4rem; }
.toolbar .search { flex: 1 1 14rem; min-width: 10rem; font-family: var(--sans); font-size: .92rem;
  color: var(--ink); padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); }
.toolbar .select-sm { font-family: var(--sans); font-size: .88rem; color: var(--ink);
  padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--paper-2); }
.toolbar .search:focus, .toolbar .select-sm:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.errors { background: #f7eae9; border: 1px solid color-mix(in srgb, var(--danger) 25%, white); color: var(--danger); padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: .9rem; }
.errors ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* Styled confirm dialog for destructive actions (replaces the native confirm). */
.modal-wrap { display: inline-flex; align-items: center; margin-left: .65rem; }
.modal-wrap > form { display: inline; margin: 0; }
dialog.modal { border: 0; padding: 0; background: transparent; max-width: 30rem; width: calc(100vw - 2rem); }
dialog.modal::backdrop { background: rgba(23, 21, 15, .45); }
.modal-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.6rem; }
.modal-card h3 { margin-bottom: .5rem; }
.modal-card .modal-msg { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; margin: 0 0 1.3rem; }
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; align-items: center; }
.modal-actions form { margin: 0; }

/* reviewer picker */
.picker { border: 1px solid var(--line); border-radius: var(--radius); max-height: 22rem; overflow-y: auto; background: var(--paper-2); }
.picker label { display: flex; gap: .6rem; align-items: baseline; padding: .55rem .75rem; border-bottom: 1px solid var(--line-soft); cursor: pointer; font-weight: 400; margin: 0; }
.picker label:last-child { border-bottom: 0; }
.picker label:hover { background: var(--accent-soft); }
.picker .p-name { font-weight: 550; }
.picker .p-desc { color: var(--muted); font-size: .82rem; }

/* ---- prose / prompt display ---- */
.prose { white-space: pre-wrap; font-family: var(--sans); font-size: .97rem; line-height: 1.62; color: var(--ink-soft); }
.prompt-block { white-space: pre-wrap; font-family: var(--mono); font-size: .82rem; line-height: 1.55; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; overflow-x: auto; }

.panel-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 1.5rem 1.6rem; box-shadow: var(--shadow); }
.definition { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; font-size: .93rem; }
.definition dt { color: var(--muted); }
.definition dd { margin: 0; }

/* ---- run status ---- */
.status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; }
.status .lamp { width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); }
.status.running .lamp { background: var(--amber); animation: pulse 1.1s ease-in-out infinite; }
.status.completed .lamp { background: var(--accent); }
.status.failed .lamp { background: var(--danger); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.dots::after { content: "…"; animation: dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "…"; } }

/* ---- dashboard hero ---- */
.hero { padding: 1rem 0 2.75rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.hero h1 { font-size: 3rem; max-width: 16ch; }
.hero .thesis { font-size: 1.15rem; color: var(--ink-soft); max-width: 52ch; margin-top: 1rem; }
.stat-inline { color: var(--muted); font-size: .9rem; margin-top: 1.5rem; }

.empty { color: var(--muted); font-style: italic; padding: 1.5rem 0; }
.stack > * + * { margin-top: 1.5rem; }

@media (max-width: 640px) {
  h1 { font-size: 1.9rem; } .hero h1 { font-size: 2.2rem; }
  .row { flex-direction: column; align-items: stretch; }
  .row .actions { margin-top: .6rem; }
  .nav { display: none; }
}