/* Home, sign-in and Settings: the portal page's own styles, linked where its <style> was,
     just before home.css (the order decides which rule wins). A file of its own because the
     page is sent again on every visit, while this is kept for a year at its ?v= address. */
  :root {
    --ground: #F1F2F6;
    --card: #FFFFFF;
    --ink: #1E2230;
    --muted: #636A7D;
    --line: #D8DBE4;
    --door: #2B3A67;
    --door-deep: #1F2B4F;
    --focus: #5468E7;
    --bad: #B23A2E;
    --good: #2F7A55;
    --trips: #D9662E;
    --budget: #173B2D;
    --box: #7A4A1E;
    --list: #7B3B62;
    --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--text); font-size: 15px; line-height: 1.5; }
  button, input, select { font: inherit; color: inherit; }
  a { color: var(--door); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
  /* iOS zooms the page in when a field with text under 16px is tapped, and never zooms back out. */
  @media (pointer: coarse) { input:not([type=checkbox]), select, textarea { font-size: max(16px, 1em); } }

  /* ---------- sign-in: the front door, and the PIN in a Pattern Notebook pop-up ----------
     The page is the door: the accent colour, the site's name and one button. The
     PIN is typed into a pop-up (NUI.open) that rises over an ink veil on computers
     and drops in over an accent-tinted veil on phones, like every other pop-up on
     the site. The accent follows Settings → Appearance. */
  :root { --n-accent: var(--ijs-accent, #2B3A67); }
  .door-land { position: fixed; inset: 0; z-index: 40; overflow: auto; color: #fff;
    background: radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--n-accent) 42%, white) 0%, var(--n-accent) 55%, color-mix(in srgb, var(--n-accent) 62%, black) 100%); }
  .door-stage { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 6vw, 90px); max-width: 1080px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 40px) 32px calc(env(safe-area-inset-bottom) + 40px); }
  .door-art { display: grid; place-items: center; }
  .door-art .leaf { position: relative; width: min(300px, 80%); aspect-ratio: 3 / 5; border-radius: 26px 26px 8px 8px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--n-accent) 55%, white) 0%, color-mix(in srgb, var(--n-accent) 85%, white) 40%, color-mix(in srgb, var(--n-accent) 70%, black) 100%);
    box-shadow: 0 40px 90px rgba(8,10,20,.45), inset 0 0 0 1px rgba(255,255,255,.25); transform: perspective(900px) rotateY(-9deg); transform-origin: left center; animation: door-in .9s cubic-bezier(.2,.8,.2,1) both; }
  .door-art .frame { position: absolute; inset: 18px; border: 1.5px solid rgba(255,255,255,.28); border-radius: 18px 18px 4px 4px; }
  .door-art .frame::after { content: ""; position: absolute; left: 18px; right: 18px; top: 46%; border-top: 1.5px solid rgba(255,255,255,.2); }
  .door-art .knob { position: absolute; right: 34px; top: 52%; width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: inset -2px -2px 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.3); }
  @keyframes door-in { from { opacity: 0; transform: perspective(900px) rotateY(-28deg); } }
  .door-copy { max-width: 30em; }
  .door-copy .n-eyebrow { color: rgba(255,255,255,.66); }
  .door-copy h1 { font-family: var(--n-display); font-weight: 400; font-size: clamp(3.6em, 8vw, 6.2em); line-height: .9; letter-spacing: -.045em; color: #fff; margin: .15em 0 .3em; }
  .door-copy h1 em { font-style: italic; color: color-mix(in srgb, #fff 78%, var(--n-accent)); }
  .door-lede { font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,.82); margin: 0 0 1.6em; max-width: 30ch; }
  .door-acts { display: flex; gap: 10px; flex-wrap: wrap; }
  .door-land .n-b.solid { background: #fff; border-color: #fff; color: var(--n-accent-deep); box-shadow: 0 10px 30px rgba(8,10,20,.25); }
  .door-land .n-b.solid:hover { background: color-mix(in srgb, #fff 88%, var(--n-accent)); }
  .door-land .door-google { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }
  .door-land .door-google:hover { background: rgba(255,255,255,.18); color: #fff; }
  .pin-pop-body .forgot .n-tabs-s { margin: 0 0 12px; }
  .ed-pop h3.ac-sub { font-family: var(--n-display); font-weight: 400; font-size: 1.2em; color: var(--n-head); margin: 1.2em 0 .2em; padding-top: .9em; border-top: 1px solid var(--n-line); }
  .n-fld label.pp-rm { display: flex; gap: .5em; align-items: center; margin: .45em 0 .2em; font-size: .9em; text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--n-ink); }
  .ac-phone { align-items: center; gap: 8px; min-height: 2.6em; }
  #acPhoneWrap .lbl { display: block; font-size: .86em; color: var(--n-muted); margin-bottom: .3em; }
  .pin-pop-body .forgot .row + .row { margin-top: 8px; }
  .pin-pop-body #appleBtn { margin-top: 8px; }
  .door-note { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 14px; padding: 10px 14px; margin: 0 0 18px; font-size: 14px; }
  .door-version { margin: 2.4em 0 0; font-size: 12px; color: rgba(255,255,255,.55); }
  @media (max-width: 760px) {
    .door-stage { grid-template-columns: 1fr; gap: 20px; align-content: center; text-align: left; padding-left: 22px; padding-right: 22px; }
    .door-art .leaf { width: 118px; border-radius: 18px 18px 6px 6px; }
    .door-art { justify-items: start; }
    .door-art .frame { inset: 9px; border-radius: 12px 12px 3px 3px; }
    .door-art .knob { right: 16px; width: 9px; height: 9px; }
    .door-acts .n-b { flex: 1 1 100%; }
  }

  /* the pop-ups: PIN, forgotten PIN, choose a PIN */
  .pin-pop .n-panel, .n-panel.pin-pop { width: min(420px, 100%); }
  .pin-pop-body h2 { margin: 6px 0 4px; }
  .door-lede-pop { margin: 0 0 18px; color: var(--n-muted); font-size: .95em; }
  .pin-pop-body .msg { font-size: 14px; margin: 10px 0 0; }
  .pin-pop-body .msg.bad { color: var(--n-rose); }
  .pin-pop-body .msg.good { color: var(--n-accent-deep); }
  .pin-pop-body .linkbtn { color: var(--n-accent); text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
  .pin-pop-body .forgot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--n-line); }
  /* Confirm it's you (confirmIt): the PIN, or one of your passkeys, before adding or removing a way in. */
  .confirm-pop .cf-ask { margin: 10px 0 12px; }
  .confirm-pop .cf-pk { width: 100%; margin-top: 10px; }
  .confirm-pop .msg:empty { margin: 0; }
  @media (max-width: 760px) { .confirm-pop .n-b, .confirm-pop .n-inp { min-height: 44px; } }
  .pin-pop-body .forgot h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.35em; letter-spacing: -.02em; color: var(--n-head); margin: 0 0 4px; }
  .pin-pop-body .forgot .row { display: flex; gap: 8px; }
  .pin-pop-body .forgot .row .n-inp { flex: 1; min-width: 0; }
  .pin-pop-body .or { display: flex; align-items: center; gap: 12px; color: var(--n-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin: 18px 0 12px; }
  .pin-pop-body .or::before, .pin-pop-body .or::after { content: ""; flex: 1; height: 1px; background: var(--n-line); }
  .pin-pop-body .n-b.block { width: 100%; margin-top: 14px; min-height: 2.9em; }
  .pin-pop-body .n-fld { margin-bottom: 12px; }
  .pin-pop-body .n-loading { color: var(--n-muted); display: flex; align-items: center; gap: .6em; padding: 1.2em 0; }
  .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
  .keypad button { height: 52px; border-radius: 14px; border: 1px solid var(--n-line); background: var(--n-white); font-family: var(--n-sans); font-size: 21px; font-weight: 550; color: var(--n-head); cursor: pointer; display: grid; place-items: center; transition: background .12s, transform .08s; -webkit-tap-highlight-color: transparent; }
  .keypad button:hover { background: var(--n-accent-soft); border-color: var(--n-accent-line); }
  .keypad button:active { transform: scale(.96); background: var(--n-accent-soft); }
  .keypad button.fn { font-size: 13px; font-weight: 600; color: var(--n-muted); background: var(--n-well); }
  .keypad button svg { width: 22px; height: 22px; }
  @media (max-width: 760px) { .keypad button { height: 56px; border-radius: 999px; } }

  .pin { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .pin .cell {
    height: 58px; border-radius: 14px; background: var(--n-white, #fff); border: 1px solid var(--n-line-2, var(--line));
    display: grid; place-items: center; font-family: var(--n-sans, var(--display)); font-size: 26px; font-weight: 600; color: var(--n-head, var(--ink));
    transition: border-color .15s, box-shadow .15s;
  }
  .pin .cell.on { border-color: var(--n-accent); box-shadow: 0 0 0 3px var(--n-accent-soft); }
  .pin input {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px;
    border: 0; background: transparent; caret-color: transparent; letter-spacing: 3em;
  }
  .pin.shake { animation: shake .32s; }
  @keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
  @media (max-width: 760px) { .pin { gap: 6px; } .pin .cell { height: 52px; border-radius: 999px; } }

  .primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px;
    border-radius: 10px; border: 0; background: var(--door); color: #fff; font-weight: 600; cursor: pointer;
  }
  .primary:hover { background: var(--door-deep); }
  .primary:disabled { opacity: .55; cursor: default; }
  .secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px;
    border-radius: 9px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none;
  }
  .secondary:hover { border-color: #B9BECD; }
  .danger { color: var(--bad); border-color: #E7C6C1; }
  .wide { width: 100%; margin-top: 14px; }
  .or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--muted); font-size: 13px; }
  .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .msg { margin: 14px 0 0; font-size: 14px; }
  .msg.good { color: var(--good); }
  .linkbtn { background: none; border: 0; padding: 0; color: var(--door); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
  .forgot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
  .forgot .row { display: flex; gap: 8px; }
  .forgot .row .text { flex: 1; min-width: 0; }
  .pin2 { display: grid; gap: 12px; margin-bottom: 16px; }
  .manage { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; margin-top: 22px; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; }
  .manage:hover { border-color: #B8BDCF; }
  .manage .swatch { background: var(--door); align-self: stretch; }
  .manage .body { padding: 16px 18px; }
  .manage .name { font-family: var(--display); font-weight: 700; font-size: 17px; display: block; }
  .manage .desc { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
  .manage .open { padding: 0 20px; color: var(--door); font-weight: 700; }
  main.people { max-width: 860px; margin: 0 auto; padding: 30px 22px calc(env(safe-area-inset-bottom) + 80px); }
  main.people section.owner { margin-top: 0; }
  main.people .intro { color: var(--muted); margin: 0 0 22px; max-width: 64ch; }
  .mailrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 22px; border-bottom: 1.5px solid var(--line); }
  .tab { padding: 9px 14px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1.5px; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
  .tab.is-active { color: var(--door); border-bottom-color: var(--door); }
  .panel h2 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; margin: 0 0 4px; }
  .panel > p.intro { color: var(--muted); margin: 0 0 18px; max-width: 64ch; }
  .share-app { margin-top: 26px; }
  .share-app h3 { font-family: var(--display); font-size: 19px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
  .share-app h3 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: inline-block; }
  .share-item { background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
  .share-item > button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
  .share-item > button:hover { background: #F7F8FB; }
  .share-item .iname { font-weight: 700; flex: 1; min-width: 0; }
  .share-item .isub { color: var(--muted); font-size: 13px; }
  .share-item .who { padding: 4px 14px 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
  .share-item .who .item { padding-top: 8px; }
  .mailcard { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 18px; }
  .mailcard h3 { margin: 0 0 12px; font-family: var(--display); font-size: 19px; }
  .mailcard textarea.text { min-height: 190px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; line-height: 1.5; }
  .field .lbl { font-size: 13px; color: var(--muted); }
  /* the email editor: a Quill "Snow"-style toolbar over the page, from the Pattern Notebook */
  .mail-ed { --n-accent: var(--ijs-accent, #2B3A67); font-family: var(--text); border-radius: 12px; position: relative; overflow: visible; }
  .mail-ed .tb { border-radius: 12px 12px 0 0; gap: 2px; }
  .mail-ed .tb button { font: 600 15px/1 Georgia, serif; }
  .mail-ed .tb button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mail-ed .tb button:disabled, .mail-ed .tb select:disabled { opacity: .45; cursor: default; }
  .mail-ed .tb select { font: inherit; font-size: 13.5px; cursor: pointer; }
  .mail-ed .tb .ins { margin-left: auto; max-width: 9.5em; }
  .mailcard > .row { display: flex; gap: 8px; margin-top: 12px; }
  .mailcard .field { grid-template-columns: minmax(0, 1fr); }
  .mail-ed .area { min-height: 230px; font-size: 15px; line-height: 1.55; border-radius: 0 0 12px 12px; }
  .mail-ed .area:focus { box-shadow: inset 0 0 0 2px var(--n-accent-soft); }
  .mail-ed .area h2 { font-size: 20px; font-weight: 800; margin: 0 0 .4em; letter-spacing: -.01em; }
  .mail-ed .area h3 { font-family: var(--text); font-size: 17px; font-weight: 700; margin: 0 0 .4em; color: var(--ink); }
  .mail-ed .area .ph { cursor: default; user-select: all; }
  .mail-ed .area[contenteditable="false"] { background: #F7F8FB; color: var(--muted); }
  .mail-ed .ed-link { position: absolute; z-index: 5; display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20,24,40,.16); padding: 6px 8px; font-size: 13px; color: var(--muted); }
  .mail-ed .ed-link input { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; min-width: 220px; font-size: 14px; }
  .mail-ed .ed-link button { border: 0; background: none; color: var(--n-accent); font-weight: 650; cursor: pointer; padding: 4px 6px; }
  .mail-ed .ed-link button.rm { color: var(--bad); }
  @media (max-width: 700px) { .mail-ed .ed-link { left: 8px !important; right: 8px; } .mail-ed .ed-link input { min-width: 0; flex: 1; } }
  .placeholders { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
  .placeholders code { background: #E6E9F6; color: var(--door); border-radius: 6px; padding: 2px 7px; font-size: 12.5px; cursor: pointer; }
  .preview { border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px; margin-top: 12px; background: #F7F8FB; }
  .preview .pv-head { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
  .preview .pv-body { background: #fff; border-radius: 10px; overflow: hidden; }
  .msg.bad { color: var(--bad); }
  .note { background: #E6E9F6; border-radius: 10px; padding: 12px 14px; margin: 0 0 20px; font-size: 14px; }


  /* ---------- signed in ---------- */
  main.home { max-width: 1040px; margin: 0 auto; padding: 30px 26px calc(env(safe-area-inset-bottom) + 80px); }
  .hello { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 5vw, 46px); letter-spacing: -.03em; line-height: 1; margin: 0; }
  .hello-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
  .hello-sub { color: var(--muted); margin: 8px 0 0; }
  .dash h2 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; margin: 34px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .dash h2 small { font-family: var(--text); font-weight: 500; font-size: 14px; color: var(--muted); letter-spacing: 0; }
  .dash h2:first-child { margin-top: 0; }
  /* The outside-services notice (3.13.7): a card above Today until it is agreed to, never a
     pop-up. Its words are the page's own colour, and its link and button are 44 px on a phone
     or a touch screen, as every control on the site is. */
  .outside-notice { background: var(--card); border: 1.5px solid var(--line); border-left: 5px solid var(--door); border-radius: 14px; padding: 18px 20px; margin: 0 0 26px; overflow-wrap: break-word; }
  .outside-notice h2 { margin: 0 0 10px; }
  .outside-notice p, .outside-notice li { margin: 0 0 10px; max-width: 72ch; }
  .outside-notice ul { margin: 0 0 10px; padding-left: 1.25em; }
  .outside-notice-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 16px; }
  .outside-notice-acts a { display: inline-flex; align-items: center; font-weight: 600; text-underline-offset: 3px; }
  .outside-notice .msg { margin: 12px 0 0; }
  @media (pointer: coarse), (max-width: 760px) { .outside-notice-acts a, .outside-notice-acts .n-b { min-height: 44px; } .outside-notice-acts .n-b { min-width: 88px; } }
  @media (max-width: 760px) { .outside-notice { padding: 16px; } }
  .tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .tile { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; text-decoration: none; color: inherit; display: block; position: relative; overflow: hidden; }
  .tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--door)); }
  a.tile:hover { border-color: #B9BECD; }
  .tile .k { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .tile .v { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; margin-top: 4px; }
  .tile .v small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
  .tile .d { color: var(--muted); font-size: 13px; margin-top: 4px; }
  .two { display: grid; gap: 22px 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
  .two > div { min-width: 0; }
  .list { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
  .list .li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
  .list .li:first-child { border-top: 0; }
  a.li:hover { background: #F7F8FB; }
  .list .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--door)); }
  .list .ln { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list .ls { color: var(--muted); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list .lr { color: var(--muted); font-size: 13px; white-space: nowrap; text-align: right; }
  .list .lr b { display: block; color: var(--ink); font-weight: 650; }
  .list .empty { padding: 16px 14px; color: var(--muted); }
  .sugg { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .sg { display: grid; grid-template-columns: 40px 1fr; gap: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; text-decoration: none; color: inherit; align-items: start; }
  .sg:hover { border-color: #B9BECD; }
  .sg .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--door)) 14%, white); color: var(--c, var(--door)); }
  .sg .ic svg { width: 22px; height: 22px; }
  .sg .t { font-weight: 700; }
  .sg .s { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
  .sg .go { color: var(--c, var(--door)); font-weight: 700; font-size: 13px; margin-top: 6px; display: inline-block; }
  .checks { display: grid; gap: 8px; }
  .chk { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
  .chk .m { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--good); font-size: 13px; font-weight: 800; }
  .chk.off .m { background: #C9A03B; }
  .chk .cn { font-weight: 650; }
  .chk .cs { display: block; color: var(--muted); font-size: 13px; }
  .chk .ca { color: var(--door); font-weight: 650; font-size: 13px; text-decoration: none; white-space: nowrap; }
  table.usage { width: 100%; border-collapse: collapse; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14px; }
  table.usage th, table.usage td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
  table.usage th { background: #F7F8FB; color: var(--muted); font-size: 12.5px; font-weight: 600; border-top: 0; }
  table.usage td:first-child { font-weight: 700; }
  table.usage .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 7px; vertical-align: 0; }
  table.usage .sub { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
  .wrap-usage { overflow-x: auto; border-radius: 14px; }
  .inv { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .inv-app { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; }
  .inv-app h3 { font-family: var(--display); font-size: 18px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
  .inv-app h3 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
  .inv-app h3 a { color: var(--muted); font-family: var(--text); font-size: 13px; font-weight: 600; margin-left: auto; text-decoration: none; }
  .inv-app ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 14px; }
  .inv-app li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; }
  .inv-app li::before { content: "✓"; color: var(--good); font-weight: 800; }
  .inv-app li small { display: block; color: var(--muted); font-size: 12.5px; }
  .inv-app li a { color: inherit; }
  .apps { display: grid; gap: 12px; }
  .app {
    display: grid; grid-template-columns: 10px 1fr auto; align-items: stretch; background: var(--card);
    border-radius: 14px; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); overflow: hidden; min-height: 96px;
  }
  .app:hover { border-color: #B9BECD; }
  .app .swatch { background: var(--c); }
  .app .body { padding: 18px 20px; }
  .app .name { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.015em; line-height: 1.15; }
  .app .desc { color: var(--muted); margin-top: 2px; }
  .app .side { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; padding: 0 20px; color: var(--muted); font-size: 13px; text-align: right; }
  .app .open { color: var(--c); font-weight: 700; font-size: 15px; }
  .app.off { opacity: .7; }
  .empty-apps { background: var(--card); border: 1.5px dashed var(--line); border-radius: 14px; padding: 22px; color: var(--muted); }

  /* appearance: colour schemes */
  .schemes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .scheme { position: relative; display: block; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 10px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
  .scheme:hover { border-color: #B9BECD; }
  .scheme.is-selected { border-color: var(--door); box-shadow: 0 0 0 3px color-mix(in srgb, var(--door) 20%, white); }
  .scheme .strip { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; height: 54px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
  .scheme .strip i { display: block; }
  .scheme .sn { font-family: var(--display); font-weight: 700; font-size: 16px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
  .scheme .sn .badge { margin: 0; }
  .scheme .sd { color: var(--muted); font-size: 13px; margin-top: 2px; }
  .scheme-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; position: sticky; bottom: 0; z-index: 5; background: var(--ground); padding: 12px 0; border-top: 1px solid var(--line); }
  .scheme .when { color: var(--muted); font-size: 12px; margin-top: 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .scheme .mini { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--door); text-decoration: underline; cursor: pointer; }
  .scheme .mini.danger { color: #B3261E; }
  .scheme.is-new { border-style: dashed; }
  .subhead { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 30px 0 4px; }
  .style-import { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
  .style-import textarea { width: 100%; min-height: 120px; resize: vertical; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; }
  .style-import .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
  .filebtn { display: inline-flex; align-items: center; cursor: pointer; }
  .legend { display: flex; gap: 12px 18px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin: 0 0 14px; }
  .legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 6px; vertical-align: -1px; }

  section.owner { margin-top: 52px; }
  section.owner h2 { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; margin: 0 0 4px; }
  section.owner > p { color: var(--muted); margin: 0 0 18px; max-width: 62ch; }
  .sechead { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; justify-content: space-between; }

  /* permission grid: people down, apps across */
  .grid { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
  .grow { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(var(--apps), minmax(120px, 1fr)) 44px; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
  .grow.head { border-top: 0; background: #F7F8FB; color: var(--muted); font-size: 13px; font-weight: 600; padding-top: 10px; padding-bottom: 10px; }
  .grow.head .appcol { display: flex; align-items: center; gap: 7px; }
  .grow.head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
  .person .pname { font-weight: 650; }
  .person .psub { color: var(--muted); font-size: 12.5px; }
  .badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: #E6E9F6; color: var(--door); margin-left: 6px; vertical-align: 1px; }
  .badge.off { background: #F4E1DE; color: var(--bad); }
  select.role { width: 100%; min-height: 36px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; padding: 0 8px; }
  select.role[data-v="edit"] { border-color: #9FB0E8; }
  select.role[data-v=""] { color: var(--muted); }
  .fixed { color: var(--muted); font-size: 13px; }
  .expand { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; }
  .expand svg { transition: transform .15s; }
  .expand[aria-expanded="true"] svg { transform: rotate(180deg); }

  .grow > * { min-width: 0; }
  .detail { grid-column: 1 / -1; margin: 2px -16px -12px; background: #F7F8FB; border-top: 1px solid var(--line); padding: 18px 16px 20px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .detail > div { min-width: 0; }
  .detail h3 { font-size: 14px; margin: 0 0 8px; }
  .detail .full { grid-column: 1 / -1; }
  .field { display: grid; gap: 4px; margin-bottom: 10px; }
  .field label { font-size: 13px; color: var(--muted); }
  .field .row { display: flex; gap: 8px; flex-wrap: wrap; }
  input.text { flex: 1 1 170px; min-width: 0; min-height: 38px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; padding: 0 10px; font-size: 16px; }
  .check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
  .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--door); }
  .check small { display: block; color: var(--muted); }
  .items { display: grid; gap: 6px; }
  .item { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: center; font-size: 14px; }
  .item .iname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hint { color: var(--muted); font-size: 13px; }

  .appswitch { display: grid; gap: 10px; }
  .switchrow { display: grid; grid-template-columns: 10px 1fr auto; gap: 14px; align-items: center; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; padding-right: 16px; min-height: 62px; }
  .switchrow .swatch { align-self: stretch; background: var(--c); }
  .switchrow .sname { font-weight: 650; }
  .switchrow .surl { color: var(--muted); font-size: 13px; }

  .door-version:empty { display: none; }
  .site-foot { text-align: center; font-size: 12px; color: var(--muted); padding: 28px 16px calc(env(safe-area-inset-bottom) + 18px); }
  .site-foot:empty { display: none; }
  .ver-line { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
  dialog { border: 0; border-radius: 16px; padding: 0; width: min(460px, calc(100vw - 28px)); box-shadow: 0 20px 60px rgba(20,24,40,.35); }
  dialog::backdrop { background: rgba(20,24,40,.45); }
  .dlg { padding: 22px 22px 18px; }
  .dlg h2 { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 0 0 14px; letter-spacing: -.01em; }
  .dlg .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
  .dlg .appsel { display: grid; grid-template-columns: 1fr 150px; gap: 8px 10px; align-items: center; margin-top: 6px; }

  .toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 22px); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 50; max-width: calc(100vw - 32px); }
  .toast.bad { background: var(--bad); }

  @media (max-width: 700px) {
    main.home, main.people { padding-left: 16px; padding-right: 16px; }
    main.home { padding-top: 22px; }
    .app { grid-template-columns: 8px 1fr; }
    .app .side { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 12px; padding: 0 20px 16px; margin-top: -8px; }
    .grow { grid-template-columns: minmax(0, 1fr) 44px; }
    section.owner > p { margin-top: 14px; }
    .grow.head { display: none; }
    .grow .appcell { grid-column: 1 / -1; display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; }
    .grow .appcell::before { content: attr(data-label); font-size: 13px; color: var(--muted); }
    .grow .person { grid-row: 1; }
    .grow .expand { grid-row: 1; grid-column: 2; }
    .detail { grid-template-columns: minmax(0, 1fr); }
    .item { grid-template-columns: minmax(0, 1fr) 128px; }
  }

  /* ---------- Settings, in the Pattern Notebook style ---------- */
  #settings { background: var(--n-cream); min-height: 100vh; }
  #settings main.people { max-width: 920px; }
  #settings .tabs { display: inline-flex; flex-wrap: wrap; gap: 0; padding: .25em; border: 1px solid var(--n-line); border-radius: 16px; background: var(--n-well); margin: 0 0 14px; }
  #settings .tab { border: 0; margin: 0; padding: .5em 1.05em; border-radius: 12px; color: var(--n-muted); font-weight: 550; font-size: .92em; }
  #settings .tab.is-active { background: var(--n-white); color: var(--n-head); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
  #settings .panel h2, #settings section.owner h2 { font-family: var(--n-display); font-weight: 400; font-size: 2.1rem; letter-spacing: -.035em; color: var(--n-head); margin: 0 0 6px; }
  #settings .panel > p.intro, #settings .intro { color: var(--n-muted); font-size: .95em; }
  #settings .sechead { align-items: flex-start; margin-bottom: 14px; }
  #settings .sechead .intro { margin: 0; }
  #settings .note { background: var(--n-sky-soft); border: 1px solid var(--n-sky-line); color: var(--n-body); border-radius: 12px; }
  #settings .ver-line { color: var(--n-faint); font-size: 12px; }
  #settings .primary { min-height: 0; height: calc(2.6em + .3em); border-radius: 999px; padding: 0 1.3em; background: var(--n-accent); font-weight: 550; font-size: .92em; }
  #settings .primary:hover { background: var(--n-accent-deep); }
  #settings .secondary { min-height: 0; height: 2.5em; border-radius: 999px; border: 1px solid var(--n-line-2); background: var(--n-white); color: var(--n-body); font-weight: 550; font-size: .88em; padding: 0 1.1em; }
  #settings .secondary:hover { border-color: var(--n-accent-line); color: var(--n-head); }
  #settings input.text { border: 1px solid var(--n-line-2); border-radius: 12px; min-height: 2.8em; padding: 0 .85em; }
  #settings input.text:focus { outline: none; border-color: var(--n-accent); box-shadow: 0 0 0 3px var(--n-accent-soft); }
  #settings .mailcard, #settings .switchrow, #settings .style-import, #settings .scheme { border: 1px solid var(--n-line); border-radius: 18px; background: var(--n-white); box-shadow: var(--n-shadow-card); }
  #settings .mailcard h3, #settings .subhead { font-family: var(--n-display); font-weight: 400; letter-spacing: -.02em; color: var(--n-head); }
  #settings .scheme.is-selected { border-color: var(--n-accent); box-shadow: 0 0 0 3px var(--n-accent-soft); }
  #settings .scheme-actions { background: var(--n-cream); border-top-color: var(--n-line); }
  #settings .share-app h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.35em; color: var(--n-head); }
  .ptools { margin: 4px 0 12px; }
  .ptools .n-ig { max-width: 26em; flex: 1; }
  .ptools .n-ig input { height: 2.8em; }
  .plist { border: 1px solid var(--n-line); border-radius: 18px; background: var(--n-white); box-shadow: var(--n-shadow-card); overflow: hidden; }
  .plist.compact { box-shadow: none; border-radius: 14px; margin: 4px 0 0; }
  .owners-box { margin: 0 0 .4em; }
  .owners-box .own-acts { display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--n-line-2); border-radius: 14px; }
  .owners-box .own-acts .n-hint { margin: 0; }
  .prow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--n-line); cursor: pointer; transition: background .12s; }
  .prow:first-child { border-top: 0; }
  .prow:hover { background: var(--n-well); }
  .plist.compact .prow { cursor: default; padding: 10px 12px; } .plist.compact .prow:hover { background: none; }
  .prow.off { opacity: .62; }
  .prow .pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .prow .pname { font-weight: 600; color: var(--n-head); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .prow .psub { color: var(--n-muted); font-size: .84em; }
  .prow .papps { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 45%; }
  .prow select.n-inp { width: 9.5em; height: 2.4em; font-size: .86em; flex: none; }
  .prow .n-av.q { background: var(--n-well); color: var(--n-muted); text-shadow: none; }
  .appchip { display: inline-flex; align-items: center; gap: 5px; height: 1.9em; padding: 0 .65em; border-radius: 20px; background: var(--n-well); border: 1px solid var(--n-line); color: var(--n-body); font-size: .78em; white-space: nowrap; }
  .appchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
  .appchip small { color: var(--n-muted); }
  i.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 1px; margin-right: 4px; }
  .srow2 .n-avs .n-av { width: 2em; height: 2em; font-size: .7em; }
  .ed-pop .n-hint .n-bd { margin-left: 4px; }
  .person-pop { width: min(680px, 100%); }
  .pp-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; padding-right: 40px; }
  .pp-head .n-av { width: 3.2em; height: 3.2em; font-size: 1em; border-radius: 16px; }
  .pp-head h2 { margin: 2px 0 2px !important; }
  .pp-tabs { margin-bottom: 16px; }
  .ed-pop section[data-pane] { min-height: 12em; }
  .ed-pop .n-setrow > span:first-child { min-width: 0; }
  .ed-pop .n-setrow small { display: block; }
  .seg { flex: none; }
  .seg label { position: relative; padding: .42em .8em; border-radius: 10px; color: var(--n-muted); cursor: pointer; font-size: .92em; white-space: nowrap; }
  .seg label.on { background: var(--n-white); color: var(--n-head); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 550; }
  .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .seg label:has(input:focus-visible) { outline: 2px solid var(--n-accent); outline-offset: 1px; }
  .share-acc { box-shadow: none; }
  .share-acc .ic { background: var(--n-well) !important; }
  .share-acc .srow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--n-line); }
  .share-acc .srow:first-child { border-top: 0; }
  .share-acc .srow .sname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .share-acc .srow small { color: var(--n-faint); }
  .share-acc select.n-inp { width: 9em; height: 2.3em; font-size: .86em; flex: none; }
  .pp-mail { padding: 12px 0; border-bottom: 1px solid var(--n-line); }
  .pp-mail b { color: var(--n-head); }
  .pp-danger { margin-top: 14px; }
  .ed-pop .msg { color: var(--n-rose); font-size: .9em; }
  .toast { top: calc(env(safe-area-inset-top) + 16px); bottom: auto; background: var(--n-accent, var(--ink)); border-radius: 999px; padding: 10px 18px; font-family: var(--n-sans); box-shadow: var(--n-shadow-menu); z-index: 2147483100; }
  .toast.bad { background: var(--n-rose); }
  @media (max-width: 760px) {
    .prow { flex-wrap: wrap; }
    .prow .papps { order: 3; max-width: none; width: 100%; justify-content: flex-start; padding-left: calc(2.4em * .82 + 12px); }
    .srow2 .n-avs { display: none; }
    .ed-pop .n-setrow { flex-direction: column; align-items: flex-start; }
    .seg { width: 100%; } .seg label { flex: 1; text-align: center; padding: .5em .3em; }
    #settings .tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; }
  }

  /* ---------- Settings → APIs: the switches, the look-up order, and (3.13.4) the routing
     table, the Gemini controls and the key cards from api-routing.js ---------- */
  #tabApis .api-rows { list-style: none; padding: 0; margin: .6em 0 0; display: flex; flex-direction: column; gap: .4em; }
  #tabApis .api-row { gap: .6em; padding: .5em .8em; background: var(--n-well); border: 1px solid var(--n-line); border-radius: 8px; }
  #tabApis .api-row:last-child { border-bottom: 1px solid var(--n-line); }
  #tabApis .api-grow { flex: 1; min-width: 0; }
  #tabApis .api-grow small, #tabApis .api-route small, #tabApis .api-key small { display: block; }
  /* A tick box is small; the label round it is what a finger aims at. */
  #tabApis .api-hit { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -.5em 0 -.5em -.6em; flex: none; cursor: pointer; }
  #tabApis .api-hit input, #tabApis .api-tick input, #tabApis .api-row > input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--n-accent); }
  #tabApis .api-tick { margin-bottom: .8em; cursor: pointer; }
  #tabApis .api-tick > span { min-width: 0; }
  #tabApis .api-tick small { display: block; }
  #tabApis .api-service { display: flex; align-items: center; gap: 1em; padding: 1em; margin-bottom: .6em; }
  /* A service's card (3.13.6): its row as it always was, and under it how the service is doing
     (public/api-health.js). The card takes the row's look, so the row inside drops its own. */
  #tabApis .api-service-card { border: 1px solid var(--n-line); border-radius: 18px; background: var(--n-white); box-shadow: var(--n-shadow-card); margin-bottom: .6em; }
  #tabApis .api-service-card > .api-service { border: 0; box-shadow: none; border-radius: 0; margin: 0; background: none; }
  #tabApis .api-health { padding: 0 1em .9em; }
  #tabApis .api-health > :empty { display: none; }
  /* Nothing in it (the sign-ins for a manager, or before the answer): no padding under the row. */
  #tabApis .api-health:not(:has(> :not(:empty))) { display: none; }
  #tabApis .api-health > p { margin: 0 0 .3em; white-space: pre-line; overflow-wrap: anywhere; }
  #tabApis .api-test { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em; margin-top: .4em; }
  #tabApis .api-test [data-test-result] { color: var(--n-dim); font-size: .86em; min-width: 0; overflow-wrap: anywhere; }
  /* A Test's answer from Google (3.13.10): on white of its own, so Google Maps' grey attribution
     keeps its contrast whatever ground a saved design or theme gives the page. */
  #tabApis .api-test-answer { background: var(--n-white, #fff); }
  /* Google Maps' name in the site's own words (the Test's): never broken across lines (Q8 (a)). */
  #tabApis .api-gm { white-space: nowrap; }
  #tabApis .api-key [data-key-health]:empty, #tabApis [data-health-note]:empty { display: none; }
  #tabApis .api-save { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .5em; }
  #tabApis .api-wrap { overflow-wrap: anywhere; }
  #tabApis .api-routes { list-style: none; padding: 0; margin: .4em 0 .8em; }
  /* A family's row: its name, what it holds and its choices in words, with Change beside them
     (on a phone, beside the name, so the row stays short). */
  #tabApis .api-route { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1em; align-items: center; padding: .75em 0; border-bottom: 1px solid var(--n-line); }
  #tabApis .api-route:last-child { border-bottom: 0; }
  #tabApis .api-route > :not(button) { grid-column: 1; }
  #tabApis .api-route > button { grid-column: 2; grid-row: 1 / span 3; }
  #tabApis select:disabled { background-color: var(--n-well); color: var(--n-dim); cursor: not-allowed; }
  #tabApis .api-route b, #tabApis .api-key b { color: var(--n-head); font-weight: 600; }
  #tabApis .api-route small, #tabApis .api-key small { color: var(--n-dim); font-size: .86em; margin-top: .15em; }
  #tabApis .api-route .api-route-sum { color: var(--n-body); }
  #tabApis .api-key { padding: .8em 0; border-top: 1px solid var(--n-line); }
  #tabApis .api-key a { color: var(--n-accent-deep); }
  #tabApis .mailcard > .n-setrow { padding: .6em 0; }
  .api-route-pop .n-setrow small { display: block; }
  .api-route-pop .api-held:empty, .api-route-pop .api-route-status:empty { display: none; }
  /* The Budgets card (3.13.5): a row a budget, its name and words on the left and its box,
     with the unit beside it, on the right; on a phone, one column, the box under the name. */
  #tabApis .api-budget-tiers { color: var(--n-dim); font-size: .86em; margin: .5em 0 .4em; padding-left: 1.2em; }
  #tabApis .api-budget-group h4 { font: inherit; font-weight: 650; color: var(--n-head); margin: 1.1em 0 0; padding-bottom: .3em; border-bottom: 1px solid var(--n-line); }
  #tabApis .api-budget { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17em); column-gap: 1.2em; align-items: center; padding: .7em 0; border-bottom: 1px solid var(--n-line); }
  #tabApis .api-budget-group .api-budget:last-child { border-bottom: 0; }
  #tabApis .api-budget > label { grid-column: 1; color: var(--n-head); font-weight: 600; }
  #tabApis .api-budget > small { grid-column: 1; display: block; color: var(--n-dim); font-size: .86em; margin-top: .15em; overflow-wrap: anywhere; }
  #tabApis .api-budget-box { grid-column: 2; grid-row: 1 / span 3; display: flex; align-items: center; gap: .6em; }
  #tabApis .api-budget-box input { width: 7.5em; flex: none; }
  #tabApis .api-budget-unit { color: var(--n-dim); font-size: .86em; min-width: 0; }
  #tabApis .api-budget [aria-invalid="true"] { border-color: var(--n-rose); box-shadow: 0 0 0 1px var(--n-rose); }
  #tabApis .api-budget-status { margin: .8em 0 0; }
  @media (max-width: 760px) {
    #tabApis .api-budget { grid-template-columns: minmax(0, 1fr); }
    #tabApis .api-budget-box { grid-column: 1; grid-row: 2; margin: .4em 0 .2em; }
    #tabApis .api-budget-box select { width: 100%; }
    #tabApis input[type="number"] { min-height: 44px; }
  }
  @media (max-width: 760px) {
    #tabApis button, #tabApis select, #tabApis .n-b, #tabApis label:has(input) { min-height: 44px; }
    #tabApis .api-service { padding: .8em; }
    #tabApis .api-health { padding: 0 .8em .8em; }
    /* 44 px high, and wide enough to read as a button rather than a dot. */
    #tabApis .api-test .n-b { min-width: 5.5em; }
    #tabApis .api-route > small { grid-column: 1 / -1; }
    #tabApis .api-route > button { grid-row: 1; }
    .api-route-pop select, .api-route-pop .n-b, .api-route-pop label:has(input) { min-height: 44px; }
  }

  /* home: the next trip's weather */
  .wx-dash { padding: 14px 16px; }
  .wx-dash .empty { padding: 4px 0; display: flex; gap: 10px; align-items: center; }
  .wx-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .wx-top b { display: block; font-family: var(--display); font-size: 26px; }
  .wx-top .ls { color: var(--muted); font-size: 13.5px; }
  .wx-ic { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--trips) 14%, white); color: var(--trips); display: grid; place-items: center; }
  .wx-ic svg { width: 26px; height: 26px; }
  .wx-u { margin-left: auto; display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 2px; }
  .wx-u button { border: 0; background: none; padding: 3px 10px; border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 13px; }
  .wx-u button.on { background: var(--trips); color: #fff; }
  .wx-days { display: flex; gap: 6px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
  .wx-days > div { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1.5px dashed var(--line); border-radius: 12px; font-size: 13px; }
  .wx-days > div.fc { border-style: solid; background: color-mix(in srgb, var(--trips) 8%, white); }
  .wx-days small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
  .wx-days svg { width: 20px; height: 20px; color: var(--trips); }
  .wx-foot { margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.home-views{margin:0 0 18px}.bulkbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:8px 0 14px}.bulkbar .n-fld{flex:0 1 220px;min-width:160px;margin:0}.bulkbar>.n-hint{flex-basis:100%}.bulk-pick{width:20px;height:20px;flex:none;margin-right:6px}.today-quick{margin:0 0 20px;flex-wrap:wrap}.today-sec{margin:0 0 26px}.today-sec>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.today-sec>header h2{margin:0 0 10px}.today-sec h2 small{font-weight:400;font-size:.6em;margin-left:.4em}.today-row{display:flex;flex-direction:column;gap:2px;padding:14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}.today-row.due{border-left:3px solid #b75a50}.today-row.now{border-left:3px solid #2f7d5d}.today-row span{opacity:.75;font-size:.92em}.today-calm{margin:24px 0}.home-widget-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.home-widget{grid-column:span var(--widget-span);min-width:0}.home-widget>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.home-widget>header h2{margin:16px 0}.home-widget>header span{display:flex;gap:4px}.home-widget .cbd{padding:16px}.home-widget .lrow{display:flex;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid var(--line)}@media(max-width:760px){.home-widget-grid{display:block}.home-widget{margin-bottom:24px}.home-widget .lrow{flex-wrap:wrap}}