/* Phone UI, built to Even Realities' companion-app design system.
 *
 * The values here are theirs, not invented: BC/TC colour names, the 15/13/11 type
 * scale, 12px screen margin, 16px card padding, 6px radius, 24px between cards of
 * different subjects. An app that looks nothing like the rest of Even Hub is a worse
 * app even when every screen works.
 *
 * The one deliberate departure is the HUD preview, which stays green on black: that
 * block is a picture of the glasses, not part of the phone's chrome.
 *
 * Every colour is a token. Hard-coded values were the bug that made typed text
 * invisible: the text colour followed the colour scheme while the field background
 * stayed light. */
:root {
  /* BC — background */
  --bg: #eeeeee; /* BC-3rd, the main background */
  --panel: #ffffff; /* BC-1st */
  --surface: #f6f6f6; /* BC-2nd, insets inside a card */
  --line: #e4e4e4; /* BC-4th */
  --accent-bg: #fef99a; /* BC-Accent */

  /* TC — text */
  --text: #232323; /* TC-1st */
  --muted: #787878; /* TC-2nd */
  --accent: #4bb565; /* TC-Green */
  --danger: #ff5454; /* TC-Red */
  --on-dark: #ffffff; /* TC-Highlight */

  /* Their form fields are a filled grey block with no border, on a white card. The
   * border only appears in the error state, in red. */
  --field-bg: #f6f6f6;
  --field-text: #232323;
  --field-line: transparent;
  --field-placeholder: #a0a0a0;

  --primary-bg: #232323; /* BC-Highlight, as on their dark button */
  --primary-text: #ffffff;
  --button-bg: #ffffff;
  --danger-line: #ffc9c9;
  --warn: #8a6d00; /* readable text weight of BC-Accent */

  /* Layout. Cards on this screen are all different subjects, so 24px. */
  --card-gap: 24px;
  --card-padding: 16px;
  --radius: 6px;
  --screen-margin: 12px;
}

/* Their system is light. This keeps a dark phone from getting a sheet of white, using
 * BC-Highlight as the ground and TC-Highlight as the ink. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --panel: #232323;
    --surface: #2e2e2e;
    --line: #383838;
    --text: #ffffff;
    --muted: #a8a8a8;
    --primary-bg: #ffffff;
    --primary-text: #232323;
    --button-bg: #2e2e2e;
    --danger-line: #5c2b2b;
    --warn: #fef99a;
    --field-bg: #2e2e2e;
    --field-text: #ffffff;
    --field-placeholder: #8a8a8a;
  }
}

* {
  box-sizing: border-box;
}

/* The type scale is theirs: 24 / 20 / 17 / 15 / 13 / 11, regular 400 and light 300,
 * with the tracking tightened on the large sizes. FK is Even's own face and cannot be
 * shipped from here, so the system face stands in at the same metrics. */
/* The page never scrolls sideways.
 *
 * Every block here is already allowed to be narrower than its contents, and the two that
 * can genuinely need more room — the HUD preview and wide tables — scroll inside
 * themselves. So anything that still pushes past the right edge is a bug, and letting the
 * whole page slide to follow it makes the app feel broken: the header walks off, and
 * nothing on screen explains why. Clipped here, named in the `幅` diagnostic.
 *
 * On `html`, and only there. Three arrangements have been tried on the device:
 * `overflow-x: hidden` on both made `body` a scroll container, and on iOS a body that
 * scrolls itself cannot reach its own bottom — the page could be dragged down far enough to
 * see the last card and sprang back about five lines when the finger let go. Moving to
 * `overflow-x: clip` on `body` alone let the sideways drift return, whatever that WebView
 * does with a propagated `clip`. `html` is the viewport's scroller either way: clipping the
 * horizontal axis there is the ordinary arrangement, and it leaves the vertical one alone. */
html {
  overflow-x: hidden;
}

html,
body {
  max-width: 100%;
}

body {
  margin: 0;
  /* Room at the bottom, and after a keyboard has been shown, a great deal of it: this host
     stops scrolling 370 physical pixels short of the document's end and never gives that
     back, so anything in those last 370px cannot be reached. `bottom.js` sets
     `--bottom-room` — 96px until a field is touched, then the amount 表示診断 measured on
     this device (or an estimate from the viewport). Empty space at the end of a scroll costs
     nothing; a button you cannot reach costs the feature. */
  padding: 16px var(--screen-margin)
    calc(var(--bottom-room, 96px) + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.6;
}

header {
  margin-bottom: var(--card-gap);
}

h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

/* Card title. 4px to its subtitle, 12px to the block below. */
h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
}

.status {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  /* Diagnostics land here — a bridge error is one long unbreakable word, and left to
     itself it widens the whole page and pushes the cards off the right edge. */
  overflow-wrap: anywhere;
}

/* A version mismatch between the phone and the server: worth the accent colour, because
 * every other failure it causes reads as an unrelated bug. */
.warn-line {
  color: var(--warn);
  font-weight: 400;
}

/* The paste box holds a 文字起こし: hundreds of lines, one short turn each. The page's 1.6
 * line-height is for prose, and at 16px it put 25.6px between 「これが嫌だとかさ。」 and the
 * next turn — the space between the lines was taller than the lines. The conversation reads
 * as a conversation at 1.45, and four more turns fit in the box. */
#transcriptText,
.raw-note-edit {
  line-height: 1.45;
}

/* The tidy-up row: four small buttons that should read as one control, not as four
 * decisions. Tight together, and wrapping rather than stretching. */
.cleanup {
  /* The same gap as any other row of controls. It was 6px to fit four small buttons on one
     line; there are five now, they wrap either way, and a cramped row of large buttons is
     harder to hit than a wrapped one. */
  gap: 8px;
  margin-bottom: 8px;
}

.cleanup button {
  flex: 0 0 auto;
}

.hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* 24px between cards: each one here is a different subject (their rule is 12px for
 * cards of the same subject, 24px for different ones).
 *
 * Both selectors are needed: `#signedIn` is a single grid item of `main`, so without
 * its own gap the cards inside it sit flush against each other. */
main,
#signedIn {
  display: grid;
  gap: var(--card-gap);
}

main {
  max-width: 640px;
  margin: 0 auto;
}

/* Grid items refuse to shrink below their content by default (`min-width: auto`), so
 * one long unbreakable line — a 96-column HUD row, a URL in a record — stretched the
 * grid, the cards inside it, and with them the whole page. Everything on this screen
 * is allowed to be narrower than its contents; the parts that need more room scroll
 * inside themselves. */
body > *,
header > *,
main > *,
#signedIn > *,
.panel > *,
.row > * {
  min-width: 0;
}

.panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: var(--card-padding);
}

/* The HUD preview mirrors the glasses: monospace, green on black, fixed rows. This is
 * the one block that ignores the phone palette — it is a picture of the display. */
.hud {
  margin: 0;
  padding: 10px 12px;
  min-height: 8.4em;
  background: #000;
  border-radius: var(--radius);
  color: #4bb565;
  font-family: 'SF Mono', 'Menlo', 'Consolas', 'Noto Sans Mono CJK JP', monospace;
  /* Set from the canvas the glasses granted — see `fitHudText`. The fallback is the
     old fixed size, for the moment before the bridge has answered. */
  font-size: var(--hud-font-size, 15px);
  line-height: 1.4;
  /* `pre`, not `pre-wrap`: the glasses do not wrap, so a preview that wraps is showing
     something the wearer will not see. Long lines scroll inside the black box instead,
     which also stops them from widening the page — 96 columns is far more than a phone
     has room for at a legible size. */
  white-space: pre;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* The chosen row, boxed the way the glasses box it: a rounded outline in the display's
 * own green, not a highlight. `mark` is the element with the right meaning, and its
 * default yellow background has no business in a picture of a monochrome lens. */
/* The box around the chosen row of a list.
 *
 * `inline-block`, because a row is two lines and an inline box broken across a line break
 * is drawn as two boxes — which is what the preview showed: a frame around the date and the
 * name, and the summary under it outside. The glasses draw one frame around the row. */
.hud-selected {
  display: inline-block;
  vertical-align: top;
  background: none;
  color: inherit;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 6px;
}

/**
 * `hidden` means hidden, whatever else the element is.
 *
 * The browser's own `[hidden] { display: none }` lives in the UA stylesheet, which **any**
 * author rule outranks — so `.row { display: flex }` below quietly beat it, and every
 * `.row` this app hid in JavaScript stayed on screen. It showed up as a ログアウト button
 * in the demo, where there is nothing to log out of.
 *
 * `!important` because the rules it has to beat are the layout ones, and those are what
 * `display` is for on everything else.
 */
[hidden] {
  display: none !important;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.row:last-child {
  margin-bottom: 0;
}

input[type='text'],
select,
textarea {
  flex: 1 1 140px;
  min-width: 0;
  padding: 9px 10px;
  background: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  font: inherit;
  /* 16px exactly, and not a pixel less.
   *
   * Safari on iOS zooms the whole page when a field with type smaller than 16px takes
   * focus, and it does not zoom back out. The comment here used to say "16px-ish" next to
   * 15px, which is the same thing as 15px. Everything else on this screen stays on Even's
   * 15px scale; a form field is the one place where the platform sets the size. */
  font-size: 16px;
  font-weight: 400;
}

textarea {
  width: 100%;
  resize: vertical;
}

button {
  padding: 9px 14px;
  background: var(--button-bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
}

button:active {
  transform: translateY(1px);
}

input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder);
}

input[type='text']:focus,
/* 取り込みの名前欄と、登録済みから選ぶ控え。どちらも `flex: 1 1 140px` のままだと行を
 * 半分ずつ分け合って、主役であるはずの名前欄が「名前、ニックネー」まで縮みました。
 * 名前が広く、選ぶ側はその横に収まるぶんだけ（合計に gap の 8px ぶんの余りを残します）。 */
#transcriptNewName {
  flex: 1 1 56%;
}

