/* Sonic Suisse AI — hub components (headings, layout, buttons, inputs, cards, directory rows, tiles,
   panels, chips, timeline). Requires tokens.css and shell.css. Every colour here is a token.
   Apps do not load this file; they keep their own component styles on top of shell.css. */

h1, h2, h3, h4 { color: var(--text-strong); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); }
small, .muted { color: var(--muted); }
code, pre { font-family: var(--font-mono); font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

/* layout */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.section { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* eyebrow: small caps label above headings */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3);
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }

@media (width <= 720px) { [id] { scroll-margin-top: 76px; } }   /* phones: anchors land below the top bar */

/* buttons: one height per row */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--control-h); padding: 0 var(--sp-5);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--text-strong); border-color: var(--text-strong); font-weight: 700; }
.btn-ghost .icon { stroke-width: 2; }
.btn-icon { width: var(--control-h); padding: 0; }
.btn-sm { height: var(--control-h-sm); padding: 0 var(--sp-3); }
.btn-sm.btn-icon { width: var(--control-h-sm); padding: 0; }
@media (hover: hover) { .btn-ghost:hover { background: var(--nav-hover); } }

/* form controls share the same height as buttons */
.input, .select {
  height: var(--control-h); padding: 0 var(--sp-3); width: 100%;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; font-size: var(--fs-sm);
}
.input:focus, .select:focus { border-color: var(--accent); outline: none; }
.label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-1); color: var(--text-strong); }
.field + .field { margin-top: var(--sp-4); }

/* cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); flex: 1; }
.card .cta { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; }
.card .cta .icon { transition: transform var(--dur) var(--ease); }
.card:hover .cta .icon { transform: translateX(3px); }

/* directory: aligned rows (name · description · access) for an index page */
.dir-row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 118px; gap: var(--sp-4); align-items: start;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.dir-row:hover { text-decoration: none; color: inherit; }
.dir-row h4 { margin: 0; font-size: var(--fs-md); color: var(--accent); line-height: var(--lh-body); }
.dir-row p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.dir-row .chip { justify-self: end; margin-top: 2px; }
.dir-row h4 .chip { margin: 0 0 0 var(--sp-2); vertical-align: 2px; }   /* "archived" after a title */
.dir-row .links { margin-top: var(--sp-3); }   /* a row that is no link itself, its own links under the text (Policy: one per language) */
@media (width <= 720px) {
  .dir-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-1); }
  .dir-row h4 { grid-column: 1; }
  .dir-row .chip { grid-column: 2; grid-row: 1; }
  .dir-row p, .dir-row > .body { grid-column: 1 / -1; }
}

/* dashboard: stat tiles and panels */
.tiles { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  color: inherit; text-decoration: none;
}
.tile:hover { color: inherit; text-decoration: none; }
.tile .label { display: flex; justify-content: flex-start; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); margin: 0; }
.tile .label .icon { color: var(--muted); width: 1.1em; height: 1.1em; }
.tile .value { font-size: var(--fs-3xl); font-weight: 700; line-height: 1; color: var(--text-strong); letter-spacing: -.02em; }
.tile .value small { font-size: var(--fs-md); font-weight: 500; color: var(--muted); margin-left: var(--sp-1); letter-spacing: 0; }
.tile .sub { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.tile .sub.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.tile .seg { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; margin-top: var(--sp-3); }
.tile .seg span { display: block; min-width: 3px; }
.tile .bars { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-1) var(--sp-2); align-items: center; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.tile .bars .bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.tile .bars .bar i { display: block; height: 100%; background: currentColor; opacity: .75; border-radius: 3px; }
.tile .bars .n { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.panels { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: var(--sp-4); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--sp-5); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: var(--fs-md); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.panel-head a { font-size: var(--fs-sm); font-weight: 600; }
.panel .item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.panel .item:last-child { border-bottom: 0; padding-bottom: 0; }
.panel .item .when { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.panel .item.now .when { color: var(--text-strong); }
.panel .item .when .chip { text-transform: lowercase; letter-spacing: .02em; margin-left: -10px; }   /* pill text aligns with the quarter text */
.panel .item h3 { margin: 0 0 2px; font-size: var(--fs-md); }
.panel .item p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
@media (width <= 720px) {
  .tile .bars { grid-template-columns: 1fr auto; row-gap: 2px; grid-auto-flow: dense; }   /* phones: pill + count on one line, bar underneath */
  .tile .bars .chip { grid-column: 1; }
  .tile .bars .n { grid-column: 2; }
  .tile .bars .bar { grid-column: 1 / -1; margin-bottom: var(--sp-2); }
  .panel .item { grid-template-columns: 1fr; gap: var(--sp-2); }   /* phones: quarter + pill above the title, text full width */
  .panel .item .when { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .panel .item .when .chip { margin-left: 0; }
  .tiles { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }   /* phones: tiles two by two */
  .tile { padding: var(--sp-4); }
  .tile .value { font-size: var(--fs-2xl); }
  .tile .label { font-size: .7rem; }
}

/* status chips: tinted background in the state colour, text in the same colour */
.chip {
  display: inline-flex; align-items: center; flex-shrink: 0;
  height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  background: var(--neutral-tint); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; white-space: nowrap; text-transform: lowercase;
}
.chip-ok, .chip-solid-ok { background: var(--ok-tint); color: var(--ok); }
.chip-info, .chip-solid-info { background: var(--accent-tint); color: var(--accent); }
.chip-warn, .chip-solid-warn { background: var(--warn-tint); color: var(--warn); }
.chip-bad, .chip-solid-bad { background: var(--bad-tint); color: var(--bad); }
.chip-violet { background: var(--violet-tint); color: var(--violet); }
/* status family: solid pills, so they never read like the tinted access pills */
.chip-done { background: var(--done-fill); color: var(--on-now); }
.chip-now { background: var(--now-fill); color: var(--on-now); }
.chip-planned { background: var(--planned); color: var(--on-now); }
/* data-class pills: solid outline in the class colour (same on the options page and in the registry) */
.chip-data { display: inline-block; height: auto; background: transparent; border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 2px 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3; justify-self: start; }   /* identical to .pilld on the options page */
.data-pat { color: var(--data-pat); } .data-conf { color: var(--data-conf); } .data-pers { color: var(--data-pers); }
.data-int { color: var(--data-int); } .data-pub { color: var(--data-pub); } .data-sec { color: var(--data-sec); } .data-pseu { color: var(--data-pseu); }

/* timeline: newest first, one spine; years head their periods (Q4, Jun ...); status is a pill, the spine carries
   neutral anchors, year and period headings and a Today marker */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 var(--sp-6) var(--sp-5); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li.done::before, .timeline li.now::before, .timeline li.planned::before {
  content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong);
}
.timeline li.now::before { border-color: var(--now); background: var(--now); }
.timeline li.done::before { background: var(--line-strong); }
.timeline li .chip { margin-bottom: var(--sp-2); }
.timeline h3 { margin: 0 0 var(--sp-1); }
.timeline p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.timeline li.period { padding: 0 0 var(--sp-3) var(--sp-5); }
.timeline li.period span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-strong); }
.timeline li.year { padding: 0 0 var(--sp-4) var(--sp-5); }
.timeline li.year::before { content: ""; position: absolute; left: -9px; top: calc(var(--fs-xl) * 1.1 / 2 - 1px); width: 16px; height: 2px; background: var(--text-strong); }   /* a tick across the spine */
.timeline li.year span { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; color: var(--text-strong); }
.timeline li.today { padding: var(--sp-2) 0 var(--sp-6) 0; display: flex; align-items: center; gap: var(--sp-3); margin-left: -2px; }
.timeline li.today::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--now); flex-shrink: 0; margin-left: -4px; }
.timeline li.today span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--now); white-space: nowrap; }
.timeline li.today::after { content: ""; flex: 1; border-top: 1px solid var(--now); opacity: .5; }

@media (width <= 720px) {
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  .section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
}

@media (hover: hover) { .dir-row:hover h4 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }

.dir-row h4 .icon.ext { margin-left: var(--sp-2); }

@media print {
  .card { box-shadow: none; break-inside: avoid; }
}