/* personalfinanceapps.guide — design tokens, self-hosted faces and the base reset.
   Shared verbatim by the built site and by mockups/index.html. Palette, type
   scale and typeface live here and nowhere else, so the deck and the site
   cannot drift apart on any of them again. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/Archivo-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ZillaSlab-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ZillaSlab-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------------------------------------------------------------- tokens */
:root{
  --paper:#F3F5EF; --card:#FFF; --bar:#E5EDE1; --sunk:#EAEDE5;
  --ink:#14201B; --ink-2:#5B6A62; --ink-3:#626D65;
  --rule:#CCD6C9; --rule-2:#DFE5DA;
  --pen:#1D4E79; --pen-soft:#E4EDF5; --on-pen:#FFF;
  /* Verdicts. --unk is deliberately the same grey as --ink-3: Unknown is the
     absence of a verdict, not a fifth colour. Every value here clears WCAG AA
     (4.5:1) on --card, --paper, --sunk and the --bar greenbar rows. */
  --yes:#2F6B4C; --no:#A4362A; --soon:#8B6112; --unk:#626D65;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --slab:"Zilla Slab",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* One type scale, in rem so the reader's browser font size is honoured. */
  --f-2xs:.6875rem; --f-xs:.75rem; --f-sm:.8125rem; --f-md:.875rem;
  --f-base:.9375rem; --f-lg:1.0625rem; --f-xl:1.375rem; --f-2xl:1.9375rem;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1210; --card:#151A16; --bar:#1A211C; --sunk:#121714;
  --ink:#E7ECE2; --ink-2:#9BA89F; --ink-3:#7C8981;
  --rule:#2A332C; --rule-2:#222A24;
  --pen:#7FB2E2; --pen-soft:#17242E; --on-pen:#0E1210;
  --yes:#6FB98F; --no:#DE8B7E; --soon:#D3A550; --unk:#7C8981;
}}
:root[data-theme="dark"]{
  --paper:#0E1210; --card:#151A16; --bar:#1A211C; --sunk:#121714;
  --ink:#E7ECE2; --ink-2:#9BA89F; --ink-3:#7C8981;
  --rule:#2A332C; --rule-2:#222A24;
  --pen:#7FB2E2; --pen-soft:#17242E; --on-pen:#0E1210;
  --yes:#6FB98F; --no:#DE8B7E; --soon:#D3A550; --unk:#7C8981;
}

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box}
/* Rows and facet items set their own display, which would otherwise beat the
   UA rule for [hidden] and leave filtered-out results on screen. */
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--f-base);line-height:1.55}
a{color:var(--pen)}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--pen);border:1px solid var(--pen);border-radius:0 0 3px 0;padding:9px 14px;font-size:var(--f-sm);font-weight:600;z-index:50}
.skip:focus{left:0}


/* personalfinanceapps.guide — site components.
   Loaded after tokens.css, which carries the palette, the faces and the reset.
   build.py concatenates the two into one hashed file, so this costs no request. */

/* ---------------------------------------------------------------- header */
header.site{border-bottom:1px solid var(--rule);background:var(--card)}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 22px}
.logo{font-family:var(--slab);font-weight:700;font-size:var(--f-lg);letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap}
header.site nav{display:flex;gap:16px;font-size:var(--f-md);flex-wrap:wrap}
header.site nav a{color:var(--ink-2);text-decoration:none;padding:2px 0}
header.site nav a:hover{color:var(--ink)}
header.site nav a[aria-current]{color:var(--ink);font-weight:600;box-shadow:0 2px 0 var(--pen)}
.spacer{flex:1}
.hactions{display:flex;align-items:center;gap:10px;margin-left:auto}
/* Under 700px the nav drops to its own full-width row and scrolls sideways,
   instead of wrapping to one link per line (which made the header 219px tall). */
@media (max-width:700px){
  header.site nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:14px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  header.site nav a{white-space:nowrap}
  .spacer{display:none}
}
.btn{font-family:var(--sans);font-size:var(--f-sm);font-weight:600;border:1px solid var(--pen);color:var(--pen);background:transparent;border-radius:3px;padding:7px 13px;text-decoration:none;display:inline-block;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--pen-soft)}
.btn.solid{background:var(--pen);color:var(--on-pen)}
.btn.solid:hover{opacity:.9}
.btn.ghost{border-color:var(--rule);color:var(--ink-2)}
.themebtn{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:transparent;border:1px solid var(--rule);border-radius:3px;padding:6px 9px;cursor:pointer;white-space:nowrap}
.themebtn:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---------------------------------------------------------------- headings & labels */
h1{font-family:var(--slab);font-size:var(--f-2xl);font-weight:700;margin:0 0 6px;letter-spacing:-.015em;text-wrap:balance;line-height:1.15}
h2{font-family:var(--slab);font-size:var(--f-xl);font-weight:600;margin:0 0 8px;text-wrap:balance}
h3{font-family:var(--slab);font-size:var(--f-lg);font-weight:600;margin:0 0 6px}
.lede{color:var(--ink-2);max-width:66ch;margin:0 0 18px}
/* One mono-uppercase label style, for real labels only: group names and facet
   headings. Counts, stamps and breadcrumbs are plain sans — they are content,
   not labels, and used to be indistinguishable from the headings beside them. */
