/* ---------- sticky header ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--stone);
  padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid var(--rule);
  box-shadow:0 6px 14px -12px rgba(0,0,0,.5)}
.topbar-in{max-width:1280px;margin:0 auto;padding:0 18px}
.mast{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:11px 0 9px}
.mast h1{font-size:23px;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.mast .spacer{flex:1 1 auto}
.ribbon{height:0;border-radius:2px}
:root[data-theme^="pride"] .ribbon{height:5px;margin-bottom:8px;
  background:linear-gradient(90deg,#CC2222 0%,#CC2222 16.6%,#E08A00 16.6%,#E08A00 33.3%,
    #EFC100 33.3%,#EFC100 50%,#2E8B3D 50%,#2E8B3D 66.6%,#1E6FD9 66.6%,#1E6FD9 83.3%,
    #7B2FBE 83.3%,#7B2FBE 100%)}
:root[data-theme^="pride"] .ribbon::after{content:"";display:block;height:5px;width:44%;
  max-width:290px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--rule);
  background:linear-gradient(90deg,#000 0%,#000 20%,#6A3B15 20%,#6A3B15 40%,
    #5BCEFA 40%,#5BCEFA 60%,#F5A9B8 60%,#F5A9B8 80%,#FFF 80%,#FFF 100%)}

.tabs{display:flex;gap:2px}
.tabs button{font:inherit;font-size:13.5px;color:var(--ink-3);background:none;border:0;
  border-bottom:2px solid transparent;padding:7px 13px 8px;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--amber);font-weight:700}

/* ticket */
.ticket{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:2px 0 9px}
.val{display:flex;align-items:baseline;gap:8px}
.val .big{font-family:"Bodoni Moda",serif;font-size:31px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.val .unit{font-size:12px;color:var(--ink-2)}
/* only the echoes carry the Skeleton Value tooltip, not the scrip beside them */
.val .echo{display:inline-flex;align-items:baseline;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;
  border:1px solid var(--rule);border-radius:2px;font-size:12px;background:var(--card)}
.chip b{font-family:"Bodoni Moda",serif;font-size:14.5px;font-variant-numeric:tabular-nums}
.chip[data-q="ant"]{border-left:3px solid var(--ant)} .chip[data-q="ant"] b{color:var(--ant)}
.chip[data-q="amal"]{border-left:3px solid var(--amal)} .chip[data-q="amal"] b{color:var(--amal)}
.chip[data-q="men"]{border-left:3px solid var(--men)} .chip[data-q="men"] b{color:var(--men)}
.chip[data-q="theo"]{border-left:3px solid var(--theo)} .chip[data-q="theo"] b{color:var(--theo)}
.chip[data-q="imp"]{border-left:3px solid var(--imp)} .chip[data-q="imp"] b{color:var(--imp)}
.chip .pref{color:var(--amber);font-size:10.5px}
.status{font-size:12.5px;padding:3px 9px;border-radius:2px;background:var(--card);
  border:1px solid var(--rule)}
.status.done{color:var(--ok);border-color:var(--ok)}
.status.warn{color:var(--amber);border-color:var(--amber)}

/* skeleton-type strip */
.typestrip{display:flex;flex-wrap:wrap;gap:5px;padding:0 0 9px}
.tchip{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12.5px;
  padding:3px 9px;border:1px solid var(--rule);border-radius:99px;background:var(--card);
  color:var(--ink-3);cursor:pointer}
.tchip .dot{width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;flex:0 0 7px}
.tchip.yes{color:var(--ok);border-color:var(--ok);font-weight:700}
.tchip.yes .dot{background:currentColor}
.tchip.sel{box-shadow:inset 0 0 0 1px var(--amber);border-color:var(--amber)}
.tchip:hover{color:var(--ink)}
.tchip.yes:hover{color:var(--ok)}
.tdetail{font-size:12.5px;color:var(--ink-2);padding:0 0 10px;display:flex;gap:9px;
  align-items:flex-start}
.tdetail strong{color:var(--ink);font-weight:700;flex:0 0 auto}
.tdetail ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:3px 14px}
.tdetail li{position:relative;padding-left:12px}
.tdetail li::before{content:"\2013";position:absolute;left:0;color:var(--ink-3)}
.tdetail .fix{color:var(--amber)}
.tdetail .good{color:var(--ok)}

/* narrow screens: keep every row on one line and the header short */
@media (max-width:640px){
  .wrap,.topbar-in{padding-left:12px;padding-right:12px}
  .mast{gap:6px 10px;padding:8px 0 6px}
  .mast h1{font-size:18px}
  .tabs button{padding:6px 8px 7px;font-size:13px}
  .val .big{font-size:25px}
  .typestrip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:7px}
  .tchip{flex:0 0 auto}
  .tdetail{max-height:4.8em;overflow-y:auto}
}

/* phones: the sticky header keeps only the essentials unless Details is open */
.morebtn{display:none}
@media (max-width:640px){
  .mast .spacer{order:1} #reset{order:2} .mast .tabs{order:3;flex:1 1 100%}
  #reset .lg{display:none}
  .morebtn{display:inline-block}
  .topbar:not(.full) .chips,.topbar:not(.full) .typestrip,
  .topbar:not(.full) .tdetail,.topbar:not(.full) #v-sockets{display:none}
}
@media (max-width:640px){
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto}
}

/* the scrip beside the echoes, and the tooltip on the echoes */
.val .scripv{font-size:12px;color:var(--ink-2)}
.ticket .echo.hastip{text-decoration:none;cursor:help}