/* Aetopia app kit: the page components every Aetopia app shares (layout,
   buttons, forms, tables, panels, chips, tabs, dialogs, alerts, history).
   Part of the brand kit (aetopia-app/brand/); load after aetopia-brand.css and
   before the app's own stylesheet. Colours come from the --ae-* tokens (and
   their short names, --teal, --ink, --grid, --muted, --soft, --warn, --bad).

   Page skeleton:
     <header class="page"><h1>Title</h1> <span id="msg" role="status"></span>
       <span class="spacer"></span> <button class="primary">+ New</button></header>
     <main> (or <main class="wide"> for lists) ...</main>
   Tables sort with <th class="sort" data-k=..> (.on, .rev for the arrow); a
   long list's header stays in view inside <div class="panel scroll sticky">.
   Tabs: <div class="seg tabbar"><button class="on">One <b>3</b></button>...</div>. */
* { box-sizing:border-box; }
[hidden] { display:none !important; }     /* layout rules (e.g. .bar label) must not un-hide things */
body { font:13px/1.45 var(--ae-font-ui); color:var(--ink); margin:0; background:var(--soft); }
a { color:var(--teal); }
header.page { background:#fff; padding:16px 16px 12px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--grid); }
header.page h1 { font:600 20px/1.2 var(--ae-font-brand); margin:0; }
header.page .back { font-size:12px; color:var(--muted); text-decoration:none; }
.spacer { flex:1; }
main { padding:16px 24px; max-width:1440px; }
main.wide { max-width:none; }            /* list pages use the whole screen */
.bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.bar p { margin:0; color:var(--muted); font-size:12px; }
.bar label { font-size:12px; color:var(--muted); display:inline-flex; gap:5px; align-items:center; }
.panel { background:#fff; border:1px solid var(--grid); border-radius:8px; overflow:hidden; }
.panel + .panel { margin-top:14px; }
.panel h2 { font:600 13px/1 var(--ae-font-brand); margin:0; padding:12px 14px; border-bottom:1px solid var(--grid); display:flex; align-items:center; gap:8px; }
.panel h2 .spacer { flex:1; }
.scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { padding:9px 14px; border-bottom:1px solid #eef1f4; text-align:left; vertical-align:top; }
th { background:#f7f9fa; font-size:11px; text-transform:uppercase; color:var(--muted); white-space:nowrap; letter-spacing:.03em; }
tbody tr:nth-child(even) td { background:#fbfcfd; }
th.sort { cursor:pointer; user-select:none; }
th.sort.on::after { content:" ▾"; }
th.sort.on.rev::after { content:" ▴"; }
tr:last-child td { border-bottom:none; }
tr.row { cursor:pointer; }
tr.row:hover td { background:#eef6f5; }
td.num, th.num { text-align:right; white-space:nowrap; }
td small, .sub { display:block; color:var(--muted); font-size:12px; margin-top:1px; }
.nw { white-space:nowrap; }
/* header row stays in view while scrolling a long list (wide screens; narrow ones scroll sideways instead) */
@media (min-width:1100px) {
  .panel.sticky { overflow:visible; }
  .panel.sticky thead th { position:sticky; top:48px; z-index:2; box-shadow:0 1px 0 var(--grid); }   /* below the 48px app bar */
}
.tag { font-weight:600; white-space:nowrap; }
.muted { color:var(--muted); }
.empty { padding:28px 14px; color:var(--muted); text-align:center; }
.chip { display:inline-block; font-size:11px; padding:1px 8px; border-radius:10px; background:#e9f4f3; color:var(--teal); white-space:nowrap; }
.chip.grey { background:#eef1f4; color:var(--muted); }
.chip.warn { background:#fdf3e7; color:var(--warn); }
.chip.bad { background:#fdeee8; color:var(--bad); }
.sev-high { color:var(--bad); font-weight:600; }
.sev-medium { color:var(--warn); }
.sev-low { color:var(--ink); }
.sev-tidy { color:var(--muted); }
input, select, button, textarea { font:inherit; }
input[type=text], input[type=date], input[type=search], input[type=email], select, textarea {
  border:1px solid var(--grid); border-radius:4px; padding:5px 7px; background:#fff; max-width:100%; }
textarea { width:100%; min-height:64px; resize:vertical; }
button { border:1px solid var(--grid); background:#fff; border-radius:5px; padding:5px 11px; cursor:pointer; color:var(--ink); }
button:hover { background:#f7f9fa; }
a.btn { display:inline-block; border:1px solid var(--grid); background:#fff; border-radius:5px; padding:5px 11px; color:var(--ink); text-decoration:none; }
a.btn:hover { background:#f7f9fa; }
button.primary, a.btn.primary { background:var(--teal); color:#fff; border-color:var(--teal); }
button.primary:hover, a.btn.primary:hover { background:#0c5c57; }
button.quiet { border-color:transparent; color:var(--muted); padding:3px 8px; }
button.quiet:hover { background:#eef1f4; color:var(--ink); }
button.del { color:#b06a6a; }
button:disabled { opacity:.5; cursor:default; }
.seg { display:inline-flex; border:1px solid var(--grid); border-radius:6px; overflow:hidden; background:#fff; }
.seg button { border:0; border-radius:0; padding:5px 12px; color:var(--muted); }
.seg button.on { background:var(--teal); color:#fff; }
#msg { font-size:12px; color:var(--muted); }
#msg.err { color:var(--bad); }
.alerts { background:#fff7f2; border:1px solid #f6d7c6; border-radius:8px; padding:10px 14px; margin-bottom:14px; }
.alerts h3 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--bad); }
.alerts ul { margin:0; padding-left:18px; }
.alerts .hint { color:var(--muted); font-size:12px; }
.alerts.tidy { background:#f7f9fa; border-color:var(--grid); }
.alerts.tidy h3 { color:var(--muted); }
.tiles { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.tile { flex:1 1 150px; background:#fff; border:1px solid var(--grid); border-radius:8px; padding:10px 12px; color:var(--muted); font-size:12px; }
.tile b { display:block; font:600 22px/1.2 var(--ae-font-brand); color:var(--teal); }
.tile.warn b { color:var(--bad); }
/* two columns, a details list, a history timeline */
.cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:14px; align-items:start; }
@media (max-width:900px) { .cols { grid-template-columns:1fr; } }
dl.details { display:grid; grid-template-columns:150px 1fr; margin:0; }
dl.details dt, dl.details dd { padding:7px 14px; border-bottom:1px solid #f0f3f5; margin:0; }
dl.details dt { color:var(--muted); font-size:12px; }
dl.details dd { white-space:pre-wrap; word-break:break-word; }
.actions-bar { display:flex; gap:6px; flex-wrap:wrap; }
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { padding:9px 14px; border-bottom:1px solid #f0f3f5; }
.timeline li:last-child { border-bottom:none; }
.timeline .when { color:var(--muted); font-size:11px; }
.timeline .what { font-weight:600; }
.timeline .kind-sanitised .what { color:var(--teal); }
.timeline .kind-disposed .what, .timeline .kind-attachment_removed .what { color:var(--bad); }
.timeline .body { font-size:12px; white-space:pre-wrap; word-break:break-word; margin-top:2px; }
.timeline details { margin-top:4px; font-size:12px; }
.timeline details pre { white-space:pre-wrap; font-size:11px; background:var(--soft); padding:6px 8px; border-radius:4px; margin:4px 0 0; }
/* modal form */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:50; }
.modal-bg.show { display:flex; }
.modal { background:#fff; border-radius:10px; padding:20px 22px; width:520px; max-width:calc(100vw - 32px);
         max-height:calc(100vh - 48px); overflow:auto; box-shadow:0 12px 44px rgba(0,0,0,.22); }
.modal h3 { margin:0 0 4px; font:600 15px/1.3 var(--ae-font-brand); color:var(--teal); }
.modal p { margin:0 0 6px; color:var(--muted); font-size:12px; }
.modal label.f { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:12px 0 4px; }
.modal input[type=text], .modal input[type=date], .modal input[type=email], .modal select, .modal textarea { width:100%; }
.modal .row { display:flex; gap:10px; }
.modal .row > * { flex:1; min-width:0; }
.modal .check { display:flex; gap:6px; align-items:center; margin-top:12px; font-size:13px; }
.modal .actions { margin-top:18px; display:flex; gap:8px; align-items:center; }
.modal .actions .spacer { flex:1; }
.modal .err { color:var(--bad); font-size:12px; min-height:1em; margin-top:8px; }
.modal .note { background:var(--soft); border-radius:6px; padding:8px 10px; font-size:12px; color:var(--ink); margin-top:8px; }
@media (max-width:600px) { .modal .row { flex-direction:column; gap:0; } dl.details { grid-template-columns:110px 1fr; } }
/* pictures */
.av { border-radius:50%; object-fit:cover; flex:none; vertical-align:middle; background:#fff; }
.av.ini { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:600; letter-spacing:.02em; }
.who { display:flex; gap:9px; align-items:flex-start; }
.who .av { margin-top:1px; }

/* tab bars (a .seg used as page tabs) */
.seg.tabbar { margin:0 0 12px; max-width:100%; overflow-x:auto; }
.seg.tabbar button { padding:7px 16px; font-size:13.5px; flex:none; }
.seg.tabbar button b { font-weight:600; margin-left:4px; opacity:.85; }
/* a page's status in one line, under the header: <p class="summary"><span><b>3</b> overdue</span>...</p> */
.summary { margin:0 0 14px; font-size:14px; color:var(--muted); display:flex; gap:4px 18px; flex-wrap:wrap; align-items:baseline; }
.summary b { color:var(--ink); font-weight:600; }
.summary .bad, .summary .bad b { color:var(--bad); }
.summary a { color:inherit; text-decoration:none; }
.summary a:hover b, .summary a:hover { color:var(--teal); }