/* Community-DB's public sheet page (sheet.html). Public, its own navy band
   (as Lineup's trade partner page), no shell, always light. The sheet itself
   is drawn as the app's View side draws it (styles.css: .ptitle, .sec, the
   tables, .imgs, the lightbox); those rules are repeated here in their light
   values only. Phone rules and paper are at the end. */
:root{
  --navy:#0a2540; --blue:#0057b8; --blue-600:#0064d2; --blue-050:#eaf2fc; --link:#0057b8;
  --ink:#1a2433; --mute:#5b6b7f; --line:#e3e8ef; --grey:#f5f7fa; --bg:#f5f7fa; --card:#fff;
  --search-bg:#fffbe6; --search-line:#e8c86a; --search-dim:#6b5d2e;
  --shadow:0 1px 3px rgba(10,37,64,.08),0 8px 24px rgba(10,37,64,.06);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:14px;line-height:1.45;color:var(--ink);background:var(--bg);overflow-x:hidden}
button,input,select{font:inherit;line-height:1.3;color:inherit}
button{cursor:pointer}
a{color:var(--link)}
:where(button,a,input,select,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{display:none!important}
.none{color:var(--mute)}

/* the band */
.band{background:#0a2540;color:#fff;border-bottom:3px solid #0057b8;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.band-in{padding:14px 18px;display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto;color:#fff;text-decoration:none;border-radius:8px}
.brand img{width:40px;height:40px;display:block;flex:none}
.brand .pt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand .eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8fb4e3}
.brand .pt b{font-size:22px;letter-spacing:-.01em}
.brand #pSub{font-size:13px;color:#c9d6e6;margin-top:2px}
.brand:focus-visible,.onnavy:focus-visible{outline-color:#fff}
.onnavy{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;border-radius:6px;padding:6px 11px;font-size:13px;font-weight:600;min-height:34px}
.onnavy:hover{background:rgba(255,255,255,.2)}

/* buttons, messages */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--blue);border-radius:10px;padding:10px 16px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;text-decoration:none;min-height:40px}
.btn:hover{background:var(--blue-600);border-color:var(--blue-600)}
.linkbtn{border:0;background:none;color:var(--blue);font-weight:600;font-size:13.5px;padding:4px 6px;border-radius:6px;text-decoration:none;display:inline-block}
.linkbtn:hover{background:var(--blue-050)}
.loading{text-align:center;color:var(--mute);padding:60px 16px;margin:0}
.empty{text-align:center;color:var(--mute);padding:40px 12px;font-size:14px;list-style:none}
.empty.small{padding:22px}
.cardmsg{max-width:520px;margin:40px auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;text-align:center;box-shadow:var(--shadow)}
.cardmsg h1{font-size:20px;margin:0 0 8px}
.cardmsg p{margin:0 0 14px;color:var(--mute)}
.pfoot{padding:0 18px 30px;color:var(--mute);font-size:12.5px}