.label{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;font-weight:500}
.crumb{font-size:var(--f-sm);color:var(--ink-2);margin-bottom:10px}
.crumb a{color:var(--pen)}
.page{padding:26px 0 40px}
.stamp{font-size:var(--f-xs);color:var(--ink-2);margin-top:8px}
.count{font-size:var(--f-xs);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- needs */
.needsrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:0 0 26px}
/* Four across, then two -- never one. Eight cards stacked one per row would put
   most of a screen between the page title and the first result, so two columns
   are held all the way down; at 320px that is a 155px card, which still fits a
   two-line title and its blurb. The switch is at 1000px rather than at the
   820px this rule used to carry: below that, a quarter column is under 190px
   and the blurbs start breaking a word to a line. */
@media (max-width:1000px){.needsrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.needcard{border:1px solid var(--rule);border-radius:4px;padding:13px 15px;background:var(--card);text-decoration:none;display:block}
.needcard:hover{border-color:var(--pen);background:var(--pen-soft)}
.needcard b{font-family:var(--slab);font-size:var(--f-base);font-weight:700;display:block;color:var(--ink);line-height:1.25}
.needcard span{font-size:var(--f-sm);color:var(--ink-2);display:block;margin-top:5px}
.needcard .n2{font-size:var(--f-xs);color:var(--ink-2);margin-top:9px;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- directory */
.split{display:grid;grid-template-columns:214px 1fr;border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:var(--card)}
.list{border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:var(--card)}
.results{min-width:0}
/* Facets move below the results on narrow screens. They are 1387px tall with
   the default groups open, and above the list they would push the first app row
   most of a phone screen-height per group down the page. */
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .facets{order:2;border-right:0;border-top:1px solid var(--rule-2)}
  .results{order:1}
  /* A group heading is a control here, not a label; 21px is not a tap target. */
  .facet>summary{padding:8px 0}
}
.facets{border-right:1px solid var(--rule-2);padding:18px}
.facet+.facet{margin-top:4px;border-top:1px solid var(--rule-2);padding-top:12px}
/* Groups are <details>: the sidebar is long enough that all of it open is a
   wall, and a closed one still opens with JavaScript off. */
.facet>summary{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500;cursor:pointer;list-style:none;padding:2px 0}
.facet>summary::-webkit-details-marker{display:none}
.facet>summary::after{content:"";width:5px;height:5px;margin-left:auto;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.facet[open]>summary::after{transform:translateY(1px) rotate(45deg)}
.facet>summary:hover,.facet[open]>summary{color:var(--ink-2)}
.facet>summary:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
.facet[open]>summary{margin-bottom:8px}
.facet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.facet li{display:flex}
.fx{display:flex;align-items:center;gap:8px;width:100%;font-family:inherit;font-size:var(--f-md);color:var(--ink-2);background:none;border:0;padding:2px 0;text-align:left;text-decoration:none;cursor:pointer}
.fx:hover{color:var(--ink)}
.fx .box{width:13px;height:13px;border:1px solid var(--rule);border-radius:2px;flex:none;background:var(--paper);position:relative}
.fx[aria-pressed="true"]{color:var(--ink);font-weight:600}
.fx[aria-pressed="true"] .box{background:var(--pen);border-color:var(--pen)}
.fx[aria-pressed="true"] .box::after{content:"";position:absolute;left:3.5px;top:1px;width:4px;height:7px;border:solid var(--on-pen);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.fx .n{margin-left:auto;font-size:var(--f-xs);color:var(--ink-2);font-variant-numeric:tabular-nums}
/* [hidden] is a UA rule, so any author display: on the element beats it. Every
   element app.js hides has one, which is why each needs saying explicitly. */
.facet li[hidden],.fx[hidden],.facet[hidden]{display:none}
.facetclear{width:100%;text-align:center;margin-bottom:14px}
.facetclear[hidden]{display:none}

.searchrow{display:flex;gap:10px;padding:16px 20px;border-bottom:1px solid var(--rule-2);align-items:center;flex-wrap:wrap}
.searchrow input{flex:1;min-width:150px;font-family:var(--sans);font-size:var(--f-base);padding:9px 12px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink)}
.searchrow input::placeholder{color:var(--ink-3)}

.row{display:grid;grid-template-columns:36px 1fr auto;gap:14px 16px;padding:16px 20px;border-bottom:1px solid var(--rule-2);align-items:start}
.row:hover{background:var(--sunk)}
@media (max-width:600px){.row{grid-template-columns:36px 1fr}.row .meta{grid-column:2;align-items:flex-start;text-align:left;min-width:0}}
.row:last-child{border-bottom:0}
.row[hidden]{display:none}
.row .name{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.row .name h3{font-family:var(--slab);font-size:var(--f-lg);font-weight:600;margin:0}
.row .name h3 a{color:var(--ink);text-decoration:none}
.row .name h3 a:hover{color:var(--pen)}
.row .desc{color:var(--ink-2);font-size:var(--f-md);margin:3px 0 8px;max-width:66ch}
.meta{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end;min-width:130px}
.price{font-family:var(--mono);font-size:var(--f-md);font-variant-numeric:tabular-nums}
.price small{color:var(--ink-2);font-size:var(--f-xs)}
.empty{padding:26px 20px;color:var(--ink-2);font-size:var(--f-md)}
.empty b{color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--mono);font-size:var(--f-2xs);color:var(--ink-2);border:1px solid var(--rule-2);background:var(--paper);border-radius:2px;padding:2.5px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.pen{color:var(--pen);border-color:var(--pen);background:var(--pen-soft)}
.chip a{color:inherit}
.stale{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--soon);border:1px solid var(--soon);border-radius:2px;padding:2px 6px;white-space:nowrap}
.dead{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--no);border:1px solid var(--no);border-radius:2px;padding:2px 6px;white-space:nowrap}

.ico{width:36px;height:36px;border-radius:22%;border:1px solid var(--rule);background:var(--sunk);display:flex;align-items:center;justify-content:center;font-family:var(--slab);font-weight:600;color:var(--ink-2);font-size:var(--f-lg);flex:none;margin-top:2px}
.ico.lg{width:60px;height:60px;font-size:1.625rem;margin-top:0}
.ico.sm{width:20px;height:20px;font-size:var(--f-2xs);margin-top:0;border-radius:26%}

/* ---------------------------------------------------------------- verdicts */
.v{font-family:var(--mono);font-size:var(--f-sm)}
.v-y{color:var(--yes)} .v-n{color:var(--no)} .v-u{color:var(--unk)}
/* Unknown is a "?" rather than the words "Unknown — tell us" repeated 242 times
   on the matrix. The full sentence lives in the link's accessible name. */
.ask{color:var(--unk);border-bottom:1px dotted var(--unk);text-decoration:none;font-family:var(--mono);font-size:var(--f-sm)}
.ask:hover,.ask:focus-visible{color:var(--pen);border-bottom-color:var(--pen)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:var(--f-xs);color:var(--ink-2);margin:0 0 12px}
.legend .k{font-family:var(--mono)}

/* ---------------------------------------------------------------- detail */
.dcols{display:grid;grid-template-columns:1fr 292px;gap:26px}
@media (max-width:900px){.dcols{grid-template-columns:1fr}}
.card{border:1px solid var(--rule);border-radius:5px;background:var(--card);padding:20px 22px}
.card+.card{margin-top:16px}
.card p{max-width:70ch}
.cardtitle{font-family:var(--slab);font-size:var(--f-lg);font-weight:600;margin:0 0 10px}
.dtitle{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.dtitle .lede{margin:0}

/* Label / value rows. Short values sit right-aligned in mono; long text values
   and the note carried by a verdict span the full width, left-aligned in sans,
   because a 261-character price set right-ragged in mono is unreadable. */
.speclist{margin:0;border-top:1px solid var(--rule-2)}
.spec{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:8px 0;border-bottom:1px solid var(--rule-2);align-items:baseline}
.spec dt{font-size:var(--f-sm);color:var(--ink-2);margin:0;min-width:0}
.spec dd{margin:0;text-align:right;font-family:var(--mono);font-size:var(--f-sm);min-width:0;overflow-wrap:anywhere}
.spec dd.n{grid-column:1/-1;text-align:left;font-family:var(--sans);font-size:var(--f-sm);color:var(--ink-2);margin-top:2px}
.spec.wide{grid-template-columns:minmax(0,1fr)}
.spec.wide dd{text-align:left;font-family:var(--sans);font-size:var(--f-sm);color:var(--ink);margin-top:2px}
.grphead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 0 4px}
.grphead h3{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0;font-weight:500}
.grphead .cnt{font-size:var(--f-xs);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.meter{display:flex;align-items:center;gap:10px;margin:6px 0 2px}
.meter .track{flex:1;height:7px;background:var(--rule-2);border-radius:1px;overflow:hidden}
.meter .fill{display:block;height:100%;background:var(--pen)}
.meter .pct{font-size:var(--f-xs);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- matrix */
/* .scrollx is the scroll container in both axes, so the sticky header actually
   sticks to something that does not scroll away with the page. */
.scrollx{overflow:auto;max-height:calc(100vh - 150px);border:1px solid var(--rule);border-radius:5px;background:var(--card)}
table.matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:var(--f-sm)}
table.matrix th,table.matrix td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule-2);vertical-align:top}
table.matrix thead th{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--rule);font-family:var(--slab);font-size:var(--f-md);font-weight:600;z-index:2}
table.matrix thead th:first-child{left:0;z-index:3;border-right:1px solid var(--rule)}
table.matrix thead th a{color:var(--ink);text-decoration:none}
table.matrix thead th a:hover{color:var(--pen)}
table.matrix tbody tr:nth-child(even){background:var(--bar)}
table.matrix tbody tr:nth-child(even) th[scope=row]{background:var(--bar)}
table.matrix th[scope=row]{position:sticky;left:0;background:var(--card);font-family:var(--sans);font-weight:500;font-size:var(--f-sm);color:var(--ink-2);white-space:nowrap;border-right:1px solid var(--rule);z-index:1}
table.matrix td{font-family:var(--mono);font-size:var(--f-xs);color:var(--ink-2)}
table.matrix tr.sect th{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);background:var(--sunk);font-weight:500}
table.matrix tr.sect td{background:var(--sunk)}
table.matrix tbody tr{scroll-margin-top:44px}
table.matrix tbody tr:target,table.matrix tbody tr:target th[scope=row]{background:var(--pen-soft)}

