:root { --gold:#b8963e; --ink:#1d1d1f; --bg:#faf9f6; --line:#e5e1d8; --red:#a4383b; }

/* ---------------------------------------------------------------------
   Reset & base
--------------------------------------------------------------------- */
* { box-sizing:border-box; }
img, svg { max-width:100%; height:auto; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg);
  border-top:3px solid var(--gold); }
main { max-width:960px; margin:0 auto; padding:1.5rem; }

/* ---------------------------------------------------------------------
   Typography
--------------------------------------------------------------------- */
h1 { margin:0 0 .5rem; font-size:1.6rem; line-height:1.3; }
h2 { margin:1.75rem 0 1rem; padding-bottom:.35rem; font-size:1.3rem; line-height:1.3;
  border-bottom:2px solid var(--gold); }
h3 { margin:0 0 .5rem; font-size:1.1rem; }
p { margin:0 0 1rem; line-height:1.55; }
a { color:var(--gold); text-decoration:none; }
a:hover { text-decoration:underline; }
code { background:#f3efe4; padding:.15rem .4rem; border-radius:4px; font-size:.9em;
  overflow-wrap:anywhere; word-break:break-word; }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* ---------------------------------------------------------------------
   Header / nav / footer
--------------------------------------------------------------------- */
.site-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.75rem 1.5rem; padding:1.1rem 1.5rem; background:#fff; border-bottom:1px solid var(--line); }
.brand { line-height:1.35; }
.brand-org { display:block; font-variant:small-caps; letter-spacing:.08em; font-weight:700;
  font-size:.85rem; color:var(--gold); }
.brand-title { display:block; font-size:1.1rem; font-weight:700; color:var(--ink); }
.admin-nav { display:flex; align-items:center; gap:1.25rem; }
.admin-nav a { color:var(--ink); font-weight:600; }
.admin-nav a:hover { color:var(--gold); }
.site-footer { text-align:center; color:#8a8a85; font-size:.82rem; padding:1.75rem 1.5rem;
  margin-top:2rem; border-top:1px solid var(--line); }

/* ---------------------------------------------------------------------
   Buttons & link-buttons
--------------------------------------------------------------------- */
button, .btn { display:inline-block; background:var(--gold); color:var(--ink); border:none;
  border-radius:6px; padding:.6rem 1.15rem; font:inherit; font-weight:700; line-height:1.2;
  cursor:pointer; text-decoration:none; transition:filter .15s ease, box-shadow .15s ease; }