#transcriptPerson {
  flex: 0 1 40%;
  max-width: 40%;
}

select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button.primary {
  background: var(--primary-bg);
  border-color: var(--primary-bg);
  color: var(--primary-text);
}

button.danger {
  color: var(--danger);
  border-color: var(--danger-line);
}

/* Their note: disabled is opacity, not an overlay. */
button:disabled {
  opacity: 0.4;
  cursor: default;
}

button:disabled:active {
  transform: none;
}

.checkbox {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}

.list {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 15px;
}

.list li {
  margin-bottom: 4px;
}

.list .empty {
  list-style: none;
  margin-left: -18px;
  color: var(--muted);
}

/* The words the cleanup buttons remove: a hundred short strings, each with a way to take
   it off the list. A bulleted column of a hundred single words is four screens of mostly
   white space, so they wrap as chips instead — the length of the list is then something
   you can see at a glance, which is the point of showing it. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
}

/* The ✕ is the whole reason a chip is a control, so it is the size of a fingertip rather
   than the size of the glyph. */
.chips button {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

/* Transcript import: speaker mapping and the proposed records. */
.result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.speaker {
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.speaker strong {
  min-width: 5em;
  font-size: 14px;
}

.speaker select {
  flex: 0 0 auto;
  min-width: 6em;
}

.speaker .meta {
  flex: 1 1 100%;
}

.proposal {
  margin-top: 10px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
}

.proposal h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 400;
}

.warnings {
  color: var(--warn);
  font-size: 13px;
}


.checklist {
  list-style: none;
  padding-left: 0;
}

/* A transcript is hundreds of lines — a real one arrived at 407 — so a row is a line of
 * text and nothing more. 3px of padding on top of the page's 1.6 line-height read as
 * double-spaced prose, and made the panel four screens long. */
.checklist li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 0;
  line-height: 1.45;
}

.line-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tally {
  margin-left: auto;
}

/* A TODO shown inside a conversation review. Ticking it off happens in the TODO card. */
.todo {
  color: var(--muted);
}

.todo-body {
  gap: 8px;
  margin-bottom: 0;
}

.todo-body span {
  flex: 1 1 auto;
}

#promises li {
  margin-bottom: 12px;
}

/* Microphone, summary and history. */
.mic {
  flex: 0 0 auto;
}

.mic.listening {
  background: var(--accent-bg);
  border-color: var(--accent-bg);
}

/* Folding sections. The default marker is a hairline triangle that is hard to hit and
 * hard to see, so it is replaced by one drawn at text size. */
summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  color: var(--muted);
  transition: transform 0.12s;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

/* A whole panel that folds: the heading stays legible closed. */
details.panel > summary {
  display: flex;
  gap: 4px;
  align-items: baseline;
  /* The padding is the tap target — a 15px heading on its own is not one. */
  margin: calc(var(--card-padding) * -1);
  padding: var(--card-padding);
  /* Stated, not derived. With `width: auto` the box is whatever the engine makes of a
     flex container with negative margins, and Safari made it about 100px wider than the
     card — enough to push the whole page sideways on a phone. This is the same result
     Chromium computed on its own: the card's content box plus the padding we pulled
     back over. */
  width: calc(100% + var(--card-padding) * 2);
  min-width: 0;
}

details.panel > summary h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

details.panel[open] > summary {
  margin-bottom: 0;
}

details.panel > summary h2 {
  margin: 0;
}

details.panel > summary h2 {
  margin: 0;
}

.meeting {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
}

/* Closed, a conversation is just when and where it happened — that is enough to find
 * the one you mean without reading every record. */
summary.meeting-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 15px;
}

/* Opened, the date is a heading with air under it and no rule: the conversation below is
 * the only thing there, so there is nothing to divide it from. */
details[open] > summary.meeting-head {
  margin-bottom: 8px;
}

