/* Layout and components. Colours, fonts and type come from tokens.css: this file names tokens and type classes, never a literal. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--c-accent); text-underline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.muted { color: var(--c-muted); }
.grow { flex: 1; min-width: 0; }

/* Shell: tabs in a bottom bar on the phone, a side rail on wide screens (T2). */
.shell { grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.top .who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-left: auto; min-width: 0; }
.top select { min-height: 44px; max-width: 100%; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); padding: 4px 8px; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--c-surface); border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 5; }
.tabs button { min-height: 56px; border: 0; background: none; color: var(--c-muted); cursor: pointer; padding: 6px 2px; }
.tabs button[aria-selected="true"] { color: var(--c-accent); box-shadow: inset 0 3px 0 var(--c-accent); }
.panel { min-width: 0; padding: 16px max(16px, env(safe-area-inset-left, 0px)) 32px; }

.btn { min-height: 44px; padding: 8px 16px; border: 1px solid var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); border-radius: 8px; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--c-accent); }
.btn.danger { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-on-accent); }
.btn.small { min-height: 44px; padding: 4px 12px; }
.card-box[hidden] { display: none; }
.card-nav { justify-content: center; align-items: center; gap: 8px; }
.dots { display: flex; gap: 0; }
.dot { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.dot::after { content: ''; position: absolute; inset: 17px; border-radius: 50%; background: var(--c-line); }
.dot.on::after { background: var(--c-accent); }
.dot.warn::after { background: var(--c-warn); }
.entry a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.btn[disabled] { opacity: .55; cursor: default; }
.linkbtn { background: none; border: 0; color: var(--c-accent); cursor: pointer; padding: 10px 4px; min-height: 44px; text-decoration: underline; text-underline-offset: 2px; }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field > span { color: var(--c-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); }
.field textarea { min-height: 88px; resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--c-accent); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: grid; gap: 12px; }
.box { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 99px; background: var(--c-accent-soft); color: var(--c-accent); }
.pill.ok { background: var(--c-ok-soft); color: var(--c-ok); }
.pill.warn { background: var(--c-warn-soft); color: var(--c-warn); }
.pill.danger { background: var(--c-danger-soft); color: var(--c-danger); }
.note { padding: 16px; color: var(--c-muted); }
.alert { padding: 10px 14px; border-radius: 8px; background: var(--c-danger-soft); color: var(--c-danger); }

/* Sign in */
.signin { max-width: 380px; margin: 12vh auto 0; padding: 0 16px; display: grid; gap: 16px; }

/* Writing: the list and the editor side by side on wide screens, one at a time on the phone. */
.writing { display: grid; gap: 16px; }
.writing .editor { display: none; }
.writing.editing .list { display: none; }
.writing.editing .editor { display: block; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters select { min-height: 44px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); padding: 4px 8px; }
.group > h3 { padding: 14px 4px 6px; color: var(--c-muted); }
.idea-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left;
  background: var(--c-surface); border: 0; border-top: 1px solid var(--c-line); cursor: pointer; }
.idea-row:first-child { border-top: 0; }
.idea-row[aria-current="true"] { background: var(--c-accent-soft); }
.idea-row .sub { grid-column: 1 / -1; color: var(--c-muted); }
.editor-card { padding: 16px; display: grid; gap: 4px; }
.card-box { border: 1px solid var(--c-line); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: var(--c-zebra); }
.card-box.clash { border-color: var(--c-warn); }
.slide { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--c-line); }

/* Testing */
.test-idea { overflow: hidden; margin-bottom: 12px; }
.test-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; padding: 14px; background: none; border: 0; text-align: left; cursor: pointer; min-height: 56px; }
.test-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 14px; border-top: 1px solid var(--c-line); }
.keys { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.keys b { display: block; }

/* The panel (TS2, S63): numbers of the cards side by side. On the phone a number per row and a column per card, on wide screens a column per card. */
.panel-table { width: 100%; border-collapse: collapse; }
.panel-table th, .panel-table td { padding: 8px 10px; text-align: right; border-top: 1px solid var(--c-line); vertical-align: top; }
.panel-table th:first-child, .panel-table td:first-child { text-align: left; }
.panel-table thead th { border-top: 0; color: var(--c-muted); }
.panel-scroll { overflow-x: auto; }
.panel-cols { display: none; gap: 12px; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); }
.panel-col { border: 1px solid var(--c-line); border-radius: 10px; padding: 12px; display: grid; gap: 6px; align-content: start; }
.panel-col dl { margin: 0; display: grid; gap: 6px; }
.panel-col dl div { display: flex; justify-content: space-between; gap: 8px; }
.panel-col dd { margin: 0; }

/* Planning: a row per day on the phone, seven columns on wide screens (P6). Shape carries the meaning, colour is an accent. */
.week-days { display: grid; gap: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; }
.day { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 8px; padding: 6px 10px; border-top: 1px solid var(--c-line); align-items: start; }
.day:first-child { border-top: 0; }
.day.today { background: var(--c-accent-soft); }
.day.empty { padding-block: 0; }
.day.empty .day-head { min-height: 28px; padding-block: 4px; }
.entries { display: grid; gap: 4px; min-width: 0; }
.day-head { text-align: left; background: none; border: 0; color: var(--c-muted); cursor: pointer; min-height: 44px; padding: 8px 0; }
.day.today .day-head { color: var(--c-accent); }
.entry { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 44px; padding: 4px 10px; border-radius: 8px; border: 1px solid transparent; position: relative; }
.entry-link { color: inherit; text-decoration: none; min-width: 0; text-align: left; }
.entry .linkish { background: none; border: 0; padding: 0; cursor: pointer; }
.entry.posted { background: var(--c-accent); color: var(--c-on-accent); }
.entry.posted .muted { color: inherit; }
.entry.planned { border-color: var(--c-accent); }
.entry.missed { border-color: var(--c-warn); background: var(--c-warn-soft); color: var(--c-warn); }
.entry.quiet { padding-inline: 2px; }
.entry.unsorted { color: var(--c-muted); }
.entry.unsorted::before { content: "●"; }
.entry.reminder { border: 1px dashed var(--c-accent); }
.entry.reminder.overdue { border-color: var(--c-warn); }
.entry.stripe { --stripe: var(--c-accent); box-shadow: inset 3px 0 0 var(--stripe); }
.entry.posted.stripe { box-shadow: inset 3px 0 0 var(--stripe), inset 5px 0 0 var(--c-surface); }   /* on the filled chip a light line keeps the stripe apart from the fill */
.entry.stripe.cat-0 { --stripe: var(--c-cat-0); }
.entry.stripe.cat-1 { --stripe: var(--c-cat-1); }
.entry.stripe.cat-2 { --stripe: var(--c-cat-2); }
.entry.stripe.cat-3 { --stripe: var(--c-cat-3); }
.entry.stripe.cat-4 { --stripe: var(--c-cat-4); }
.entry.stripe.cat-5 { --stripe: var(--c-cat-5); }
.entry.stripe.cat-6 { --stripe: var(--c-cat-6); }
.entry.stripe.cat-7 { --stripe: var(--c-cat-7); }
.overdue-before { padding: 8px 12px; display: grid; gap: 6px; }
.choices { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.choices legend { padding: 0; margin-bottom: 4px; color: var(--c-muted); }
.choice .t-small { display: block; }
.entry .tick { min-height: 44px; }
.entry .tick input { width: 22px; height: 22px; }

/* Insights and notifications */
details > summary { cursor: pointer; list-style: none; min-height: 44px; }
details > summary::-webkit-details-marker { display: none; }
.post { border-top: 1px solid var(--c-line); }
.post:first-child { border-top: 0; }
.upload { border-top: 1px solid var(--c-line); padding: 6px 0; }
.thumb { border-radius: 6px; object-fit: cover; }
.kv { margin: 0; display: grid; gap: 4px; }
.kv div { display: flex; justify-content: space-between; gap: 8px; }
.kv dd { margin: 0; }
.notif { padding: 10px 0; border-top: 1px solid var(--c-line); display: grid; gap: 4px; }
.notif.unread { box-shadow: inset 3px 0 0 var(--c-danger); padding-left: 10px; }

/* Insights: series, account and keywords. Tables scroll sideways inside their box on the phone, never the page. Charts take their colour from the tokens. */
.panel-scroll-always { overflow-x: auto; max-width: 100%; }
.panel-table tr.total td { border-top: 2px solid var(--c-line); }
.chart-fig { margin: 0; display: grid; gap: 4px; }
.chart { width: 100%; height: 140px; display: block; background: var(--c-zebra); border-radius: 8px; }
.chart .bar { fill: var(--c-accent); }
.chart .bar.neg { fill: var(--c-warn); }
.chart .zero { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.series h4 { margin: 0; }

/* Dialogs */
.veil { position: fixed; inset: 0; background: var(--c-veil); display: grid; align-items: end; z-index: 20; }
.sheet { background: var(--c-surface); border-radius: 14px 14px 0 0; padding: 16px max(16px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 90dvh; overflow-y: auto; }
.sheet h3 { margin-bottom: 12px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px; border-radius: 8px; background: var(--c-ink); color: var(--c-bg); z-index: 30; max-width: 90vw; }
.toast.error { background: var(--c-danger); color: var(--c-on-accent); }

@media (min-width: 900px) {
  .shell { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto 1fr; padding-bottom: 0; }
  .top { grid-column: 1 / -1; }
  .tabs { position: static; grid-auto-flow: row; grid-auto-columns: auto; align-content: start; border-top: 0; border-right: 1px solid var(--c-line); padding: 12px 0; }
  .tabs button { text-align: left; padding-left: 20px; min-height: 48px; }
  .tabs button[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--c-accent); background: var(--c-accent-soft); }
  .panel { padding: 24px 32px 48px; }
  .writing { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
  .writing .list, .writing.editing .list { display: block; }
  .writing .editor, .writing.editing .editor { display: block; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }     /* a tall editor scrolls inside itself, so Save is never out of reach */
  .post .kv, .upload .kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 24px; }     /* Insights: more numbers side by side on a wide screen (T2) */
  .upload .keys { gap: 8px 32px; }
  .week-days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .day { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--c-line); align-content: start; min-height: 120px; }
  .day:first-child { border-left: 0; }
  .entry .grow { flex: 1 1 9ch; }     /* in a narrow day column the text drops below the tick and dot instead of being squeezed beside them */
  .day.empty { padding-block: 6px; }
  .panel-scroll { display: none; }
  .panel-cols { display: grid; }
  .veil { align-items: center; justify-items: center; }
  .sheet { width: min(560px, 92vw); border-radius: 14px; }
  .toast { bottom: 24px; }
}

/* Keywords: the master switch, the list of rules and the sheet that adds or edits one. */
.keywords { max-width: 720px; }
.kw-list { list-style: none; margin: 0; padding: 0; }
.kw-rule.paused { background: var(--c-zebra); }
.kw-rule.paused .kw-text, .kw-rule.paused h3 { color: var(--c-muted); }
.kw-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.kw-how { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.between { justify-content: space-between; flex-wrap: nowrap; }
.reply-field { gap: 4px; }
.reply-field textarea { width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); resize: vertical; }
fieldset.stack { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.stack legend { padding: 0; margin-bottom: 4px; color: var(--c-muted); }