/* the list */
.ask{background:var(--card);border-bottom:1px solid var(--line);padding:20px 18px 16px}
.ask-in{max-width:820px;margin:0 auto}
.ask h1{margin:0 0 4px;font-size:22px;line-height:1.2;color:#0a2540}
.ask .lead{margin:0 0 12px;color:var(--mute)}
.divpick{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.dchip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:20px;padding:6px 14px;font-size:13.5px;font-weight:600;min-height:36px}
.dchip:hover{border-color:var(--blue)}
.dchip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
input.pq{width:100%;font-size:15px;padding:11px 14px;border-radius:10px;border:1px solid var(--search-line);background:var(--search-bg);color:var(--ink)}
input.pq::placeholder{color:var(--search-dim);opacity:1}
input.pq:focus{outline:none;border-color:var(--blue)}
.pmain{padding:16px 18px 30px}
.ask + .pmain{max-width:856px;margin:0 auto}
.count{margin:0 0 8px;color:var(--mute);font-size:12.5px}
.clist{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.clist li+li{border-top:1px solid var(--line)}
.crow{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;padding:11px 14px;color:var(--ink);text-decoration:none;min-height:44px}
.crow:hover{background:var(--blue-050)}
.crow:focus-visible{outline-offset:-2px}
.crow .nm{font-weight:600}
.crow .mt{color:var(--mute);font-size:12.5px}
.crow .go{margin-left:auto;color:var(--mute);font-size:18px;line-height:1}

/* the sheet (styles.css, light) */
.back{margin:0 0 10px}
.panel{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.ptitle{background:var(--navy);color:#fff;padding:12px 14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.ptitle h1{font-size:19px;margin:0;line-height:1.25}
.ptitle .s{display:block;font-weight:400;font-size:12px;opacity:.85;margin-top:2px}
.ptitle-main{min-width:0}
.enc-wrap{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.enc-wrap select{font-size:13px;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:#fff;color:var(--ink);padding:4px 8px;max-width:60vw}
.sec{background:var(--blue);color:#fff;padding:6px 14px;font-weight:700;font-size:12px;letter-spacing:.4px;text-transform:uppercase;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
td,th{border-bottom:1px solid var(--line);padding:6px 14px;vertical-align:top;text-align:left}
th{background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;padding:9px 14px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
th.nowrap{white-space:nowrap}
td.k{width:230px;background:var(--grey);font-weight:600;font-size:12.5px}
td.v{white-space:pre-wrap;overflow-wrap:anywhere}
.plans-t{min-width:680px}
.plans-t td:first-child,.plans-t th:first-child{width:76px}
.plans-t td:nth-child(3),.plans-t th:nth-child(3),
.plans-t td:nth-child(4),.plans-t th:nth-child(4),
.plans-t td:nth-child(5),.plans-t th:nth-child(5){width:150px}
.model-t td:first-child,.model-t th:first-child{width:150px}
.model-t td:nth-child(2),.model-t th:nth-child(2){width:230px}
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px 14px}
.card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card);margin:0}
.card img{width:100%;height:130px;object-fit:cover;display:block;cursor:zoom-in;background:var(--grey)}
.card img:not([src]){cursor:default}
.card img:focus-visible{outline-offset:-2px}
.card .cap{padding:6px 8px;color:var(--mute);font-size:12.5px}
.lightbox{position:fixed;inset:0;background:rgba(12,18,30,.9);display:none;align-items:center;justify-content:center;z-index:60;padding:24px;cursor:zoom-out}
.lightbox.on{display:flex}
.lightbox:focus{outline:none}
.lightbox img{max-width:100%;max-height:88vh;box-shadow:0 8px 40px rgba(0,0,0,.5);background:#fff}
.lightbox .cp{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:13px}

/* phones (700px and under, or on its side) */
@media (max-width:700px),(max-height:500px) and (max-width:880px){
  .band-in{padding:10px 12px}
  .brand img{width:34px;height:34px}
  .brand .pt b{font-size:17px}
  .onnavy{min-height:40px}
  .ask{padding:16px 12px 14px}
  .ask h1{font-size:19px}
  .pmain{padding:12px 12px 24px}
  .pfoot{padding:0 12px 24px}
  input.pq,.enc-wrap select{font-size:16px;min-height:40px}
  .dchip{min-height:40px}
  .back .linkbtn{padding:10px 6px}
  .ptitle{padding:10px 12px}
  td.k{width:auto;min-width:120px}
  /* tables read across slide sideways with their first column in place */
  .tscroll table th:first-child,.tscroll table td:first-child{position:sticky;left:0;z-index:1}
  .tscroll table td:first-child{background:var(--card);box-shadow:inset -1px 0 0 var(--line)}
  .tscroll table td.k:first-child{background:var(--grey)}
  .imgs{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:10px}
  .lightbox{padding:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* paper: the sheet only, light, tables whole */
@media print{
  body{background:#fff}
  .onnavy,.back,.ask,.lightbox,.pfoot,.enc-wrap{display:none!important}
  .band-in{padding:8px 0}
  .pmain{padding:10px 0 0}
  .panel{box-shadow:none;border-color:#c9d2de}
  .tscroll{overflow:visible}
  .plans-t{min-width:0}
  tr,.card{break-inside:avoid}
  .card img{height:auto;max-height:240px;object-fit:contain}
}