/* Oakrule · phones and tablets, loaded after app.css.
   Phones: one-row top bar, bottom tab bar (icons + labels, safe areas), bottom-sheet dialogs, 44px targets,
   16px inputs (no iOS focus zoom). The tab bar is position:fixed inside the header, so the header must never get
   transform, filter, backdrop-filter or will-change. */

@media (max-width: 1100px) {
  :root { --inset: 24px; }
  .steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 900px) {
  :root { --page: 100%; }
  article.addr { grid-template-columns: minmax(0, 1fr); }
  .ahero { grid-template-columns: minmax(0, 1fr); }
  .gal { min-height: 380px; }
  .adetail { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* tablets in portrait and phones: bottom tab bar, compact header (#125: five tabs + tools don't fit below 900 px) */
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
  :root { --tabbar-h: 56px; }
  html { -webkit-tap-highlight-color: transparent; }
  .tool { height: 44px; padding: 0 6px; }

  .brand { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; }
  .tool { min-width: 44px; justify-content: center; }

  /* bottom tab bar */ /* phones: five tabs (Lookup · Ask · Changes · Rules · Mine); Sources lives in the footer */
  .tool { box-shadow: var(--shadow-card); }
  @keyframes tab-pop { 40% { transform: scale(.82); } 100% { transform: none; } }

  /* typing: the keyboard takes the bottom, so the tab bar steps aside (#109) */
  /* the tab bar already links every page; the footer keeps the disclaimer and the extra links (#113) */
}

@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  :root { --inset: 16px; --nav-h: 48px; --fs-xl: 34px; --fs-l: 28px; } /* one 44 px toggle that names the other language */ /* phones: no reserved space for the hidden reset (#166) */
  .matrix td button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; margin: -6px 0; padding: 0; justify-content: center; } /* #115 */
  .chk { min-height: 44px; }

  main { padding-top: 8px; }
  .brand-word { font-size: 17px; }
  .brand-mark { width: 32px; height: 32px; font-size: 18px; border-radius: 11px; }
  .tool { height: 40px; padding: 0 12px; }
  .big-search { left: 6px; right: 6px; }
  .big-search .box { height: 64px; padding: 0 8px 0 20px; }
  .bs-f input { font-size: 17px; }
  .big-search .go { width: 46px; height: 46px; }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 40px; }
  .stats-row b { font-size: 48px; }
  .suggest { left: 0; right: 0; }
  .page-head { padding-right: 92px; min-height: 0; margin: 12px 0 24px; }
  .page-head::after { width: 84px; height: 84px; top: 0; margin-top: -6px; right: -6px; }
  .page-head p { font-size: var(--fs-m); }
  .panel { padding: 20px 16px; border-radius: 24px; }
  .steps-card { padding: 4px 16px; border-radius: 20px; margin-top: 16px; }
  .ahero { padding: 8px; border-radius: 32px; }
  .gal { min-height: 140px; height: 140px; border-radius: 22px; }
  .gal > img { object-fit: cover; object-position: 50% 55%; }
  .addr-top, .ahero .addr-stack, .ahero .addr-sub { display: none; }
  .addr-line { margin-top: 10px; padding-top: 0; border-top: 0; font-size: 15px; }
  .answers-head { margin-top: 20px; }
  .adetail { margin-top: 0; }
  .adetail .answers-head { margin-top: 28px; }
  .answers-head h2 { font-size: 30px; }
  .addr-stack { margin-top: 10px; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; padding-top: 14px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .facts .st-i { display: none; }
  .facts dd { font-size: 17px; }
  .facts dt { white-space: normal; font-size: 11.5px; }
  .prop-cta { padding-top: 16px; }
  .aside-card:first-child { display: none; }
  .spot { display: none; }
  .topics.group > .topic + .topic::after { left: 14px; right: 14px; } /* one 44 px toggle that names the other language: EN / ES */
  .addr-head { padding: 18px 10px 10px; }
  .addr-head h1 { font-size: 30px; margin-top: 0; }
  .prop-cta .btn { width: 100%; }
  .topics.group { padding: 4px; border-radius: 24px; }
  .topic > summary { padding: 16px 10px 16px 14px; gap: 2px 8px; }
  .topic-a { font-size: 17px; }
  .topic-body { padding: 0 14px 20px; }
  .answers-head { margin: 24px 4px 12px; }
  /* placed without a transform (the img-in entrance animates transform and would drop a translate: the statue
     started at the left edge and slid in); feathered on both sides and the floor so no image edge shows */
  .src-statue { max-width: none; height: 300px; right: auto; left: calc(50% - 110px);
    -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(0deg, transparent, #000 9%); -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(0deg, transparent, #000 9%); mask-composite: intersect; }
  .facts3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .facts3 > div:last-child { grid-column: 1 / -1; }
  .facts3 dd { font-size: 44px; }
  .how3 ol { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .how3 li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 22px; }
  .how3-i { grid-row: span 2; height: 88px; margin: 0; border-radius: 16px; }
  .how3 b { padding: 0; font-size: 17px; }
  .how3 p { padding: 0; font-size: 14px; }
  .sr-g > summary { padding: 8px 0; }
  .sr-g > summary h3 { font-size: 28px; }
  .sr-gs, .rev-s { flex-basis: 100%; order: 3; }
  .rev > summary { padding: 14px 18px; }
  .sr-g { padding: 18px 16px 6px; border-radius: 24px; }
  .sr-a { grid-template-columns: minmax(0, 1fr) 18px; }
  .sr-a .sb { grid-column: 1; grid-row: 2; justify-self: start; }
  .sr-a .ico { grid-column: 2; grid-row: 1 / span 2; }
  .float-stat { right: 0; bottom: 16px; width: 190px; padding: 14px 16px; }
  .float-stat b { font-size: 30px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats > div { padding: 16px; }
  .stats dd { font-size: 30px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .answers { margin-top: 28px; }
  .answers-head .addr-actions { margin: 0; order: 4; flex-basis: 100%; }
  .topic-body, .subrule > .rd { padding-right: 0; }
  .ev { grid-template-columns: minmax(0, 1fr) auto; }
  .ev-d { grid-column: 1; }
  .ev-main { grid-column: 1; }
  .ev-st { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .ev-older > ul { padding-left: 0; }
  .ev-x > summary.ev { grid-template-columns: minmax(0, 1fr) auto 28px; }
  .ev-x > summary .chev { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .ev-body { padding-left: 0; }
  .ba { grid-template-columns: minmax(0, 1fr); }
  .kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .log-row > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .log-row .lx { grid-column: 1 / -1; }
  .log-row .ls { text-align: right; }
  .log-row .ld { display: none; }
  .filters select { font-size: 16px; height: 44px; flex: 1 1 0; min-width: 0; padding: 0 6px; }
  .filters input[type="search"] { font-size: 16px; height: 44px; flex: 1 1 100%; }
  #rules-table .rtable thead { display: none; }
  #rules-table .rtable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--sep-2); }
  #rules-table .rtable td { padding: 0; border: 0; }
  #rules-table .rtable td:nth-child(1) { grid-column: 1; grid-row: 1; }
  #rules-table .rtable td:nth-child(2) { grid-column: 1; grid-row: 2; max-width: none; }
  #rules-table .rtable td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  #rules-table .rtable td:nth-child(4), #rules-table .rtable td:nth-child(5) { grid-column: 1 / -1; font-size: 13px; color: var(--label-2); text-align: left; }
  #rules-table .rtable td:nth-child(4) { grid-row: 3; }
  #rules-table .rtable td:nth-child(5) { grid-row: 4; }
  #rules-table .rtable tr.clickable:hover td { background: none; }
  #rules-table .table-wrap { overflow: visible; }

  /* sheets */
  .modal, .cmdk { padding: 0; align-items: flex-end; padding-top: env(safe-area-inset-top); }
  .modal-card { max-width: none; max-height: 92vh; border-radius: 14px 14px 0 0; }
  .modal-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
  .modal-card > header { padding: 10px 12px 10px 16px; }
  .icon-btn { width: 44px; height: 44px; }
  .cmdk { align-items: stretch; }
  .cmdk-card { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .cmdk-input input { font-size: 17px; }
  .cmdk-x { display: inline-flex; }
  .opt { padding: 12px; }
} /* #166/#125: a changed date (badge + ×) fits 361-390 px */

@media (max-width: 360px) {
  .brand-word { font-size: 16px; }
  .brand { gap: 6px; }
  .brand-mark { width: 28px; height: 28px; font-size: 18px; border-radius: 9px; }
  .tool { padding: 0 4px; }
}

/* phones: the bottom chrome is the tab bar plus the safe area; the Ask bar docks only on the Ask page, solid, right above it */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  /* the bar's own background runs down to the screen edge (home-bar area included), so nothing shows under it,
     and its top is a soft fade, not a hard line through the text (Isaac 2026-10-05) */
  html .ask-dock { bottom: var(--tabbar-h); padding: 22px max(10px, env(safe-area-inset-right)) calc(8px + max(4px, env(safe-area-inset-bottom))) max(10px, env(safe-area-inset-left)); background: linear-gradient(180deg, rgb(247 249 248 / 0) 0, var(--canvas) 20px); border-top: 0; }
  html .ask-dock-note { display: none; }
  html.dock-room main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* kept, not toggled: no growth after End (#125) */
  html.kb-open .ask-dock { bottom: var(--kb, 0px); padding-bottom: 8px; }
}

/* phones: one compact header row on a solid background; no top strip (Not legal advice sits under the hero search) */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  :root { --nav-h: 54px; }
  .brand { gap: 8px; min-height: 44px; }
  .brand-mark { width: 30px; height: 30px; font-size: 19px; box-shadow: 0 1.5px 0 var(--ink-btn-edge); }
  .brand-word { font-size: 21px; }
  /* as-of: a calendar icon; a changed date shows as a small badge next to it */
  html .tool.asof { width: auto; min-width: 44px; height: 44px; padding: 0 10px; background: none; box-shadow: none; justify-content: center; }
  /* language: a small text button */
  /* home hero starts below the header with normal margins */
}
@media (max-width: 359px) { .brand-word { display: none; }
}
/* ================= calm pass (phones): one surface level, 3 type sizes, fewer colours, no decoration ================= */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  :root { --inset: 20px; }
  /* type: display for titles, 17 body, 14 secondary */
  html .topic-a, html .tv .ev-t, html .sr-t { font-size: 17px; }
  html .topic-q, html .ev-s, html .sr-s, html .note, html .addr-meta, html .ev-d { font-size: 14px; }
  html .why, html .page-head p { font-size: 17px; }
  html .answers-head h2, html .tv-s > h2, html .tv-s > summary h2, html .sr-g > summary h2, html .sr-g > summary h3, html .rev > summary h2, html .block > h2 { font-size: 28px; }
  html section + section, html .block { margin-top: 40px; }
  /* home: hero, the statement (no chips), the features as one plain list; the map stays for wide screens */
  /* address: rules right under the address */
  html .ahero { padding: 0; background: none; border-radius: 0; }
  html .ahero .gal { border-radius: 24px; box-shadow: none; }
  html .addr-head { padding: 16px 0 0; }
  html .aside { margin-top: 32px; }
  html .aside-card { box-shadow: none; border: 1px solid var(--sep-2); }
  /* lists: hairline rows, no card inside a card */
  html .topics.group { box-shadow: none; border: 1px solid var(--sep-2); }
  html .topics.group > .topic[open] { background: none; }
  html .fq, html .calc, html .quote, html .flag { box-shadow: none; }
  html .fq { background: var(--unk-tint); }
  /* check: no illustration in the empty answer */
  html .ck-empty img { display: none; }
  html .ck-empty { padding: 20px; }
  /* sources: plain steps, small facts */
  html .how3-i { display: none; }
  html .how3 li { display: block; padding: 16px 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--sep-2); background: none; }
  html .how3 ol { gap: 0; }
  html .facts3 dd { font: 650 24px/1.1 var(--font); letter-spacing: -.02em; }
  html .facts3 dd.f3-date { font-size: 20px; }
  html .sr-g, html .tv { box-shadow: none; border: 1px solid var(--sep-2); }
  /* changes: the bigger picture behind one tap */
  /* chips: one quiet style */
  html .chip-f { background: none; box-shadow: inset 0 0 0 1px var(--sep); }
  html .chip-f[aria-pressed="true"] { box-shadow: none; }
  /* my properties: one line instead of the stat grid, a quiet sign-in, Coming up as a short list */
  html .mp-exbar { background: none; box-shadow: none; padding: 0; border-radius: 0; margin-top: 8px; }
  html .mp-exdot { display: none; }
  html .mp-coming { box-shadow: none; border: 1px solid var(--sep-2); }
  html .mp-card { box-shadow: none; border: 1px solid var(--sep-2); }
  html .mp-raise { background: none; padding: 12px 0 0; border-top: 1px solid var(--sep-2); border-radius: 0; }
  html .mp-panel { box-shadow: none; border: 1px solid var(--sep-2); }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  /* Coming up: one row per event (date · what · building), the next three, then "See all" */
  html .mp-stop-dot, html .mp-stop-img { display: none; }
  html .mp-stop-d b { font-size: 14px; }
  html .mp-stop-d span { font-size: 13px; }
  html .mp-stop-c { padding: 0; background: none; box-shadow: none; }
  /* the sign-in is a quiet text button */
  html .mp-exbar .gsi { min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 600; }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .mp-stop-c { display: block; width: auto; max-width: none; min-width: 0; grid-template-columns: none; }
  html .mp-stop-c > span { display: block; min-width: 0; }
  html .mp-stop-c b { display: block; font-size: 15px; line-height: 1.3; white-space: normal; }
  html .mp-stop-c span span { display: block; font-size: 13px; white-space: normal; overflow: visible; }
  html .mp-coming { display: flex; flex-direction: column; }
}
/* calm pass, round 2 (critic on phone screenshots) */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  /* status dots only where the status is unusual */
  html .sdot.sd-ok { display: none; }
  html .sdot { box-shadow: none; }
  html .topics.group { box-shadow: none; }
  html .chip-f { background: var(--cool); box-shadow: none; }
  html .chip-f[aria-pressed="true"] { background: var(--ink-btn); }
  /* home */
  /* address */
  html .aside-card { border: 0; padding: 0; background: none; }
  html .aside-card h2 { font-size: 17px; }
  html .cu-go { width: auto; padding: 0; margin-top: 8px; min-height: 44px; background: none; box-shadow: none; color: var(--accent); justify-content: flex-start; }
  /* check */
  html .ck-main.panel { padding: 0; background: none; box-shadow: none; }
  html .ck-empty { border: 0; padding: 12px 0 0; text-align: left; justify-items: start; }
  html .ck-empty h2 { display: none; }
  html .ck-actions .btn.primary { box-shadow: 0 3px 0 var(--edge); }
  html .ck-back { background: none; box-shadow: none; padding-left: 0; margin-bottom: 16px; }
  /* compare */
  /* changes */
  html .tv { border: 0; padding: 0; }
  html .tv::before { left: 9px; }
  html .tv .ev-x > summary.ev { margin-left: 0; }
  html .tv .ev-body { padding-left: 32px; }
  html .chips-f { margin-bottom: 40px; }
  html .tv-old > summary h2 { font: 650 17px/1.3 var(--font); letter-spacing: -.01em; }
  html .tv-s h2 span { font-size: 14px; }
  /* rules */
  html #rules-all > summary { background: none; padding: 0; min-height: 56px; border-top: 1px solid var(--sep-2); border-radius: 0; }
  html #rules-all > summary h2 { font: 650 17px/1.3 var(--font); }
  html #rules-all > summary .rev-s { display: none; }
  /* sources */
  html .src-statue { height: 190px; left: calc(50% - 70px); }
  html .facts3 > div:last-child { display: none; }
  html .sr-list { gap: 0; }
  html .sr-g { border: 0; border-top: 1px solid var(--sep-2); border-radius: 0; padding: 4px 0; background: none; }
  html .sr-g > summary h3 { font: 650 17px/1.3 var(--font); }
  html .rev > summary { background: none; padding: 0; border-top: 1px solid var(--sep-2); border-radius: 0; }
  html .rev > summary h2 { font: 650 17px/1.3 var(--font); }
  html .rev-s { display: none; }
  /* my properties: one surface level */
  html .mp-coming { border: 0; padding: 0; background: none; }
  html .mp-raise-l b, html .mp-raise-big { font: 650 17px/1.3 var(--font); letter-spacing: -.01em; }
  html .mp-acts .btn:not(.primary) { background: none; box-shadow: none; padding: 0 8px; color: var(--accent); }
  html .mp-exbar { margin-top: 4px; }
}

/* calm pass, round 3 (fresh reviewer on the live phone pages) */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  /* flat primary buttons, one navy; pressing still sinks */
  html .btn.primary, html .pill.primary, html .big-search .go { box-shadow: none !important; transform: none; }
  html .btn.primary:active, html .big-search .go:active { transform: scale(.97); }
  html .btn:not(.primary) { box-shadow: inset 0 0 0 1px var(--sep); }
  /* footer: the disclaimer and one line; Sources lives here on phones */
  /* status dots keep their column (hidden, not removed), so every arrow lines up */
  html .sdot.sd-ok { display: block; visibility: hidden; }
  /* home: no panel behind the hero; the search sits above the photo */
  html .big-search { position: relative; left: auto; right: auto; top: auto; margin-bottom: 16px; }
  /* address: a small photo next to the address; rules right after */
  html .ahero { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; }
  html .ahero .gal { min-height: 0; height: 76px; border-radius: 18px; }
  html .ahero .gal .spot { display: none; }
  html .addr-head { padding: 0; }
  html .addr-head h1 { font-size: 28px; }
  html .prop-cta { grid-column: 1 / -1; padding-top: 16px; }
  html .ahero .prop-cta { display: none; }
  html .addr-line { margin-top: 6px; }
  html .adetail .answers-head { margin: 32px 0 12px; }
  html .answers-head { margin-left: 0; margin-right: 0; }
  html .aside-card h2 { font: 700 28px/1.08 var(--display); }
  /* opened topic: answer, one sentence, Show me the law */
  html .calc { display: none; }
  html .topic-actions > a, html .topic-actions > button { box-shadow: none; padding: 0; min-height: 44px; color: var(--accent); background: none; text-decoration: underline; text-decoration-color: rgb(7 90 57 / .3); text-underline-offset: 4px; }
  html .topic-actions { gap: 0 20px; }
  /* rules: one selection style */
  html .pc-seg button[aria-selected="true"] { background: var(--ink-btn); color: #fff; box-shadow: none; }
  html .pc .chip-f { min-height: 40px; padding: 0 14px; font-size: 14px; }
  /* changes: one place picker; no rail, no dots */
  html .chips-f { display: none; }
  html .tv::before, html .tv-dot { display: none; }
  html .tv .ev-x > summary.ev { grid-template-columns: minmax(0, 1fr) 24px; }
  html .tv .ev-main { grid-column: 1; }
  html .tv .ev-x > summary .chev { grid-column: 2; }
  html .tv .ev-body { padding-left: 0; }
  html .tv .ev-d { font-size: 13px; }
  /* sources: heading, then the sources; How it works after them; facts on one line */
  html main[data-view="audit"] { display: flex; flex-direction: column; }
  html main[data-view="audit"] > .facts3 { order: 2; }
  html main[data-view="audit"] > .srcs { order: 3; margin-top: 24px; }
  html main[data-view="audit"] > .how3 { order: 4; }
  html main[data-view="audit"] > .rev { order: 5; }
  html .src-statue { display: none; }
  html .facts3 { display: block; margin-top: 12px; font-size: 15px; color: var(--label-2); }
  html .facts3 > div { display: inline; padding: 0; border: 0; }
  html .facts3 > div + div::before { content: " · "; }
  html .facts3 dd, html .facts3 dt { display: inline; font: 400 15px/1.5 var(--font); color: var(--label-2); }
  html .facts3 dd { font-weight: 650; color: var(--label); }
  html .facts3 dt::before { content: " "; }
  html .how3 li::before { display: none; }
  /* check: no picture in the verdict; one heading style */
  html .ck-art { display: none; }
  html .ck-big { padding-right: 0; }
  html .ck-result > h2 { font: 700 28px/1.08 var(--display); margin-left: 0; }
  /* compare */
  /* my properties: 20 px margins, one surface (the card), one primary action */
  html .mp-coming, html .mp-top, html .mp-exbar { margin-left: 0; margin-right: 0; }
  html .mp-ex { display: none; }
  html .mp-q { background: none; padding: 12px 0 0; border-top: 1px solid var(--sep-2); border-radius: 0; }
  html .mp-q-b .btn { box-shadow: inset 0 0 0 1px var(--sep); }
  html .mp-draft { width: auto; margin-top: 8px; padding: 0; min-height: 44px; background: none; box-shadow: none !important; color: var(--accent); justify-content: flex-start; }
  html .mp-raise-acts { gap: 16px; }
  html .mp-card { padding: 10px; }
  html .mp-exbar .gsi { justify-content: flex-start; }
  html .mp-exbar { justify-content: flex-start; text-align: left; }
}
/* calm pass, round 4 */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  /* home: a light search field */
  html .big-search .box { height: 60px; box-shadow: inset 0 0 0 1.5px var(--sep); }
  html .big-search .box:focus-within { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--ring); } /* the tour stays reachable on phones, portrait and landscape */
  /* lists without a card border: rows and dividers only */
  html .topics.group { border: 0; padding: 0; background: none; border-radius: 0; border-top: 1px solid var(--sep-2); }
  html .topic > summary { padding-left: 0; padding-right: 0; }
  html .topic-body { padding-left: 0; padding-right: 0; }
  html .topics.group > .topic + .topic::after { left: 0; right: 0; }
  html .sdot.sd-check, html .sdot.sd-ask.sd-check { visibility: hidden; } /* the flag itself shows inside the topic */
  html .adetail .answers-head { margin-top: 28px; }
  html .law { margin-top: 12px; }
  html .topic-body { padding-bottom: 16px; }
  /* rules: one place select (like Changes) */
  html .pc-seg, html .pc { display: none !important; }
  /* check: verdict without shadow, thin bar, plain status word */
  html .ck-hero { box-shadow: none; }
  html .ck-bar { height: 6px; margin-top: 34px; }
  html .ck-ok { background: none; box-shadow: none; padding: 0; height: auto; color: var(--applies); animation: none; }
  html .ck-v .badge { display: none; }
  /* sources */
  html .facts3 dd { font-weight: 400; color: var(--label-2); }
  html .facts3 > div { display: block; }
  html .facts3 > div + div::before { content: none; }
  html .how3-n { background: none; color: var(--label); width: auto; font-size: 17px; }

  html .rev > summary { border-top: 0; margin-top: 32px; }
  /* changes */
  html .tv-old > summary { border-top: 1px solid var(--sep-2); min-height: 56px; }
  /* compare */
  /* my properties: no outer card border, small photo, sans status, one primary action */
  html .mp-card { border: 0; padding: 0; border-top: 1px solid var(--sep-2); border-radius: 0; padding-top: 20px; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0 14px; }
  html .mp-card > .mp-body { padding: 0; min-width: 0; }
  html .mp-acts .btn:not(.primary) { display: none; }
  html .mp-acts .btn.primary { width: 100%; }
  html .mp-top h1 { margin-left: 0; }
  html .mp-lead { font-size: 15px; }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) { html .topic-actions > .btn, html .topic-actions > button { box-shadow: none !important; margin-bottom: 0; border-radius: 0; }
}

/* calm pass round 5 + iPhone QA */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .page-head { padding-right: 0; }
  html .page-head p { max-width: none; }
  html .cu-go { padding: 0; }
  html .aside-card h2 { font: 650 17px/1.3 var(--font); }
  html .adetail .answers-head { margin-top: 24px; }
  html .law { border-top: 0; margin-top: 0; }
  html .topic-body { padding-right: 14px; }
  html .how3 li::marker, html .how3 ol { list-style: none; }
  html .facts3 > div { display: inline; }
  html .facts3 > div + div::before { content: " · "; }
  html .rev > summary { margin-top: 24px; }
  html .ck-result .addr-meta:not(:last-child) { display: none; }
  html .ck-result .addr-meta:last-child { font-size: 13px; }
  html .ck-more { order: 9; }
  /* my properties: one left edge, one filled button per page */
  html .mp-top { padding-left: 0; margin-left: 0; }
  html .mp-draft { padding-left: 0; }
  html .mp-card:not(:first-child) .mp-acts .btn.primary { background: none; color: var(--accent); box-shadow: inset 0 0 0 1px var(--sep) !important; }
  html .mp-coming { margin-top: 40px; }
  html .mp-settings { border: 0; box-shadow: none; padding: 0; background: none; }
  html .mp-set-i { display: none; }
  html .mp-set-a .btn { box-shadow: none; background: none; color: var(--accent); padding: 0 8px 0 0; text-decoration: underline; }
  /* QA: filters readable, targets 44 px, sheets have a handle */
  html .filters select { flex: 1 1 calc(50% - 4px); padding: 0 28px 0 14px; }
  html .more > summary, html .rd-cite a, html .fq-b .btn, html .mp-raise-acts .linkish { min-height: 44px; display: inline-flex; align-items: center; }
  html .fq-b .ghost-b { box-shadow: inset 0 0 0 1px var(--sep); }
  html .modal-card::before { content: ""; display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: rgb(17 22 20 / .2); }
  html { scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 16px); scroll-padding-bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + 16px); }
  html input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
}

/* calm pass round 6 */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .topic-actions > .ce-share-b { border: 0 !important; }
  html .mp-set-row { display: block; }
  html .mp-set-t { display: block; }
  html .mp-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  html .mp-lead { display: none; }
  html .mp-acts .btn.primary, html .mp-card:not(:first-child) .mp-acts .btn.primary { background: none; color: var(--accent); box-shadow: inset 0 0 0 1px var(--sep) !important; }
  html .mp-raise .mp-tag { background: none; padding: 0; color: var(--label-2); font-weight: 500; }
  html .mp-raise .mp-tag::before { display: none; }
  html .ck-row input, html .ck-row select { box-shadow: none; }
  html .ck-result .addr-meta { display: none !important; }
  html #rules-all { margin-top: 32px; }
  html .rev > summary { margin-top: 8px; }
  html .sh-main { min-height: 0; padding-bottom: 32px; }
}

/* calm pass round 7 */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  /* my properties: details at the margin, one action per building */
  html .mp-card { display: block; }
  html .mp-raise-acts { display: none !important; }
  html .mp-q-b .btn { min-height: 40px; }
  html .mp-set-t b { display: block; margin-bottom: 4px; }
  html .mp-set-row + .mp-set-row { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--sep-2); }
  html .mp-set-a { margin-top: 8px; }
  /* opened topic: one strong action, the rest quiet */
  html .topic-actions > a, html .topic-actions > button { color: var(--label-2); text-decoration: none; font-weight: 500; }
  html .topic-actions > .ck-entry { color: var(--accent); font-weight: 600; }
  html .topic-body { padding-bottom: 8px; }
  html .topics.group > .topic + .topic::after { opacity: 1 !important; }
  /* check: no row lines under the filled fields, no repeated address */
  html .ck-group > li { border-bottom: 0; }
  html .ck-head > p { display: none; }
  /* address: the All changes link plain */
  html .cu-go { box-shadow: none !important; }
  /* rules: one big heading */
  /* sources */
  html .rev { margin-top: 32px; }
  html .rev > summary { border-top: 1px solid var(--sep-2); margin-top: 0; }
}
/* tab bar: the pill wraps icon and label; a compact bar; a short footer; no viewport-height jumps */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html body { min-height: 100svh; }
  html main { min-height: calc(100svh - var(--nav-h) - var(--tabbar-h)); }
  html main[data-view="properties"] { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}
/* My properties: one quiet header block; Coming up title with its note below */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .mp-top { display: block; }
  html .mp-lead { display: block; font-size: 14px; margin-top: 6px; color: var(--label-2); }
  html .mp-exbar { margin-top: 2px; font-size: 14px; }
  html .mp-acct { margin-top: 4px; }
  html .mp-coming { margin-top: 40px; }
}

/* tab icons: inline SVG (no masks) */

@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .mp-top .mp-lead { display: block; font-size: 13px; }
}
/* buttons turned into text links have no outline; outlined buttons always keep 16 px side padding */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .cu-go, html .mp-draft, html .mp-set-a .btn, html .mp-leave { box-shadow: none !important; background: none !important; border: 0 !important; }
  html .btn:not(.primary):not(.cu-go):not(.mp-draft) { padding-left: max(16px, var(--btn-px, 16px)); padding-right: max(16px, var(--btn-px, 16px)); }
  html .mp-set-a .btn { padding: 0 12px 0 0 !important; }
}

/* persona round 1 (David on an iPhone 13): the dollar answer inside the rent topic, one action style, the
   speaking rule in the gutter */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .topic.is-speaking::before { left: -12px; border-radius: 3px; }
  html .calc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  html .calc label { flex: 1 1 100%; justify-content: space-between; font-size: 16px; }
  html .calc-in { height: 48px; background: #fff; box-shadow: inset 0 0 0 1px var(--sep); }
  html .calc-in input { width: 120px; }
  html .calc-out { flex: 1 1 100%; font-size: 17px; }
  html .calc-out:empty { display: none; }
  /* actions start at the text column; Check is the one filled button, Listen and Share quiet words */
  html .topic-actions { gap: 4px 24px; margin-top: 16px; }
  html .topic-actions > a, html .topic-actions > button { padding-left: 0 !important; padding-right: 0 !important; }
  html .topic-actions > .ce-share-b .ico { display: none; }
  html .topic-actions .ce-lab { text-align: left; }
  html .topic-actions > .ck-entry { order: -1; margin-right: 100%; white-space: nowrap; padding: 0 20px !important; min-height: 44px; border-radius: 999px; background: var(--ink-btn); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 2px 0 var(--ink-btn-edge, #001a44) !important; }
  html .topic-actions > .ck-entry:active { transform: translateY(2px); box-shadow: none !important; }
}

/* #115: touch targets of at least 44x44 px; the extra hit area is invisible where the layout is dense */
@media (pointer: coarse) {
  .matrix td { padding-top: 5px; padding-bottom: 5px; }
  .matrix td button { position: relative; margin: 0; }
  .matrix td button::after { content: ""; position: absolute; inset: -4px; }
  .idlist { display: flex; flex-wrap: wrap; gap: 0 2px; line-height: 1.2; }
  .idlist a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  #a-geo .rtable td:first-child a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
  .ask-info { position: relative; }
  .ask-info::after { content: ""; position: absolute; inset: -14px; }
  html .topic-actions > .ce-share-b { min-width: 44px; justify-content: center; }
  /* 44 px touch targets without moving the layout (sweep 2026-10-04): citation numbers, "See all", "New question",
     "Change", the Listen sheet's close, speed and position controls */
  .ask-sup, .ask-new, .ce-cap-x, .ce-cap-sp { position: relative; }
  .ask-sup::after { content: ""; position: absolute; inset: -13px -2px; }
  .ask-new::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
  .ce-cap-x::after, .ce-cap-sp::after { content: ""; position: absolute; inset: -4px; }
  html .ce-cap-r { height: 44px; margin: -12px 0; }
}

/* 200% page zoom on a phone (about 195 px wide): icon-only tabs (the label stays as the accessible name), the
   address photo above its title, buttons and cards that wrap instead of pushing the page sideways */
@media (max-width: 260px) {
  html .ahero { grid-template-columns: minmax(0, 1fr); }
  html .aside { grid-template-columns: minmax(0, 1fr); }
  html .ck-entry, html .gsi, html .ask-privacy, html .ask-privacy .short { white-space: normal; max-width: 100%; }
  html .topic-actions > .ck-entry { white-space: normal; margin-right: 0; text-align: center; border-radius: 22px; }
  html main { overflow-wrap: break-word; }
  html .topic > summary { column-gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
  html .topic > summary .sdot { margin: 8px 0 0; }
  html .topic-a { font-size: 15.5px; } /* "Massachusetts" fits the answer column without breaking */
  html .topic > summary .chev { display: none; } /* the whole row is the tap target; the answer gets the width */
  html .topic > summary:has(> .badge) { grid-template-columns: minmax(0, 1fr); } /* "Not law" rows: the status word under the title */
  html .topic > summary .badge { grid-row: 2; grid-column: 1; justify-self: start; }
  html .notfound .btn { white-space: normal; max-width: 100%; }
  html .notfound .chips a > span { min-width: 0; } /* EN/ES fits next to the date and search */
  html body .topic.mv4-lead:not([open]) .mv4-src { height: auto; min-height: 28px; max-width: 100%; overflow-wrap: anywhere; }
  html .calc label { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  html .calc-in { min-width: 0; max-width: 100%; }
  html .calc-in input { width: 100%; min-width: 0; }
  html .rd-cite a { min-width: 0; max-width: 100%; }
  html #main a.btn { white-space: normal; max-width: 100%; height: auto; text-align: center; }
}