/* DESIGN v6.1 — COARIS WORK. Shared by the app and both access pages. */
:root {
  color-scheme: light;
  --page: #f5f7fa;
  --background: #fff;
  --card: #fff;
  --foreground: #14233c;
  --label: #596f89;
  --muted: #f2f5f8;
  --muted-foreground: #69798c;
  --annotation: #8492a4;
  --eyebrow: #7b8ea5;
  --border: #e5eaf0;
  --divider: #e3e9ef;
  --input: #dae1e9;
  --input-border: #dce4ed;
  --primary: #152b4a;
  --button: #182e4b;
  --button-hover: #27496f;
  --primary-foreground: #fff;
  --accent: #e8f1fc;
  --accent-foreground: #183b64;
  --selected: #e9f3fe;
  --selected-border: #3b83c6;
  --ring: #519de8;
  /* v6.1: the outer focus ring is #3b83c6 so it reaches 3:1 on white (4.00:1) and on the colored start buttons. */
  --focus: #3b83c6;
  /* v6.1: #31786d keeps 4.65:1 on --success-soft for the 確認済み and 使えます badges. */
  --success: #31786d;
  --success-soft: #eaf5ef;
  --success-dot: #4c9c8c;
  --warning: #ab784c;
  --warning-dot: #c99460;
  --chosen: #fff5e9;
  --chosen-border: #d28a42;
  --chosen-foreground: #a45716;
  --error: #fff3ee;
  --error-foreground: #a3664e;
  --destructive: #c04444;
  --brand-cyan: #0ea5d2;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-float: 0 8px 26px #25446615;
  --shadow-button: 0 5px 10px #122b4c0b;
  --shadow-button-hover: 0 6px 20px #122b4c22;
  --shadow-dialog: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --font-sans: Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  /* v6.1: the three start buttons carry each tool's own color (Zoom brand blue, Google Meet logo yellow). */
  --zoom: #0b5cff;
  --zoom-hover: #0a4fd9;
  --meet: #ffba00;
  --meet-hover: #f2a900;
  --in-person: #182e4b;
  --in-person-hover: #27496f;
  /* v6.1: the AI mark. Color is used only here and on the start buttons. */
  --ai-from: #3b83c6;
  --ai-to: #0ea5d2;
  --ai-soft: #eef6fd;
  --home-width: 1200px;
}
* { box-sizing: border-box; }
/* The page itself never scrolls or rubber-bands (iOS pull included); each screen scrolls inside #main or its own
   access page, and fitted screens (home) scroll only inside their lists (brief A §3). */
html,body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--foreground); background: var(--page); font: 400 16px/1.85 var(--font-sans); -webkit-font-smoothing: antialiased; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3,strong { overflow-wrap: anywhere; }
h1,h2,h3 { font-weight: 500; }
h1 { font-size: 34px; line-height: 1.5; letter-spacing: .02em; }
h2 { font-size: 19px; line-height: 1.5; }
h3 { font-size: 17px; line-height: 1.5; }
strong { font-weight: 600; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; color: inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color: transparent; }
button,a,summary { touch-action: manipulation; }
button { cursor: pointer; }
button,a,summary { transition: background .2s, color .2s, box-shadow .2s, transform .2s; }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: inset 0 0 0 1px var(--primary); }
[tabindex="-1"]:focus { outline: none; }
[hidden],svg[hidden] { display: none !important; }
svg { flex: none; vertical-align: middle; }
p { overflow-wrap: anywhere; }
button { border: 0; background: transparent; }
label,legend { color: var(--label); font-size: 14px; font-weight: 500; line-height: 1.5; }
label { display: block; }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),select,textarea { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--input); border-bottom-color: var(--muted-foreground); border-radius: var(--radius-sm); background: var(--background); font-size: 16px; line-height: 1.5; }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),select { height: 44px; min-height: calc(1.5em + 20px); }
input::placeholder,textarea::placeholder { color: var(--label); }
input[readonly] { background: var(--muted); }
input[type="date"],input[type="time"] { appearance: none; -webkit-appearance: none; text-align: left; }
input::-webkit-date-and-time-value { text-align: left; min-height: 1em; }
input::-webkit-datetime-edit { padding: 0; min-width: 0; }
input[type="checkbox"],input[type="radio"] { accent-color: var(--primary); width: 18px; height: 18px; flex: none; }
textarea { resize: vertical; }
select { padding-right: 24px; }
form>label, .share-controls>label { margin: 16px 0 7px; }
form>label:first-child { margin-top: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.button,.inline-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--background); color: var(--primary); font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.button:hover,.inline-button:hover { background: var(--muted); }
.button.primary { min-height: 49px; padding-inline: 18px; border-color: var(--button); background: var(--button); color: var(--primary-foreground); box-shadow: var(--shadow-button); }
.button.primary:hover { background: var(--button-hover); border-color: var(--button-hover); box-shadow: var(--shadow-button-hover); }
.button.danger,.delete-button { color: var(--destructive); }
.button.danger:hover,.delete-button:hover { background: var(--error); }
.icon-button { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; color: var(--label); }
.icon-button:hover { background: var(--muted); }
.button.is-busy::before { content: ''; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: turn 1s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -120px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--primary); color: white; }
.skip-link:focus { top: 12px; }
.boot-state,.noscript { padding: 36px; }
.app-shell { height: 100%; height: 100dvh; display: flex; flex-direction: column; min-height: 0; }
.topbar { display: flex; align-items: center; flex: none; gap: 24px; height: 80px; padding: 0 36px; border-bottom: 1px solid var(--border); background: var(--background); isolation: isolate; position: relative; z-index: 35; }
.brand { display: flex; align-items: center; flex: none; gap: 19px; min-height: 44px; }
.brand-word { font-size: 24px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: var(--primary); }
.brand-word>span { color: var(--brand-cyan); }
.brand-divider { width: 1px; height: 21px; background: var(--input); }
.brand-product { font-size: 20px; font-weight: 400; letter-spacing: -.5px; white-space: nowrap; }
.app-nav { display: flex; justify-content: center; gap: 4px; flex: 1; min-width: 0; }
.app-nav a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--label); line-height: 1.5; }
.app-nav a[aria-selected="true"] { color: var(--primary); background: var(--muted); }
.app-nav a:hover { background: var(--muted); }
.account { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 240px; }
.account-name { min-width: 0; max-width: 164px; font-size: 14px; line-height: 1.5; }
.account-person,.company-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-name { display: block; color: var(--label); font-size: 12px; }
.avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--muted); color: var(--label); font-size: 14px; }
.user-menu { position: relative; min-width: 0; }
.user-menu>summary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; min-width: 44px; min-height: 44px; }
/* The page itself never scrolls (html, body), so the menu keeps its end on screen and scrolls inside: its top sits 70px
   down (the 80px bar), and it stops 16px above the bottom edge (Astra P2, 2026-09-30). */
