:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --text: #1c1f23;
  --muted: #5b6470;
  --line: #d9dce1;
  --accent: #1f5fbf;
  --accent-text: #ffffff;
  --good: #1a6b3a;
  --good-bg: #e3f3e8;
  --bad: #a3232b;
  --bad-bg: #fbe7e8;
  --warn: #7a5a00;
  --warn-bg: #fdf3d6;
  --none-bg: #eceef1;
  --mic-live: #c62828; /* the microphone while it listens: red, white icon (contrast 5.6), a dark red edge */
  --mic-live-text: #ffffff;
  --mic-live-edge: #7f1010;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b;
    --surface: #1d2127;
    --text: #e8eaed;
    --muted: #a0a8b3;
    --line: #333a43;
    --accent: #6ea2f0;
    --accent-text: #0d1117;
    --good: #7fd49a;
    --good-bg: #17301f;
    --bad: #f19aa0;
    --bad-bg: #3a1c1f;
    --warn: #ecc561;
    --warn-bg: #3a2f10;
    --none-bg: #2a2f36;
    --mic-live: #d32f2f; /* a little lighter on the dark page, white icon (contrast 4.98), a light red edge so the shape shows against the page */
    --mic-live-text: #ffffff;
    --mic-live-edge: #ff9e9e;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.top h1 { margin: 0; font-size: 1.15rem; }
.account { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; } /* positioned: the account menu's list is placed against the whole group, so it opens inside the screen at any width */
.account > * { flex: none; }

/* The More menu, left of the smiling face: Support (operators only) and Help in a list that opens under the button.
   The list is at least 12rem wide and never wider than the screen; on a phone More sits at the left edge of the header's second row, so the list opens inside the screen. */
.more { position: relative; }
.more-button, .more-item { min-height: 44px; }
.more-button[data-current="true"] { background: var(--accent); color: var(--accent-text); }
.more-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  display: grid;
  gap: 4px;
  min-width: 12rem;
  max-width: calc(100vw - 32px);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.more-item { width: 100%; text-align: left; }
/* The account menu behind the smiling face: the email address (all of it, wrapped) and then Usage, Settings, Connections and Notices. Placed after .more-panel so it wins. */
.me { position: static; }
.me-panel { left: auto; right: 0; width: max-content; max-width: min(22rem, calc(100vw - 32px)); }
.me-who { margin: 0; padding: 6px 8px; color: var(--muted); overflow-wrap: anywhere; }
/* The Notices bell, right of Sign out (and the smiling face, same size): an icon button (its name is the aria-label) with a 44 pixel touch target, drawn in the text colour so it follows light and dark. */
.notices-icon, .me-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; }
.notices-icon .bell, .me-button .smile { display: block; }
/* The buttons at the top (28 October 2026): Feedback (a small box under it), Docs, Ask and the folder icon (Upload), in a group of their own between the title and the account group, so the account group (More, the face, Sign out, the bell) keeps its one row.
   The box under Feedback is placed against this group; at phone width the group has a row to itself, so the box opens inside the screen. */
