/* Clause & Effect · 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; }
  .frow, .frow.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 96px; }
  .frow-m { height: auto; aspect-ratio: 1; }
  .frow-t h2 { font-size: 32px; }
  .tabs a { padding: 9px 12px; }
  .steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 900px) {
  :root { --page: 100%; }
  .nav-inner { gap: 12px; }
  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)); }
  .src-hero { grid-template-columns: 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; }
  .nav-inner { gap: 8px; }
  .tool { height: 44px; padding: 0 6px; }
  .asof-reset { width: 32px; }
  .seg button { height: 44px; padding: 0 7px; font-size: 14px; }

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

  /* bottom tab bar */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
    padding: 0 env(safe-area-inset-right) max(4px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
    background: #fff; border-top: 1px solid var(--sep-2); /* solid: no text shows through (#118) */
    border-radius: 0; box-shadow: none; margin: 0;
  }
  .tabs a { position: relative; z-index: 1; }
  .tab-ind { top: 6px; height: 32px; width: 56px; left: 0; border-radius: 999px; background: rgb(14 16 20 / .07); transform: translateX(max(2px, calc(var(--x, 0px) + var(--w, 0px) / 2 - 28px))); }
  .tab-more { display: none !important; }
  .tabs a[data-route="ask"] { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-11.6 7.1L4 20l1-4.2A8 8 0 1 1 20 12z'/%3E%3Cpath d='M9 10.5h6M9 13.5h4'/%3E%3C/svg%3E"); }
  .tabs a[data-route="audit"] { display: none; } /* phones: five tabs (Lookup · Ask · Changes · Rules · Mine); Sources lives in the footer */
  .tabs:not(:has(.tab-ind.on)) a[aria-current="page"] { background: none; }
  .tool { box-shadow: var(--shadow-card); }
  .tabs a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: var(--tabbar-h); padding: 0 2px; font-size: 10.5px; line-height: 1.2; font-weight: 500; color: var(--label-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-touch-callout: none; user-select: none;
  }
  .tabs a[aria-current="page"], .tabs a[aria-current="page"]:hover { color: var(--label); font-weight: 650; background: none; }
  .tabs a[aria-current="page"]::before { animation: tab-pop .45s var(--spring); }
  @keyframes tab-pop { 40% { transform: scale(.82); } 100% { transform: none; } }
  .tabs a:hover { background: none; }
  .tabs { margin-left: 0; }
  .tabs a[data-short] { font-size: 0; gap: 0; }
  .tabs a[data-short]::after { content: attr(data-short); font-size: 10.5px; line-height: 1.2; margin-top: 2px; }
  .tabs a::before {
    content: ""; width: 24px; height: 24px; margin-top: 2px; flex: none; background: currentColor;
    -webkit-mask: var(--tab-ico) center / contain no-repeat; mask: var(--tab-ico) center / contain no-repeat;
  }
  .tabs a[data-route="lookup"] { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
  .tabs a[data-route="changes"] { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/svg%3E"); }
  .tabs a[data-route="rules"] { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1' fill='black'/%3E%3Ccircle cx='4.5' cy='12' r='1' fill='black'/%3E%3Ccircle cx='4.5' cy='18' r='1' fill='black'/%3E%3C/svg%3E"); }
  .tabs a[data-route="audit"] { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E"); }
  .tabs a[data-route="properties"] { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-2v18M12 8l8 2v11M2 21h20'/%3E%3C/svg%3E"); }
  @media (hover: none) { .tabs a:active { opacity: .6; } }

  /* typing: the keyboard takes the bottom, so the tab bar steps aside (#109) */
  body:has(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus) .tabs { display: none; }
  /* the tab bar already links every page; the footer keeps the disclaimer and the extra links (#113) */
  .footer-links a[href="#/"], .footer-links a[href="#/changes"], .footer-links a[href="#/rules"], .footer-links a[href="#/properties"] { display: none; }
  .footer-links a[href="#/ask"] { display: inline-flex !important; }
  .footer-links { gap: 8px 20px; }
  .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  :root { --inset: 16px; --nav-h: 48px; --fs-xl: 34px; --fs-l: 28px; }
  .search-trigger { display: none; }
  .nav-inner { gap: 4px; }
  .seg button[aria-pressed="true"] { display: none; } /* one 44 px toggle that names the other language */
  .asof-reset.off { display: none; } /* 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; }
  .seg { padding: 0; background: none; }
  .seg::before { display: none; }
  .seg button { height: 40px; padding: 0 12px; background: var(--bg); box-shadow: var(--shadow-card); color: var(--label); font-size: 14px; font-weight: 550; }
  .hero { width: calc(100vw - 16px); margin-left: calc(50% - 50vw + 8px); padding: calc(var(--nav-h) + 40px) 12px 28px; border-radius: 36px; }
  .hero h1 { font-size: 52px; line-height: .98; }
  .hero .lead { font-size: 18px; margin-top: 16px; padding: 0 8px; }
  .hero-media { margin-top: 32px; padding-top: 32px; }
  .big-search { left: 6px; right: 6px; }
  .big-search .box { height: 64px; padding: 0 8px 0 20px; }
  .bs-date { display: none; }
  .bs-f input { font-size: 17px; }
  .big-search .go { width: 46px; height: 46px; }
  .slides { height: 300px; border-radius: 32px; }
  .slide-cap { left: 12px; bottom: 12px; font-size: 13px; }
  .statement { margin-top: 96px; padding: 0 4px; }
  .statement p { font-size: 38px; line-height: 1.14; }
  .frow, .frow.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 80px; }
  .frow.flip .frow-m { order: 0; }
  .frow-m { border-radius: 36px; }
  .frow-t h2 { font-size: 30px; }
  .frow-t p { font-size: 17px; margin-top: 12px; }
  .frow-l { margin-top: 18px; }
  .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; }
  .map-stage { margin-top: 96px; padding: 12px 12px 0; border-radius: 28px; overflow: visible; }
  .map { height: 250px; }
  .map > img.map-us { left: 14%; width: 72%; }
  .mk { --s: 38px; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgb(14 16 20 / .18); font-size: 10px; }
  .mk[aria-pressed="true"] { transform: scale(1.18); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--label), 0 6px 14px rgb(14 16 20 / .22); }
  .mk-anchor { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; box-shadow: 0 0 0 2px rgb(255 255 255 / .85); }
  .mk-line { height: 1px; }
  .mk-name { display: none; }
  .map-h { display: none; }
  .city-card { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 4px -4px 0; border-radius: 24px; }
  .map-stage { padding-bottom: 8px; }
  .cc-img { height: 150px; }
  .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; }
  .seg .l-long { display: none; } /* one 44 px toggle that names the other language: EN / ES */
  .seg .l-short { display: inline; }
  .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; }
  .src-hero { display: block; min-height: 0; padding: 28px 20px 300px; margin-top: 4px; border-radius: 32px; }
  /* 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; }
  .src-hero .page-head { max-width: none; }
  .src-hero .page-head h1 { font-size: 42px; }
  .src-hero .page-head p { font-size: var(--fs-m); }
  .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; }
  .footer { margin-top: 64px; }

  /* 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; }
}

@media (max-width: 390px) { .asof-changed .brand-word { font-size: 16px; } .asof-changed .brand { gap: 6px; } } /* #166/#125: a changed date (badge + ×) fits 361-390 px */

@media (max-width: 360px) {
  .asof-changed .brand-word { font-size: 16px; }
  .asof-changed .tool.asof { font-size: 13px; padding: 0 2px; }
  .brand-word { font-size: 16px; }
  .brand { gap: 6px; }
  .brand-mark { width: 28px; height: 28px; font-size: 18px; border-radius: 9px; }
  .asof-reset { width: 26px; min-width: 26px; }
  .nav-inner { gap: 4px; }
  .tool { padding: 0 4px; }
  .seg { margin-left: 0; }
  .seg button { padding: 0 6px; }
}

/* 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) {
  html .ask-dock { bottom: calc(var(--tabbar-h) + max(4px, env(safe-area-inset-bottom))); padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); background: var(--canvas); border-top: 1px solid var(--sep-2); }
  html .ask-dock-note { display: none; }
  html.ask-docked main { padding-bottom: 88px; }
  html.kb-open .ask-dock { bottom: var(--kb, 0px); }
  html .tabs { background: #fff; }
  html .tabs a { min-height: 44px; }
}

/* 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; }
  .strip { display: none; }
  html .nav, html.is-home:not(.scrolled) .nav { background: #fff; }
  html.is-home:not(.scrolled) .nav::after { opacity: 0; }
  .nav-inner { gap: 6px; }
  .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; }
  .nav-tools { margin-left: auto; gap: 2px; }
  /* as-of: a calendar icon; a changed date shows as a small badge next to it */
  .asof, html .tool.asof { width: auto; min-width: 44px; height: 44px; padding: 0 10px; background: none; box-shadow: none; justify-content: center; }
  .asof .cal-i { display: block; width: 20px; height: 20px; }
  .asof .caret { display: none; }
  .asof .asof-l { display: none; }
  .asof.changed { background: none; color: var(--accent); }
  .asof.changed .asof-l { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 650; }
  .asof-reset { height: 44px; }
  /* language: a small text button */
  .seg, html.hf-2 .seg { padding: 0; background: none; }
  .seg::before { display: none; }
  .seg button, html.hf-2 .seg button { height: 44px; min-width: 44px; padding: 0 8px; background: none; box-shadow: none; color: var(--accent); font-size: 15px; font-weight: 650; }
  .seg .l-long { display: none; }
  .seg .l-short { display: inline; }
  /* home hero starts below the header with normal margins */
  html.is-home main { padding-top: 8px; }
  .hero { margin-top: 0; padding-top: 36px; }
  .hero-nla { display: block; margin: 18px 8px 0; font-size: 13px; line-height: 1.45; color: var(--label-2); }
  .hero-nla strong { color: var(--label); }
  .hero-nla .linkish { font-size: inherit; }
}
@media (max-width: 359px) { .brand-word { display: none; } }

.mp-oneline { display: none; }
.mp-all { display: none; }
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) { .mp-all { display: inline-flex; } }
/* ================= 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, html .frow-t h2 { 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 .frow-t p, 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 */
  html .s-chip, html .s-chips, html .map-stage { display: none !important; }
  html .statement { margin-top: 64px; }
  html .statement p { font-size: 30px; line-height: 1.2; text-align: left; }
  html .frow, html .frow.flip { display: block; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--sep-2); }
  html .statement + .frow { margin-top: 48px; border-top: 1px solid var(--sep-2); }
  html .frow-m { display: none; }
  html .frow-t h2 { font-family: var(--font); font-weight: 650; letter-spacing: -.015em; }
  html .frow-t p { margin-top: 4px; color: var(--label-2); font-size: 15px; }
  html .frow-l { margin-top: 8px; font-size: 15px; }
  html .car-ctl { margin-top: 12px; }
  /* 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); }
  html .src-hero { padding-bottom: 320px; }
  /* changes: the bigger picture behind one tap */
  html .ch-big > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; cursor: pointer; }
  html .ch-big > summary .note { flex-basis: 100%; order: 3; }
  html .ch-big > summary .chev { margin-left: auto; }
  html .ch-big[open] > summary .chev { transform: rotate(90deg); }
  /* 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-stats { display: none !important; }
  html .mp-oneline { display: block; margin-top: 12px; font-size: 15px; color: var(--label); }
  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-tl2 { display: grid; gap: 0; overflow: visible; -webkit-mask: none; mask: none; padding: 0 18px; }
  html .mp-tl2::after { display: none; }
  html .mp-coming:not(.all) .mp-tl2 > li:nth-child(n+5) { display: none; }
  html .mp-all { margin: 0 18px 10px; font-size: 15px; }
  html .mp-card { box-shadow: none; border: 1px solid var(--sep-2); }
  html .mp-photo { aspect-ratio: 16 / 7; }
  html .mp-dots { display: none; }
  html .mp-raise { background: none; padding: 12px 0 0; border-top: 1px solid var(--sep-2); border-radius: 0; }
  html .mp-status { font-size: 17px; }
  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-tl2 > .mp-stop { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto; align-items: start; gap: 12px; flex: none; min-width: 0; max-width: none; padding: 12px 0; border-top: 1px solid var(--sep-2); }
  html .mp-tl2 > .mp-stop.k-today { display: none; }
  html .mp-tl2 > .mp-stop:nth-child(2) { border-top: 0; }
  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; }
  html .mp-coming .mp-tl2 > .mp-stop::before, html .mp-coming .mp-tl2 > .mp-stop::after { display: 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; }
  html .mp-coming .mp-all { order: 3; align-self: flex-start; }
}
/* 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 */
  html .car-ctl { display: none; }
  html .statement p { font: 400 22px/1.4 var(--font); letter-spacing: -.01em; color: var(--label); }
  html .statement { margin-top: 48px; }
  html .frow { position: relative; }
  html .frow-l { position: static; font-size: 0; margin: 0; }
  html .frow-l .ico { position: absolute; right: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--label-3); }
  html .frow-l::after { content: ""; position: absolute; inset: 0; }
  html .frow-t { padding-right: 32px; }
  /* 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 */
  html .cmp-img { display: none; }
  html .cmp-card { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  /* 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, html .ch-big > 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-hero { padding-bottom: 200px; }
  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-dash { background: none; padding: 8px 0 0; border-radius: 0; }
  html .mp-coming { border: 0; padding: 0; background: none; }
  html .mp-coming .mp-sec-h, html .mp-coming .mp-tl2 { padding-left: 0; padding-right: 0; }
  html .mp-all { margin-left: 0; }
  html .mp-bldgs { margin-top: 40px; }
  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; }
  html .mp-oneline { 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 */
  html .footer-links a:not([href="#/audit"]), html .footer-links .tour-slot-f, html .footer-links .pwa-foot-link { display: none !important; }
  html .footer-links { margin-top: 12px; padding-top: 0; border: 0; }
  /* 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 .hero { width: auto; margin: 0; padding: 28px 0 8px; background: none; border-radius: 0; }
  html .hero-media { padding-top: 0; margin-top: 24px; }
  html .big-search { position: relative; left: auto; right: auto; top: auto; margin-bottom: 16px; }
  html .slides { height: 180px; border-radius: 24px; box-shadow: none; }
  html .slides::after { display: none; }
  html .slide-cap { height: 34px; font-size: 13px; }
  html .statement { display: none; }
  html .frow, html .frow.flip { padding: 20px 0; }
  html .statement + .frow, html .hero + .frow, html .frow:first-of-type { margin-top: 32px; }
  /* 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: 400 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(10 58 140 / .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 .ch-sel { display: flex; align-items: center; gap: 12px; margin: 0 0 32px; font-size: 14px; font-weight: 600; color: var(--label-2); }
  html .ch-sel select { flex: 1; height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--cool); font-size: 17px; font-weight: 600; color: var(--label); -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000c1f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
  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"] > .src-hero { order: 1; }
  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-hero { padding: 24px 0 0; background: none; border-radius: 0; min-height: 0; }
  html .src-statue { display: none; }
  html .src-hero .page-head h1 { font-size: 36px; }
  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: 400 28px/1.08 var(--display); margin-left: 0; }
  /* compare */
  html .cmp-street a { text-decoration: none; }
  /* my properties: 20 px margins, one surface (the card), one primary action */
  html .mp-dash { padding: 8px 0 0; }
  html .mp-coming, html .mp-oneline, html .mp-top, html .mp-exbar { margin-left: 0; margin-right: 0; }
  html .mp-next { display: none; }
  html .mp-ex { display: none; }
  html .mp-photo { aspect-ratio: auto; height: 120px; }
  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; }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) { html .mp-dash { margin: 0; padding: 8px 0 0; border-radius: 0; } }
/* calm pass, round 4 */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .footer-nla { font-size: 12.5px; }
  html .footer-links { display: none; }
  html .footer-meta { margin-top: 8px; }
  /* 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); }
  html .slides { height: 160px; }
  html .tour-slot { margin-top: 4px; } /* the tour stays reachable on phones, portrait and landscape */
  html .hero .tour-entry { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
  /* 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; }
  html .rp-sel { display: flex; margin-bottom: 24px; }
  /* 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; }
  html .ch-big { margin-top: 32px; }
  /* compare */
  html .cmp-head { gap: 8px; }
  html .cmp-street { font-size: 17px; }
  /* 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-photo { grid-row: span 1; height: 80px; border-radius: 16px; }
  html .mp-card > .mp-photo .mp-place { display: none; }
  html .mp-card > .mp-body { padding: 0; min-width: 0; }
  html .mp-status { font: 650 17px/1.3 var(--font); letter-spacing: -.01em; margin-top: 6px; }
  html .mp-status::before { display: none; }
  html .mp-acts .btn:not(.primary) { display: none; }
  html .mp-acts .btn.primary { width: 100%; }
  html .mp-grid { gap: 20px; }
  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 .slide-cap { display: none; }
  html .hero-nla { display: 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-dash, html .mp-dash > *, html .mp-top, html .mp-bldgs .mp-sec-h { 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(0 12 31 / .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 .frow, html .frow.flip { padding: 16px 0; }
  html .cmp-head { margin-top: 32px; }
  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-card > .mp-photo { height: 120px; margin-bottom: 14px; }
  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 */
  html .rp-answers .answers-head h2 { font: 650 17px/1.3 var(--font); }
  /* 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: 900px), (pointer: coarse) and (max-height: 500px) {
  html .tabs a { height: var(--tabbar-h); min-height: 0; }
  html .tab-ind { top: 4px; height: calc(var(--tabbar-h) - 8px); width: calc(var(--w, 64px) - 8px); max-width: 76px; border-radius: 16px; transform: translateX(calc(var(--x, 0px) + var(--w, 0px) / 2 - min(calc(var(--w, 64px) - 8px), 76px) / 2)); }
}
@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 .footer { margin-top: 48px; }
  html .footer-inner { padding-top: 16px; padding-bottom: calc(16px + var(--tabbar-h) + env(safe-area-inset-bottom)); }
  html .footer-nla { font-size: 12px; line-height: 1.45; }
  html .footer-nla .nla-l { display: none; }
  html .footer-nla .nla-s { display: inline; }
  html .footer-nla .linkish { display: none; }
  html .footer-meta { font-size: 11.5px; margin-top: 6px; }
  html .footer-meta .fw { font-size: 15px; }
  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-oneline { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sep-2); }
  html .mp-coming .mp-sec-h { display: block; }
  html .mp-coming .mp-sec-h > span { display: block; margin-top: 4px; font-size: 14px; color: var(--label-2); }
  html .mp-coming { margin-top: 40px; }
  html .mp-bldgs { margin-top: 48px; }
}

/* tab icons: inline SVG (no masks) */
.tabs .tab-i { display: none; }
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
  html .tabs a::before { content: none; display: none; }
  html .tabs .tab-i { display: block; width: 24px; height: 24px; flex: none; margin-top: 2px; }
}
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) { html .tabs a[aria-current="page"] .tab-i { animation: tab-pop .45s var(--spring); } }

@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .mp-oneline { margin-top: 10px; padding-top: 0; border-top: 0; }
  html .mp-hrow .gsi { min-height: 44px; padding: 0 16px; border: 1px solid var(--sep); border-radius: 999px; background: #fff; color: var(--label); }
  html .mp-top .mp-lead { display: block; font-size: 13px; }
}
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
  html .tabs { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
}
/* 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; }
}

/* 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 .tabs a { font-size: 0; }
  html .tabs a[data-short]::after { content: none; }
  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; }
  html .nav-inner { padding: 0 12px; } /* 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; }
}