.user-menu-items { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; max-width: calc(100vw - 32px); max-height: calc(100vh - 86px); max-height: calc(100dvh - 86px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--background); box-shadow: var(--shadow-float); }
.user-menu-items .button { width: 100%; margin-top: 8px; }
.user-menu-items label { margin-bottom: 7px; }
#main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; }
.content-wrap { width: min(100%, 1440px); padding: 36px; margin: 0 auto; }
.content-wrap.compact { max-width: 1192px; }
.content-wrap.reading { max-width: 1032px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.page-heading>div { min-width: 0; }
.page-meta { color: var(--label); font-size: 13px; line-height: 1.8; margin-top: 8px; }
.page-heading>.button { flex: none; }
.eyebrow { color: var(--eyebrow); font-size: 12px; font-weight: 500; letter-spacing: .3px; line-height: 1.5; }
.eyebrow:lang(en) { letter-spacing: 2.6px; }
.section-label { font-size: 17px; font-weight: 500; margin-bottom: 14px; }
.content-wrap.home,.content-wrap.meeting { max-width: calc(var(--home-width) + 72px); }
/* Home fits the screen in one column (brief A §3, resume §2): exactly the height below the top bar, at most 760px wide
   and centered. The heading row carries the AI state, the start card keeps its natural height and 最近の会議記録
   takes everything that is left, scrolling only inside its list, so the spare height never becomes a blank band.
   A screen lower than the floor (a phone held sideways) keeps the floor and scrolls #main, so nothing is clipped.
   24px above and below (36px on other screens) keeps at least one record row in view at 1366×768. */
.content-wrap.home { display: flex; flex-direction: column; height: max(100%, 600px); padding-block: 24px; }
.content-wrap.home>* { width: 100%; max-width: 760px; margin-inline: auto; }
/* This selector also outranks the one-column rule kept below 1051px. */
.content-wrap.home>.home-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto minmax(0,1fr); grid-template-areas: "heading ai" "start start" "recent recent"; gap: 16px 20px; }
.content-wrap.home>.home-grid.with-schedule { grid-template-rows: auto auto auto minmax(0,1fr); grid-template-areas: "heading ai" "start start" "schedule schedule" "recent recent"; }
.home-grid>* { min-width: 0; }
.home-grid>.home-heading { grid-area: heading; align-self: center; flex-wrap: wrap; row-gap: 4px; margin-bottom: 0; }
/* The heading never breaks inside 「会議を始める」: when the row is too narrow (about 601–613px with 確認待ち and 見本を見る
   both shown) 確認待ち N 件 moves to a second line instead. */
.home-grid>.home-heading h1 { white-space: nowrap; }
.home-grid>.ai-status { grid-area: ai; align-self: center; }
.home-grid>.start-area { grid-area: start; }
.home-grid>.home-schedule { grid-area: schedule; }
.home-grid>.home-recent { grid-area: recent; }
.home-heading h1 { line-height: 1.2; }
/* Short Japanese copy breaks at phrase boundaries where supported, so no line ends with a lone character. */
.home-lead,.start-button-note,.start-note,.ai-step>p,.ai-status-text>p,.panel-empty p,.title-error,.join-lead,.join-note,.join-mobile-note,.advice-card>p,.preview-notice>p,.advice-listening,.context-items p { word-break: auto-phrase; text-wrap: pretty; }
/* The start card: the title block, the three buttons at a fixed height on PC (96px to 150px, so they never stretch
   into blank bands) and 「URL を入力して参加」 at the right below them. */
.start-area { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--divider); border-radius: 18px; background: var(--card); }
.title-block { flex: none; padding-bottom: 16px; }
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.title-row>.eyebrow { color: var(--label); }
.title-date { flex: none; color: var(--label); font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.title-field { position: relative; }
.title-field>svg { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: var(--label); pointer-events: none; }
#home-meeting-title { height: 56px; min-height: 56px; padding: 0 56px 0 46px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--muted); font-size: 20px; font-weight: 500; line-height: 1.4; transition: background .2s, border-color .2s; }
#home-meeting-title:hover { border-color: var(--input-border); }
#home-meeting-title:focus { background: var(--background); }
.title-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); }
.title-error { margin-top: 8px; color: var(--destructive); font-size: 13px; line-height: 1.6; }
.recent-slot:empty { display: none; }
/* Recent titles stay on one line and slide sideways on every screen (Astra P2, 2026-09-30): four long titles never wrap
   into a second row that pushes the buttons down. The row runs to the card's edges (20px, 16px up to 800px), and 6px
   inside it above and below keep the 3px focus ring and its 3px offset from being cut by the scrolling row; the outer
   margins give the same 10px above the chips as before and take the 6px back below. */