.shortcuts { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.shortcuts > * { flex: none; }
.feedback { position: static; }
.feedback-panel { left: 0; right: auto; width: min(22rem, calc(100vw - 32px)); gap: 8px; }
.feedback-form { display: grid; gap: 8px; margin: 0; }
.feedback-form textarea { min-height: 7em; }
.feedback-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.feedback-texts { display: grid; gap: 4px; min-width: 0; }
.feedback-note, .feedback-from { margin: 0; font-size: 0.85rem; }
.feedback-submit { min-height: 44px; background: var(--text); color: var(--bg); border-color: var(--text); } /* black in the light page, light in the dark one: it follows the text colour */
.nav-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.nav-icon-button { min-width: 44px; padding: 0 10px; }
.nav-button .nav-icon { display: block; }
@media (max-width: 600px) {
  .account { width: 100%; }
  .account .me { margin-left: auto; }
}
@media (max-width: 360px) {
  .account { gap: 4px; } /* More, the face, Sign out and the bell must fit one row at 320 pixels (four buttons of 44 pixels or more) */
}

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h2 { margin: 0 0 8px; font-size: 1.4rem; }
h3 { margin: 0; font-size: 1.1rem; }
.muted { color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card p { margin: 6px 0; }
.saved { font-weight: 600; }

.pill { padding: 2px 10px; border-radius: 999px; font-size: 0.85rem; background: var(--none-bg); color: var(--text); }
.start-box button, #cards .card button, #cards .card select, #cards .card input { min-height: 44px; } /* touch targets of the first-use screens: 44 px (plan A7) */
.start-steps { list-style: none; padding-left: 0; counter-reset: start; }
.start-steps li { counter-increment: start; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.start-steps li::before { content: counter(start) "."; font-weight: 600; }
.start-step-text { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.doors { margin: 12px 0; } /* the two doors (23 October 2026): two buttons side by side, one under the other at phone width; the pressed one is filled and has a heavier border, so colour is not the only sign */
.doors .door-ask { margin: 0 0 6px; font-weight: 600; }
.doors button { flex: 1 1 12em; }
.doors button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border: 3px solid var(--accent); }
.doors button[aria-pressed="true"] .door-keys { color: inherit; }
.key-help { overflow-wrap: anywhere; } /* a service's address has no spaces: it must wrap, not push the page sideways at phone width */
.tag { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; color: var(--muted); }
.pill-ok { background: var(--good-bg); color: var(--good); }
.pill-needs_key, .pill-revoked { background: var(--warn-bg); color: var(--warn); }

.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0; font-size: 0.92rem; }
.caps ul { margin: 4px 0 0; padding-left: 20px; }

.form { margin-top: 12px; display: grid; gap: 12px; }
.idents { display: grid; gap: 12px; }
.field { display: grid; gap: 4px; }
.field span { font-size: 0.9rem; color: var(--muted); }

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}
textarea { resize: vertical; min-height: 4.5em; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

button {
  font: inherit;
  color: var(--accent);
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 7px 13px;
  cursor: pointer;
  font-weight: 600;
}
button:disabled { opacity: 0.55; cursor: progress; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.danger { color: var(--bad); border-color: var(--bad); }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.message { min-height: 1.4em; margin: 0; }
.message.good { color: var(--good); }
.message.bad { color: var(--bad); }

/* meetings */
.tabs { display: flex; gap: 8px; margin: 0 0 20px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.tab[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.list-head p { margin: 0; }
.months { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.month-card { min-height: 44px; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rows + .buttons { margin-top: 12px; }
.row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  color: var(--text);
  font-weight: 400;
  border: 1px solid var(--line);
}
.row:hover { border-color: var(--accent); }
.row-title { font-weight: 600; overflow-wrap: anywhere; }
.row-when { grid-column: 1; font-size: 0.9rem; }
.row .pill { grid-column: 2; grid-row: 1 / span 2; }

.pill-working { background: var(--none-bg); color: var(--accent); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.recording-clock { font-size: 2.4rem; font-variant-numeric: tabular-nums; margin: 8px 0; }
#record button { min-height: 44px; }

h4 { margin: 16px 0 4px; font-size: 1rem; }
.steps { margin: 4px 0; padding-left: 20px; }
.steps li { margin: 4px 0; }
.card .form { margin-top: 8px; }
.card > .buttons { margin: 12px 0; }

/* the minutes of one meeting */
.minutes h5 { margin: 1rem 0 0.4rem; }
.minutes-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--none-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem;
  font: inherit;
  line-height: 1.45;
}
/* a question about one meeting */
.ask-thread { display: grid; gap: 12px; margin-top: 12px; }
.answer { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.answer-none { border-style: dashed; }
.answer p { margin: 6px 0; }
.answer-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.answer-q { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
table.items { border-collapse: collapse; width: 100%; font-size: 0.95em; }
table.items th, table.items td { border: 1px solid var(--line); padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; }
table.items th { background: var(--none-bg); }

.job-row { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line, #ccc); }
.job-row:first-of-type { border-top: 0; }
.models-panel { margin-top: 16px; }

.notice { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.notice-warn { border-color: #b7791f; }
.notice-bad { border-color: #c53030; font-weight: 600; }
.meter-row { display: grid; gap: 4px; margin: 6px 0; }
.meter-row progress { width: 100%; height: 14px; }
.card h4 { margin: 16px 0 4px; }
.finder { display: grid; gap: 8px; padding: 10px 0; }
.finder-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.finder-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 8px 10px; border: 1px solid var(--line, #ccc); border-radius: 8px; }
.finder-info { min-width: 0; overflow-wrap: anywhere; }

/* A notice about the meeting's date: a box of its own, so it is not read as part of the line above. */
.notice {
  padding: 10px 14px;
  border: 1px solid var(--warn);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--warn-bg);
  color: var(--text);
}

/* transcript lines opened from an answer (contracts section 15) */
.lines-openers { display: grid; gap: 8px; margin: 8px 0; }
.lines-open button { min-height: 44px; text-align: left; overflow-wrap: anywhere; }
.lines-panel { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: var(--bg); }
.lines-panel h5 { margin: 4px 0; font-size: 1rem; }
.lines-panel h5:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.lines-panel .buttons { margin: 8px 0; }
ol.lines { list-style: none; margin: 8px 0; padding: 0; }
.line { display: flex; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.line:first-child { border-top: 0; }
.line-time { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.line-words { overflow-wrap: anywhere; min-width: 0; }
/* the marked words do not depend on colour alone: heavier and underlined as well */
.line mark { background: var(--warn-bg); color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0 2px; border-radius: 3px; }
@media (max-width: 600px) {
  .line { flex-direction: column; gap: 0; }
  .lines-open button { width: 100%; }
}

/* the Ask tab: a question across all meetings (contracts section 16) */
.period { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.period summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.optional-details { margin: 12px 0; }
.optional-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.optional-details > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.optional-details[open] > summary { margin-bottom: 8px; }
.period summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.period-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 8px 0; }
#ask-all button { min-height: 44px; }
/* The microphone at the top of the question box (dictation): an icon button of 44 pixels, filled while it listens, so colour is not the only sign (its name changes too). */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-head label { font-size: 0.9rem; color: var(--muted); }
.mic { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 10px; }
.mic[aria-pressed="true"] { background: var(--mic-live); color: var(--mic-live-text); border-color: var(--mic-live-edge); border-style: dashed; } /* listening = red; the pressed state, the name "Stop dictating", the dashed edge and the status line say it too, so colour is never the only sign */
.field .mic-icon { color: inherit; } /* `.field span` makes small labels grey; the icon is drawn in its button's colour */
.mic-icon {
  display: block; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ask-all-answer { margin-top: 12px; }
.ask-all-answer h3 { margin: 16px 0 4px; font-size: 1.1rem; }
.ask-all-answer h3:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.ask-group h4 { margin: 14px 0 4px; overflow-wrap: anywhere; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.point { padding: 8px 0; border-top: 1px solid var(--line); }
.point:first-child { border-top: 0; }
.point p { margin: 4px 0; }
.point-text { overflow-wrap: anywhere; }
/* a lead is said in words as well as set apart: never colour alone */
.point-lead { border-left: 4px solid var(--warn); padding-left: 10px; }
.lead-words { color: var(--muted); font-style: italic; }

/* the Action items tab: every action item across meetings (contracts section 17) */
.tabs { flex-wrap: wrap; } /* five tabs (the rest are in the More menu): they wrap at phone width instead of widening the page */
.views { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } /* the five ways to list the action items */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
#action-items button { min-height: 44px; }
#action-items select, #action-items input[type="text"] { min-height: 44px; max-width: 100%; } /* the Mark and Assigned to controls on each item: 44 px touch targets */
.mark-controls, .assign-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.action-group table.items td select.ai-assign, .action-group table.items td input.ai-name { min-width: 9rem; }
.action-group table.items td button.ai-high { min-width: 8.5rem; }
/* the four states as small buttons in four colours (blue Open, green Completed, amber Postponed, grey Archived); the item's own state is filled. Colours come from the page's tokens, so dark mode follows. */
.ai-states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } /* two by two: the four buttons stay together and narrow, and the row stays short */
button.ai-state { padding: 0 10px; font-size: 0.85rem; background: var(--surface); }
button.ai-state-open { color: var(--accent); border-color: var(--accent); }
button.ai-state-completed { color: var(--good); border-color: var(--good); }
button.ai-state-postponed { color: var(--warn); border-color: var(--warn); }
button.ai-state-archived { color: var(--muted); border-color: var(--muted); }
button.ai-state[aria-pressed="true"] { color: var(--accent-text); font-weight: 700; }
button.ai-state-open[aria-pressed="true"] { background: var(--accent); }
button.ai-state-completed[aria-pressed="true"] { background: var(--good); }
button.ai-state-postponed[aria-pressed="true"] { background: var(--warn); }
button.ai-state-archived[aria-pressed="true"] { background: var(--muted); }
a.meeting-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a.meeting-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.action-group table.items td button.ai-high { white-space: nowrap; overflow-wrap: normal; } /* "High priority" never breaks inside a word */
.action-items-list { margin-top: 12px; }
.action-items-list .summary { margin: 0 0 8px; }
.action-group h3 { margin: 18px 0 6px; overflow-wrap: anywhere; }
/* Six columns (All items) will not fit a phone, so the table keeps a readable width and scrolls sideways inside its own box (.table-wrap). Every column has a floor, so
   the words in the short columns (Owner, Due, Priority, Status) are never broken into pieces ("Pri orit y"); a very long word is still broken, inside its column. */
.action-group table.items { min-width: 40rem; }
.action-group table.items th, .action-group table.items td { overflow-wrap: anywhere; min-width: 5.5rem; }
.action-group table.items tbody th, .action-group table.items thead th:first-child { min-width: 12rem; }
.action-group tbody th { font-weight: 400; background: transparent; }
/* the Support tab's list of looks (contracts section 24): six columns with 36-character user ids. The table keeps a readable width and, on a phone,
   scrolls sideways inside its own box (.table-wrap) rather than squeezing every word into pieces. */
#support-audit button { min-height: 44px; }
.audit-list { margin-top: 12px; }
.audit-list .summary { margin: 0 0 8px; }
table.audit { min-width: 62rem; }
table.audit thead th { white-space: nowrap; }
table.audit tbody th { font-weight: 400; background: transparent; min-width: 9rem; }
table.audit td:nth-child(2), table.audit td:nth-child(3) { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; white-space: nowrap; }
table.audit td:nth-child(4) { min-width: 11rem; }
table.audit td:nth-child(6) { min-width: 14rem; overflow-wrap: anywhere; }
/* the Support tab's two looks (contracts section 24): the same rule, a table keeps a readable width and scrolls inside its own box on a phone */
#support-looks button { min-height: 44px; }
#support-looks input[type=text], #support-looks select { max-width: 100%; }
.looks-card { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }
.looks-card h4 { margin: 12px 0 6px; }
.looks-result { margin-top: 12px; }
.looks-result .summary { margin: 0 0 8px; }
table.meetings { min-width: 56rem; }
table.meetings tbody th { font-weight: 400; background: transparent; min-width: 11rem; overflow-wrap: anywhere; }
table.meetings td { min-width: 8rem; overflow-wrap: anywhere; }
table.meetings td:nth-child(4) { min-width: 22rem; }
table.meetings .problem { color: var(--bad); margin-top: 4px; }
table.jobs { min-width: 78rem; }
table.jobs thead th { white-space: nowrap; }
table.jobs td:nth-child(1), table.jobs td:nth-child(2) { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; white-space: nowrap; }
table.jobs td:nth-child(5), table.jobs td:nth-child(6) { min-width: 9rem; }
table.jobs td:nth-child(7) { min-width: 16rem; overflow-wrap: anywhere; }
/* read by screen readers, not shown: the heading above already names the meeting */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the recorder key card under Settings (contracts section 19): tall buttons, and the key in a fixed-width face so each character can be told apart */
#settings-recorder button, #settings-claude button { min-height: 44px; }
#recorder-key-value { font-family: ui-monospace, Consolas, monospace; }

/* the email card under Settings (contracts section 25): tall buttons, a long address wraps instead of pushing the page sideways, and the switch is a box with its words beside it */
#settings-email button { min-height: 44px; }
#settings-email p { overflow-wrap: anywhere; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent); }

/* the RECORD button at the top of the page */
:root { --rec: #c62828; --rec-ring: rgba(198, 40, 40, 0.35); }
.quick-record { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 0 0 24px; }
.quick-record p { margin: 0; max-width: 46ch; }
.quick-status { display: flex; align-items: center; gap: 12px; }
.quick-record button { min-height: 44px; }
.quick-record .buttons, .quick-no-key { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* the no-key line, its button and the microphone-only button sit in the same centred column */
.quick-record .buttons { flex-direction: row; justify-content: center; }
.quick-status .recording-clock { font-size: 1.6rem; margin: 0; }
/* Discard sits apart from "Stop and upload": below the message, behind a rule, so a thumb aiming at Stop does not land on it */
.quick-discard { width: 100%; max-width: 46ch; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quick-discard .message { min-height: 0; }
.record-circle {
  width: 132px; height: 132px; border-radius: 50%; padding: 0;
  font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em;
  color: #fff; background: var(--rec); border: 4px solid var(--rec);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.record-circle:hover:not(:disabled) { filter: brightness(1.08); }
/* the small question mark at the bottom right of the RECORD button, and the words it shows */
.record-help-wrap { position: relative; display: inline-block; }
.record-help { position: absolute; right: -6px; bottom: -2px; width: 32px; height: 32px; min-height: 32px !important; border-radius: 50%; padding: 0; font-size: 1rem; font-weight: 700; line-height: 1; background: var(--surface); color: var(--text); border: 2px solid var(--line); cursor: help; }
.record-help::after { content: ""; position: absolute; inset: -6px; } /* a larger touch area than the circle you see */
.record-pop { display: none; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 5; width: min(46ch, calc(100vw - 32px)); padding: 12px 14px; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
.record-pop p { margin: 0 0 8px; }
.record-pop p:last-child { margin-bottom: 0; font-weight: 600; }
.record-help-wrap:hover .record-pop, .record-pop[data-open] { display: block; }
.record-circle.live { animation: rec-pulse 1.6s ease-out infinite; }
.record-circle.paused { background: var(--surface); color: var(--rec); }
@keyframes rec-pulse { 0% { box-shadow: 0 0 0 0 var(--rec-ring); } 100% { box-shadow: 0 0 0 22px rgba(198, 40, 40, 0); } }
@media (prefers-reduced-motion: reduce) { .record-circle.live { animation: none; } }

/* the live sound picture while recording */
.meter-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.level-meter { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 360 / 56; }
.meter-legend { margin: 0; font-size: 0.85rem; }
.meter-box[hidden] { display: none; }

/* the recording player (docs/contracts.md section 23) */
.audio-play { margin: 8px 0; }
.audio-play audio { display: block; width: 100%; margin: 8px 0; }
.audio-play button { min-height: 44px; }

/* the History tab: the questions and answers kept for 90 days (contracts section 26) */
#history button { min-height: 44px; }
#history h3:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.history { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.history-row { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.history-row > p { margin: 4px 0; overflow-wrap: anywhere; }
.history-row .buttons { margin: 8px 0 0; }
.history-row .answer { margin: 8px 0; }
/* a question is a button that opens its answer: the sign in front says so in words as well as colour */
button.history-q { width: 100%; text-align: left; color: var(--text); background: transparent; border-color: transparent; font-weight: 600; overflow-wrap: anywhere; padding: 6px 4px; }
button.history-q::before { content: "+ "; font-weight: 700; }
button.history-q[aria-expanded="true"]::before { content: "\2212  "; }
button.history-q:hover { border-color: var(--accent); }

/* the Notices tab: what the service wrote about the person's meetings and usage (contracts section 28) */
#notices button { min-height: 44px; }
#notices h3:focus, .notice-subject:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.notices { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.notice-row { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.notice-row > p { margin: 4px 0; overflow-wrap: anywhere; }
.notice-subject { font-weight: 600; }
.notice-text { white-space: pre-line; }

/* the Upload tab: buttons are 44 pixels high, like the recorder's; the list of what it takes is small print */
#upload button { min-height: 44px; }
.file-kinds { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.9rem; }

/* a long title next to a wide status ("Adding to your meeting memory") was squeezed into a narrow column at phone width: the status goes under the date instead */
@media (max-width: 480px) {
  .row { grid-template-columns: 1fr; }
  .row .pill { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
}

/* recording the meetings in the calendar by itself: the banner at the top of the page, and the card under Settings (docs/calendar-auto-record.md) */
.auto-banner {
  background: var(--warn-bg); color: var(--text); border: 1px solid var(--warn); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 12px;
}
.auto-banner.bad { background: var(--bad-bg); border-color: var(--bad); }
.auto-live { background: var(--surface); border-color: var(--rec); border-width: 2px; }
.auto-banner p { margin: 6px 0; }
.auto-banner .buttons { margin: 8px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.auto-banner button, #settings-auto-record button { min-height: 44px; }
.auto-live .recording-clock { font-size: 1.4rem; margin: 0; }
.check-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 8px 0; cursor: pointer; }
.check-row input[type=checkbox] { flex: none; width: 24px; height: 24px; margin: 2px 0 0; padding: 0; }
.auto-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
#settings-auto-record select { max-width: 100%; }

/* the Help page: a list of guides, and one guide at a time (web/js/help-view.js). Buttons are 44 pixels high; long words wrap instead of widening the page;
   a guide is lists and definitions, not tables, so it stays readable at phone width. */
#help button { min-height: 44px; }
#help h2:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
#help > .buttons { margin: 0 0 12px; }
#help > .buttons:last-child { margin: 12px 0 0; }
.help-topics { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
button.help-topic { width: 100%; display: grid; gap: 2px; text-align: left; color: var(--text); font-weight: 400; border: 1px solid var(--line); padding: 12px 14px; }
button.help-topic:hover { border-color: var(--accent); }
.help-topic-title { font-weight: 600; overflow-wrap: anywhere; }
.help-topic-summary { color: var(--muted); overflow-wrap: anywhere; }
.help-guide { margin-top: 0; }
.help-guide h2 { margin: 0 0 8px; overflow-wrap: anywhere; }
.help-guide h3 { margin: 24px 0 6px; font-size: 1.1rem; }
.help-guide p, .help-guide li, .help-guide dt, .help-guide dd { overflow-wrap: anywhere; }
.help-list { margin: 6px 0; padding-left: 20px; }
.help-list li { margin: 6px 0; }
.help-steps { padding-left: 24px; }
.help-steps li { margin: 14px 0; }
.help-steps li p { margin: 4px 0; }
.help-steps .help-detail { color: var(--muted); font-size: 0.95rem; }
.help-terms { margin: 6px 0; }
.help-terms dt { margin: 14px 0 0; font-weight: 600; }
.help-terms dd { margin: 4px 0 0; }
.help-code { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.95rem; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.help-code code { font-family: ui-monospace, Consolas, monospace; }
.help-codewrap { margin: 8px 0; }
.help-codewrap .help-code { margin: 0 0 6px; }
.help-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.help-copy-note { font-size: 0.9rem; color: var(--muted, inherit); }
.help-note { margin: 18px 0 6px; }
.help-note p { margin: 4px 0; }

/* The front page (signed out; onboarding plan S1, 23 October 2026): the lead, three needs, who pays, the way in, all inside the first 640 pixels at 360 wide. */
.front { max-width: 560px; margin: 0 auto; }
@media (max-width: 600px) { .front { margin: -14px auto -40px; } } /* on a phone main's own top and bottom space is taken back, so the whole page fits in 640 pixels at 360 wide */
.front .lead { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.3; }
.front h3 { margin: 8px 0 2px; font-size: 1rem; }
.front .needs-list { margin: 0 0 8px; padding-left: 20px; line-height: 1.35; }
.front .needs-list li { margin: 0; }
.front p { margin: 6px 0; }
.front button, #view-public button { min-height: 44px; }
.front-buttons { margin: 8px 0 6px; }
.front a { color: var(--accent); }
#view-public .help-guide { margin-top: 8px; }
#view-public ol.lines { list-style: none; margin: 4px 0; padding: 0; }

/* Every button on the Meetings page and in a meeting's card is at least 44 pixels high (measured 42 on 23 October 2026, onboarding work package 10). */
#view-meetings button { min-height: 44px; }

/* The footer links to the terms, the privacy notice and "What is kept, and how" (public pages drawn from legal.js). */
.legal-links { max-width: 760px; margin: 0 auto; padding: 0 16px 32px; display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 0.95rem; }
.legal-links a { color: var(--muted); display: inline-block; padding: 12px 0; }

/* ---- 2 November 2026: leaving a meeting out of the action items, notes with dictation, editing the action items, the My team page ---- */
.ignore-box { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.ignore-box .check { margin-top: 0; }
.ignore-box p { margin: 6px 0 0; }
.notes { margin-top: 18px; }
.meeting-notes textarea { width: 100%; }
.action-items-editor td input[type="text"], .action-items-editor td select { width: 100%; min-width: 7rem; min-height: 44px; }
.action-items-editor td[data-field="task"] input { min-width: 14rem; }
.action-items-editor button { min-height: 44px; }
.people { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.people li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.people .person { overflow-wrap: anywhere; }
.people-section { margin: 18px 0; }
.people-section h3, .team-import h3 { margin: 0 0 4px; }
#team button, #team input[type="text"], #team input[type="email"] { min-height: 44px; }
.team-import textarea { width: 100%; }
.import-notes { margin: 8px 0 0; padding-left: 20px; }
.team { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; }
/* ---- 3 November 2026: emailing a meeting's action items to a team (contracts section 40) ---- */
.mail-box { margin: 12px 0; }
.mail-panel { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.mail-box, .mail-panel { min-width: 0; overflow-wrap: anywhere; } /* a long address or name wraps instead of widening the page */
.mail-teams { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; } /* a fieldset is as wide as its widest word unless told otherwise */
.mail-box .check-row > span { min-width: 0; }
.mail-box .check-row input[type=radio] { flex: none; width: 24px; height: 24px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); } /* the page's .check-row styles checkboxes only */
.mail-teams legend { font-weight: 600; padding: 0; }
.mail-box button, .mail-box input[type="text"] { min-height: 44px; }
.mail-box input[type="text"] { max-width: 100%; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); line-height: 1.45; }
.team h4 { margin: 0 0 4px; }
.team p { margin: 2px 0; }

/* ---- 4 November 2026 ("Your meetings" feature session): Edit meeting details, Action items at the top of a meeting, "Ignore", System info, the microphone on more boxes ---- */
.meeting-details { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.meeting-details h4 { margin: 0 0 4px; }
.meeting-details input[type="text"], .meeting-details input[type="date"], .meeting-details input[type="time"] { min-height: 44px; max-width: 100%; }
.action-items-top { margin: 12px 0; min-width: 0; }
.action-items-top h4 { margin: 0 0 6px; }
.ignore-title { font-weight: 600; }
.system-info { margin: 24px 0 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.system-info > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.system-info > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.field-head-end { justify-content: flex-end; }
.legal-links button { background: none; border: 0; padding: 12px 0; margin-left: auto; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; min-height: 44px; }
.legal-links button:hover { color: var(--text, inherit); }
/* The Language option in the account menu: a label and the two languages, the current one filled like a pressed tab. */
.me-language { display: grid; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.me-language-label { margin: 0; padding: 0 8px; color: var(--muted); font-size: 0.9rem; }
.me-language .more-item[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }