/* 2026-11-09: the public site's look (site/assets/site.css): dark only, its palette, typefaces, header and pill buttons */
:root {
  --bg: #05080d; --panel: #0e1520; --panel2: #131c29; --line: #1d2836; --text: #e6edf4; --muted: #8d9aab; --field: #0a1018;
  --accent: #7cc4ff; --accent2: #7cc4ff; --alert: #f4b860; --good: #7fd18b; --bad: #ff6b6b; --sun: #f4b860;
  --radius: 16px; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --display: "Saira Condensed", "Arial Narrow", sans-serif; --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--body); }
header.top { position: sticky; top: 0; z-index: 30; background: rgba(5, 8, 13, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); color: var(--text); }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; padding-block: 14px; }
.brand { font: 700 25px/1 var(--display); letter-spacing: .03em; color: var(--text); text-decoration: none; margin-right: auto; }
.brand span { color: var(--sun); }
.sitenav { display: flex; gap: 22px; font-size: 16px; }
.sitenav a { color: var(--muted); text-decoration: none; }
.sitenav a:hover, .sitenav a[aria-current] { color: var(--text); }
.pagehead { padding-block: 34px 6px; }
.pagehead .eyebrow { font: 500 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); margin: 0 0 8px; }
.pagehead h1 { font: 700 clamp(40px, 5.5vw, 64px)/1 var(--display); margin: 0 0 8px; }
.pagehead p { color: var(--muted); font-size: 18px; margin: 0; max-width: 680px; }
.logo { width: 44px; height: 44px; flex: none; }
header.top h1 { font-size: 20px; margin: 0; letter-spacing: .2px; }
header.top p { margin: 0; color: #9fb3c8; font-size: 13px; }
.who { text-align: right; font-size: 13px; color: var(--muted); }
.who b { color: var(--text); display: block; font-weight: 600; }
main.wrap { padding-block: 22px 120px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.card h2 { font: 600 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--sun); margin: 0 0 6px; }
.card .lead { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }
label { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 4px; }
.hint, .desc { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.desc { margin: 0 0 6px; min-height: 2.6em; }
input[type=text], input[type=email], input[type=number], select {
  width: 100%; padding: 9px 11px; font: inherit; color: var(--text); background: var(--field);
  border: 1px solid var(--line); border-radius: 9px; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,196,255,.22); }
input::placeholder { color: var(--muted); opacity: .7; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid + .grid, .grid + label, .field + .field { margin-top: 14px; }
button { font: inherit; font-weight: 600; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); padding: 9px 14px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #04101c; }
button.primary:hover { background: #a3d6ff; border-color: #a3d6ff; }
button.ghost { background: transparent; }
button:disabled { opacity: .45; cursor: default; }
.msg { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; border: 1px solid; font-size: 14px; }
.msg.ok { background: rgba(76,195,138,.12); border-color: rgba(76,195,138,.4); }
.msg.err { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.4); }
code, .code { font-family: var(--mono); background: var(--panel2); border: 1px solid var(--line); padding: 1px 7px; border-radius: 6px; font-size: 13px; letter-spacing: .5px; }
/* watches */
/* the modes' layouts (2026-10-02) */
.layouts { display: grid; gap: 12px; margin-top: 14px; }
.layouts fieldset { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px 12px; margin: 0; }
.layouts legend { font-weight: 600; font-size: 13.5px; padding: 0 6px; }
.layouts .row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.layouts .row + .row { margin-top: 10px; }
.layouts label { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.layouts.nopro .pro { display: none; }
.devices { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.devices li { background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; display: flex; gap: 12px; align-items: flex-start; }
.devices .code { font-size: 15px; padding: 3px 9px; }
.devices a.chart { color: var(--accent2); }
.healthchart { margin: 8px 0 2px; }
.healthchart svg { width: 100%; height: auto; display: block; }
.healthchart .lg { font-size: 12px; color: var(--muted); margin-top: 4px; }
.healthchart .lg i { display: inline-block; width: 10px; height: 3px; vertical-align: middle; margin: 0 4px 0 10px; }
.devices .faces { font-size: 13px; color: var(--muted); margin-top: 4px; }
.devices .faces b { color: var(--text); font-weight: 600; }
.devices button { margin-left: auto; padding: 5px 10px; font-size: 12.5px; }
.claim { display: grid; gap: 12px; grid-template-columns: minmax(170px, 1fr) minmax(150px, 1fr) auto; align-items: end; }
#code { font-family: var(--mono); letter-spacing: 2px; text-transform: uppercase; font-size: 16px; }
/* time zones */
.tzlayout { display: grid; gap: 22px; grid-template-columns: 1fr 250px; align-items: start; }
.place { position: relative; }
.place .chosen { display: flex; gap: 10px; align-items: center; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
.place .chosen .lbl { width: 62px; flex: none; font-family: var(--mono); text-transform: uppercase; text-align: center; padding: 5px 4px; letter-spacing: 1px; }
.place .chosen .nm { flex: 1; min-width: 0; font-size: 13.5px; }
.place .chosen .nm small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place .chosen .clock { font-family: var(--mono); color: var(--accent2); font-size: 14px; }
.place .search { margin-top: 6px; }
.quick { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.quick button { padding: 4px 10px; font-size: 12.5px; font-weight: 500; }
.results { position: absolute; z-index: 5; left: 0; right: 0; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.35); max-height: 320px; overflow-y: auto; }
.results div { padding: 8px 12px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.results div:last-child { border-bottom: 0; }
.results div:hover, .results div.on { background: var(--panel2); }
.results .tag { font-family: var(--mono); color: var(--accent2); width: 42px; flex: none; }
.results small { color: var(--muted); display: block; font-size: 12px; }
.results .t { margin-left: auto; font-family: var(--mono); color: var(--muted); font-size: 12.5px; flex: none; }
.toggles { margin-top: 16px; display: grid; gap: 8px; }
.toggle { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 500; font-size: 14px; margin: 0; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.dialbox { text-align: center; position: sticky; top: 12px; }
.dialbox svg { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; }
.dialbox .cap { font-size: 12px; color: var(--muted); margin-top: 6px; }
.dialtabs { display: inline-flex; gap: 4px; margin-bottom: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.dialtabs button { border: 0; background: transparent; padding: 4px 10px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.dialtabs button.on { background: var(--accent); color: #04101c; }
/* tickers */
.tickers { display: grid; gap: 8px; }
.tickers > div { display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; align-items: center; }
.tickers input { font-family: var(--mono); text-transform: uppercase; }
.quote { font-size: 13px; font-family: var(--mono); color: var(--muted); }
.quote.good { color: var(--good); } .quote.bad { color: var(--bad); }
.tickers button { padding: 5px 10px; }
/* save bar */
.savebar { position: fixed; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.savebar .wrap { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.savebar .state { color: var(--muted); font-size: 13px; }
.savebar button { margin-left: auto; min-width: 120px; }
.login { max-width: 460px; margin: 40px auto; }
[hidden] { display: none !important; }
@media (max-width: 720px) {
  .tzlayout { grid-template-columns: 1fr; } .dialbox { position: static; order: -1; }
  .claim { grid-template-columns: 1fr; } .tickers > div { grid-template-columns: 1fr auto; } .tickers .quote { grid-column: 1 / -1; order: 3; }
  .who { display: none; }
}
/* ---- /w/ (2026-10-19): one page for every face ---- */
.wrap { max-width: 1240px; }
.cardhead { display: flex; align-items: center; gap: 10px; }
.cardhead h2 { margin: 0; }
.cardhead button { margin-left: auto; }
button.small { padding: 5px 10px; font-size: 12.5px; }
.devices { margin: 12px 0 0; }
.devices li { align-items: center; }
.devices .app { font-weight: 600; }
.devices select { width: auto; padding: 4px 8px; font-size: 13px; }
.claim { grid-template-columns: minmax(190px, 1fr) minmax(150px, 1fr) auto; margin-top: 14px; }
.claim .codeinfo { grid-column: 1 / -1; margin-top: -4px; }
.codeinfo { min-height: 18px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.codeinfo b { color: var(--text); font-weight: 600; }
.codeinfo.err { color: #f0883e; }
.codeinfo .dot { opacity: .5; padding: 0 5px; }
.devices .model { color: var(--muted); }
/* a device name: the input that proposes (2026-10-28) */
.combo { position: relative; }
.combo input { padding-right: 34px; }
.combo .chev { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 32px; margin: 0; padding: 0; border: 0; border-radius: 0 9px 9px 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.combo .chev:hover { color: var(--text); }
.combo .results { margin-top: 2px; }
.combo .results div > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo .results .t { white-space: nowrap; }
.devices .dv { min-width: 0; flex: 1; }
.devices .dvname { font-size: 15px; font-weight: 700; display: block; margin-bottom: 3px; overflow-wrap: anywhere; }
.devices .dvline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.devices .dvline .code { font-size: 13px; padding: 2px 7px; }
.devices .acts { margin-left: auto; display: flex; flex-direction: column; gap: 6px; flex: none; }
.devices .acts button { margin: 0; }
.devices li { align-items: flex-start; }
.dvedit .comborow { display: flex; gap: 6px; align-items: center; }
.dvedit .comborow .cb { flex: 1; min-width: 0; }
.dvedit .comborow button { margin: 0; flex: none; }
.dvedit .alsoall { display: flex; gap: 7px; align-items: center; font-weight: 400; font-size: 12.5px; color: var(--muted); margin: 6px 0 2px; }
.dvedit .alsoall input { width: auto; margin: 0; }
.dvedit .alsoall[hidden] { display: none; }
.devices .waiting { color: #e3b341; }
.bezel.rect { border-radius: 16%; aspect-ratio: auto; }
.bezel.rect canvas { border-radius: 9%; }
/* toolbar: the face chips and the search */
.toolbar { position: sticky; top: 0; z-index: 20; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); padding: 10px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.chip { border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 13.5px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); }
.chip .n { color: var(--muted); font-weight: 500; margin-left: 6px; font-size: 12px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #04101c; }
.chip.on .n { color: #d6ecfa; }
.toolbar input[type=search] { width: 280px; max-width: 100%; padding: 8px 12px; font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line); border-radius: 999px; outline: none; }
.toolbar input[type=search]:focus { border-color: var(--accent); }
/* settings + pinned preview */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.settings .card h2 .faces { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; font-size: 12.5px; margin-left: 8px; }
.sechead { font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted); margin: 22px 2px 8px; display: flex; align-items: center; gap: 8px; }
.sechead:first-child { margin-top: 4px; }
.sechead b { color: var(--text); font-size: 14px; letter-spacing: .4px; text-transform: none; }
.setting { padding: 12px 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; padding-top: 4px; }
.setting > .lab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.setting > .lab label { margin: 0; }
.setting .desc { min-height: 0; margin: 0 0 6px; white-space: pre-line; }   /* a line break in a desc starts a line (the weather looks, 2026-11-11) */
.setting.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: rgba(53,167,230,.18); } to { background: transparent; } }
.tag { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 1px 8px; border: 1px solid; cursor: default; white-space: nowrap; }
.tag.shared { color: var(--alert); border-color: rgba(233,178,85,.5); background: rgba(233,178,85,.1); }
.tag.perwatch { color: var(--muted); border-color: var(--line); }
.tag.face { color: var(--accent2); border-color: rgba(53,167,230,.45); }
.inline { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.setting .toggle { margin: 0; }
.fieldrow { display: grid; grid-template-columns: 1fr; gap: 4px; }
.fieldrow input { font-family: var(--mono); }
.fieldrow .out { font-size: 12.5px; color: var(--muted); }
.fieldrow .out b { color: var(--text); font-weight: 500; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets button { padding: 5px 12px; font-size: 13px; }
.vocab { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; max-height: 150px; overflow-y: auto; }
.vocab code { cursor: pointer; font-size: 12px; }
.color { display: inline-flex; gap: 8px; align-items: center; }
.color .sw { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; flex: none; }
.palette { position: absolute; z-index: 50; display: none; grid-template-columns: repeat(8, 24px); gap: 3px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.palette.open { display: grid; }
.palette div { width: 24px; height: 24px; border-radius: 5px; cursor: pointer; border: 1px solid rgba(255,255,255,.08); }
.zones { display: grid; gap: 10px; }
.zones .zl { font-size: 12px; color: var(--muted); margin: 0 0 3px; }
.empty { color: var(--muted); padding: 30px 10px; text-align: center; }
.preview { position: sticky; top: 64px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.pvhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pvhead select { width: auto; margin-left: auto; padding: 4px 8px; font-size: 12.5px; }
.pvbody { text-align: center; }
.bezel { position: relative; width: 100%; max-width: 330px; margin: 0 auto; aspect-ratio: 1/1; border-radius: 50%; padding: 5%; background: radial-gradient(circle at 50% 50%, #1b1f26 62%, #2b2f36 63%, #14171c 100%); }
canvas#face { width: 100%; height: 100%; border-radius: 50%; display: block; background: #000; cursor: pointer; }
canvas#machFace { width: 100%; height: 100%; border-radius: 50%; display: block; background: #000; }
canvas#skyFace { width: 100%; height: 100%; border-radius: 50%; display: block; background: #000; }   /* SkyFace: it had no size rule, so the canvas showed at its pixel size and overflowed the bezel (Julien 2026-11-10) */
canvas#wf3dFace { width: 100%; height: 100%; border-radius: 50%; display: block; background: #000; }
/* the previews are pictures drawn on the server (api/face.php, 2026-11-10): while the next one is drawn, the last stays, dimmed */
.bezel canvas { transition: opacity .25s; }
.bezel.drawing canvas { opacity: .72; }
.bezel.drawing::after { content: 'drawing\2026'; position: absolute; left: 0; right: 0; bottom: 13%; text-align: center; font-size: 12px; letter-spacing: .04em; color: #c9ced6; pointer-events: none; }
#machLive .cap select { font-size: 12px; margin-right: 6px; }
.pvbody svg { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; }
.pvbody .cap { font-size: 12px; color: var(--muted); margin-top: 8px; }
.placeholder .ph { aspect-ratio: 1/1; max-width: 280px; margin: 0 auto; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-size: 13px; padding: 30px; }
.notice { margin-top: 12px; padding: 9px 12px; border-radius: 10px; font-size: 13px; border: 1px solid rgba(233,178,85,.45); background: rgba(233,178,85,.1); }
.payload { margin-top: 12px; font-size: 13px; }
.payload summary { cursor: pointer; color: var(--muted); }
.payload pre { white-space: pre-wrap; word-break: break-all; font-size: 11.5px; background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 8px; max-height: 220px; overflow: auto; }
.savebar .state.dirty { color: var(--alert); }
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .preview { position: static; order: -1; }
  .claim { grid-template-columns: 1fr; }
  .devices { grid-template-columns: 1fr; }
  .toolbar input[type=search] { width: 100%; }
}
/* the faces list stays compact: one short card per code */
.devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 2 x 2 for the four faces: a lone 4th tile read as "3 faces" (2026-10-19) */
.devices li { padding: 8px 11px; }
.devices .faces { margin-top: 2px; font-size: 12px; }
.preview { max-height: calc(100vh - 150px); overflow-y: auto; }
.bezel { max-width: 300px; }
@media (max-width: 700px) { .devices { grid-template-columns: 1fr; } }

/* ---- the nav (Julien, 2026-10-19): a sidebar on a desktop, a scrolling row on a phone. Two unnamed groups: the
   shared sections, then the faces of the list (+ "Your faces"). No 'All', no shared tags inside a face. ---- */
.shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; padding-bottom: 80px; }
.nav { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 4px; }
.nav input[type=search] { width: 100%; padding: 7px 11px; border-radius: 999px; font-size: 13.5px; margin-bottom: 8px; }
.navgroup { display: flex; flex-direction: column; gap: 2px; }
.navgroup + .navgroup { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.navitem { text-align: left; background: transparent; border: 1px solid transparent; padding: 7px 11px; font-weight: 600; font-size: 14px; color: var(--text); border-radius: 9px; white-space: nowrap; }
.navitem small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.navitem:hover { background: var(--panel2); border-color: transparent; }
.navitem.on { background: var(--panel2); border-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); }
.navitem.add { color: var(--accent2); font-weight: 500; }
.viewhead { margin: 2px 2px 14px; }
.viewhead h2 { margin: 0; font-size: 22px; }
.viewhead p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.viewhead p a { color: var(--accent2); cursor: pointer; }
.layout.nopv { grid-template-columns: minmax(0, 1fr); }
.layout.nopv .preview { display: none; }
.layout.widepv { grid-template-columns: minmax(0, 1fr) 470px; }
.layout.widepv .bezel { max-width: 440px; }
.hits { display: grid; gap: 6px; }
.hit { text-align: left; display: flex; gap: 12px; align-items: baseline; font-weight: 500; }
.hit .where { margin-left: auto; color: var(--accent2); font-size: 12.5px; white-space: nowrap; }
.hit small { color: var(--muted); font-weight: 400; display: block; }
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; gap: 10px; }
  .nav { position: sticky; top: 0; z-index: 20; flex-direction: row; align-items: center; overflow-x: auto; gap: 6px; padding: 8px 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .nav input[type=search] { width: 150px; flex: none; margin: 0; }
  .navgroup { flex-direction: row; gap: 4px; flex: none; }
  .navgroup + .navgroup { border-top: 0; margin-top: 0; padding-top: 0; border-left: 1px solid var(--line); padding-left: 8px; }
  .navitem { padding: 5px 10px; font-size: 13px; }
  .navitem small { font-size: 11px; max-width: 130px; }
  .navitem.on { box-shadow: inset 0 -2px 0 var(--accent); }
  .layout.widepv { grid-template-columns: 1fr; }
}

/* WorldFace 3D preview (2026-10-30): the bezel fields' hit arcs */
#pvWf3d .bezel { position: relative; }
.pvhits { position: absolute; inset: 5%; width: 90%; height: 90%; }
.pvhits .hit { fill: none; stroke: transparent; stroke-width: 46; cursor: pointer; pointer-events: stroke; }
.pvhits .hit:hover { stroke: rgba(53,167,230,.28); } .pvhits .hit.sel { stroke: rgba(53,167,230,.45); }
.pvpop { position: relative; margin: 10px auto 0; max-width: 330px; background: var(--panel2, #1b1f26); border: 1px solid var(--accent2, #35a7e6); border-radius: 12px; padding: 10px 12px; }
.pvpop b { font-size: 14px; } .pvpop small { color: var(--muted); margin-left: 6px; } .pvpop .x { float: right; color: var(--muted); cursor: pointer; }
.pvpop label { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; } .pvpop select { width: 100%; margin-top: 4px; }

/* the time-zone list (2026-11-09): the Home row and up to 4 zones, ticked and in order */
.tzl { display: grid; gap: 6px; }
.tzl .tzr { display: flex; gap: 10px; align-items: center; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; }
.tzl .tzr.off { opacity: .55; }
.tzl .tzr.home { border-style: dashed; }
.tzl .tick { flex: none; width: 18px; text-align: center; color: #6fbf73; font-size: 17px; }
.tzl .tag { width: 52px; flex: none; font-family: var(--mono); text-transform: uppercase; text-align: center; padding: 4px; letter-spacing: 1px; }
.tzl span.tag { color: #6fbf73; }
.tzl .nm { flex: 1; min-width: 0; font-size: 13.5px; }
.tzl .nm small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tzl .t { font-family: var(--mono); color: var(--accent2); font-size: 14px; }
.tzl .mv { display: flex; gap: 4px; flex: none; }
.tzl .mv button, .tzl .mv .x { width: 28px; height: 28px; padding: 0; }
.tzl .tzadd { margin-top: 6px; }
.tzl .tzadd .chosen { display: none; }   /* the adder picks, it holds nothing */
.tzl .zl { font-size: 12px; color: var(--muted); margin: 0 0 3px; }
.oldhome button { margin-left: 4px; }

/* 2026-11-09, the site's look: small square controls stay square, headings in the site's typeface */
.tzl .mv button { border-radius: 8px; }
.card h3, .face h2 { font-family: var(--display); letter-spacing: .02em; }
/* the presets on the watch (2026-11-10): the watch's cycle in order, Custom (this page) last; a row wraps its buttons under
   the name when the column is narrow */
.wpl { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.wpl .wpr { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; }
.wpl .wpr.on { border-color: var(--accent); }
.wpl .wpr.custom { border-style: dashed; }
.wpl .n { flex: none; width: 18px; text-align: center; font-family: var(--mono); color: var(--muted); font-size: 12.5px; }
.wpl .nm { flex: 1 1 170px; min-width: 0; font-size: 13.5px; }
.wpl .nm input { padding: 5px 8px; max-width: 220px; }
.wpl .nm small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpl .tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.wpl .tools button.small { padding: 4px 9px; }
.wpl .tools .mv { width: 28px; height: 28px; padding: 0; border-radius: 8px; }
.wpl .wpadd { margin-top: 6px; }