/* ============================================================================
   App Hub, ODL v2 layer (ledger row 119, staged 2026-10-09).
   Loaded AFTER odl-polish-v2.css, which loads AFTER obsidian-design-language.css
   (v1 tokens). Everything here is scoped to `.odl2` (the hub <body>), uses only v1
   and v2 tokens, and changes presentation only: no tile, word, link, route or
   behaviour is added or removed. Same-origin, so the strict CSP is untouched
   (style-src 'self', font-src 'self', img-src 'self' data:).

   Why this file exists: the hub's tile markup is pinned by many test assertions
   on class="card" / class="card locked", so the tiles cannot also carry the
   shared .o2-card class. The material below is the same recipe as .o2-card in
   odl-polish-v2.css, built from the same tokens, applied to the hub's own class.
   ============================================================================ */

/* ---- self-hosted brand faces (variable files; the range descriptor is what lets
        the 450 display weight resolve, brand.css only declares 500/600). --------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/fraunces-latin.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:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/hanken-grotesk-latin.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}

/* the hub's own [hidden] filter relies on display:none, which any display rule below would otherwise beat */
.odl2 [hidden]{display:none !important}

/* ---- page ------------------------------------------------------------------- */
.odl2{--bg:#08070A;--panel:var(--o2-surface-2);--panel2:var(--o2-surface);--line:rgba(244,233,215,.10);
  --gold-dim:#B8893A;--cream:var(--od-cream,#F4E9D7);--txt:var(--od-cream-dim,#C6BCA9);--muted:#9A94A6;
  font-size:16px;line-height:1.5}