/* ---------------------------------------------------------------- a–z */
.azgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:26px 30px}
.azgroup h2{font-family:var(--slab);font-size:var(--f-base);font-weight:700;color:var(--pen);margin:0 0 9px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.azgroup ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.azgroup li{display:flex;align-items:center;gap:9px;font-size:var(--f-md);min-width:0}
.azgroup li a{color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.azgroup li a:hover{color:var(--pen)}
.jump{display:flex;flex-wrap:wrap;gap:1px;margin-bottom:22px}
.jump a{font-family:var(--mono);font-size:var(--f-xs);color:var(--pen);text-decoration:none;padding:3px 7px;border-radius:2px}
.jump a:hover{background:var(--pen-soft)}
.jump span{font-family:var(--mono);font-size:var(--f-xs);color:var(--ink-3);padding:3px 7px}

/* ---------------------------------------------------------------- standards */
.rules{list-style:none;margin:0;padding:0;counter-reset:r}
.rules li{position:relative;padding-left:30px;margin-bottom:17px}
.rules li::before{counter-increment:r;content:counter(r);position:absolute;left:0;top:1px;width:19px;height:19px;border:1px solid var(--rule);color:var(--ink-2);border-radius:2px;font-family:var(--mono);font-size:var(--f-2xs);display:flex;align-items:center;justify-content:center}
.rules li b{display:block;font-size:var(--f-md);margin-bottom:3px}
.rules li p{margin:0;font-size:var(--f-sm);color:var(--ink-2);max-width:64ch}
.rec{font-family:var(--mono);font-size:var(--f-xs);background:var(--sunk);border:1px solid var(--rule-2);border-radius:3px;padding:11px 13px;overflow-x:auto;white-space:pre;line-height:1.65;color:var(--ink)}

/* ---------------------------------------------------------------- footer */
footer.site{border-top:1px solid var(--rule);background:var(--sunk);margin-top:40px;padding:20px 0 34px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;font-size:var(--f-sm)}
footer.site a{text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .far{margin-left:auto;font-size:var(--f-xs);color:var(--ink-2)}

/* ---------------------------------------------------------------- gaps block */
details.gaps{border:1px solid var(--rule-2);border-radius:4px;margin-top:20px;background:var(--sunk)}
details.gaps>summary{cursor:pointer;padding:11px 14px;font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);list-style:none;display:flex;align-items:center;gap:9px}
details.gaps>summary::-webkit-details-marker{display:none}
/* Drawn with borders rather than ▸/▾, which are outside the latin subset the
   self-hosted fonts carry and would silently fall back. */
details.gaps>summary::before{content:"";width:0;height:0;flex:none;border-left:5px solid var(--pen);border-top:4px solid transparent;border-bottom:4px solid transparent}
details.gaps[open]>summary::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--pen);border-bottom:0}
details.gaps .inner{padding:0 14px 16px}

