/* The call log's one stylesheet (design §10). The phone layout is the
   default; the laptop layout moves the bar to the top at 900px. Buttons
   are finger-sized; dropdowns stay native. */
:root { --ink: #1c1c1a; --muted: #6b6a66; --line: #e3e1da; --bg: #faf9f6; --card: #fff;
        --accent: #185fa5; --red: #a32d2d; --redbg: #fcebeb; --green: #27500a;
        --greenbg: #eaf3de; --note: #eef3fa; --radius: 8px; }
* { box-sizing: border-box; }
/* The hidden attribute must beat the display rules below (label, fieldset):
   capture.js shows and hides parts of the form with it. */
[hidden] { display: none !important; }
html { font-size: 16px; }
body { margin: 0; font-family: -apple-system, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
       color: var(--ink); background: var(--bg); line-height: 1.45; }
a { color: var(--accent); text-decoration: none; }
code { font-family: Consolas, monospace; background: #f1efe9; padding: 1px 4px; border-radius: 4px; word-break: break-all; }
.main { padding: 14px 14px 96px; max-width: 760px; margin: 0 auto; }
h1 { font-size: 22px; margin: 6px 0 14px; }
h3 { font-size: 16px; margin: 4px 0 8px; }
.muted, .hint { color: var(--muted); font-size: 13px; }

/* The bar: along the bottom on a phone, along the top on a laptop (design §6.1). */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: 4px; align-items: center;
       background: var(--card); border-top: 1px solid var(--line); padding: 6px 8px; }
.bar > a { flex: 1; text-align: center; padding: 12px 4px; border-radius: var(--radius); color: var(--muted); }
.bar > a.on { color: var(--ink); background: var(--bg); font-weight: 600; }
.me { position: relative; }
.me > summary { list-style: none; cursor: pointer; padding: 12px 10px; color: var(--muted); }
.me > summary::-webkit-details-marker { display: none; }
.me-menu { position: absolute; right: 0; bottom: 100%; display: grid; gap: 6px; min-width: 210px; padding: 8px;
           background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
           box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
/* The menu's two entries are finger-sized, one under the other, so Sign out
   is not tapped for Change my password. This beats button.link (below) by
   specificity, so the inline link buttons elsewhere keep their size. */
.me-menu > a, .me-menu button.link { display: block; width: 100%; min-height: 44px; padding: 10px 4px; text-align: left; }
@media (min-width: 900px) {
  .bar { position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); }
  .bar > a { flex: 0 0 auto; padding: 10px 16px; }
  .me { margin-left: auto; }
  .me-menu { top: 100%; bottom: auto; }
  .main { padding-bottom: 32px; }
}

/* Forms */
.form { display: grid; gap: 12px; }
label { display: block; font-size: 13px; color: var(--muted); }
label.big { font-size: 15px; color: var(--ink); }
input, select, textarea, button { font: inherit; }
/* 16px, not the 13 or 15px of the label each box sits in, which `font:
   inherit` would give it: iOS Safari zooms the page in when a smaller box
   gets focus, and leaves it zoomed (tests/test_web_app.py). */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; margin-top: 4px; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); }
textarea { resize: vertical; }
label.big textarea { font-size: 18px; min-height: 96px; }
label.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink); }
label.check input { width: 22px; height: 22px; }
fieldset { margin: 0; padding: 8px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
legend { padding: 0 4px; font-size: 13px; color: var(--muted); }
button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius);
         background: var(--card); color: var(--ink); cursor: pointer; }
button.primary { width: 100%; background: var(--ink); border-color: var(--ink); color: #fff; font-size: 17px; }
button.primary:disabled { opacity: .5; }
button.link { min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); }
/* "Link as related" and "Clear link" still read as links, but take a
   finger-sized tap: the padding makes the target 44px tall and the negative
   margin hands the room back, so "Seen this before?" and the link banner keep
   their height (review link-buttons-not-finger-sized). */
.hit button.link, #clear-link { min-height: 44px; padding: 10px 0; margin: -10px 0; }
.chips-row, .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* A picker and the "Describe the other" box it opens, one grid cell, the box
   straight under the picker (review K16). */
.pick { display: grid; gap: 8px; align-content: start; }
/* 44px like every button: .pill outranks the plain button rule above. */
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px;
        border-radius: 999px; background: #eef0f2; color: var(--ink); font-size: 14px; }
/* The chosen Class is plain to see in shop light, not only by its small radio
   dot (review class-pills-hide-the-choice). Dark on light is the page's own
   contrast turned round. A browser without :has() shows the pills as before. */
.pill:has(input:checked) { background: var(--ink); color: #fff; }
/* Class: one row of equal segments, however many classes there are, named
   like the boxes around it and with no frame of its own (owner, 2026-09-25:
   it took three rows on a phone). Each segment stays 44px tall; a name too
   long for its third wraps inside it, never onto a second row of buttons. */
.seg { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0;
       display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.seg > legend { padding: 0; margin-bottom: 4px; }
.seg > .pill { position: relative; justify-content: center; text-align: center; padding: 6px 4px;
               line-height: 1.2; border: 1px solid var(--line); border-radius: 0; background: var(--card); }
.seg > .pill + .pill { border-left: 0; }
.seg > .pill:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.seg > .pill:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; }
.seg > .pill:has(input:checked) { border-color: var(--ink); }
/* The dark segment shows the choice, so the radio dot can go -- but only
   where :has() works; elsewhere the dot is the only sign and stays. The
   radio is kept in the page, only out of sight, so a keyboard and a screen
   reader still use it. */
@supports selector(:has(*)) {
  .seg > .pill { gap: 0; }
  .seg input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .seg > .pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
}
.when { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.when .quick, .when .hint, .when label.check { grid-column: 1 / -1; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }

/* Messages */
.flash { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius); }
.flash ul { margin: 0; padding-left: 18px; }
.flash.good { background: var(--greenbg); color: var(--green); }
.flash.bad { background: var(--redbg); color: var(--red); }
.flash.note { background: var(--note); color: var(--ink); }

/* Seen this before? */
.similar:empty { display: none; }
.similar { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.hit { padding: 8px 0; border-top: 1px solid var(--line); }
.hit:first-of-type { border-top: 0; }
.hit-fix { margin: 4px 0; font-size: 14px; }
mark { background: #faeeda; color: inherit; }

/* Sign-in and problem pages */
.door, .problem { max-width: 420px; margin: 24px auto; }

@media (max-width: 480px) {
  .chips-row, .grid2 { grid-template-columns: 1fr; }
  .when { grid-template-columns: 1fr 1fr; }
}

/* "When", folded to one line until opened, with Now beside it (plan Decision 24). */
.when-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.when-row > .when-box { flex: 1; }
/* Opened, the box takes the whole row and Now drops beneath it. Beside Now,
   the box cannot shrink below the date input's own width, and a phone page
   then scrolls sideways (375px wide: 397px of page). */
.when-row > .when-box[open] { flex-basis: 100%; }
.when-row > .pill { flex: 0 0 auto; }
.when-box { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.when-box > summary { cursor: pointer; min-height: 32px; font-size: 15px; color: var(--ink); }
.when-box[open] > summary { margin-bottom: 8px; }