body.odl2{background:linear-gradient(180deg,var(--od-obsidian-2,#0E0C11),var(--o2-bg) 560px) no-repeat,var(--o2-bg);
  color:var(--txt)}
.odl2 main{max-width:1040px;padding:6px var(--o2-gutter) 64px}

/* ---- header: logo mark, eyebrow, display h1 --------------------------------- */
.odl2 header{padding:40px var(--o2-gutter) 8px}
.odl2 .hubmark{display:block;width:40px;height:40px;margin:0 auto 14px;border-radius:var(--o2-r-sm)}
.odl2 header .mark{font-size:var(--o2-fs-xs);letter-spacing:var(--o2-track-eyebrow);font-weight:600;color:var(--od-gold,#F1B43E)}
.odl2 header h1{margin:8px 0 0;font-size:clamp(2.25rem,1.6rem + 2.6vw,3.25rem);line-height:1.05;letter-spacing:-.03em;
  color:var(--cream)}
.odl2 .intro{font-size:clamp(1rem,.96rem + .25vw,1.125rem);line-height:1.5;color:var(--txt);margin:12px auto 0;max-width:46ch}
.odl2 .badge{border:0;box-shadow:inset 0 0 0 1px var(--o2-rim-hi);background:rgba(244,233,215,.03);color:var(--cream)}
.odl2 .acctbar{margin:22px 0 4px;gap:12px}

/* ---- section labels --------------------------------------------------------- */
.odl2 h2.lbl{font-family:var(--o2-font-body);font-weight:600;font-size:var(--o2-fs-xs);letter-spacing:.14em;
  color:var(--muted);margin:32px 4px 14px}
.odl2 .lbl .note{border:0;box-shadow:inset 0 0 0 1px var(--o2-rim);color:var(--muted);font-weight:500;letter-spacing:.02em}

/* ---- ONE grid, equal-height tiles ------------------------------------------- */
.odl2 .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr));gap:16px;align-items:stretch}
.odl2 .catgrp .grid{margin-bottom:20px}

/* ---- tile material (same recipe as .o2-card) -------------------------------- */
.odl2 .card,.odl2 .perk,.odl2 .conn-card{
  position:relative;isolation:isolate;border:0;border-radius:var(--o2-r-lg);
  background:linear-gradient(180deg,var(--o2-surface-2),var(--o2-surface));
  box-shadow:var(--o2-e2),var(--o2-toplight),inset 0 0 0 1px rgba(241,180,62,.10)}
.odl2 .card::before,.odl2 .perk::before,.odl2 .conn-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,233,215,.16),rgba(244,233,215,.04) 40%,rgba(241,180,62,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.odl2 .card{display:flex;flex-direction:column;align-items:flex-start;padding:20px;color:var(--txt);
  transition:box-shadow var(--o2-t-ui) var(--o2-out),background-color var(--o2-t-ui) var(--o2-out)}
.odl2 .card > *{max-width:100%}
.odl2 .card p{flex:1 0 auto}
.odl2 .card .go{margin-top:auto;padding-top:14px}
@media (hover:hover){
  .odl2 a.card:hover{box-shadow:var(--o2-e3),var(--o2-toplight),inset 0 0 0 1px rgba(241,180,62,.22)}   /* colour-only hover (o2-lift) */
}
.odl2 a.card:active{transform:scale(.985)}
.odl2 .card h3{margin:0 0 6px;font-family:var(--o2-font-display);font-weight:450;font-optical-sizing:auto;
  font-size:1.25rem;line-height:1.2;letter-spacing:-.015em;color:var(--cream)}
.odl2 .card p{margin:0;font-size:var(--o2-fs-sm);line-height:1.55;color:var(--muted)}
.odl2 .card .go{font-size:var(--o2-fs-sm);font-weight:600;color:var(--txt);transition:color var(--o2-t-micro) var(--o2-std)}
@media (hover:hover){.odl2 a.card:hover .go{color:var(--od-gold-hi,#F8D77A)}}
.odl2 .card:focus-visible{border-radius:var(--o2-r-lg);box-shadow:var(--o2-focus),var(--o2-e2)}
.odl2 .card .status{align-self:flex-start;margin-top:12px;padding:3px 10px;border-radius:999px;font-size:11px;letter-spacing:.04em;line-height:1.6;border:0;box-shadow:inset 0 0 0 1px var(--o2-rim-hi);
  color:var(--muted);background:transparent}
.odl2 .card .status.tier,.odl2 .card .status.pub{color:var(--od-gold-lo,#C99A2C);box-shadow:inset 0 0 0 1px rgba(201,154,44,.45)}

/* locked tiles: flatter surface, dashed gold-dim edge, no extra gold */
.odl2 .card.locked{box-shadow:var(--o2-e1),var(--o2-toplight);outline:1px dashed rgba(241,180,62,.32);outline-offset:-1px;cursor:default}
.odl2 .card.locked h3{color:var(--txt);display:flex;align-items:center;gap:8px}
.odl2 .card.locked .lockicon{color:var(--od-gold-lo,#C99A2C)}
.odl2 .card.locked:hover{box-shadow:var(--o2-e1),var(--o2-toplight)}

/* in-tile actions: the single gold button is elsewhere, these are ghost pills */
.odl2 .card.freemode .go.open,.odl2 .card.locked .go.upgrade,.odl2 .card .unlock-opts a.opt{
  display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 18px;border:0;border-radius:999px;
  background:rgba(244,233,215,.03);color:var(--cream);font-size:var(--o2-fs-sm);font-weight:600;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--o2-rim-hi);transition:box-shadow var(--o2-t-micro) var(--o2-std),background-color var(--o2-t-micro) var(--o2-std),color var(--o2-t-micro) var(--o2-std)}
.odl2 .card.freemode .go.open{margin-top:14px}
.odl2 .card.freemode .go.open:hover,.odl2 .card.locked .go.upgrade:hover,.odl2 .card .unlock-opts a.opt:hover{
  background:rgba(244,233,215,.06);box-shadow:inset 0 0 0 1px var(--o2-rim-gold);color:var(--cream);filter:none}
.odl2 .card.locked .go.upgrade{margin-top:14px}
.odl2 .card .unlock-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:var(--o2-fs-xs);line-height:1.5;color:var(--muted)}
.odl2 .card .unlock-opts > span{flex:1 0 100%}

/* ---- refined arrows (CSS-drawn; the glyph stays in the DOM, hidden) --------- */
.odl2 .arw{display:inline-block;width:.8rem;height:.8rem;margin-left:.3rem;vertical-align:middle;position:relative;top:-.03rem;font-size:0;line-height:0;
  background:currentColor;-webkit-mask:var(--arw) center/contain no-repeat;mask:var(--arw) center/contain no-repeat;
  --arw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.odl2 .arw--ne{width:.7rem;height:.7rem;
  --arw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E")}
.odl2 .arw--e{--arw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.odl2 .card h3 .arw--ne{color:var(--muted);margin-left:.4rem;vertical-align:baseline;top:0;margin-bottom:.45rem}

/* ---- header / public buttons ------------------------------------------------- */
.odl2 .btn-primary.sm,.odl2 .btn-ghost.sm,.odl2 .hero .btn-ghost{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px}
.odl2 .btn-ghost{border:0;background:rgba(244,233,215,.03);color:var(--cream);border-radius:999px;box-shadow:inset 0 0 0 1px var(--o2-rim-hi)}
.odl2 .btn-ghost:hover{background:rgba(244,233,215,.06);box-shadow:inset 0 0 0 1px var(--o2-rim-gold);color:var(--cream)}
/* the ONE gold focal element: gold-leaf primary (same recipe as .o2-btn--gold; the pinned class string
   class="btn-primary sm" cannot take the o2 class) with the single light sweep from odl-polish-v2.css */
/* FLAT GOLD v2.1, ecosystem ruling 2026-10-10: gradient fill + halo glow removed. This rule is a
   REPRODUCTION of the canonical recipe (the pinned class string `class="btn-primary sm"` cannot
   take the .o2-btn--gold class), so flattening odl-polish-v2.css alone did NOT reach it -- the
   hub's button still rendered the old treatment in the capture. Any future change to the gold
   must be made in BOTH places; that is the cost of the pinned class string. */
.odl2 .btn-primary.sm{position:relative;overflow:hidden;border:0;border-radius:999px;color:#1A1206;font-weight:650;letter-spacing:-.005em;
  background:var(--od-gold,#F1B43E);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
  transition:transform var(--o2-t-micro) var(--o2-std),background-color var(--o2-t-micro) var(--o2-std)}
.odl2 .btn-primary.sm:hover{background:#F6C359}
.odl2 .btn-primary.sm:active,.odl2 .btn-ghost.sm:active{transform:scale(.975)}
.odl2 .btn-primary.sm::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,rgba(255,250,235,.55) 50%,transparent 65%) 0 0/250% 100% no-repeat;
  mix-blend-mode:soft-light;animation:o2-sweep 1100ms var(--o2-out) 900ms both}
@media (prefers-reduced-motion:reduce){.odl2 .btn-primary.sm::after{display:none}}
/* Install is a ghost pill so the view keeps ONE gold focal element (Create an account) */
.odl2 #installBtn{min-height:44px;padding:0 22px;border:0;border-radius:999px;background:rgba(244,233,215,.03);color:var(--cream);
  font:inherit;font-weight:600;box-shadow:inset 0 0 0 1px var(--o2-rim-hi)}
.odl2 #installBtn:hover{background:rgba(244,233,215,.06);box-shadow:inset 0 0 0 1px var(--o2-rim-gold)}
.odl2 .installbar .ioshint{border:0;border-radius:var(--o2-r-sm);box-shadow:inset 0 0 0 1px var(--o2-rim);background:rgba(244,233,215,.03)}
.odl2 .installbar .ioshint b{color:var(--cream)}
.odl2 .hero p{color:var(--txt)}
.odl2 .ownerbar a,.odl2 .ownerbar button{border:0;border-radius:999px;color:var(--txt);box-shadow:inset 0 0 0 1px var(--o2-rim-hi);
  transition:box-shadow var(--o2-t-micro) var(--o2-std),color var(--o2-t-micro) var(--o2-std)}
.odl2 .ownerbar a:hover,.odl2 .ownerbar button:hover{color:var(--cream);box-shadow:inset 0 0 0 1px var(--o2-rim-gold)}
.odl2 .whoami{color:var(--muted)}
.odl2 .legal .legallinks a{color:var(--muted)}

/* ---- search + filter pills ---------------------------------------------------- */
.odl2 .toolsearch{min-height:48px;border:0;border-radius:var(--o2-r-sm);background:rgba(0,0,0,.35);color:var(--cream);
  box-shadow:inset 0 0 0 1px var(--o2-rim-hi);transition:box-shadow var(--o2-t-micro) var(--o2-std)}
.odl2 .toolsearch:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(241,180,62,.7),0 0 0 4px rgba(241,180,62,.14)}
.odl2 .chips{gap:8px}
.odl2 .chip{border:0;color:var(--txt);background:transparent;box-shadow:inset 0 0 0 1px var(--o2-rim-hi);
  transition:box-shadow var(--o2-t-micro) var(--o2-std),background-color var(--o2-t-micro) var(--o2-std),color var(--o2-t-micro) var(--o2-std)}
.odl2 .chip:hover{background:rgba(244,233,215,.05)}
.odl2 .chip[aria-pressed="true"]{color:var(--cream);background:rgba(244,233,215,.07);box-shadow:inset 0 0 0 1px var(--o2-rim-gold)}
.odl2 .chip,.odl2 .chip:focus-visible,.odl2 .favbtn:focus-visible,.odl2 .clearfilters:focus-visible,.odl2 .favstar:focus-visible,
.odl2 .ownerbar a:focus-visible,.odl2 .ownerbar button:focus-visible,.odl2 .btn-primary:focus-visible,.odl2 .btn-ghost:focus-visible,
.odl2 #installBtn:focus-visible,.odl2 .viewtoggle button:focus-visible,.odl2 .opt:focus-visible,.odl2 .go.open:focus-visible,
.odl2 .go.upgrade:focus-visible{border-radius:999px}
.odl2 .clearfilters{min-height:44px;border:0;box-shadow:inset 0 0 0 1px var(--o2-rim-hi);color:var(--cream)}
.odl2 .filterstate{color:var(--muted)}
@media (max-width:640px){
  /* one horizontal scroll row with fade masks instead of ragged wrapped pills */
  .odl2 .chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    scrollbar-width:none;margin:10px -4px 0;padding:6px 28px 6px 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 32px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 32px),transparent 100%)}
  .odl2 .chips::-webkit-scrollbar{display:none}
  .odl2 .chip{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}

/* ---- category groups: chevron attached to the label, not stranded right ------ */
.odl2 .catgrp > summary{justify-content:flex-start;gap:10px;color:var(--muted);font-weight:600;font-size:var(--o2-fs-xs);
  letter-spacing:.14em;border-radius:var(--o2-r-sm)}
.odl2 .catgrp > summary::after{content:"";margin-left:2px;width:14px;height:14px;font-size:0;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(-90deg);transition:transform var(--o2-t-ui) var(--o2-out)}
.odl2 .catgrp[open] > summary::after{transform:none}
.odl2 .catgrp > summary .cnt{color:var(--muted);opacity:1;font-weight:500}
.odl2 .catgrp > summary .note{box-shadow:inset 0 0 0 1px var(--o2-rim);border:0;border-radius:999px;padding:2px 8px;font-size:10px;color:var(--muted)}

/* ---- favourites ---------------------------------------------------------------- */
.odl2 .favbtn{min-height:44px;padding:0 18px;border:0;color:var(--txt);box-shadow:inset 0 0 0 1px var(--o2-rim-hi)}
.odl2 .favbtn[aria-pressed="true"]{color:var(--cream);box-shadow:inset 0 0 0 1px var(--o2-rim-gold)}
.odl2 .favstar{width:44px;height:44px;top:6px;right:6px;border:0;box-shadow:inset 0 0 0 1px var(--o2-rim-hi);background:rgba(8,7,10,.7)}
.odl2 .favstar[aria-pressed="true"]{color:var(--od-gold,#F1B43E);box-shadow:inset 0 0 0 1px var(--o2-rim-gold)}
.odl2 .favcell .card h3{padding-right:48px}
.odl2 .favmove button{width:44px;height:44px;border:0;border-radius:var(--o2-r-sm);box-shadow:inset 0 0 0 1px var(--o2-rim-hi);background:rgba(8,7,10,.7)}
.odl2 .favslide.favarrange .favcell .card,.odl2 .favarrange .favcell .card{outline:1px solid rgba(241,180,62,.5);outline-offset:-1px}
.odl2 .favslide.favarrange .favcell .card.locked{outline-style:dashed}
.odl2 .favslot{border-radius:var(--o2-r-lg)}
.odl2 .favhint{color:var(--muted);opacity:1}

/* ---- perks, connections, empty states ------------------------------------------ */
.odl2 .perks{margin:28px 0}
.odl2 .perk{padding:20px;margin:12px 0}
.odl2 .perk-t{font-family:var(--o2-font-display);font-weight:450;font-size:1.25rem;letter-spacing:-.015em;color:var(--cream)}
.odl2 .perk p{color:var(--txt)}
.odl2 .perk a{color:var(--cream);text-decoration-color:var(--o2-rim-gold);text-underline-offset:3px}
.odl2 .perk-code code{font-family:var(--o2-font-mono);color:var(--cream)}
.odl2 .conn-card{padding:18px}
.odl2 .conn-ic{border:0;border-radius:var(--o2-r-sm);box-shadow:inset 0 0 0 1px var(--o2-rim-hi);background:rgba(0,0,0,.35)}
.odl2 .conn-btn{border:0;border-radius:999px;min-height:44px;padding:0 18px;background:rgba(244,233,215,.03);color:var(--cream);
  box-shadow:inset 0 0 0 1px var(--o2-rim-hi)}
.odl2 .conn-btn:hover{background:rgba(244,233,215,.06);box-shadow:inset 0 0 0 1px var(--o2-rim-gold)}
.odl2 .conn-btn.ghost{color:var(--txt)}
.odl2 .pill{border:0;box-shadow:inset 0 0 0 1px var(--o2-rim)}
.odl2 .pill.on,.odl2 .pill.saved{color:var(--od-gold-lo,#C99A2C);background:transparent;box-shadow:inset 0 0 0 1px rgba(201,154,44,.45)}
.odl2 .conn-tag{border:0;box-shadow:inset 0 0 0 1px var(--o2-rim)}
.odl2 .modal{border:0;border-radius:var(--o2-r-lg);box-shadow:var(--o2-e3),var(--o2-toplight);background:linear-gradient(180deg,var(--o2-surface-2),var(--o2-surface))}
.odl2 .modal h3{font-family:var(--o2-font-display);font-weight:450;letter-spacing:-.015em}
.odl2 .modal input{border:0;border-radius:var(--o2-r-sm);min-height:44px;box-shadow:inset 0 0 0 1px var(--o2-rim-hi)}
.odl2 .modal input:focus{box-shadow:inset 0 0 0 1px rgba(241,180,62,.7),0 0 0 4px rgba(241,180,62,.14)}
.odl2 .modal .how,.odl2 .modal .oneclick{border:0;border-radius:var(--o2-r-sm);box-shadow:inset 0 0 0 1px var(--o2-rim)}
.odl2 .nohits{margin:8px 0 16px;padding:40px 24px;border-radius:var(--o2-r-lg);box-shadow:inset 0 0 0 1px var(--o2-rim);color:var(--muted)}
.odl2 .conn-loading,.odl2 .conn-error{color:var(--muted)}

/* ---- owner tabs ------------------------------------------------------------------ */
.odl2 .viewtoggle{border:0;border-radius:var(--o2-r-lg);background:linear-gradient(180deg,var(--o2-surface-2),var(--o2-surface));
  box-shadow:var(--o2-e1),var(--o2-toplight)}
.odl2 .viewtoggle button{border:0;font-weight:600;transition:background-color var(--o2-t-micro) var(--o2-std),color var(--o2-t-micro) var(--o2-std)}
.odl2 .viewtoggle button.active{background:rgba(244,233,215,.08);color:var(--cream);box-shadow:inset 0 0 0 1px var(--o2-rim-gold)}
.odl2 .viewtoggle button.active .cnt{color:var(--od-gold,#F1B43E)}
.odl2 .viewnote{color:var(--muted)}
@media (max-width:560px){.odl2 .viewtoggle{border-radius:var(--o2-r-md)}}

/* ---- touch: tiles never shrink the star/move targets below 44 ------------------------ */
@media (pointer:coarse){
  .odl2 .card .unlock-opts a.opt,.odl2 .card .go.open,.odl2 .card .go.upgrade{min-height:44px}
}

/* ---- reduced motion: v2 already swaps arrival for a 200 ms fade; also drop tile and chevron motion --------- */
@media (prefers-reduced-motion:reduce){
  .odl2 .card,.odl2 .catgrp > summary::after,.odl2 .card .go{transition:none}
  .odl2 a.card:active{transform:none}
}

/* ---- n022 2026-10-11: tile arrow pinned top-right, pills + Open pinned to the bottom ---- */
.odl2 a.card h3{padding-right:1.6rem}
.odl2 a.card h3 .arw--ne{position:absolute;top:24px;right:20px;margin:0}
.odl2 .favcell a.card h3 .arw--ne{right:56px}
.odl2 a.card p{flex:0 0 auto}
.odl2 a.card .status{margin-top:auto}
.odl2 a.card p + .go{margin-top:auto}
.odl2 a.card .status ~ .status{margin-top:8px}
.odl2 .card .status.noacct{color:var(--muted)}
/* chip row: right-edge fade + snap, any narrow width */
@media (max-width:640px){
  .odl2 .chips{scroll-snap-type:x mandatory;scroll-padding-left:4px;max-width:calc(100% + 8px);overscroll-behavior-x:contain}
  .odl2 .chip{scroll-snap-align:start}
}
.odl2 a.card .status + .go{margin-top:0}
.odl2 a.card p{margin-bottom:12px}