/* ---------------------------------------------------------------- submit */
.ctx{border:1px solid var(--pen);background:var(--pen-soft);border-radius:4px;padding:14px 16px;margin-bottom:18px}
.ctx b{display:block;font-size:var(--f-sm);margin-bottom:3px}
.ctx p{margin:0;font-size:var(--f-sm);color:var(--ink-2)}

/* ---------------------------------------------------------------- print */
@media print{
  :root{--paper:#FFF;--card:#FFF;--sunk:#FFF;--bar:#F2F2F2;--ink:#000;--ink-2:#333;--ink-3:#444;--rule:#999;--rule-2:#CCC;--pen:#000}
  header.site,footer.site,.skip,.themebtn,.searchrow,.facets,.jump{display:none}
  .split{grid-template-columns:1fr;border:0}
  .scrollx{overflow:visible;max-height:none;border:0}
  table.matrix thead th,table.matrix th[scope=row]{position:static}
  .card{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:var(--f-2xs);color:#555}
}

/* Source link on a researched value. Quiet by default — the value is the
   message, the citation is the receipt — but reachable and clearly a link. */
.cite{color:var(--ink-3);text-decoration:none;border-bottom:1px dotted var(--rule);
  white-space:nowrap;font-size:.92em}
.cite:hover,.cite:focus{color:var(--pen);border-bottom-color:var(--pen)}
.cite::before{content:"\2197\FE0E ";font-size:.9em}

/* A domain we deliberately do not send readers to. */
.chip.off{color:var(--ink-3);border-style:dashed}
.chip.off small{font-family:var(--sans);text-transform:none;letter-spacing:0}

/* A value the vendor asserted about their own product. Deliberately unlike
   .cite: there is nothing to click, because there is nothing to chase. */
.vend{font-family:var(--mono);font-size:.86em;color:var(--pen);background:var(--pen-soft);
  border-radius:2px;padding:1px 5px;white-space:nowrap}

/* ---------------------------------------------------------------- page furniture */
.titlerow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.titlerow h1{margin-bottom:6px}
h2.later{margin-top:34px}
.btn.wide{display:block;width:100%;text-align:center}
ul.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:var(--f-md)}
ul.links a{text-decoration:none}
ul.links a:hover{text-decoration:underline}
ul.vsgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 22px;font-size:var(--f-md)}
ul.vsgrid a{text-decoration:none}
ul.vsgrid a:hover{text-decoration:underline}
.morerow{padding:14px 20px;font-size:var(--f-md);color:var(--ink-2);border-top:1px solid var(--rule-2);background:var(--sunk)}
.chips.need{margin-bottom:14px}
.card .chips a.chip{text-decoration:none}
.card .chips a.chip:hover{color:var(--pen);border-color:var(--pen)}
p.chips{margin:0}
/* Staleness, everywhere it shows: a muted tag on the A-Z, amber when it is
   about time rather than status; a dot beside a date. */