.recent-titles { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 4px -20px -6px; padding: 6px 20px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.recent-titles::-webkit-scrollbar { display: none; }
.recent-titles>* { flex: none; }
.recent-label { margin-right: 2px; color: var(--label); }
.title-chip { display: inline-flex; align-items: center; min-width: 44px; max-width: min(240px,100%); height: 44px; padding: 0 16px; border-radius: 22px; background: var(--muted); color: var(--foreground); font-size: 14px; font-weight: 500; line-height: 1.5; }
.title-chip:hover { background: var(--accent); }
.title-chip>span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-buttons { flex: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; height: clamp(96px, 15vh, 150px); }
.start-button { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 72px; padding: 12px 14px 12px 16px; border: 1px solid transparent; border-radius: 14px; background: var(--in-person); color: var(--primary-foreground); box-shadow: var(--shadow-button); text-align: left; line-height: 1.4; }
.start-button>svg { flex: none; }
.start-button-text { display: grid; gap: 2px; min-width: 0; }
.start-button-name { font-size: 17px; font-weight: 600; line-height: 1.35; }
/* A status word never leaves one character on its own line: phrases where supported, otherwise whole words. */
.start-button-note { font-size: 13px; font-weight: 400; line-height: 1.45; opacity: .92; overflow-wrap: anywhere; word-break: keep-all; word-break: auto-phrase; }
.start-button.zoom { background: var(--zoom); }
/* White on the Meet yellow is 1.7:1, so this one button uses navy text (9.19:1). */
.start-button.meet { background: var(--meet); color: var(--foreground); }
.start-button.meet .start-button-note { opacity: .85; }
.start-button:not(:disabled):hover { box-shadow: var(--shadow-button-hover); transform: translateY(-2px); }
.start-button.zoom:not(:disabled):hover { background: var(--zoom-hover); }
.start-button.meet:not(:disabled):hover { background: var(--meet-hover); }
.start-button.in-person:not(:disabled):hover { background: var(--in-person-hover); }
.start-button.is-working:disabled { opacity: 1; cursor: progress; }
/* A start button that cannot be pressed keeps a faint trace of its tool instead of its fill (brief A, resume §1): a light
   face and a line mixed from the tool color, the icon in that color, and the name and status word in a color that
   keeps 4.5:1 on that face (design-tokens.test.mjs). No shadow and no lift; the cursor is not-allowed. The white face
   and plain line here are what a browser without color-mix() keeps, so the tool-colored text never lands on a fill. */
.start-button:disabled:not(.is-working) { opacity: 1; border-color: var(--input-border); background: var(--background); box-shadow: none; }
.start-button.zoom:disabled:not(.is-working) { border-color: color-mix(in srgb, var(--zoom) 30%, #fff); background: color-mix(in srgb, var(--zoom) 9%, #fff); color: var(--zoom-hover); }
.start-button.zoom:disabled:not(.is-working)>svg { color: var(--zoom); }
.start-button.meet:disabled:not(.is-working) { border-color: color-mix(in srgb, var(--meet) 50%, #fff); background: color-mix(in srgb, var(--meet) 16%, #fff); color: var(--foreground); }
.start-button.in-person:disabled:not(.is-working) { border-color: color-mix(in srgb, var(--in-person) 20%, #fff); background: color-mix(in srgb, var(--in-person) 6%, #fff); color: var(--in-person); }
.start-button:disabled:not(.is-working) .start-button-note { opacity: 1; }
.start-spinner { flex: none; width: 22px; height: 22px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: turn 1s linear infinite; }
/* From 601px (PC and tablets such as an iPad held upright) each button is a tile, 96px and taller: the icon over the
   name, centered. Phones keep the icon beside the name until a button reaches 96px (below). */
@media (min-width:601px) {
  .start-button { flex-direction: column; justify-content: center; gap: 8px; padding: 10px 12px; text-align: center; }
  .start-button-text { justify-items: center; }
}
.start-status { flex: none; display: grid; gap: 10px; margin-top: 10px; }
.start-status:empty { display: none; }
.start-status>.button { width: 100%; }
.start-status>.notice { margin: 0; }
.start-extra { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding-top: 12px; }
.start-extra>.button { flex: none; }
.start-note { color: var(--label); font-size: 13px; line-height: 1.7; }
/* The AI mark and AI surfaces: a gradient dot and a 3px top line on white, never a colored panel. */
.ai-mark { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,var(--ai-from),var(--ai-to)); color: #fff; }
.ai-surface,.advice-area { position: relative; overflow: hidden; border: 1px solid var(--divider); border-radius: 16px; background: var(--card); }
.ai-surface::before,.advice-area::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--ai-from),var(--ai-to)); }
/* The AI state in one row: the mark, 「AI の提案」, the badge, and 「見本を見る」 while AI is not connected. From 601px it
   sits unboxed at the right end of the heading row; phones keep it as a one-line card above the navigation. */
.ai-status { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 20px; }
@media (min-width:601px) {
  .home-grid>.ai-status { padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .home-grid>.ai-status::before { content: none; }
}
/* The name never wraps (in the heading row at 801px or in the phone line at 320px), so 見本を見る keeps 12px sides. */
.ai-status>h2 { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; white-space: nowrap; }
.ai-status>.status-badge,.ai-status>.button { flex: none; }
.ai-status>.button { padding-inline: 12px; }
/* 確認待ち N 件 sits at the right end of the heading row, so it costs no height; the 44px target overhangs the row. */
.home-pending-link { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 44px; margin: -8px 0 -8px auto; padding: 0 4px 0 8px; border-radius: 10px; color: var(--foreground); font-size: 14px; font-weight: 500; line-height: 1.5; font-variant-numeric: tabular-nums; }
.home-pending-link:hover { background: var(--muted); }
.home-section { display: flex; flex-direction: column; min-height: 0; }
.home-section .section-label { flex: none; margin-bottom: 12px; }
/* 次の予定: its label and one compact row side by side (the next event, or one line saying why there is none). */
.home-schedule { flex-direction: row; align-items: center; gap: 16px; }
.home-schedule>.section-label { margin: 0; font-size: 15px; }
.home-schedule>.schedule-list,.home-schedule>.home-schedule-note { flex: 1 1 0; min-width: 0; }
.home-schedule .schedule-item { gap: 12px; padding: 6px 8px 6px 16px; }
.home-schedule .schedule-main { flex-wrap: nowrap; gap: 12px; min-height: 44px; padding: 0; }
.home-schedule .schedule-time { flex: none; font-size: 13px; }
.home-schedule .schedule-info { display: flex; align-items: center; gap: 8px; }
.home-schedule .schedule-info>strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-schedule .schedule-info>.status-badge { flex: none; margin-top: 0; }
.home-schedule-note { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; border: 1px solid var(--divider); border-radius: 16px; background: var(--card); }
.home-schedule-note>p { flex: 1; min-width: 0; color: var(--label); font-size: 14px; line-height: 1.5; }
.home-schedule-note>.button { flex: none; }
/* 最近の会議記録 takes the rest of the height and scrolls inside; with no records a quiet empty state (a dashed frame,
   the icon and one line) fills the same area. */
.home-recent { min-height: 116px; }
.home-recent>.meeting-list { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.home-recent>.panel-empty { flex: 1 1 0; min-height: 0; border-style: dashed; border-color: var(--input); background: transparent; }
.panel-empty { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 160px; padding: 24px 20px; border: 1px solid var(--divider); border-radius: 16px; background: var(--card); text-align: center; }
.panel-empty>svg { margin-bottom: 4px; color: var(--label); }
.panel-empty-title { font-size: 15px; font-weight: 500; line-height: 1.5; }
.panel-empty>p:not(.panel-empty-title) { color: var(--label); font-size: 13px; line-height: 1.7; }
.panel-empty>.button { margin-top: 10px; }
.panel-card { padding: 20px; border: 1px solid var(--divider); border-radius: 13px; background: var(--card); }
.panel-card p { color: var(--label); font-size: 14px; }
.panel-card .button { width: 100%; margin-top: 16px; }
.panel-card>.button:first-child { margin-top: 0; }
.meeting-list,.schedule-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--divider); border-radius: 16px; }
.meeting-list>li+li,.schedule-list>li+li { border-top: 1px solid var(--border); }
.meeting-row { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 18px 20px; border-radius: 12px; }
.meeting-row:hover { background: var(--muted); }
.meeting-info { flex: 1; min-width: 0; }
.meeting-info>strong { display: block; font-size: 16px; font-weight: 500; line-height: 1.5; }
.meeting-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: 13px; color: var(--label); }
.row-chevron { color: var(--label); flex: none; }
.status-badge,.small-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; background: var(--muted); color: var(--label); font-size: 12px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.status-badge.primary { background: var(--accent); color: var(--accent-foreground); }
.status-badge.success { background: var(--success-soft); color: var(--success); }
.status-badge.warning { background: var(--chosen); color: var(--chosen-foreground); }
.status-badge.error { background: var(--error); color: var(--destructive); }
.tabs { display: flex; gap: 3px; background: var(--muted); padding: 3px; border-radius: 12px; }
.tabs>button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--label); font-size: 14px; font-weight: 500; line-height: 1.5; }
.tabs>button[aria-selected="true"],.tabs>button[aria-pressed="true"] { background: var(--background); color: var(--primary); box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a; }
.list-tab>span { display: inline; }
.list-tools { display: flex; align-items: center; gap: 16px; margin: 24px 0 20px; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field>svg { position: absolute; top: 13px; left: 12px; color: var(--label); pointer-events: none; }
.search-field input[type="search"] { padding-left: 40px; }
.filter-options { display: flex; flex: none; gap: 6px; }
.filter-choice { position: relative; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 22px; background: var(--background); }
.filter-choice:has(input:checked) { background: var(--selected); border-color: var(--selected-border); color: var(--accent-foreground); }
.filter-choice input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.filter-choice:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: inset 0 0 0 1px var(--primary); }
.meeting-section { margin-top: 24px; }
.empty-state { padding: 46px 20px; text-align: center; border: 1px dashed var(--input); border-radius: 16px; }
.empty-state>svg { width: 32px; height: 32px; margin-bottom: 15px; color: var(--label); }
.empty-state h2,.empty-state h3 { font-size: 17px; font-weight: 500; margin-bottom: 9px; }
.empty-state p { font-size: 13px; line-height: 1.9; color: var(--label); }
.empty-state .button { margin-top: 20px; }
.schedule-item { display: flex; align-items: center; gap: 14px; padding: 4px 18px; }
.schedule-item.highlight { background: var(--chosen); border-radius: 12px; }
.schedule-main { display: flex; align-items: center; flex: 1; min-width: 0; gap: 17px; padding: 14px 0; min-height: 72px; }
.schedule-time { flex: none; color: var(--label); font-size: 14px; font-variant-numeric: tabular-nums; }
.schedule-info { min-width: 0; flex: 1; border-left: 2px solid var(--selected-border); padding-left: 13px; }
.schedule-info>strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; }
.schedule-info .status-badge { margin-top: 6px; }
.schedule-no-url { font-size: 12px; color: var(--label); }
.schedule-day+.schedule-day { margin-top: 24px; }
.schedule-detail { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.schedule-detail p { margin-bottom: 16px; }
.schedule-detail .button { margin: 8px 8px 0 0; }
.settings-content { max-width: 800px; }
.settings-section { margin-bottom: 24px; }
.settings-section>h2 { margin: 0 0 10px 4px; color: var(--label); font-size: 14px; font-weight: 500; }
.settings-list { border: 1px solid var(--divider); border-radius: 16px; background: var(--card); }
.settings-list>*+* { border-top: 1px solid var(--border); }
.setting-row,.settings-list>details>summary { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 14px 20px; color: var(--foreground); font-size: 14px; line-height: 1.5; }
.setting-label { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.setting-label>svg { color: var(--label); }
.setting-value { margin-left: auto; min-width: 0; max-width: 62%; color: var(--label); text-align: right; overflow-wrap: anywhere; font-size: 14px; }
.setting-value .status-badge { white-space: normal; text-align: right; }
.settings-list>details>.details-body { border-top: 1px solid var(--border); padding: 16px 20px 20px; }
.settings-list>details[open]>summary { background: var(--muted); border-radius: 12px 12px 0 0; }
.settings-list summary .row-chevron { margin-left: auto; }
.settings-list>details[open]>summary .row-chevron { transform: rotate(90deg); }
.setting-row select { max-width: 62%; overflow: hidden; }
.settings-list .details-body p { margin-bottom: 12px; font-size: 14px; }
.setting-account { margin-top: 8px; color: var(--label); font-size: 13px; }
.logout-button { width: 100%; margin-top: 8px; }
.settings-note { font-size: 13px; color: var(--label); margin-bottom: 12px; }
.notice { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; padding: 13px; border-radius: 9px; background: var(--accent); color: var(--accent-foreground); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.notice.warning { background: var(--chosen); color: var(--chosen-foreground); }
.notice.error { background: var(--error); color: var(--foreground); }
.notice.success { background: var(--muted); color: var(--success); }
.notice .icon-button { margin-left: auto; }
.form-footnote,.quiet { color: var(--label); font-size: 13px; line-height: 1.8; }
.form-footnote { margin: 12px 0; }
.form-footnote .inline-button { text-align: left; margin-top: 8px; }
details { min-width: 0; }
summary { display: flex; align-items: center; min-height: 44px; padding: 12px 16px; gap: 10px; list-style: none; cursor: pointer; color: var(--primary); font-size: 14px; font-weight: 500; line-height: 1.5; }
summary::-webkit-details-marker { display: none; }
summary>.row-chevron { margin-left: auto; }
details[open]>summary>.row-chevron { transform: rotate(90deg); }
.details-body { padding: 0 20px 20px; }
.details-body p+p { margin-top: 12px; }
.details-body .button { margin-top: 12px; }
.data-policy,.context-summary,.context-record,.audio-recovery { border: 1px solid var(--border); border-radius: 13px; background: var(--card); margin-top: 16px; }
.data-policy>p { font-size: 14px; padding: 0 16px 16px; }
.back-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--background); color: var(--label); font-size: 14px; margin-bottom: 24px; }
.back-link:hover { background: var(--muted); }
.recording-strip { position: sticky; top: 12px; z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 16px; padding: 14px 24px; border: 1px solid var(--divider); border-radius: 16px; background: var(--card); box-shadow: 0 6px 18px #2544660f; }
.strip-break { display: none; }
.recording-indicator { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 10px; border-radius: 16px; background: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.5; }
.recording-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--label); }
.recording-dot.active { background: var(--destructive); animation: recording-pulse 2.4s ease-in-out infinite; }
@keyframes recording-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.elapsed-time { font-size: 32px; font-weight: 400; letter-spacing: -1.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
/* The save status sits at the right end, just left of 録音を終了 (it no longer floats between two automatic margins).
   Its two parts (保存: … まで / · 送信待ち N 件) wrap as whole parts; keep-all keeps a word such as 送信待ち in one piece. */
.save-status { display: inline-flex; flex-wrap: wrap; column-gap: .3em; color: var(--label); font-size: 13px; word-break: keep-all; margin-left: auto; }
.preview-close { margin-left: auto; }
.capture-source-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
.capture-source-status>strong { font-size: 13px; font-weight: 500; }
.capture-source-status>label { display: flex; align-items: center; gap: 7px; font-size: 13px; }
/* One meter needs no name next to the source words (マイクのみ); the meter keeps its name for screen readers. */
.capture-source-status>label:only-of-type .level-name { display: none; }
meter { width: 70px; height: 12px; }
/* PC: the strip is one 79px row — state, time, source and level on the left; save status and 録音を終了 on the right.
   Only the source and the save status give way on a narrow screen, by wrapping inside themselves, so the row holds.
   "not (max-width:800px)" is the exact complement of the phone rules, so no fractional width falls between them. */
@media not all and (max-width:800px) {
  .recording-strip { flex-wrap: nowrap; min-height: 79px; }
  .recording-indicator,.elapsed-time,.finish-button,.preview-close { flex: none; }
  .capture-source-status,.save-status { flex: 0 1 auto; min-width: 0; }
  .save-status { justify-content: flex-end; text-align: right; }
}
/* Meeting screen (live and preview) fits the screen (2026-09-29): the page never scrolls, each pane scrolls inside.
   PC: strip → title → notices → the advice card (left, 1.62fr) and the tabbed side (right, 1fr) take the remaining height. */
.content-wrap.meeting { display: flex; flex-direction: column; height: 100%; padding-top: 24px; padding-bottom: 24px; }
.content-wrap.meeting>* { flex-shrink: 0; min-width: 0; }
.live-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.live-head>.back-link { flex: none; margin: 0; }
.live-title { flex: 1; min-width: 0; font-size: 24px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Many warnings at once shrink this list first (it then scrolls, keeping at least one line in view) so the panes keep
   their minimum height: 270px on PC leaves about three lines of advice text between the card's heading and its button. */
.content-wrap.meeting>.live-notices { flex: 0 1 auto; min-height: 44px; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 8px; margin-bottom: 16px; }
.live-notices:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 9px; }
.live-notices>.notice,.live-notices>.fixture-strip { margin: 0; }
.live-extra { display: grid; justify-items: start; gap: 12px; }
.content-wrap.meeting>.live-grid { flex: 1 1 0; min-height: 270px; display: grid; grid-template-columns: minmax(0,1.62fr) minmax(300px,1fr); grid-template-rows: minmax(0,1fr); column-gap: 32px; }
.live-grid>* { min-width: 0; min-height: 0; }
.advice-area { display: flex; flex-direction: column; padding: 22px 28px 28px; }
.advice-area.collapsed { align-self: start; }
.live-side { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--divider); border-radius: 16px; background: var(--card); }
.live-side>.live-tabs { flex: none; margin: 12px 12px 0; }
/* PC tab labels break only at the <wbr> between phrases when the side column is narrow. */
.live-tabs>button { padding-inline: 8px; word-break: keep-all; }
.tab-new { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--ai-from); vertical-align: middle; }
.live-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 20px; }
/* Each scrolling pane contains its absolutely placed screen-reader text (the 件 after each count), which would otherwise
   escape the pane and lengthen the whole document. */
