/* The identity and device reference pages share a compact mobile hierarchy. */
.brand-mark { width:36px; height:36px; flex:none; }
.workbench-brand,.carousel-wordmark { display:inline-flex; gap:10px; align-items:center; }
.brand-name { font:600 22px/1 var(--font,Inter,sans-serif); letter-spacing:-.055em; }
.brand-name>span { opacity:.5; }
.workbench-brand>span:last-child { color:inherit; }
.carousel-wordmark .brand-name { display:inline; margin:0; opacity:1; color:white; font-size:var(--text-20); }
.carousel-wordmark .brand-name>span { display:inline; font:inherit; margin:0; letter-spacing:inherit; }
.carousel-wordmark .brand-mark { width:32px; height:32px; }
#share-device-dialog { width:min(420px,calc(100% - 32px)); margin:auto; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
#share-device-dialog::backdrop { background:#1118; }
#share-device-dialog h2 { font-size:var(--text-24); margin-bottom:20px; }
#share-device-dialog label { font-size:var(--text-14); }
#share-device-url { width:100%; margin:8px 0 20px; }
.device-page { max-width:1240px; }
.device-back-row { display:flex; align-items:center; gap:16px; min-height:80px; font-size:var(--text-13); color:var(--muted); }
.device-back-row>a { display:flex; gap:8px; align-items:center; min-height:44px; color:var(--ink); }
.device-back-row>a>svg { width:16px; transform:rotate(180deg); }
.device-back-row .device-share { margin-left:auto; }
.device-overview { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.device-photo { min-width:0; }
.device-photo .device-art { aspect-ratio:1; border-radius:28px; overflow:hidden; background:#f0f1eb; }
.device-photo .device-art img { position:absolute; inset:7%; width:86%; height:86%; object-fit:contain; mix-blend-mode:multiply; }
.device-photo figcaption { margin-top:12px; font-size:var(--text-11); line-height:1.6; color:var(--muted); }
.device-photo summary { cursor:pointer; width:fit-content; min-height:44px; align-content:center; padding-block:4px; }
.device-photo figcaption a { text-decoration:underline; text-underline-offset:3px; }
.device-photo figcaption svg { width:12px; height:12px; display:inline; }
.device-maker { font-size:var(--text-13); color:var(--muted); }
.device-maker>span { margin-left:12px; }
body[data-page=device] .device-intro h1 { font:600 clamp(40px,5vw,64px)/1.04 var(--display); letter-spacing:-.045em; margin:12px 0 20px; overflow-wrap:anywhere; }
.device-purpose { font-size:var(--text-16); line-height:1.6; max-width:36ch; color:var(--muted); }
.device-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.device-tags>span { font-size:var(--text-11); line-height:1.4; padding:6px 10px; border-radius:7px; background:var(--surface); border:1px solid var(--line); }
.device-purchase { margin-top:28px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; font-size:var(--text-13); }
.device-purchase>strong { font-size:var(--text-22); letter-spacing:-.02em; }
.device-price { display:inline-flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.device-price strong { font-size:var(--text-22); letter-spacing:-.02em; }
.device-price small { color:var(--muted); font-size:var(--text-12); }
/* Several shops may be listed. Only the first link takes the auto margin, so the group sits
   together at the right instead of each link being pushed to its own far edge. */
.device-purchase>a { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--muted); }
.device-purchase>a:first-of-type { margin-left:auto; }
.device-purchase svg { width:14px; }
.purchase-note { margin-top:8px; font-size:var(--text-12); line-height:1.55; color:var(--muted); max-width:52ch; }
.device-affiliate-note { margin:6px 0 0; font-size:var(--text-12); color:var(--muted); }
.device-buy { margin-top:16px; }
.device-buy .button { min-height:48px; width:100%; justify-content:center; }
.device-buy-note { margin:8px 0 0; font-size:var(--text-13); color:var(--muted); }
.device-primary-actions { display:flex; gap:12px; margin-top:12px; }
.device-primary-actions .kit-add { min-height:48px; flex:1; border-radius:14px; justify-content:center; font-size:var(--text-14); }
.device-page :is(.device-primary-actions,.device-mobile-actions) .kit-add { background:var(--ink); color:var(--surface); padding-inline:16px; }
.device-page :is(.device-primary-actions,.device-mobile-actions) .kit-add[aria-pressed=true] { background:#d5f582; color:#18201b; }
.device-primary-actions .icon-button { width:48px; height:48px; border:1px solid var(--line-strong); border-radius:14px; background:transparent; }
.device-fit { border-top:1px solid var(--line); padding-top:20px; margin-top:28px; display:grid; gap:16px; }
.device-fit>div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:20px; }
.device-fit dt { font-size:var(--text-12); color:var(--muted); }
.device-fit dd { font-size:var(--text-14); line-height:1.55; }
.device-evidence { display:inline-flex; gap:8px; align-items:center; margin-top:16px; min-height:44px; font-size:var(--text-11); color:var(--muted); }
.device-evidence>svg { width:14px; height:14px; }
.device-section-nav { display:flex; gap:32px; position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); margin-top:40px; background:var(--bg); overflow-x:auto; }
.device-section-nav>a { display:flex; align-items:center; gap:8px; min-height:64px; white-space:nowrap; font-size:var(--text-14); }
.device-section-nav>a>span { font:400 11px var(--mono); color:var(--muted); }
.device-section-nav>a:hover { color:var(--accent); }
.device-reference-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr); gap:clamp(32px,6vw,88px); margin-top:40px; }
.device-reference-layout section,.device-reference-layout aside { min-width:0; scroll-margin-top:88px; }
.device-overline { font:500 10px/1.5 var(--font); letter-spacing:.12em; color:var(--muted); }
body[data-page=device] :is(.device-specifications,.device-resources) h2 { font:600 30px/1.2 var(--display); letter-spacing:-.035em; margin:8px 0 0; }
.device-section-heading { display:flex; flex-wrap:wrap; gap:20px; align-items:end; justify-content:space-between; margin-bottom:24px; }
.device-spec-search { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); max-width:240px; }
.device-spec-search>svg { width:16px; height:16px; color:var(--muted); flex:none; }
.device-spec-search>input { min-width:0; width:100%; min-height:44px; padding:8px 0; background:transparent; border:0; border-radius:0; font-size:var(--text-14); }
.device-spec-group { border-top:1px solid var(--line); }
.device-spec-group:last-child { border-bottom:1px solid var(--line); }
.device-spec-group>summary { cursor:pointer; display:flex; align-items:center; gap:12px; min-height:64px; list-style:none; padding-block:16px; }
.device-spec-group>summary::-webkit-details-marker { display:none; }
.device-spec-group>summary::after { content:'+'; margin-left:auto; color:var(--muted); font:400 22px/1 var(--font); }
.device-spec-group[open]>summary::after { content:'−'; }
.device-spec-group h3 { font:600 16px/1.4 var(--font); letter-spacing:0; }
.device-spec-group>summary>span { font:400 11px var(--mono); color:var(--muted); }
.device-spec-group dl { padding-bottom:16px; }
.device-spec-group dl>div { display:grid; grid-template-columns:minmax(110px,.7fr) minmax(0,1fr); gap:24px; padding:12px 0; font-size:var(--text-13); line-height:1.65; }
.device-spec-group dt { color:var(--muted); }
.device-spec-group dd { overflow-wrap:anywhere; }
.spec-source { display:inline-flex; vertical-align:middle; width:44px; height:44px; align-items:center; justify-content:center; color:var(--muted); }
.spec-source svg { width:12px; height:12px; }
.device-resource-list { margin-top:24px; }
.device-resource-list>a { display:flex; align-items:center; gap:20px; padding-block:18px; min-height:72px; border-bottom:1px solid var(--line); }
.device-resource-list>a:first-child { border-top:1px solid var(--line); }
.device-resource-list>a>span { display:grid; gap:4px; min-width:0; }
.device-resource-list strong { font-size:var(--text-14); font-weight:500; overflow-wrap:anywhere; }
.device-resource-list small { font-size:var(--text-11); color:var(--muted); overflow-wrap:anywhere; }
.device-resource-list svg { margin-left:auto; width:16px; height:16px; flex:none; }
.device-source-notes,.device-gaps { margin-top:24px; font-size:var(--text-12); line-height:1.7; color:var(--muted); }
.device-source-notes summary,.device-gaps summary { cursor:pointer; padding-block:12px; color:var(--ink); }
.device-source-notes p { margin-block:12px; }
.device-source-notes>a { display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.device-source-notes svg { width:14px; }
.device-gaps ul { padding-left:18px; }
.device-gaps li+li { margin-top:8px; }
.device-community-repos { margin-top:28px; }
.device-community-repos h3 { font-size:var(--text-16); font-weight:600; margin-bottom:12px; }
.device-repo-list { display:grid; gap:10px; }
.device-repo-card { display:block; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-decoration:none; color:inherit; transition:border-color 160ms ease, box-shadow 160ms ease; }
.device-repo-card:hover { border-color:var(--strong-line); box-shadow:0 4px 16px rgba(0,0,0,0.06); }
.device-repo-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.device-repo-title-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.device-repo-title-group strong { font-size:var(--text-14); font-weight:600; color:var(--ink); }
.device-repo-tag { font-size:var(--text-10); font-weight:600; text-transform:uppercase; letter-spacing:.05em; background:var(--bg); border:1px solid var(--line); padding:2px 6px; border-radius:4px; color:var(--muted); }
.device-repo-stars { display:inline-flex; align-items:center; gap:4px; font-size:var(--text-11); font-weight:600; color:#685800; background:#fef3be; padding:2px 6px; border-radius:9999px; }
.device-repo-stars svg { width:12px; height:12px; }
.device-repo-desc { margin:4px 0 10px; font-size:var(--text-12); line-height:1.5; color:var(--muted); }
.device-repo-foot { display:flex; align-items:center; justify-content:space-between; font-size:var(--text-11); font-family:var(--mono); color:var(--muted); }
.device-repo-icon svg { width:13px; height:13px; }
.device-related { margin-top:64px; }
.device-mobile-actions { display:none; }
body[data-page=device] #kit-tray { display:none; }
@media(max-width:760px) {
  .brand-mark { width:32px; height:32px; }
  .brand-name { font-size:var(--text-20); }
  .device-back-row { min-height:64px; }
  .device-overview { grid-template-columns:1fr; gap:24px; }
  .device-photo .device-art { aspect-ratio:1.2; border-radius:24px; }
  .device-photo figcaption { margin-top:8px; }
  body[data-page=device] .device-intro h1 { font-size:var(--text-36); margin:8px 0 12px; }
  .device-purpose { font-size:var(--text-16); }
  .device-tags { margin-top:16px; }
  .device-purchase { margin-top:16px; }
  .device-fit { margin-top:20px; }
  .device-section-nav { margin-top:24px; gap:24px; }
  .device-section-nav>a { min-height:56px; font-size:var(--text-13); }
  .device-reference-layout { grid-template-columns:1fr; gap:40px; margin-top:32px; }
  .device-section-heading { align-items:start; }
  .device-spec-search { max-width:none; width:100%; }
  .device-spec-search>input { font-size:var(--text-16); }
  .device-spec-group dl>div { grid-template-columns:minmax(96px,.7fr) minmax(0,1fr); gap:16px; }
  .device-resource-list>a { min-height:72px; }
  .device-mobile-actions { position:fixed; z-index:30; bottom:0; left:0; right:0; display:flex; align-items:center; gap:8px; padding:12px max(20px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 32px #22250908; }
  .device-mobile-actions>div { display:grid; gap:3px; margin-right:auto; min-width:0; }
  .device-mobile-actions>div strong { font:600 12px/1.4 var(--font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .device-mobile-actions>div span { font-size:var(--text-10); color:var(--muted); }
  .device-mobile-actions .kit-add { min-height:44px; font-size:var(--text-12); border-radius:12px; padding-inline:12px; white-space:nowrap; flex:none; }
  .device-mobile-actions .save-button { width:44px; height:44px; flex:none; }
  body[data-page=device] { padding-bottom:88px; }
}
.device-maker-offer { margin-top:16px; border:1px solid #c6d6aa; border-radius:12px; background:#f1f7e6; }
.device-maker-offer>summary { display:flex; align-items:center; gap:12px; list-style:none; cursor:pointer; min-height:48px; padding:12px 16px; font-size:var(--text-13); }
.device-maker-offer>summary::-webkit-details-marker { display:none; }
.device-maker-offer>summary>span { font-size:var(--text-11); color:#425430; white-space:nowrap; }
.device-maker-offer>summary>svg { width:16px; height:16px; flex-shrink:0; margin-left:auto; }
.device-maker-offer[open]>summary>svg { transform:rotate(45deg); }
.device-maker-offer>div { padding:4px 16px 16px; }
.device-offer-code { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.device-offer-code code { padding:10px 12px; border:1px dashed #a7bb89; border-radius:8px; background:var(--surface); font:600 16px/1.4 var(--mono); user-select:all; }
.device-offer-code button { min-height:44px; padding:8px 12px; border:1px solid #a7bb89; border-radius:8px; background:var(--surface); font-size:var(--text-13); }
.device-maker-offer p { font-size:var(--text-13); line-height:1.6; }
.device-maker-offer a { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:var(--text-13); }
.device-maker-offer a svg { width:14px; }
.device-maker-offer small { display:block; font-size:var(--text-11); line-height:1.6; color:#425430; }

.device-alert { margin-top:20px; padding:16px; border:1px solid var(--line); border-radius:12px; }
.device-alert label { display:block; font-weight:600; margin-bottom:8px; }
.device-alert-row { display:flex; gap:8px; flex-wrap:wrap; }
.device-alert-row input { flex:1 1 200px; min-height:44px; padding:8px 12px; font:inherit; border:1px solid var(--line-strong); border-radius:8px; }
.device-alert-note { margin:8px 0 0; font-size:var(--text-12); color:var(--muted); }

.device-use-notice { margin:14px 0 0; padding:10px 12px; font-size:var(--text-13); line-height:1.5; color:var(--muted); border-left:3px solid var(--line); }