.dead.old{color:var(--soon);border-color:var(--soon)}
.freshdot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;margin-right:6px;vertical-align:middle}
.freshdot.ok{background:var(--yes)} .freshdot.old{background:var(--soon)}
/* Provenance under a matrix column: who last touched the record, and when. */
table.matrix thead th .prov{display:block;font-family:var(--mono);font-size:var(--f-2xs);font-weight:400;color:var(--ink-3);letter-spacing:.03em;margin-top:2px;white-space:nowrap}
table.matrix thead th .prov.old{color:var(--soon)}

/* ---------------------------------------------------------------- guides */
.gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:22px 32px}
.gl ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.gl li{display:grid;grid-template-columns:14px 1fr;gap:9px;font-size:var(--f-md);color:var(--ink-2);align-items:start}
.gl li b{color:var(--ink);font-weight:600}
.gl li::before{font-family:var(--mono);font-weight:500;line-height:1.5}
.gl li.g::before{content:"+";color:var(--yes)}
.gl li.l::before{content:"\2212";color:var(--no)}
.gl li.s::before{content:"=";color:var(--ink-3)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{position:relative;padding-left:32px;margin-bottom:18px}
.steps li:last-child{margin-bottom:0}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:20px;height:20px;border:1px solid var(--pen);color:var(--pen);border-radius:50%;font-family:var(--mono);font-size:var(--f-2xs);display:flex;align-items:center;justify-content:center}
.steps li b{display:block;font-size:var(--f-md);margin-bottom:3px}
.steps li p{margin:0;font-size:var(--f-sm);color:var(--ink-2);max-width:60ch}
.steps .rec{margin:9px 0}
.gets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.gets li{font-size:var(--f-sm);color:var(--ink-2);padding-left:16px;position:relative}
.gets li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--pen);border-radius:1px}
.gets li b{color:var(--ink);font-weight:600;display:block;font-size:var(--f-sm)}
.gets li b a{color:inherit;text-decoration:none}
.gets li b a:hover{color:var(--pen)}

/* ---------------------------------------------------------------- report */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));border:1px solid var(--rule);border-radius:5px;overflow:hidden;margin:0 0 16px;background:var(--card)}
.tile{padding:16px 18px;border-right:1px solid var(--rule-2)}
.tile:last-child{border-right:0}
.tile .n{font-family:var(--slab);font-size:var(--f-2xl);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink);display:block}
.tile .l{font-size:var(--f-sm);color:var(--ink-2);margin-top:7px;display:block;line-height:1.35}
.bars{display:flex;flex-direction:column;gap:9px}
.bars .row2{display:grid;grid-template-columns:150px 1fr 46px;gap:13px;align-items:center;font-size:var(--f-sm)}
.bars .lbl{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .track{height:9px;background:var(--rule-2);border-radius:1px;overflow:hidden}
.bars .fill{display:block;height:100%;background:var(--pen)}
.bars .fill.warn{background:var(--soon)}
.bars .val{font-family:var(--mono);font-size:var(--f-xs);color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){.bars .row2{grid-template-columns:104px 1fr 42px;gap:9px}}
.press{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.press li{display:grid;grid-template-columns:auto 1fr auto;gap:6px 13px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule-2)}
.press .kind{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--rule);border-radius:2px;color:var(--ink-2);white-space:nowrap}
.press .kind.risk{color:var(--no);border-color:var(--no)}
.press h3{font-family:var(--sans);font-size:var(--f-md);font-weight:600;margin:0;color:var(--ink)}
.press .outlet{font-size:var(--f-xs);color:var(--ink-2);margin-top:3px;display:block}
.press .when{font-family:var(--mono);font-size:var(--f-xs);color:var(--ink-3);white-space:nowrap}
@media (max-width:560px){.press li{grid-template-columns:auto 1fr}.press .when{grid-column:2}}