.live-panel,.advice-card,.live-notices { position: relative; }
.live-panel:focus-visible,.advice-area[role="tabpanel"]:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.live-transcript p+p { margin-top: 12px; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { padding: 12px 0; border-top: 1px solid var(--border); }
.history-list li:first-child { padding-top: 0; border-top: 0; }
.history-list li>span { display: block; color: var(--label); font-size: 13px; }
.advice-top { display: flex; flex: none; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 18px; }
/* The heading keeps one line; when the row is too narrow the next item wraps instead of the heading folding letter by letter. */
.advice-top>h2 { flex: 1 1 auto; font-size: 17px; white-space: nowrap; }
.advice-age { color: var(--label); font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
/* The card body scrolls inside the card. The 6px/8px inset keeps focus rings inside the scroll box without moving the text. */
.advice-card { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -6px -8px 0; padding: 6px 8px 8px; }
.advice-card h3 { margin: 0 0 10px; font-size: 24px; font-weight: 600; line-height: 1.5; }
.advice-card>.status-badge { margin-bottom: 10px; }
.advice-card>p:not(.quiet):not(.status-badge) { font-size: 16px; line-height: 1.8; }
.advice-card.advice-enter { animation: advice-enter .2s ease-out; }
@keyframes advice-enter { from { opacity: 0; } to { opacity: 1; } }
.advice-listening { display: flex; align-items: center; gap: 12px; min-height: 64px; color: var(--label); }
.listening-dots { display: inline-flex; gap: 6px; }
.listening-dots>i { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-from); opacity: .25; animation: listening 1.4s ease-in-out infinite; }
.listening-dots>i:nth-child(2) { animation-delay: .2s; }
.listening-dots>i:nth-child(3) { animation-delay: .4s; }
@keyframes listening { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }
.evidence { margin-top: 16px; }
.evidence>summary { padding-left: 0; }
blockquote { margin: 12px 0; padding: 8px 16px; border-left: 2px solid var(--selected-border); color: var(--label); font-size: 14px; }
.evidence blockquote { margin: 8px 0 0; padding: 12px 16px; border-left: 3px solid var(--ai-from); border-radius: 0 10px 10px 0; background: var(--ai-soft); color: var(--foreground); font-size: 15px; line-height: 1.8; }
.evidence-time { display: inline-block; margin-right: 10px; padding: 1px 7px; border-radius: 6px; background: var(--background); color: var(--label); font-size: 12px; font-weight: 500; line-height: 1.6; font-variant-numeric: tabular-nums; }
/* Pinned to the card's foot; 12px here plus the card's 8px inner foot keeps the former 20px gap. */
.next-advice { flex: none; align-self: flex-start; margin-top: 12px; }
.summary-text { flex: 1; min-width: 0; }
.context-items h3 { display: flex; align-items: center; gap: 8px; }
/* The state tag sits beside its sentence so the summary scans as one column of statements. */
.context-items li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 2px 10px; }
.context-items li>.small-tag { grid-row: span 2; justify-content: center; min-width: 52px; margin-top: 2px; }
.context-items li>p { margin: 0; }
.context-items li>small { grid-column: 2; }
.count-tag { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--muted); color: var(--label); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.preview-end { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; min-height: 64px; color: var(--label); }
.next-advice.has-pending { background: var(--chosen); color: var(--chosen-foreground); border-color: var(--chosen-border); }
.advice-area.collapsed .advice-card,.advice-area.collapsed .next-advice { display: none; }
.context-items+.context-items { margin-top: 20px; }
.context-items h3 { font-size: 16px; }
.context-items ul,.audio-recovery ul,.local-audio-group ul { list-style: none; padding: 0; margin: 12px 0 0; }
.context-items li { padding: 12px 0; border-top: 1px solid var(--border); }
.context-items small { display: block; color: var(--label); font-size: 13px; }
.record-heading .page-heading { align-items: flex-start; }
.record-actions,.edit-actions,.fixture-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.record-actions>.primary { margin-left: auto; }
.shared-actions { margin-top: 20px; }
.record-tabs { margin-bottom: 20px; }
.minutes-document,.record-pane { padding: 24px; background: var(--card); border: 1px solid var(--divider); border-radius: 16px; }
.minutes-rendered { font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.minutes-rendered h1,.minutes-rendered h2,.minutes-rendered h3 { font-size: 19px; font-weight: 500; letter-spacing: 0; margin: 28px 0 12px; }
.minutes-rendered>:first-child { margin-top: 0; }
.minutes-rendered p { margin: 0 0 16px; }
.minutes-rendered ul,.minutes-rendered ol { padding-left: 24px; margin: 0 0 20px; }
.minutes-rendered pre,.minutes-rendered code { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.minutes-editor { min-height: 380px; line-height: 1.85; }
.editor-label { margin-bottom: 10px; }
.editor-status { font-size: 13px; color: var(--label); margin: 10px 0 16px; }
.edit-actions { justify-content: flex-end; margin: 0; }
.processing-state { padding: 30px; border: 1px dashed var(--input); border-radius: 16px; }
.processing-state h2 { font-size: 17px; margin-bottom: 20px; }
.delete-button { margin-top: 24px; }
.audio-recovery li,.local-audio-group li { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); padding: 12px 0; font-size: 14px; }
.local-audio-group { border: 1px solid var(--border); background: var(--card); padding: 24px; border-radius: 16px; margin-bottom: 20px; }
.local-audio-group>p { margin-top: 6px; color: var(--label); font-size: 13px; }
.development-panel,.fixture-strip { border: 1px dashed var(--input); border-radius: 13px; padding: 20px; margin-top: 32px; }
.development-panel h2,.fixture-strip>strong { font-size: 14px; color: var(--label); font-weight: 500; margin-bottom: 12px; }
.development-panel .fixture-actions { margin-bottom: 0; }
.development-ribbon { color: var(--label); font-size: 12px; margin-bottom: 16px; }
.fixture-strip .button { margin: 8px 0; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: #00000080; display: flex; align-items: center; justify-content: center; padding: 16px; overscroll-behavior: contain; }
.dialog { width: 100%; max-width: 512px; max-height: calc(100dvh - 32px); min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 30px; border: 1px solid var(--border); border-radius: 20px; background: var(--background); box-shadow: var(--shadow-dialog); }
.dialog-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.dialog-heading h2 { flex: 1; font-size: 24px; font-weight: 500; line-height: 1.4; }
.dialog-heading .icon-button { margin: -8px -12px 0 0; }
.dialog-copy { color: var(--label); font-size: 14px; line-height: 1.8; margin: 18px 0; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dialog-actions>.button { flex: 1; }
.dialog .notice { margin: 16px 0; }
.dialog .share-controls details { margin-top: 16px; }
.dialog .share-controls details p { font-size: 14px; margin: 0 16px 16px; }
.schedule-form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; margin: 16px 0; }
.schedule-form-grid>div { min-width: 0; }
.schedule-form-grid>div:first-child { grid-column: 1 / -1; }
.schedule-form-grid label { margin-bottom: 7px; }
.schedule-attendees { margin-top: 20px; }
.schedule-attendees>label { margin: 14px 0 7px; }
.schedule-member-list { max-height: 180px; overflow-y: auto; overscroll-behavior: contain; margin-top: 8px; }
.schedule-member-list label { display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; gap: 8px; padding: 8px 0; color: var(--foreground); }
.schedule-member-list small { color: var(--label); font-size: 12px; overflow-wrap: anywhere; }
.calendar-fallback-url { width: 100%; overflow-wrap: anywhere; }
.paste-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-foreground); font-size: 15px; font-weight: 500; line-height: 1.5; }
.paste-button:hover { box-shadow: inset 0 0 0 1px var(--selected-border); }
.dialog .join-paste-message { margin: 12px 0 0; }
.join-note { color: var(--chosen-foreground); font-size: 13px; line-height: 1.7; }
.join-dialog form>label { margin-top: 20px; }
.join-detect { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 10px; font-size: 14px; line-height: 1.5; }
.join-detect:empty { display: none; }
.join-detect>svg { color: var(--success); }
.join-detect-kind { flex: none; color: var(--foreground); font-weight: 500; }
.join-detect-place { min-width: 0; overflow: hidden; color: var(--label); text-overflow: ellipsis; white-space: nowrap; }
.toast { position: fixed; z-index: 80; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 20px; min-height: 48px; border-radius: 10px; background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-float); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
/* Access pages (login, Slack link, auth error) sit outside .app-shell, so they scroll inside themselves. */
.access-page { height: 100%; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; display: grid; place-items: center; padding: 24px; background: var(--page); }
.access-card { width: min(100%,420px); text-align: center; }
.access-card .brand-word { font-size: 40px; }
.access-wordmark { font-size: 14px; letter-spacing: .35em; margin: 8px 0 32px; }
.access-card h1 { font-size: 25px; font-weight: 500; letter-spacing: .02em; margin-bottom: 18px; }
.access-card>p:not(.access-wordmark) { font-size: 16px; line-height: 1.8; color: var(--label); margin-bottom: 26px; }
.access-card .button { width: 100%; }
.access-card form { margin: 24px 0; }
.access-card small,.access-card>p.access-note { display: block; font-size: 13px; color: var(--label); line-height: 1.8; margin-top: 24px; }
.access-card .notice { text-align: left; }
.development-login { text-align: left; }
.development-login .button { margin-top: 16px; }
.access-card .reference { font-size: 13px; }
@media (min-width:1550px) { .content-wrap { padding-top: 40px; } }
@media (max-width:1050px) {
  .topbar { padding-inline: 21px; gap: 16px; } .brand { gap: 12px; } .app-nav a { padding-inline: 10px; } .app-nav svg { display: none; } .account-name { display: none; } .content-wrap { padding-inline: 24px; }
  /* Below 1051px the home screen reads in one column (start card first). The meeting screen keeps its two columns down to 801px. */
  .home-grid { grid-template-columns: minmax(0,1fr); max-width: 760px; margin-inline: auto; gap: 24px; }
}
@media (max-width:800px) {
  .topbar { height: calc(48px + env(safe-area-inset-top,0px)); padding: env(safe-area-inset-top,0px) max(18px,env(safe-area-inset-right,0px)) 0 max(18px,env(safe-area-inset-left,0px)); gap: 12px; }
  .brand { gap: 12px; }
  .brand-word { font-size: 21px; }
  .brand-product { font-size: 16px; }
  .brand-divider { height: 17px; }
  .account { margin-left: auto; }
  .avatar { width: 28px; height: 28px; font-size: 12px; }
  .user-menu>summary>.row-chevron { display: none; }
  /* Up to 800px the bar is 48px plus the safe area and the navigation is fixed at the bottom: the menu starts 54px down
     and stops 8px above the navigation. */
  .user-menu-items { max-height: calc(100vh - 118px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); max-height: calc(100dvh - 118px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); }
  .app-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-bottom,0px)); padding: 0 max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px)); border-top: 1px solid var(--border); background: var(--background); gap: 0; }
  .app-nav a { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; min-height: 55px; padding: 7px 2px 5px; border-radius: 0; color: var(--label); font-size: 12px; font-weight: 400; line-height: 1.4; }
  .app-nav svg { display: block; }
  .app-nav a[aria-selected="true"] { color: var(--primary); background: var(--background); font-weight: 600; }
  .app-nav a[aria-selected="true"] svg { stroke-width: 2.5; }
  #main { margin-bottom: calc(56px + env(safe-area-inset-bottom,0px)); }
  .content-wrap { padding: 24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px)); }
  h1 { font-size: 25px; }
  h2 { font-size: 17px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .page-heading>.button { width: 100%; }
  /* Home up to 800px (the 48px top bar and the 56px navigation): the heading keeps its row, the title field is 52px and
     the card padding is 16px. From 601px the home keeps the PC one-column arrangement; the phone arrangement is in the
     600px block below. */
  .home-grid .home-heading { flex-direction: row; align-items: center; gap: 12px; }
  .start-area { padding: 16px; }
  .start-status { margin-top: 12px; }
  #home-meeting-title { height: 52px; min-height: 52px; font-size: 18px; }
  /* The recent titles row runs to the edges of the 16px card padding here. */
  .recent-titles { margin-inline: -16px; padding-inline: 16px; }
  .title-block { padding-bottom: 12px; }
  .button.primary { min-height: 44px; }
  .list-tools { flex-wrap: wrap; gap: 12px; margin-top: 20px; }
  .search-field { flex-basis: 100%; }
  .filter-options { width: 100%; }
  .tabs>button { padding-inline: 6px; }
  .meeting-row { padding: 16px; gap: 12px; }
  .meeting-info>strong { font-size: 16px; }
  .schedule-item { padding-inline: 14px; gap: 8px; flex-wrap: wrap; }
  .schedule-main { gap: 10px; }
  .schedule-time { font-size: 13px; }
  .schedule-item>.button { padding-inline: 12px; }
  .schedule-info { padding-left: 10px; }
  .setting-row,.settings-list>details>summary { padding: 14px 16px; gap: 8px; }
  .setting-label { gap: 8px; }
  .setting-value { max-width: 60%; }
  .settings-list>details>.details-body { padding: 16px; }
  .settings-list .details-body .button { width: 100%; }
  .back-link { margin-bottom: 20px; }
  /* Meeting screen on phones: no bottom navigation (moving away is blocked while recording anyway), the strip in two lines
     (state, time and level / save status and the finish button), one tab bar, and only the chosen pane below it. */
  .app-shell:has(.content-wrap.meeting) .app-nav { display: none; }
  .app-shell:has(.content-wrap.meeting) #main { margin-bottom: 0; }
  .content-wrap.meeting { padding-top: 12px; padding-bottom: max(12px,env(safe-area-inset-bottom,0px)); }
  .recording-strip { position: static; margin-bottom: 8px; padding: 10px 12px; gap: 4px 10px; box-shadow: none; }
  .elapsed-time { font-size: 27px; line-height: 1.2; }
  .capture-source-status { margin-left: auto; gap: 8px; }
  .capture-source-status>strong { display: none; }
  .capture-source-status meter { width: 56px; }
  .strip-break { display: block; flex-basis: 100%; height: 0; }
  .save-status { flex: 1 1 0; min-width: 0; margin: 0; }
  .finish-button,.preview-close { flex: none; margin-left: auto; }
  .live-head { gap: 8px; margin-bottom: 8px; }
  .live-head>.back-link { width: 44px; padding: 0; }
  .live-head .back-link-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .live-title { font-size: 20px; }
  .content-wrap.meeting>.live-notices { margin-bottom: 8px; }
  .live-notices>.notice { padding: 10px 12px; line-height: 1.6; }
  .content-wrap.meeting>.live-tabs { margin-bottom: 8px; }
  /* 216px leaves a phone's advice text two lines or more between the card's heading and its button. */
  .content-wrap.meeting>.live-grid { grid-template-columns: minmax(0,1fr); min-height: 216px; }
  .live-grid>.live-panel { border: 1px solid var(--divider); border-radius: 16px; background: var(--card); }
  .advice-area { padding: 16px; }
  .advice-top { margin-bottom: 12px; }
  .advice-card h3 { font-size: 20px; }
  .minutes-document,.record-pane,.local-audio-group { padding: 20px; }
  .record-actions>.button { flex: 1 1 auto; }
  .record-actions>.primary { flex-basis: 100%; margin-left: 0; }
  .audio-recovery li,.local-audio-group li { align-items: flex-start; flex-direction: column; }
  .audio-recovery li>.button,.local-audio-group li>.button { width: 100%; }
  .dialog-backdrop { padding: 0; align-items: flex-end; }
  .dialog { max-width: none; max-height: calc(100dvh - env(safe-area-inset-top,0px) - 12px); padding: 20px max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px)); border-radius: 20px 20px 0 0; }
  .dialog-heading h2 { font-size: 20px; }
  .schedule-dialog { height: 100dvh; max-height: 100dvh; padding-top: calc(20px + env(safe-area-inset-top,0px)); border-radius: 0; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom,0px)); }
  .development-panel { margin-top: 24px; }
  .access-page { padding: max(24px,env(safe-area-inset-top,0px)) 24px max(24px,env(safe-area-inset-bottom,0px)); }
  .access-page#main { margin: 0; }
}
/* Phone home (600px and below; brief A §3, resume §2 and resume 2 §1): exactly between the 48px top bar and the 56px
   navigation, without moving. The heading (確認待ち N 件 at its right end when there is one), the start card and a
   one-line AI state; the records live under 会議記録. */
