/* App shell and shared components (platform-core). Page-specific styles live in the other css files. */
.boot{padding:48px;text-align:center;color:var(--mute)}
.app-main{padding-block:28px 64px;min-height:calc(100vh - var(--hdr));outline:none}
.page{display:block}
.page-head{margin-bottom:24px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.page-head h1{font-size:clamp(24px,3.4vw,32px)}
.page-head p{margin-top:6px}
.sk-w40{width:40%}.sk-w70{width:70%}.sk-w90{width:90%}.sk-gap{margin-top:10px}
.avatar{border-radius:50%;flex:none;vertical-align:middle;background:var(--side)}
.nav-search{margin-left:auto;flex:0 1 280px}
.nav-search input{min-height:34px;padding:5px 10px;border-radius:var(--r-pill);font-size:14px}
@media (max-width:820px){.nav-search{margin-left:0;flex:1}}
.site-header .nav-links{flex:1}
.bell{position:relative}
.dotcount{position:absolute;top:2px;right:0;min-width:16px;height:16px;border-radius:8px;background:var(--acc);color:var(--acc-fg);font:600 10px/16px var(--sans);text-align:center;padding:0 4px}
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;display:flex;border-radius:50%}
.menu>summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);padding:6px;z-index:60;display:grid;gap:1px}
.menu-pop a,.menu-pop .lnk-btn{display:block;padding:7px 10px;border-radius:var(--r-sm);color:var(--fg);text-decoration:none;font-size:14px;text-align:left;background:none;border:0;cursor:pointer;width:100%;font-family:inherit}
.menu-pop a:hover,.menu-pop .lnk-btn:hover{background:var(--side)}
.menu-pop hr{margin:4px 0}
.menu-head{display:grid;padding:8px 10px}
.menu-label{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:6px 10px 2px}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{color:var(--mute)}

/* item cards */
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.item-card{padding:16px;display:flex;flex-direction:column;gap:6px;position:relative}
.item-card h3{font-size:15px;margin:0;word-break:break-word}
.item-card .item-link{color:var(--fg);text-decoration:none}
.item-card .item-link::after{content:"";position:absolute;inset:0}
.item-card .slash{color:var(--faint);margin-inline:1px}
.item-card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.item-card-top .kind{margin-left:0}
.item-price{margin-left:auto;font:500 13px var(--mono);color:var(--mute)}
.item-price.paid{color:var(--acc)}
.item-title{font-weight:500;font-size:14px}
.item-summary{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.item-card-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--mute);margin-top:auto;padding-top:8px}
.item-card-meta svg{display:inline;vertical-align:-2px}
.owner{display:inline-flex;align-items:center;gap:6px;color:var(--fg);text-decoration:none;font-weight:500}
.owner:hover{text-decoration:underline}
.verified{color:var(--info);display:inline-flex}

.pager{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.layout-2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.layout-2.left{grid-template-columns:240px minmax(0,1fr)}
@media (max-width:900px){.layout-2,.layout-2.left{grid-template-columns:minmax(0,1fr)}}
.side-block{padding:16px}
.side-block+.side-block{margin-top:14px}
.side-block h3{font-size:12px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--mute)}.kv dd{margin:0;text-align:right;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.form-narrow{max-width:440px;margin-inline:auto}
.form-card{padding:24px}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.md{line-height:1.7;overflow-wrap:anywhere}
.md>*+*{margin-top:1em}
.md .mdh1,.md .mdh2{margin-top:1.6em;padding-bottom:.3em;border-bottom:1px solid var(--line2)}
.md .mdh3,.md .mdh4{margin-top:1.4em}
.md .mdh1{font-size:clamp(28px,4vw,38px);letter-spacing:-.025em}
.md .mdh2{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.018em}
.md .mdh3{font-size:16px}.md .mdh4{font-size:14px}.md .mdh5{font-size:13px}.md .mdh6{font-size:12px}
.md ul,.md ol{padding-left:1.5em}
.md li+li{margin-top:.25em}
.md img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.md blockquote{border-left:3px solid var(--acc-line);padding-left:1em;color:var(--mute)}
.md .a-right{text-align:right}.md .a-center{text-align:center}
.md hr{margin-block:1.5em}
.md pre{max-width:100%}
.a-right{text-align:right}.a-center{text-align:center}
.stack-h{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.bar-chart{display:flex;align-items:flex-end;gap:2px;height:80px}
.bar-chart i{flex:1;background:var(--acc-line);border-radius:2px 2px 0 0;min-height:2px;display:block}
.bar-chart i:hover{background:var(--acc)}
.sr-live{position:absolute;left:-9999px}

/* header on phones: keep brand, tools and menu button on one row */
.nav-theme{display:none}
@media (max-width:820px){
  .nav-tools .theme-btn{display:none}
  .nav-theme{display:block}
  .nav-theme .btn{width:100%;justify-content:flex-start;min-height:44px}
  .site-header .wrap{gap:6px 8px}
  .brand{margin-right:auto}
}
@media (max-width:560px){.nav-tools .lbl{display:none}.nav-tools .btn.sec.sm:has(.lbl){padding-inline:9px}}

/* ---------- accessibility and polish pass ---------- */
/* Form controls need a 3:1 boundary (WCAG 1.4.11); the hairline token is about 1.5:1. Re-pointing --line on the control
   keeps rf.css hover, focus and invalid states (they use --line-strong, --acc and --bad) working. */
input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden]),textarea,select,.input{--line:color-mix(in oklch,var(--fg) 50%,var(--bg));--line-strong:var(--fg)}
/* The SPA footer is a single legal row: no second hairline and no empty band above it. */
.site-footer{padding-block:20px}
.site-footer .wrap>.legal:only-child{margin-top:0;padding-top:0;border-top:0}
.foot-links a{display:inline-flex;align-items:center;min-height:28px}
/* While a page is loading the footer stays hidden, so the skeleton-to-content swap does not move it (layout shift). */
#app.is-loading #ft-host{visibility:hidden}
.menu>summary{align-items:center;justify-content:center}
.nav-tools .btn{flex:none}
.site-header .brand{min-height:40px}
@media (max-width:820px){
  /* touch targets of at least 40px for controls that are not running text */
  .btn{min-height:40px}
  .btn.icon,.btn.icon.sm{width:40px}
  .menu>summary{width:40px;height:40px}
  .menu-pop a,.menu-pop .lnk-btn{min-height:44px;display:flex;align-items:center}
  .foot-links{gap:4px 14px}
  .foot-links a{min-height:40px}
  .site-footer .legal{gap:4px 24px}
}