/* ---------------------------------------------------------------- changelog */
.rvbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:14px}
.cldate{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:13px 20px 9px;background:var(--sunk);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.list>.cldate:first-child{border-top:0}
.cl{list-style:none;margin:0;padding:0}
.cl li{display:grid;grid-template-columns:84px 20px 1fr auto;gap:6px 13px;align-items:start;padding:12px 20px;border-bottom:1px solid var(--rule-2)}
.cl li:last-child{border-bottom:0}
.cl li[hidden]{display:none}
.cl .kind{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.05em;text-transform:uppercase;padding:3px 0;border:1px solid var(--rule);border-radius:2px;color:var(--ink-2);text-align:center;white-space:nowrap}
.cl .kind.add{color:var(--yes);border-color:var(--yes)}
.cl .kind.risk{color:var(--no);border-color:var(--no)}
.cl .kind.money{color:var(--soon);border-color:var(--soon)}
.cl .what{font-size:var(--f-md);color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.cl .what b{color:var(--ink);font-weight:600}
.cl .what b a{color:inherit;text-decoration:none}
.cl .what b a:hover{color:var(--pen)}
.cl .src{font-family:var(--mono);font-size:var(--f-2xs);color:var(--ink-3);white-space:nowrap;text-align:right}
@media (max-width:640px){.cl li{grid-template-columns:84px 20px 1fr}.cl .src{grid-column:3}}
.cldate[hidden]{display:none}

/* ---------------------------------------------------------------- open data & standards */
.dlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:6px}
.dlcard{border:1px solid var(--rule);border-radius:4px;padding:13px 15px}
.dlcard b{font-family:var(--slab);font-size:var(--f-lg);font-weight:600;display:block}
.dlcard .m{font-size:var(--f-xs);color:var(--ink-2);display:block;margin:3px 0 11px}
.dlcard a{font-size:var(--f-sm);font-weight:600;text-decoration:none;font-family:var(--mono)}
.lic{border-left:2px solid var(--yes);padding:2px 0 2px 15px}
.lic h3{font-family:var(--slab);font-size:var(--f-lg);margin:0 0 5px;font-weight:600}
.lic p{margin:0 0 7px;font-size:var(--f-md);color:var(--ink-2);max-width:62ch}
.yn{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 32px}
.yn ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.yn li{display:grid;grid-template-columns:14px 1fr;gap:9px;font-size:var(--f-md);color:var(--ink-2);align-items:start}
.yn li::before{font-family:var(--mono);font-weight:500;line-height:1.5}
.yn li.no::before{content:"\2715";color:var(--no)}
.yn li.do::before{content:"\2713";color:var(--yes)}

/* ---------------------------------------------------------------- forms */
.form{max-width:680px}
.field{margin-bottom:16px}
fieldset.field{border:0;padding:0;min-width:0;margin-left:0;margin-right:0}
fieldset.field>legend{display:block;float:none;font-size:var(--f-sm);font-weight:600;margin-bottom:6px;padding:0}
.field label,.field>.lbl{display:block;font-size:var(--f-sm);font-weight:600;margin-bottom:5px}
.field .pillrow label{display:inline-flex;font-weight:400;margin:0}
.field .hint{font-size:var(--f-xs);color:var(--ink-2);margin:4px 0 0}
.field input:not([type=checkbox]):not([type=radio]),.field textarea{width:100%;font-family:var(--sans);font-size:var(--f-md);padding:9px 11px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink)}
.field textarea{resize:vertical}
.pillgroup{margin-bottom:8px}
.pillgroup .label{display:block;margin:0 0 5px}
.pillrow{display:flex;flex-wrap:wrap;gap:7px}
.pill{font-family:var(--sans);font-size:var(--f-sm);border:1px solid var(--rule);border-radius:100px;padding:5px 11px;color:var(--ink-2);background:var(--paper);cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.pill input{margin:0;accent-color:var(--pen)}
.pill:hover{border-color:var(--pen);color:var(--ink)}
.pill.on,.pill:has(:checked){border-color:var(--pen);color:var(--pen);background:var(--pen-soft);font-weight:600}
button.pill{font-family:var(--sans)}
.formfoot{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-2);flex-wrap:wrap}
.formfoot p{margin:0;font-size:var(--f-xs);color:var(--ink-2);max-width:none}
/* A status tag beside an A-Z entry yields to the name, not the other way round. */
.azgroup li .dead{margin-left:auto;flex:none;font-size:.625rem;padding:1px 5px}

/* ---------------------------------------------------------------- store data */
img.ico{object-fit:cover;background:var(--sunk)}
.thname{display:flex;align-items:center;gap:7px}
/* The stores' own badges. Apple's SVG is exactly the badge; Google's PNG has a
   transparent margin of roughly a sixth of its height on every side, so it is
   shown taller and pulled in by negative margins until the two badges' visible
   edges align -- the file itself is never cropped or recoloured. 40px is the
   minimum height both sets of guidelines allow, and a badge-height of clear
   space around each is what Apple asks for. */