@media (max-width:600px) {
  .content-wrap.home { height: max(100%, 460px); padding-block: 12px; }
  /* The start row never shrinks below its parts: on a lower screen #main scrolls instead of overlapping. */
  .content-wrap.home>.home-grid,.content-wrap.home>.home-grid.with-schedule { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(min-content,1fr) auto; grid-template-areas: "heading" "start" "ai"; gap: 10px; min-height: auto; }
  .home-grid>.home-schedule,.home-grid>.home-recent { display: none; }
  .home-heading h1 { font-size: 22px; line-height: 1.3; }
  /* The three buttons take all the spare height themselves (56px to 200px each), so a tall phone such as 430×932 keeps
     8px between them; only past 200px would the room go between them. A button 96px or taller shows its icon over the
     name, centered, as from 601px (the three rows then take 304px or more). */
  .start-buttons { flex: 1 1 0; height: auto; min-height: 184px; grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(3,minmax(56px,200px)); align-content: space-between; gap: 8px; container-type: size; }
  .start-button { min-height: 56px; padding-block: 9px; }
  @container (min-height:304px) {
    .start-button { flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
    .start-button-text { justify-items: center; }
  }
  .start-extra { flex-direction: column; align-items: stretch; gap: 12px; }
  .start-extra>.button { width: 100%; }
  /* 会議名を入力してください takes the label row, over the date, instead of a line of its own: the alert never pushes
     the buttons down, so an empty title does not move the home on a short phone (Astra P3, 2026-09-30). */
  .title-block { position: relative; }
  .title-error { position: absolute; top: 0; right: 0; margin: 0; padding-left: 8px; background: var(--card); line-height: 20px; }
  /* One line even at 320px: 見本を見る gives up a little more of its side padding. */
  .ai-status { gap: 8px; min-height: 54px; padding: 5px 12px; }
  .ai-status>.button { padding-inline: 10px; }
}
/* A phone (600px wide or less) lower than 660px (320×568, 360×640, an iPhone SE added to the home screen, or Safari
   with its bars): the recent titles give their row to the start buttons so the home still fits (the full phone
   arrangement with recent titles needs about 651px); the titles return on a taller screen. */
@media (max-width:600px) and (max-height:660px) {
  .recent-slot { display: none; }
  .content-wrap.home { padding-block: 8px; }
  .content-wrap.home>.home-grid,.content-wrap.home>.home-grid.with-schedule { gap: 8px; }
  .start-area { padding: 12px; }
  #home-meeting-title { height: 48px; min-height: 48px; }
  .title-block { padding-bottom: 8px; }
  .start-extra { padding-top: 8px; }
  .ai-status { min-height: 48px; padding-block: 2px; }
}
@media (max-width:360px) { .list-tab>span { display: block; } }
/* Below 360px the advice heading row cannot hold the arrival time next to 提案を畳む; the card keeps its title and body. */
@media (max-width:359px) { .advice-age { display: none; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .start-button:not(:disabled):hover { transform: none; }
  .listening-dots>i { opacity: .6; }
}