.meeting-foot {
  margin: 12px 0 0;
}

/* The verbatim conversation. No panel of its own: a box drawn inside the entry's own box
 * says 「ここからが別のもの」 about the one thing the entry contains. */
.raw-note {
  background: none;
}

/* Editing the whole conversation: a plain field, monospace-free, as tall as the box lets
 * it be. It holds the text as pasted, newlines and all.
 *
 * 16px, like every other field here. It was set to 13px to match the text it replaces, and
 * iOS zoomed the page the moment it took focus — the rule is the field's own size, not the
 * page's, and it does not zoom back out afterwards. */
.raw-note-edit {
  width: 100%;
  min-height: 40vh;
  font-family: inherit;
  font-size: 16px;
}

.editable {
  cursor: pointer;
  border-bottom: 1px dotted var(--muted);
}

.editable.empty {
  font-style: italic;
  opacity: 0.8;
}

/* One level of the 相手 → 要約 → 会話記録 → 会話記録の要約 hierarchy. */
.block {
  margin: 6px 0;
}

.block .caption {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.block textarea {
  margin-bottom: 4px;
}

/* Asking before something irreversible, in the page rather than a native dialog. */
.confirm {
  margin-right: 4px;
  font-size: 13px;
  color: var(--warn);
}

/* Folded instructions. The summary marker is the disclosure triangle the browser draws;
 * the label is a hint, so it stays quiet until it is opened. */
.how {
  margin: 0 0 12px;
}

.how > summary {
  cursor: pointer;
  margin: 0;
}

.how > summary::marker {
  color: var(--muted);
}

.how p:last-child {
  margin-bottom: 0;
}

/* The words those buttons remove, directly under those buttons.
 *
 * It sat five paragraphs below them, styled as a hint — which is how it read: a note about
 * the panel rather than the list the buttons work from. Same row of the page as the buttons
 * now, and in the page's own text colour, because it is a control. */
.words {
  margin: 0 0 12px;
}

/* A row to tap, not a line of small print: the same height as the buttons above it. */
.words > summary {
  padding: 7px 0;
  font-size: 14px;
  color: var(--text);
}

/* 「これはサンプルです」。強い色ではなく、はっきり読める1枚のカードで — 見えているものが
 * 誰かの記録ではないことは、画面を触る前に分かっている必要があります。 */
.demo-banner {
  margin: 0;
  line-height: 1.6;
  border: 1px solid var(--line);
  background: var(--accent-soft, #fffbe6);
}

/* Toasts. Even's pattern: a pill at the bottom, plain for a confirmation, the accent
 * yellow with an alert mark when something went wrong. */
.toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 6px;
  pointer-events: none;
}

.toast {
  max-width: min(90vw, 22rem);
  padding: 8px 14px;
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
  font-size: 13px;
  text-align: center;
}

.toast.error {
  background: var(--accent-bg);
  color: #232323;
}

/* Editing a record happens in the row itself, so the field needs its own line. */
.list li textarea {
  display: block;
  width: 100%;
  margin: 2px 0 4px;
}

#history h3 {
  margin: 14px 0 2px;
  font-size: 13px;
  color: var(--muted);
}

.panel > h3 {
  margin: 12px 0 4px;
  font-size: 13px;
  color: var(--muted);
}

button.danger {
  color: var(--danger);
  border-color: var(--danger-line);
}

/* Secondary, not tiny.
 *
 * This was `padding: 1px 7px` at 12px — a button about 19 pixels tall, which is half of
 * what a fingertip lands on. It is the size of the整形ボタン, of 保存/取消 over the
 * conversation body, and of every diagnostic: the buttons pressed most often while holding
 * the phone one-handed were the smallest ones on the screen.
 *
 * 36px is the target here (an iOS control is 44). Still visibly lighter than a primary
 * button — the difference between these and 「保存」 is colour and weight, which is the
 * difference that means something, not two pixels of height. */
button.small {
  min-height: 36px;
  padding: 8px 13px;
  font-size: 14px;
  line-height: 1.2;
}

/* The auto-scroll pace. A slider because the right number is found by sliding until the
 * text keeps up with the eye — 「ゆっくり／普通／速い」 were three guesses at it. */
#autoScroll {
  flex: 1 1 120px;
  accent-color: var(--accent);
}

/* Fixed width, so the row does not shuffle sideways as the number changes under the thumb. */
#autoScrollValue {
  flex: 0 0 3.5em;
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Picking the current person, below the search box in the same card: the same question,
 * answered from a list instead of by name. */
.picker {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.picker label {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--muted);
}

.required {
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: var(--primary-text);
  background: var(--primary-bg);
  border-radius: 999px;
}