.stores{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0 22px}
.storebadge{display:inline-flex;line-height:0;border-radius:6px}
.storebadge img{display:block;height:40px;width:auto}
.storebadge.play img{height:60px;margin:-10px -10px}
.storebadge:hover{opacity:.88}
.stars{font-family:var(--mono);font-size:var(--f-xs);color:var(--ink-2);display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.stars a{color:var(--pen);text-decoration:none;border-bottom:1px solid transparent}
.stars a:hover{border-bottom-color:var(--pen)}
.stars b{color:var(--ink);font-weight:500}
.stars .none{color:var(--ink-3)}
.reviewcard{border:1px solid var(--rule);border-radius:4px;padding:14px;background:var(--card);display:flex;flex-direction:column;gap:9px}
.reviewcard+.reviewcard{margin-top:10px}
.rc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rc-top .store{font-size:var(--f-sm);font-weight:600}
.rc-score{font-family:var(--mono);font-size:1.2rem;color:var(--ink);font-variant-numeric:tabular-nums}
.rc-score span{font-size:var(--f-xs);color:var(--ink-3)}
.hist{display:flex;flex-direction:column;gap:3px;min-width:200px}
.hist div{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--f-2xs);color:var(--ink-3)}
.hist div span:first-child{width:2.2em}
.hist div span:last-child{width:3em;text-align:right}
.hist .track{flex:1;height:5px;background:var(--rule-2);border-radius:1px;overflow:hidden}
.hist .fill{height:100%;background:var(--pen);display:block}
.reviewcard .stamp{margin-top:0}
.quote{border-left:2px solid var(--rule);padding:2px 0 2px 12px;margin:0 0 12px;color:var(--ink-2);font-size:var(--f-sm)}
.quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:var(--f-2xs);color:var(--ink-3);margin-top:4px}
.spark{width:100%;max-width:340px;height:auto;display:block;margin:2px 0 12px}
.spark text{font-family:var(--mono);font-size:8.5px}
.press .kind.fund{color:var(--yes);border-color:var(--yes)}
.press h3 a{color:inherit;text-decoration:none}
.press h3 a:hover{color:var(--pen)}
.card h2 .count{font-family:var(--sans);font-weight:400;font-size:var(--f-xs)}
/* offers and roadmaps: vendor-supplied, so kept in the rail and marked */
.offer{border:1px dashed var(--rule);border-radius:4px;padding:13px 14px;background:var(--card)}
.offer .code{font-family:var(--mono);font-size:1.1rem;font-weight:500;letter-spacing:.1em;color:var(--ink);border-bottom:1px dashed var(--rule);padding-bottom:10px;margin-bottom:10px}
.offer p{margin:0 0 10px;font-size:var(--f-sm);color:var(--ink-2)}
.offer dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:var(--f-xs)}
.offer dt{color:var(--ink-3)}
.offer dd{margin:0;font-family:var(--mono);color:var(--ink-2)}
.roadmap{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.roadmap li{display:grid;grid-template-columns:92px 1fr;gap:13px;padding:11px 0;border-bottom:1px solid var(--rule-2);align-items:start}
.rmstate{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.05em;text-transform:uppercase;padding:3px 0;border:1px solid var(--rule);border-radius:2px;color:var(--ink-2);text-align:center}
.rmstate.ship{color:var(--yes);border-color:var(--yes)}
.rmstate.late{color:var(--soon);border-color:var(--soon)}
.roadmap h3{font-family:var(--sans);font-size:var(--f-md);font-weight:600;margin:0}
.roadmap .m3{font-family:var(--mono);font-size:var(--f-2xs);color:var(--ink-3);display:block;margin-top:3px}

/* ---------------------------------------------------------------- reviews page */
.rvsum{display:flex;flex-wrap:wrap;gap:34px;align-items:center;padding:0 0 18px;border-bottom:1px solid var(--rule-2)}
.bigscore{font-family:var(--slab);font-size:2.6rem;font-weight:700;line-height:.95;letter-spacing:-.02em}
.bigscore small{font-family:var(--mono);font-size:var(--f-sm);font-weight:400;color:var(--ink-3);letter-spacing:0}
.rvsum .hist{flex:1;max-width:320px}
.mentions{padding:15px 0;border-bottom:1px solid var(--rule-2)}
.mentions .chips button.chip{cursor:pointer;font-family:var(--mono)}
.mentions .chips button.chip:hover,.mentions .chips button.chip.on{color:var(--pen);border-color:var(--pen)}
.card .rvbar{padding:14px 0 0;margin-bottom:0}
.rvbar input{flex:1;min-width:190px;font-family:var(--sans);font-size:var(--f-md);padding:8px 12px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink)}
.review{padding:16px 0;border-bottom:1px solid var(--rule-2)}
.review[hidden]{display:none}
.review .rvtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.stars5{font-family:var(--mono);font-size:var(--f-sm);color:var(--soon);letter-spacing:.12em;flex:none}
.review h3{font-family:var(--sans);font-size:var(--f-md);font-weight:600;margin:0}
.review p{margin:0;font-size:var(--f-md);color:var(--ink-2);max-width:80ch;white-space:pre-line}
.rvmeta{font-family:var(--mono);font-size:var(--f-2xs);color:var(--ink-3);margin-top:7px;display:flex;gap:14px;flex-wrap:wrap}
.pager{display:flex;align-items:center;gap:5px;padding:16px 0 0;flex-wrap:wrap}
.pager button{font-family:var(--mono);font-size:var(--f-xs);color:var(--pen);background:transparent;border:1px solid var(--rule);border-radius:2px;padding:5px 10px;cursor:pointer}
.pager button[aria-current]{background:var(--pen);color:var(--on-pen);border-color:var(--pen)}
.pager .far{margin-left:auto;font-family:var(--mono);font-size:var(--f-2xs);color:var(--ink-3)}