/* Dialogs whose header, body and footer sit inside a <form>: keep the buttons on screen and scroll only the body on short or narrow screens. */
dialog.modal>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0}
dialog.modal>form>.hd,dialog.modal>form>.ft{flex:none}
dialog.modal>form>.bd{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.badge.acc .faint{color:inherit}
.empty h1,.empty h2{font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.008em;margin-bottom:4px}
/* rf.css now defines .page-head as a padded, ruled hero header for the static pages; the app's compact page header must not inherit that. */
.app-main .page-head{padding-block:0;border-bottom:0}

/* touch targets on phones, second part. Page sheets load after this file and size some controls at the same specificity, so these selectors are one element stronger. */
@media (max-width:820px){
  body .btn.sm,body .pub-btn{min-height:40px}
  body .pub-btn,body .nav-tools .btn.icon,body .btn.nav-toggle{min-width:40px;width:auto}
  body :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden]),select){min-height:40px}
  body a.hm-chip,body .pf-chip,body .pf-org-chip,body .og-role,body .ex-chip,body .db-toggle,body .db-sort{min-height:40px}
  body :is(.hm-more,.hm-steps a,.it-owner,.owner,.lnk.small,.au-row a,.au-alt a,.it-dis-c,.foot-links a){display:inline-flex;align-items:center;min-height:40px}
  body .ex-group>summary{min-height:40px;align-items:center}
  body :is(.ex-pg,.pager .btn,.foot-links a){min-width:40px;justify-content:center}
  body .kv dd a{display:inline-block;padding-block:8px}
  body :is(a.badge,a.tag){display:inline-flex;align-items:center;min-height:24px}
  body :is(.db-ob-foot .lnk,.pb-md-tools .lnk,.pb-chip,.pl-ex,.pb-md-tabs button,.ad-bar .btn){min-height:40px}
  /* single-line text links: grow the hit area vertically without changing the line height */
  body :is(.pb-checklist a,.au-foot a,.it-back a,.it-dis-title a){padding-block:11px}
}

/* header search typeahead (T6): a combobox listbox under the input */
.nav-search form{position:relative}
.ta-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);max-height:min(70vh,420px);overflow:auto;min-width:min(100%,320px)}
.ta-list[hidden]{display:none}
.ta-group{padding:6px 10px 2px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.ta-opt{display:flex;align-items:baseline;gap:8px;min-height:40px;padding:7px 10px;border-radius:var(--r-sm);cursor:pointer;color:var(--fg);font-size:14px;text-decoration:none}
.ta-opt[aria-selected="true"],.ta-opt:hover{background:var(--acc-soft);color:var(--fg);outline:2px solid var(--acc-line,var(--acc));outline-offset:-2px}
.ta-opt .ta-main{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ta-opt .ta-sub{color:var(--mute);font-size:13px;margin-left:auto;white-space:nowrap}
.ta-empty{padding:10px;color:var(--mute);font-size:14px}

/* Publisher tier badge (lib/ui.js tierBadge): a long verified domain is cut with an ellipsis instead of widening cards at 360px. */
.tier-badge{max-width:100%;min-width:0}
.tier-badge>span{min-width:0;overflow:hidden;text-overflow:ellipsis}