button:hover, .btn:hover { filter:brightness(.93); text-decoration:none; }
button:disabled { opacity:.5; cursor:not-allowed; filter:none; }
.btn-danger { background:#fff; color:var(--red); border:1px solid var(--red); font-weight:600; }
.btn-danger:hover { background:var(--red); color:#fff; filter:none; }
.link-btn { background:none; border:none; padding:0; color:#666; font-weight:400;
  text-decoration:underline; }
.link-btn:hover { color:var(--ink); filter:none; }
.inline-form { display:inline-block; margin:0; }

/* ---------------------------------------------------------------------
   Forms
--------------------------------------------------------------------- */
fieldset { border:1px solid var(--line); border-radius:8px; padding:1.25rem 1.5rem; margin:1.5rem 0; }
legend { font-weight:700; font-size:1.02rem; padding:0 .4rem; }
label { display:block; font-weight:600; margin:1rem 0 .35rem; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display:flex; align-items:flex-start; gap:.55rem; font-weight:400; margin:.4rem 0; }
/* Browsers without :has() fall back to the block label above — checkboxes/radios
   simply stack one per line instead of hugging their text; still fully usable. */

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], textarea, select {
  display:block; width:100%; font:inherit; padding:.55rem .7rem; margin-top:.2rem;
  border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
textarea { resize:vertical; }
input[type="checkbox"], input[type="radio"] { width:auto; margin-top:.2rem; accent-color:var(--gold); }

.journal-form { margin-top:1rem; }
.section-intro { color:#555; margin:0 0 1.25rem; }
.field-note { color:#767671; font-size:.85rem; margin:.25rem 0 .75rem; font-weight:400; }

/* Section 2 — one hypothesis per row: text field + inline "critical" checkbox */
.hypo-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:.6rem 0; }
.hypo-row input[type="text"] { flex:1; min-width:12rem; width:auto; margin-top:0; }
.hypo-row label { margin:0; white-space:nowrap; }
/* .hypo-row label is (0,1,1) — lower specificity than the generic
   label:has(> input[type="checkbox"]) rule above (0,1,2), so its margin:0
   would otherwise be silently overridden by that rule's margin:.4rem 0.
   Re-assert at matching specificity (0,1,2), placed after, to win the tie. */
.hypo-row label:has(> input) { margin:0; }

/* Section 3 "new test" hint box listing the participant's hypotheses */
.hint-hypotheses { background:#f5f2e8; border:1px solid var(--line); border-radius:8px;
  padding:.85rem 1.1rem; margin-bottom:1.25rem; font-size:.92rem; }
.hint-hypotheses p { margin:0 0 .4rem; font-weight:600; }
.hint-hypotheses ul { margin:0; padding-left:1.25rem; }

/* Section 7 — two-column recap (départ) + form */
.section7-columns { display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; align-items:start; }
.depart-recap { background:#f5f2e8; border:1px solid var(--line); border-radius:8px; padding:1.25rem 1.4rem; }
.depart-recap h2 { margin-top:0; }

/* ---------------------------------------------------------------------
   Cards (generic)
--------------------------------------------------------------------- */
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.5rem;
  box-shadow:0 1px 3px rgb(0 0 0 / .06); }
.card h2:first-child { margin-top:0; }

/* details/summary "cards" used for tests, weekly reflections, new-participant form */
details.test-card, .test-card { border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:0 1.35rem 1.15rem; margin-bottom:1.15rem; box-shadow:0 1px 3px rgb(0 0 0 / .06); }
.test-card summary { padding:1rem 0; font-weight:700; cursor:pointer; list-style:none; }
.test-card summary::-webkit-details-marker { display:none; }
.test-card summary::before { content:"▸"; display:inline-block; color:var(--gold); margin-right:.5rem;
  transition:transform .15s ease; }
.test-card[open] summary::before { transform:rotate(90deg); }
.test-card-new summary { color:var(--gold); }
.test-card .journal-form, .test-card > form { margin-top:0; }

.entry-card { border:1px solid var(--line); border-radius:8px; padding:1.1rem 1.35rem;
  margin-bottom:1.1rem; background:#fff; box-shadow:0 1px 3px rgb(0 0 0 / .06); }

/* ---------------------------------------------------------------------
   Definition lists (generic — .print-section keeps its own rules below)
--------------------------------------------------------------------- */
dl { display:grid; grid-template-columns:minmax(9rem, 1fr) 2fr; gap:.3rem 1rem; margin:.5rem 0 0; }
dt { font-weight:600; }
dd { margin:0; }

/* ---------------------------------------------------------------------
   Flash / error messages
--------------------------------------------------------------------- */
.flash-ok { background:color-mix(in srgb, var(--gold) 12%, white);
  border:1px solid color-mix(in srgb, var(--gold) 45%, white); color:#6b551f;
  padding:.6rem 1rem; border-radius:6px; margin:0 0 1.1rem; font-weight:600; }
.error { color:var(--red); font-weight:600; margin:0 0 1.1rem; }
.note { color:#666; font-size:.9rem; }
.empty-note { color:#777; font-style:italic; }

/* ---------------------------------------------------------------------
   Home — hero + entry points
--------------------------------------------------------------------- */
.hero { text-align:center; padding:2.25rem 0 2rem; }
.hero h1 { font-size:1.85rem; line-height:1.3; margin:0 0 .75rem; }
.hero > p { color:#555; font-size:1.05rem; margin:0 0 1.75rem; }
.phases { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; text-align:left; }
.phase { border:1px solid var(--line); border-radius:8px; padding:1.1rem 1.25rem; background:#fff;
  box-shadow:0 1px 3px rgb(0 0 0 / .06); }
.phase strong { display:block; color:var(--gold); font-size:.92rem; text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:.4rem; }
.phase span { display:block; color:#555; font-size:.9rem; }

.entry-points { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem; margin-top:2rem; }

/* ---------------------------------------------------------------------
   Journal chrome — crumbs, phase strip, section cards, actions
--------------------------------------------------------------------- */
.crumbs { margin:0 0 .5rem; }
.crumbs a { color:#666; font-size:.9rem; }
.crumbs a:hover { color:var(--gold); }

.cohort-line { color:#555; margin:.15rem 0 1.1rem; }

.phase-strip { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.6rem;
  margin:1rem 0 1.25rem; }
.phase-strip span { display:block; text-align:center; padding:.55rem .5rem; border:1px solid var(--line);
  border-radius:6px; background:#fff; color:#777; font-size:.82rem; font-weight:600; }
.phase-strip.phase-preparer span[data-phase="preparer"],
.phase-strip.phase-experimenter span[data-phase="experimenter"],
.phase-strip.phase-decider span[data-phase="decider"] {
  background:var(--gold); color:var(--ink); border-color:var(--gold); }

.progress-line { color:#666; font-size:.9rem; margin:.5rem 0 1.25rem; }

.section-cards { list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.85rem; }
.section-cards a { display:flex; align-items:center; gap:.65rem; border:1px solid var(--line);
  border-radius:8px; padding:.9rem 1.1rem; background:#fff; color:var(--ink); font-weight:600;
  box-shadow:0 1px 3px rgb(0 0 0 / .06); transition:border-color .15s ease; }
.section-cards a:hover { border-color:var(--gold); text-decoration:none; }
.section-cards li.done a { background:color-mix(in srgb, var(--gold) 6%, white); }
.section-cards .no { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:1.75rem; height:1.75rem; border-radius:50%; background:var(--gold); color:var(--ink);
  font-weight:700; font-size:.82rem; }

.journal-actions { margin:.75rem 0 1.25rem; color:#555; }
.journal-actions a, .row-actions a { color:var(--ink); font-weight:600;
  border-bottom:1px solid var(--gold); }
.journal-actions a:hover, .row-actions a:hover { color:var(--gold); }
.row-actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

/* ---------------------------------------------------------------------
   Decision grid (Section 9 — 4 equally-weighted outcomes)
--------------------------------------------------------------------- */
.decision-cards { border:none; padding:0; margin:1.5rem 0; }
.decision-cards legend { font-size:1.1rem; }
.banner-success { color:#666; font-style:italic; margin:.15rem 0 0; }
.decision-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; margin-top:1rem; }
.decision-card { display:flex; align-items:flex-start; gap:.6rem; border:1px solid var(--line);
  border-radius:8px; padding:1.1rem 1.25rem; background:#fff; font-weight:600; cursor:pointer;
  box-shadow:0 1px 3px rgb(0 0 0 / .06); transition:border-color .15s ease, background .15s ease; margin:0; }
/* .decision-card is (0,1,0) — lower specificity than the generic
   label:has(> input[type="radio"]) rule (0,1,2), which also matches this
   label (its direct child IS a radio). Without this, that generic rule's
   font-weight:400 / margin:.4rem 0 / gap:.55rem would silently win over
   the 600 / 0 / .6rem set above. Re-assert at matching specificity (0,1,2),
   placed after, to win the tie. */
label.decision-card:has(> input) { font-weight:600; margin:0; gap:.6rem; }
.decision-card input[type="radio"] { margin-top:.2rem; }
.decision-card:has(input:checked) { border:2px solid var(--gold); padding:calc(1.1rem - 1px) calc(1.25rem - 1px);
  background:color-mix(in srgb, var(--gold) 6%, white); }
/* Without :has() support the cards render as plain equal-weight options — the
   native radio still shows the selected state, so the form stays fully usable. */

/* ---------------------------------------------------------------------
   Admin — tables
--------------------------------------------------------------------- */
.table-scroll { overflow-x:auto; margin-bottom:1.5rem; -webkit-overflow-scrolling:touch; }
.admin-table { width:100%; min-width:640px; border-collapse:collapse; background:#fff; }
.admin-table th, .admin-table td { padding:.6rem .75rem; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--line); font-size:.92rem; }
.admin-table thead th { border-bottom:2px solid var(--line); color:#555; font-size:.76rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.admin-table tbody tr:hover { background:#faf8f1; }
.admin-table tr.inactive { opacity:.55; }
.admin-table input[type="text"] { margin-top:0; }
.admin-table button { padding:.35rem .7rem; font-size:.82rem; }

.feedback-toggle { margin:1.25rem 0; }

/* ---------------------------------------------------------------------
   Admin dashboard — one-glance cohort overview
--------------------------------------------------------------------- */
.phase-indicator { display:inline-block; margin-left:.5rem; padding:.15rem .65rem; border-radius:999px;
  background:#f5efe0; color:var(--gold); font-weight:600; font-size:.8rem; vertical-align:middle; }
.summary-strip { font-weight:600; margin:.25rem 0 1.25rem; }

.participant-card { border:1px solid var(--line); border-radius:8px; padding:1rem 1.25rem;
  margin-bottom:1rem; background:#fff; box-shadow:0 1px 3px rgb(0 0 0 / .06); }
.participant-card-header { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.participant-card-header h3 { margin:0; }
.participant-project { color:#666; font-size:.9rem; }

.badge { display:inline-block; padding:.1rem .55rem; border-radius:999px; font-size:.75rem; background:#eee; }
.alert-badge { font-weight:600; }
.alert-badge.alert-never_started { background:color-mix(in srgb, var(--red) 16%, white); color:var(--red); }
.alert-badge.alert-stalled { background:color-mix(in srgb, var(--gold) 22%, white); color:#7a5c1f; }

.meters { display:block; margin:.6rem 0; color:#444; font-size:.9rem; }

.decision-chip { display:inline-block; border:2px solid var(--gold); border-radius:6px;
  padding:.15rem .65rem; font-weight:600; margin:.4rem 0; }

.relance-block { margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--line); }
.relance-last { color:#444; font-size:.9rem; margin:0 0 .4rem; }
.relance-form { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0; }
.relance-form input[type=text] { flex:1; min-width:12rem; width:auto; margin-top:0; }

/* ---------------------------------------------------------------------
   Read-only journal (shared visual language with the print/export view) —
   intentionally kept in lockstep with journal/print.php's own inline
   <style>; do not change radii/spacing here without mirroring there.
--------------------------------------------------------------------- */
.print-section { margin:1.5rem 0; }
.print-section h2 { border-bottom:2px solid var(--gold); padding-bottom:.25rem; }
.print-project { color:#444; margin:.15rem 0 1rem; }
.print-subhead { font-weight:600; margin:.75rem 0 .25rem; }
.print-section dl { display:grid; grid-template-columns:minmax(10rem, 1fr) 2fr; gap:.3rem 1rem; margin:0; }
.print-section dt { font-weight:600; }
.print-section dd { margin:0; }
table.print-entries { width:100%; border-collapse:collapse; margin-top:.5rem; }
table.print-entries th, table.print-entries td { border:1px solid var(--line); padding:.4rem .5rem;
  text-align:left; vertical-align:top; }
.print-test-card { border:1px solid var(--line); border-radius:6px; padding:1rem; margin-bottom:1rem; }
.print-test-title { font-weight:600; margin:0 0 .5rem; }
.print-conclusion { font-weight:600; margin:.5rem 0 0; }
.print-decision { font-weight:700; font-size:1.15rem; background:#f5efe0; border-left:4px solid var(--gold);
  padding:.6rem 1rem; margin:.5rem 0 1rem; }
.print-week-block { margin-bottom:1rem; }

/* ---------------------------------------------------------------------
   Responsive — single column below 720px, tighter spacing below 480px
--------------------------------------------------------------------- */
@media (max-width:719px) {
  .entry-points { grid-template-columns:1fr; }
  .phases { grid-template-columns:1fr; }
  .section-cards { grid-template-columns:1fr; }
  .section7-columns { grid-template-columns:1fr; }
  .phase-strip { grid-template-columns:1fr; }
  .decision-grid { grid-template-columns:1fr; }
  .site-header { padding:1rem; }
}

@media (max-width:480px) {
  main { padding:1.1rem 1rem; }
  .hero { padding:1.5rem 0 1.25rem; }
  fieldset { padding:1rem 1.1rem; }
  .card { padding:1.1rem; }
}