/* ---------------------------------------------------------------- written copy, column chooser */
.written{max-width:72ch;font-size:var(--f-base);color:var(--ink);margin:0 0 16px}
.colpick{position:relative}
.colpick>summary{list-style:none;display:inline-block}
.colpick>summary::-webkit-details-marker{display:none}
.colpick[open]>summary{background:var(--pen-soft)}
.colpick>.pillrow{position:absolute;right:0;top:calc(100% + 6px);z-index:5;width:min(720px,92vw);max-height:60vh;overflow:auto;background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:12px;box-shadow:0 8px 24px -18px rgba(20,32,27,.5)}
.colpick>.stamp{position:absolute;right:0;top:calc(100% + 6px + min(60vh,420px));display:none}
.colpick[open]>.pillrow+.stamp{display:block;position:static;margin-top:8px}
.colpick[open]>.pillrow{position:static;width:auto;max-height:none;box-shadow:none;margin-top:8px}
.colpick[open]{display:block;width:100%}
.titlerow .rvbar{margin-bottom:0}
/* a site that has stopped answering, from the nightly check */
.sitecheck{color:var(--soon);border-color:var(--soon)}

/* ---------------------------------------------------------------- country picker */
/* The countries field with script: chosen countries as flagged chips inside
   what still reads as one input, a box that completes as you type, and a
   short list below it. Without script it is the plain text input. */
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;padding:5px 7px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);cursor:text;min-height:41px;box-sizing:border-box}
.tags:focus-within{border-color:var(--pen);outline:2px solid var(--pen-soft)}
.tagrow{display:contents}
.tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:var(--f-sm);line-height:1.3;padding:3px 5px 3px 8px;border:1px solid var(--pen);border-radius:100px;color:var(--pen);background:var(--pen-soft);white-space:nowrap}
.tag.plain{border-color:var(--rule);color:var(--ink-2);background:var(--sunk)}
.tagx{font:inherit;font-size:var(--f-md);line-height:1;border:0;background:none;color:inherit;cursor:pointer;padding:0 3px;border-radius:100px}
.tagx:hover{background:var(--pen);color:var(--paper)}
.field .tags input.tagbox{flex:1 1 120px;min-width:120px;width:auto;border:0;padding:4px 4px;background:none;outline:none}
.field{position:relative}
.tagmenu{list-style:none;margin:2px 0 0;padding:4px 0;position:absolute;z-index:5;left:0;right:0;max-height:280px;overflow-y:auto;background:var(--paper);border:1px solid var(--rule);border-radius:3px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.tagmenu li{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:var(--f-md);color:var(--ink);cursor:pointer}
.tagmenu li.on,.tagmenu li:hover{background:var(--pen-soft);color:var(--pen)}
.tagmenu li code{margin-left:auto;font-family:var(--mono);font-size:var(--f-2xs);color:var(--ink-3)}
.tagflag{font-size:1.15em;line-height:1;width:1.4em;text-align:center}

.field.twoup{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.twoup .hint{grid-column:1/-1}
@media (max-width:560px){.field.twoup{grid-template-columns:1fr}}
/* The edit form's feature record: ticks in pills, as before, and a label
   over an input for each text attribute. */
.field select{width:100%;font-family:var(--sans);font-size:var(--f-md);padding:9px 11px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink)}
fieldset.attrs{margin:0 0 14px;padding:0}
fieldset.attrs>legend{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0 0 6px}
.pill.want{outline:2px solid var(--pen);outline-offset:2px}
.attrrow{display:grid;grid-template-columns:1fr;gap:5px;padding:6px 0 2px;margin-top:6px}
.attrrow label,.attrrow .lbl{margin:0;font-weight:500;font-size:var(--f-sm)}
.attrrow .pillrow label{font-weight:400}
.field .attrrow input:not([type=checkbox]){padding:6px 9px;font-size:var(--f-sm)}
.attrrow.want{background:var(--pen-soft);outline:2px solid var(--pen);outline-offset:2px;border-radius:3px}
.attrrow .tags{min-height:35px;padding:3px 6px}
details.owner{border:1px solid var(--rule-2);border-radius:4px;padding:10px 14px}
details.owner>summary{font-size:var(--f-sm);font-weight:600;cursor:pointer}
details.owner>.inner{margin-top:12px}