/* Aitius. Layout: header / [viewer (stage + transport) | panel (書く・記録・計る)]. On a phone the panel sits under the
   video and nothing is drawn over the picture but the user's own marks. Colours and sizes come from one set of tokens
   per theme (data-theme on <html>): gold (dark, default), volt, light (outdoor); a team colour can replace --accent. */
:root,[data-theme="gold"]{
  color-scheme: dark;
  --bg:#0e0f12; --panel:#15171b; --raise:#1d2026; --line:#2a2e36; --fg:#eceef2; --muted:#9aa1ad;
  --accent:#e8b931; --accent-ink:#17130a; --stage:#000; --ok:#5fd38a; --ng:#ff7b6e; --ok-bg:#173524; --ng-bg:#3a1c19;
  --shadow:0 18px 50px rgba(0,0,0,.55);
}
[data-theme="volt"]{
  color-scheme: dark;
  --bg:#121414; --panel:#1a1d1d; --raise:#232727; --line:#333838; --fg:#f2f5f2; --muted:#a3acaa;
  --accent:#d4ff3a; --accent-ink:#121414; --stage:#000; --ok:#6fe39a; --ng:#ff8676; --ok-bg:#183626; --ng-bg:#3b1d1a;
}
[data-theme="light"]{
  color-scheme: light;
  --bg:#f4f6f3; --panel:#ffffff; --raise:#eef1ee; --line:#dfe4df; --fg:#14201a; --muted:#55625a;
  --accent:#1f5fd1; --accent-ink:#ffffff; --stage:#0b0d0c; --ok:#167a40; --ng:#c8382b; --ok-bg:#e3f4e9; --ng-bg:#fbe5e2;
  --shadow:0 18px 50px rgba(20,32,26,.18);
}
:root{
  --pitch:#1b5230; --pitch-band:#1f5c37; --chalk:rgba(255,255,255,.8); --court:#4d3a26; --court-band:#53402a; --hard:#22465f; --hard-band:#264c66; --table:#1d3f63;
  --font-ui:"BIZ UDPGothic","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --font-num:"Exo 2","BIZ UDPGothic",system-ui,sans-serif;
  --r:12px; --k:1;
}
[data-size="lg"]{--k:1.15}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font-ui);font-size:calc(15px*var(--k));overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grow{flex:1}
svg{flex:none}
.app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}

/* header: logo, ボード/動画, file name (wide), open, menu */
header.top{display:flex;align-items:center;gap:8px;min-width:0;height:56px;padding:0 8px 0 14px}
.brand{display:flex;align-items:center;gap:6px;flex:none}
.brand .wordmark{height:21px;width:auto}
.wm-ai{fill:var(--accent)} .wm-rest{fill:var(--fg)}
.modes{display:flex;background:var(--raise);border-radius:999px;padding:3px;margin-left:auto;flex:none}
.modes button{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:calc(13px*var(--k));height:36px;padding:0 14px;border-radius:999px;cursor:pointer}
.modes button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.file{display:none;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.ibtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 10px;border:0;border-radius:var(--r);background:transparent;color:var(--fg);cursor:pointer;font-weight:700;font-size:14px;flex:none}
.ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ibtn svg.fill{fill:currentColor;stroke:none}
.ibtn.accent{background:var(--raise)}
.ibtn .lbl{display:none}
.ibtn:focus-visible,.modes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* main: phone = one column (viewer, then panel); wide = viewer | panel */
.main{display:flex;flex-direction:column;min-height:0}
.viewer{display:flex;flex-direction:column;flex:none}
.stage{position:relative;width:100%;aspect-ratio:var(--ar,16/9);max-height:56vh;min-height:180px;background:var(--stage);overflow:hidden}
.app.vert .stage{max-height:64vh}   /* the upright board on a phone: a little taller, so the court is not narrower than across */
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill}
#ink{touch-action:none;cursor:default}
#video2{z-index:1}
#ink{z-index:2}
.textin{position:absolute;z-index:6;min-width:180px;max-width:60%;height:44px;padding:0 10px;border-radius:8px;border:2px solid var(--accent);background:var(--panel);color:var(--fg);font:700 16px var(--font-ui);-webkit-user-select:text;user-select:text}

/* transport. Phone: the scrub bar across, then the time | the buttons with play exactly in the middle | the speed (equal side
   columns). Wide screens: one row (below) */
.transport{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,auto) minmax(0,1fr);grid-template-areas:"scrub scrub scrub scrub scrub scrub scrub" "time back prev play next fwd speed";align-items:center;gap:0 6px;padding:0 8px 8px;border-bottom:1px solid var(--line);flex:none}
.transport .scrubwrap{grid-area:scrub}
.transport .time{grid-area:time;justify-self:start;padding-left:4px}
#btnBack5{grid-area:back} #btnPrev{grid-area:prev} #btnPlay{grid-area:play} #btnNext{grid-area:next} #btnFwd5{grid-area:fwd}
#btnSpeedBtn{grid-area:speed;justify-self:end}
.transport .tbtn.wide{min-width:52px}
.transport .tbtn.play{width:52px;height:52px}
.app.board .transport{display:none}
.tbtn{display:inline-grid;place-items:center;align-content:center;justify-content:center;min-width:40px;height:44px;padding:0 6px;border:0;border-radius:10px;background:transparent;color:var(--fg);cursor:pointer;font-size:13px;font-weight:700;flex:none}
.tbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbtn.play{width:44px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.tbtn.play svg{width:20px;height:20px;fill:currentColor;stroke:none}
.tbtn.chip{height:32px;min-width:0;padding:0 8px;border:1px solid var(--line);border-radius:8px;font-family:var(--font-num);font-size:12px}
/* 選択欄: every <select> is shown as our own button and list (app.js fsel; the <select> stays, hidden, for the value) */
select.fsel-src{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none;overflow:hidden}
button.fsel{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;font-family:inherit;transition:border-color .15s,color .15s}
button.fsel.obtn,button.fsel.btn{padding-right:10px}
.fsel-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.fsel > svg.fsel-ch{flex:none;width:12px;height:12px;fill:none;stroke:var(--muted);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
button.fsel[aria-expanded="true"]{border-color:var(--accent)}
button.fsel[aria-expanded="true"] > svg.fsel-ch,button.fsel.up > svg.fsel-ch{transform:rotate(180deg)}
button.fsel.up[aria-expanded="true"] > svg.fsel-ch{transform:none}
button.fsel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.clip-set button.fsel{width:100%} .mslow button.fsel{min-height:34px} .evadd button.fsel{min-width:120px}
.fselpop{position:fixed;z-index:80;max-width:calc(100vw - 16px);overflow:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow);animation:fselIn .14s ease-out}
.fselpop.up{animation-name:fselUp}
.fselpop[hidden]{display:none}
@keyframes fselIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fselUp{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
.fselhead,.fselgrp{padding:6px 10px;color:var(--muted);font-size:calc(11px*var(--k))}
.fselopt{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:38px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--fg);cursor:pointer;text-align:left;font-family:inherit;font-size:calc(14px*var(--k))}
.fselopt b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fselopt .note{color:var(--muted);font-size:calc(12px*var(--k));white-space:nowrap;padding-left:12px}
.fselopt .ck{display:grid;place-items:center;visibility:hidden}
.fselopt .ck svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fselopt[aria-selected="true"] .ck{visibility:visible}
.fselopt[aria-selected="true"] b{color:var(--accent);font-weight:700}
.fselopt[aria-disabled]{opacity:.4;cursor:default}
.fselopt:hover:not([aria-disabled]),.fselopt:focus-visible{background:var(--raise);outline:0}
.fselopt:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.fselpop.num .fselopt b{font:700 calc(15px*var(--k))/1 var(--font-num);font-variant-numeric:tabular-nums}
/* 再生の速さ: a small chip in the play bar; the list opens upwards; not ×1 in colour */
.tbtn.chip.spdbtn{gap:3px;padding:0 7px 0 9px;font-weight:700}
.tbtn.chip.spdbtn.on{color:var(--accent)}
@media (pointer: coarse){ .fselopt{min-height:44px} }
@media (prefers-reduced-motion: reduce){ .fselpop{animation:none} button.fsel,button.fsel > svg.fsel-ch{transition:none} }
@media (max-width: 420px){   /* a phone: the time, the five buttons and the speed list in one row without touching */
  .transport{gap:0 4px} .transport .tbtn.wide{min-width:44px} .tbtn.chip.spdbtn{padding:0 5px 0 7px} }
@media (max-width: 380px){   /* 320-380 px */
  .transport{gap:0 2px;padding:0 6px 8px} .transport .tbtn{min-width:32px;padding:0 2px} .transport .tbtn.wide{min-width:38px}
  .transport .tbtn.play{width:46px;height:46px} .transport .time{padding-left:0;font-size:12px}
  .tbtn.chip.spdbtn{padding:0 3px 0 5px;gap:1px;font-size:11px} .tbtn.chip.spdbtn > svg.fsel-ch{width:10px;height:10px} }
.tbtn.wide{display:inline-grid}
.tbtn[disabled]{opacity:.35;cursor:default}
.tbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.scrubwrap{position:relative;flex:1;min-width:60px;display:flex}
.scrub{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--accent)}
.marks{position:absolute;left:8px;right:8px;top:50%;height:12px;margin-top:-6px;pointer-events:none}
.marks i{position:absolute;top:0;width:3px;height:12px;margin-left:-1.5px;border-radius:2px;background:var(--fg);box-shadow:0 0 0 1px var(--bg)}
.loopwrap{position:absolute;left:8px;right:8px;top:14px;height:16px;pointer-events:none}
.loopband{position:absolute;top:0;height:100%;border-radius:4px;background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.time{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap;padding:0 2px}
.time b{font-weight:600}
.dg{display:inline-block;width:1ch;text-align:center}   /* a digit of the clock: one width for all (setDigits) */
#timeDur{color:var(--muted);display:none}

/* the panel: tabs and three panes */
.panel{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.ptabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:8px 10px 6px;flex:none}
.app.board #tabTags{display:none}
.app.board #tabEdit,.app.board #tabSpeed{display:none}
.app.board .ptabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.ptabs button{display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:700;font-size:calc(14px*var(--k));cursor:pointer}
.ptabs button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ptabs button[aria-selected="true"]{background:var(--raise);color:var(--fg);box-shadow:inset 0 -3px 0 var(--accent)}
.ptabs button[aria-selected="true"] svg{stroke:var(--accent)}
.ptabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ptabs button{white-space:nowrap;min-width:0;padding:0 4px}
/* five tabs (labs) in the narrow side panel of a PC: icon above the word, so the words stay on one line */
@media (min-width: 900px) and (min-aspect-ratio: 1/1), (orientation: landscape) and (max-height: 520px){ .app:not(.nolabs) .ptabs button{flex-direction:column;gap:2px;height:50px;font-size:calc(12px*var(--k))} }
.pane{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:4px 12px calc(16px + env(safe-area-inset-bottom,0px))}
.pane h2{margin:0;font-size:calc(12px*var(--k));letter-spacing:.06em;color:var(--muted);font-weight:700}
/* every section of a panel is a column with a gap, so a heading never sits on the box under it (Shin 2026-11-09) */
.pane section{display:flex;flex-direction:column;gap:8px;min-width:0}
.h2row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.linkbtn{border:0;background:transparent;color:var(--accent);font-size:calc(13px*var(--k));min-height:36px;padding:0 4px;cursor:pointer;font-weight:700}
[data-theme="light"] .linkbtn{color:var(--accent)}
.hint{margin:0;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:calc(13px*var(--k));line-height:1.6}
.hint strong{color:var(--accent)}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.note{color:var(--muted);font-size:calc(12px*var(--k));line-height:1.6;margin:0}
.appsteps{counter-reset:a;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}   /* アプリとして追加: this device's steps */
.appsteps li{counter-increment:a;position:relative;padding-left:34px;font-size:calc(14px*var(--k));line-height:1.7}
.appsteps li::before{content:counter(a);position:absolute;left:0;top:1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700}
.appwarn{color:var(--fg);font-weight:600}   /* アプリの中のブラウザ (LINE など): まず普段のブラウザへ */
.appout{display:block;width:100%;margin:2px 0 14px}
.note.callout{border:1px dashed var(--line);border-radius:8px;padding:8px 10px}
.note.legal-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:14px}   /* 利用規約・プライバシーポリシー at the foot of the menu */
.note.legal-links a{color:var(--muted)}

/* drawing tools: labelled tiles, the arrow and mark kinds as chips */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:calc(60px*var(--k));border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--muted);font-size:calc(12px*var(--k));cursor:pointer;padding:0}
.tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile svg .solid{fill:var(--accent);stroke:none}
.tile svg .fat{stroke-width:4.5}
.tile[aria-pressed="true"]{border:2px solid var(--accent);background:var(--raise);color:var(--fg);font-weight:700}
.tile[aria-pressed="true"] svg{stroke:var(--accent)}
.tile:focus-visible,.chip:focus-visible,.obtn:focus-visible,.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;flex:none}
.chips::-webkit-scrollbar{display:none}
.chip{height:36px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);font-size:calc(13px*var(--k));cursor:pointer;white-space:nowrap;flex:none}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.swatches{display:flex;gap:10px;align-items:center}
.swatch{width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;padding:0}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fg)}
.sw-yellow{background:#ffd21a}.sw-red{background:#ff5b4d}.sw-blue{background:#43a8ff}.sw-white{background:#ffffff;outline:1px solid var(--line)}
.obtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;min-width:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--fg);font-size:calc(13px*var(--k));cursor:pointer;white-space:nowrap}
.obtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.obtn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:700}
.obtn[disabled]{opacity:.4;cursor:default}
select.obtn{-webkit-appearance:none;appearance:none;padding-right:30px;font:inherit;font-size:calc(13px*var(--k));
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa1ad' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center/11px 7px}
select.obtn option{background:var(--panel);color:var(--fg)}
.opt{display:inline-flex;align-items:center;gap:8px;font-size:calc(12px*var(--k));color:var(--muted);white-space:nowrap;max-width:100%}
.opt .sel{min-width:0}
.opts{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.optlab{flex:1 1 100%;font-size:calc(12px*var(--k));color:var(--muted);font-weight:700;margin-bottom:-2px}   /* a caption over its buttons */
.zoom{display:flex;align-items:center;gap:4px}
.zcap{font-size:calc(12px*var(--k));color:var(--muted);margin-right:4px}
.zlbl{min-width:34px;text-align:center;font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.app.board #showWrap,.app.board .mtools{display:none}

/* moments */
.list{display:flex;flex-direction:column;gap:6px}
.scene,.vid{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 4px 0 12px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.scene{cursor:pointer}
.scene[aria-current="true"],.vid[aria-current="true"]{border-color:var(--accent)}
.scene .t{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.scene .n{color:var(--muted);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene .mk{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--raise);font-size:13px;cursor:pointer}
.vid{padding:6px 4px 6px 12px;flex-wrap:wrap}
.vid .name{flex:1 1 100%;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vid .meta{flex:1;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.vid .btn{min-height:36px}
.del{min-width:40px;min-height:40px;border:0;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer;font-size:18px}

/* generic buttons used in sheets and settings */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--raise);color:var(--fg);cursor:pointer;font-size:14px;white-space:nowrap}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn:hover:not([disabled]){border-color:var(--muted)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.btn.sm{min-height:40px;padding:0 12px;font-size:13px}
.btn.warn{border-color:var(--ng);color:var(--ng)}
.btn[disabled]{opacity:.35;cursor:default}
select.btn{-webkit-appearance:none;appearance:none;color:var(--fg);font:inherit;font-size:14px;padding-right:32px;
  background:var(--raise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa1ad' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px}
select.btn option{background:var(--raise);color:var(--fg)}
.btn:focus-visible,.scene:focus-visible,.del:focus-visible,select.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 計る pane: the measuring controls, pose and compare sit in the panel, not over the video */
.cmpbar{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:var(--r);background:var(--panel);border:1px solid var(--accent)}
.cmpbar .mtop .cmpname{flex:1;min-width:0;max-width:none}
.cmpnudge{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cmpnudge .flabel{flex:1 1 100%;font-size:12px;color:var(--muted)}
.measbar .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.measbar .seg button,.cmpbar .seg button,.posebar .seg button,.pchips button{height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);font:700 calc(13px*var(--k)) var(--font-ui);cursor:pointer;padding:0 10px}
.measbar .seg button[aria-pressed="true"],.cmpbar .seg button[aria-pressed="true"],.posebar .seg button[aria-pressed="true"],.pchips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cmpbar .seg,.posebar .seg{display:flex;flex-wrap:wrap;gap:6px}
.measbar .btn.sm,.posebar .btn.sm,.cmpbar .btn.sm{min-height:40px;padding:0 12px}
.measbar .note,.cmpbar .note{flex:1 1 100%;margin:0}
.mres{flex:1 1 100%;font:700 calc(18px*var(--k)) var(--font-num);color:var(--fg);font-variant-numeric:tabular-nums;padding:10px 12px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.cmpbar input[type=range]{width:110px;accent-color:var(--accent)}
.cmpname{font-size:12px;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmptime{font-size:12px;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.mtools .obtn{flex:1}
.mslow{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.mslow select{min-height:34px}
.mruler{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.mlen{width:72px;height:34px;padding:0 8px;border-radius:8px;border:2px solid var(--accent);background:var(--raise);color:var(--fg);font:700 15px var(--font-ui);-webkit-user-select:text;user-select:text}
#measPresets{display:inline-flex;flex-wrap:wrap;gap:6px}
.mres{font:700 14px var(--font-ui);color:var(--accent);font-variant-numeric:tabular-nums}
.pchips{display:flex;flex-wrap:wrap;gap:2px;background:var(--raise);border-radius:8px;padding:2px;align-self:flex-start}
.chartwrap{position:relative}
.chartwrap canvas{display:block;width:100%;height:190px;touch-action:none;cursor:default}
.ctip{position:absolute;top:4px;z-index:2;pointer-events:none;background:var(--panel);color:var(--fg);box-shadow:0 4px 14px rgba(0,0,0,.25);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctip b{display:block;color:var(--muted);font-weight:700;margin-bottom:2px}
.ctip i{display:inline-block;width:10px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.pprog{display:flex;flex-direction:column;gap:6px}
.presult{display:flex;flex-direction:column;gap:10px}
.psum{font-size:14px;line-height:1.6;font-variant-numeric:tabular-nums}
.psum strong{color:var(--accent)}
.ptrail{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ptrail .note{margin:0}
/* the recording pad: big targets, used while the video plays */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.num{min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--raise);color:var(--fg);font:700 17px var(--font-ui);font-variant-numeric:tabular-nums;cursor:pointer;padding:0}
.num[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.evs{display:grid;grid-template-columns:minmax(0,1fr) 52px 52px;gap:6px;align-items:center}
.evs .evn{font-size:13px;font-weight:700}
.ev{min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--raise);font:700 18px var(--font-ui);cursor:pointer;padding:0}
.ev.ok{color:var(--ok)}.ev.ng{color:var(--ng)}.ev.wide{grid-column:span 2;font-size:14px}
.ev.hit{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ev[disabled],.num[disabled]{opacity:.35;cursor:default}
.tag{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 2px 0 10px;border-radius:8px;background:var(--raise);cursor:pointer;font-size:13px;border:1px solid transparent}
.tag.new{border-color:var(--accent)}
.tag .t{font-variant-numeric:tabular-nums;color:var(--muted)}
.tag .w{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag .w b{color:var(--ok);font-weight:700}.tag .w i{color:var(--ng);font-style:normal}
.sheet-card.wide{width:min(880px,100%)}
.tablewrap{overflow:auto;-webkit-overflow-scrolling:touch}
table.stats{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
table.stats th,table.stats td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
table.stats th{color:var(--muted);font-size:12px;font-weight:700}
table.stats td.no{font-weight:700;font-size:16px;text-align:left}
table.stats td small{display:block;color:var(--muted);font-size:11px;font-weight:400}
table.stats tfoot td{color:var(--muted);font-weight:700}
table.stats .btn{min-height:36px}
.scene .mk{min-height:36px;padding:0 10px}
#btnSettings svg{width:18px;height:18px;fill:currentColor}
/* はじめの設定 / 設定: numbered steps like Koyomi Desk's setup; a finished step shows ✓ */
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--raise)}
.step .no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;border:2px solid var(--muted);color:var(--muted);font-variant-numeric:tabular-nums}
.step.done .no{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sbody{display:flex;flex-direction:column;gap:8px;min-width:0}
.choices{display:flex;flex-wrap:wrap;gap:6px}
.choice{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:700 13px var(--font-ui);cursor:pointer}
.choice[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#courtPreview{display:block;width:100%;max-width:360px;border-radius:8px}
.evpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:6px}
.evitem{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 4px 0 10px;border-radius:8px;background:var(--panel);border:1px solid var(--line);font-size:13px;cursor:pointer}
.evitem input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.evitem .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.evitem .ty{color:var(--muted);font-size:10px;white-space:nowrap}
.evitem .del{min-width:32px;min-height:32px;font-size:16px}
.evadd{display:flex;gap:6px;flex-wrap:wrap}
.evadd select{min-width:120px}
.evadd input{flex:1;min-width:140px;height:40px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:15px var(--font-ui);-webkit-user-select:text;user-select:text}
.sheet{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(0,0,0,.62);padding:16px}
#updSheet{z-index:45}   /* 新しいバージョン: above every other sheet and the toast */
.sheet-card.upd{width:min(400px,100%);text-align:center;border-color:var(--accent)}
.sheet-card.upd .sheet-head{justify-content:center}
.sheet-card.upd p{margin:0;line-height:1.7}
.sheet-card.upd .sheet-actions{justify-content:center}
.sheet-card{width:min(600px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.sheet-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sheet-head h2{margin:0;font-size:17px}
.clip-set{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.clip-set label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.clip-set select{width:100%}
.clip-view:empty{display:none}
.clip-view canvas,.clip-view video{display:block;width:100%;max-height:52vh;object-fit:contain;border-radius:8px;background:#000}
.bar{height:6px;border-radius:3px;background:var(--raise);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent)}
.sheet-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* リンクを開いた人の入口: what came, what they can do, once */
.welcard{position:fixed;left:12px;right:12px;margin:0 auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:39;max-width:min(520px,calc(100vw - 24px));display:flex;flex-direction:column;gap:8px;background:var(--panel);color:var(--fg);border:1px solid var(--accent);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.welcard-t{margin:0;font-weight:700;font-size:calc(15px*var(--k))}
.welcard-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:4px}
.welcard-acts a.btn{text-decoration:none}
/* Aitius を紹介する: the QR code on white whatever the theme, big enough to read from another phone */
.invbox{display:grid;place-items:center;margin:14px 0 6px}
.invqr{display:block;width:min(220px,62vw);height:auto;background:#fff;border-radius:12px;padding:6px}
.invqr[hidden]{display:none}
.invnote{text-align:center}
.welinapp{color:var(--fg)!important;font-weight:600}
.toast{position:fixed;left:12px;right:12px;margin:0 auto;width:fit-content;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 24px));background:var(--raise);color:var(--fg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 10px 16px;font-size:14px;line-height:1.5;box-shadow:var(--shadow)}
/* the menu */
.sheet-card.menu{width:min(520px,100%)}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mbtn{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--raise);color:var(--fg);font-size:14px;font-weight:700;cursor:pointer;text-align:left}
.mbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sheet-card h2.sub{margin:4px 0 0;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.cdot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:6px;vertical-align:-2px;box-shadow:0 0 0 1px var(--line)}
.choice input[type=color]{width:22px;height:22px;border:0;padding:0;background:transparent;vertical-align:middle;margin-left:6px;cursor:pointer}
.welcome{margin:0 0 -2px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.welcome .wordmark{height:26px;width:auto}
.welcome .tagline{color:var(--muted);font-weight:700;font-size:calc(14px*var(--k));letter-spacing:.04em}
.app.focus .file{display:none}

/* wide: tablet landscape and computers - the panel goes beside the video */
@media (min-width: 900px) and (min-aspect-ratio: 1/1), (orientation: landscape) and (max-height: 520px){   /* a phone held sideways too: the panel beside the video */
  .main{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,30vw,380px);gap:12px;padding:0 12px 12px}
  .app.railon .main{grid-template-columns:auto minmax(0,1fr) clamp(300px,26vw,360px)}
  .viewer{min-height:0;gap:0}
  .stage,.app.vert .stage{flex:1;aspect-ratio:auto;max-height:none;min-height:0;border-radius:var(--r)}
  .viewer{display:flex;flex-direction:column}
  .transport{display:flex;align-items:center;gap:0 4px;border-bottom:0;height:60px;flex-wrap:nowrap;padding:0 8px}
  .transport .tbtn.play{width:44px;height:44px}
  .transport .tbtn.wide{min-width:40px}
  .transport .scrubwrap,.transport .time{order:0}
  .transport .scrubwrap{flex:1 1 auto}
  .transport .time{width:auto;text-align:left}
  #timeDur{display:inline}
  .panel{border-radius:var(--r);background:var(--panel);overflow:hidden}
  .pane{padding:4px 12px 14px}
  .tile,.chip,.scene,.vid,.measbar .seg button,.posebar,.cmpbar,.mres,.hint{background:var(--raise)}
  .file{display:block}
  .ibtn .lbl{display:inline}
  .ibtn.accent{background:var(--accent);color:var(--accent-ink);padding:0 14px}
  header.top{height:60px;padding:0 12px 0 18px}
  .modes{margin-left:12px}
  .brand .wordmark{height:24px}
  .toast{top:72px;bottom:auto}
}
@media (max-width: 520px){ .clip-set{grid-template-columns:repeat(2,minmax(0,1fr))} .menu-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 420px){ .chip{padding:0 10px} }
@media (orientation: landscape) and (max-height: 520px){ #timeDur{display:none!important} header.top{height:50px} .tbtn.wide{display:none} }   /* a phone held sideways: room for the scrub bar */
/* small phones: the header rules for 動画・ボード・定点観測 are at the end */
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* 計る: first what to measure (cards), then numbered steps for it; 1つ戻す and 消す always at the top */
.measbar{display:flex;flex-direction:column;gap:12px}
.mchoose,.mguide{display:flex;flex-direction:column;gap:10px}
.mtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mtop .mh{margin:0;font-size:calc(15px*var(--k));flex:1 1 auto}
.mtop > b{font-size:calc(16px*var(--k));flex:1 1 auto;min-width:0}
.medit{display:inline-flex;gap:6px;margin-left:auto}
.medit .btn{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 10px}
.medit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mErase[aria-pressed="true"]{background:var(--ng-bg);border-color:var(--ng);color:var(--ng)}
.merase{margin:0;color:var(--ng);font-size:13px}
.mgroup{margin:4px 0 0;font-size:12px;color:var(--muted);font-weight:700}
.mcards{display:flex;flex-direction:column;gap:6px}
.mcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--fg);cursor:pointer;font:inherit}
.mcard:hover{border-color:var(--accent)}
.mcard svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mcard .mc-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mcard b{font-size:calc(15px*var(--k))}
.mcard small{font-size:calc(12px*var(--k));color:var(--muted);line-height:1.45}
.mcard .mc-need{font-style:normal;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;align-self:flex-start;margin-top:2px}
.mrulerrow{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:var(--r);background:var(--raise);font-size:13px}
.mrulerrow b{flex:1}
.msteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:ms}
.msteps li{counter-increment:ms;position:relative;padding:7px 10px 7px 40px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:calc(13px*var(--k));line-height:1.5;color:var(--muted)}
.msteps li::before{content:counter(ms);position:absolute;left:9px;top:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--font-ui);background:var(--raise);color:var(--muted)}
.msteps li.now{border-color:var(--accent);color:var(--fg);font-weight:700}
.msteps li.now::before{background:var(--accent);color:var(--accent-ink)}
.msteps li.done::before{content:"✓";background:var(--ok-bg);color:var(--ok)}
.msteps li.info{color:var(--fg)}
.mcall{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--r);border:1px dashed var(--accent);font-size:13px;line-height:1.5}
.mcall span{flex:1 1 180px}
.mctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mctl .btn.sm{min-height:40px;padding:0 12px}
.mctl .note{flex:1 1 100%;margin:0}
.mframes{display:flex;gap:6px}
.mab[aria-pressed="true"]{border-color:var(--ok);color:var(--ok)}
.posebar{display:flex;flex-direction:column;gap:10px}
.pstate{margin:0;padding:8px 10px;border-radius:10px;background:var(--raise);color:var(--muted);font-size:13px;line-height:1.5}
.pstate.ok{background:var(--ok-bg);color:var(--ok)}
.pstate.ng{background:var(--ng-bg);color:var(--ng)}
.pfield{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.flabel{font-weight:700}
.plegend i{display:inline-block;width:12px;height:4px;border-radius:2px;vertical-align:middle;margin:0 3px 0 6px}
.lg-l{background:#3987e5}.lg-r{background:#d95926}
.bigbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--fg);cursor:pointer;font:inherit}
.bigbtn b{font-size:calc(15px*var(--k))}
.bigbtn span{font-size:calc(12px*var(--k));color:var(--muted);line-height:1.45}
.bigbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bigbtn.primary span{color:var(--accent-ink);opacity:.8}
.bigbtn:disabled{opacity:.45;cursor:default}
.msteps li.info{counter-increment:none;padding:4px 4px 4px 22px;background:transparent;border:0;font-size:calc(12px*var(--k));color:var(--muted)}
.msteps li.info::before{content:"i";left:2px;top:5px;width:16px;height:16px;font:italic 700 11px Georgia,serif;background:var(--raise);color:var(--muted)}

.mshoot{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:0 12px}
.mshoot summary{cursor:pointer;padding:10px 0;font-weight:700;font-size:calc(14px*var(--k))}
.mshoot ol{margin:0 0 10px;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;font-size:calc(13px*var(--k));line-height:1.55;color:var(--muted)}
.mshoot b{color:var(--fg)}
.mcard .mc-ex{font-style:normal;font-size:calc(12px*var(--k));color:var(--fg);opacity:.8;line-height:1.45}
.millus{display:flex;justify-content:center;padding:6px;border-radius:var(--r);background:var(--stage)}
.millus svg{width:100%;max-width:280px;height:auto}
.millus .ln{fill:none;stroke:#e9ecef;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.millus .dim{stroke:#7d858f}
.millus .hl{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.millus .arc{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:4 4}
.millus .dot{fill:var(--accent)}
.millus .num circle{fill:var(--accent)}
.millus .num text{fill:var(--accent-ink);font:700 13px var(--font-ui);text-anchor:middle}
.millus .deg{fill:var(--accent);font:700 15px var(--font-ui)}

/* the column of drawing tools left of the video (wide screens only) */
.rail{display:none}
.app.railon .rail{display:flex;flex-direction:column;gap:8px;width:172px;min-height:0;overflow-y:auto;background:var(--panel);border-radius:var(--r);padding:8px;scrollbar-width:thin}
.railbody .drawtools{display:flex;flex-direction:column;gap:10px}
.railbody .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.railbody .tile{height:calc(54px*var(--k));background:var(--raise)}
.railbody .chips{gap:4px}
.railbody .chip{height:30px;padding:0 9px;font-size:calc(12px*var(--k))}
.railbody .row{flex-direction:column;align-items:stretch;gap:8px}
.railbody .swatches{justify-content:space-between;gap:4px}
.railbody .swatch{width:30px;height:30px}
.railbody .grow{display:none}
.railbody .obtn{width:100%;justify-content:flex-start}
.msample{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border:1px dashed var(--accent);border-radius:var(--r);background:transparent;color:var(--fg);cursor:pointer;font:inherit}
.msample svg{width:28px;height:28px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msample span{display:flex;flex-direction:column;gap:2px}
.msample b{font-size:calc(15px*var(--k))}
.msample small{font-size:calc(12px*var(--k));color:var(--muted);line-height:1.45}

/* the kinds of arrow / highlight / player: a fixed grid of small pictures of the line, so choosing one never reflows the rows */
.drawtools{display:flex;flex-direction:column;gap:10px}
.kinds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:3px;border-radius:calc(var(--r) + 2px);background:var(--panel);border:1px solid var(--line)}
.kinds.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kinds.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kinds .chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:auto;min-height:46px;padding:5px 2px;border-radius:9px;border-color:transparent;background:transparent;font-weight:400;font-size:calc(11px*var(--k));white-space:nowrap;min-width:0}
.kinds .chip span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kinds .chip svg{width:34px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.kinds .chip svg .f{fill:currentColor;stroke:none}
.kinds .chip svg .dimf{fill:currentColor;fill-opacity:.35;stroke:none}
.kinds .chip svg .holef{fill:var(--panel);stroke:currentColor}
.kinds .chip svg .areaf{fill:currentColor;fill-opacity:.3}
.kinds .chip svg .conef{fill:currentColor;fill-opacity:.35;stroke:none}
.kinds .chip[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent);color:var(--fg);font-weight:400}
.kinds .chip[aria-pressed="true"] svg{color:var(--accent)}
.railbody .kinds{grid-template-columns:repeat(3,minmax(0,1fr))}
.railbody .kinds.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
.railbody .kinds .chip{padding:5px 2px;height:auto;font-size:calc(11px*var(--k))}

/* with 計る and 記録 put away, 書く is the only tab */
/* without labs: 書く and 編集 in a video, no tab bar on the board */
/* ラボ in one place (Shin 2026-11-09「設定欄にまだ記録するプレーがありますね。構造的に連動できてないんじゃない」): whatever is put
   away is marked data-labs="only" in the page, its wording without it data-labs="off", and <html class="labs"> decides.
   記録・計る are kept in labs (Shin 2026-11-06; again 2026-11-09). */
html:not(.labs) [data-labs="only"],html.labs [data-labs="off"]{display:none!important}
.app.nolabs .ptabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.app.nolabs.board .ptabs{display:none}
.app.nolabs.board .pane{padding-top:12px}
.cmpsec{display:flex;flex-direction:column;gap:8px}
.cmpsec h2{margin:0;font-size:13px;color:var(--muted)}
.app.board .cmpsec{display:none}

/* 定点観測: a page in place of the video and panel; menus, one menu's days, the menu form. The bar above the drawing tools
   while one of its videos is open, and labels on the two pictures when comparing. */
.app.tview .main{display:none}
.app.vempty .main{display:none}
.app.vempty .file{visibility:hidden}
.vhcard{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:520px;margin:clamp(24px,10vh,96px) auto 0;padding:36px 24px;border:1px dashed var(--line);border-radius:16px;text-align:center;word-break:auto-phrase}
.vhcard h1{margin:0;font-size:calc(19px*var(--k));font-weight:700}
.vhcard .note{margin:0}
.vhcard .note.small{font-size:calc(12px*var(--k))}
.vhcard .note a{margin-left:6px;color:var(--accent);font-weight:700}   /* 撮り方のコツ (guide.html) */
.vhicon{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round}
.vhcard .btn{min-height:48px;padding:0 24px}
.app.tview #btnOpen,.app.tview .file{display:none}
.tpage{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tin{max-width:760px;margin:0 auto;padding:10px 14px calc(28px + env(safe-area-inset-bottom,0px))}
.tlist,.tdetail,.tedit{display:flex;flex-direction:column;gap:14px}
.thead{display:flex;align-items:center;gap:10px;min-height:44px}
.thead h1{flex:1;min-width:0;margin:0;font-size:calc(20px*var(--k));font-weight:700;overflow-wrap:anywhere}
.tdetail .thead{min-height:40px}
.tname{margin:-4px 0 0;font-size:calc(22px*var(--k));font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.tpage h2{margin:6px 0 0;font-size:calc(12px*var(--k));letter-spacing:.06em;color:var(--muted)}
.tpage .btn svg,.tbar .btn svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.tcard{display:flex;flex-direction:column;gap:10px;text-align:left;padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);color:var(--fg);cursor:pointer;font:inherit;min-width:0}
.tcard:hover{border-color:var(--muted)}
.tcard:focus-visible,.trow .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tch{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.tch b{font-size:calc(16px*var(--k));overflow-wrap:anywhere}
.tch .note{white-space:nowrap}
.tstrip{display:flex;gap:6px;overflow:hidden}
.tth{position:relative;flex:none;width:68px;height:44px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000}
.tth img{width:100%;height:100%;object-fit:cover;display:block}
.tth i{position:absolute;left:3px;bottom:2px;font-style:normal;font-size:10px;color:#fff;background:rgba(0,0,0,.6);border-radius:4px;padding:0 3px}
.tmetric{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tmetric b{font:700 calc(24px*var(--k)) var(--font-num)}
.tmetric small{color:var(--muted);font-size:12px}
.tdelta{font-size:calc(13px*var(--k));font-weight:700;color:var(--muted);margin-left:6px}
.tdelta.up{color:var(--ok)}
.tbackup{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.tempty{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px dashed var(--line);border-radius:16px}
.tfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.tfield>span:first-child{font-size:calc(12px*var(--k));color:var(--muted);font-weight:700}
.tpage input[type=text],.tpage input[type=date],.tbar input{height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--raise);color:var(--fg);font:inherit;font-size:16px;min-width:0;-webkit-user-select:text;user-select:text}
.tpage input:focus-visible,.tbar input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tpage .seg{display:flex;gap:6px;flex-wrap:wrap}
.tpage .seg button{height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);font:700 calc(13px*var(--k)) var(--font-ui);cursor:pointer;padding:0 12px}
.tpage .seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tnumbox,.tnum,.tnums{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.tnum{border-color:var(--accent)}
.tmsg{color:var(--ng)}
.tmsg:empty{display:none}
.tval{display:flex;align-items:center;gap:8px}
.tval input{flex:1;max-width:180px;font:700 20px var(--font-num)!important}
.tcmp{display:flex;flex-direction:column;gap:6px}
.tstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tstat{display:flex;flex-direction:column;gap:2px;min-width:0}
.tstat small{color:var(--muted);font-size:12px;font-weight:700}
.tstat b,.tv{font:700 calc(22px*var(--k)) var(--font-num);font-variant-numeric:tabular-nums}
.tstat b i,.tv i{font:400 12px var(--font-ui);color:var(--muted);margin-left:3px;font-style:normal}
.tstat .tdelta{margin:0;font-size:calc(17px*var(--k));line-height:1.6}
.chartwrap canvas.tchart{height:170px;cursor:default}
.trow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.trow.picked{border-color:var(--accent)}
.tthumb{flex:none;width:72px;height:48px;border-radius:8px;object-fit:cover;background:var(--raise);display:grid;place-items:center;font-size:10px;color:var(--muted)}
.tinfo{flex:1 1 120px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.tdatew{position:relative;display:inline-flex;align-items:center;gap:5px;min-height:30px;font-size:calc(15px*var(--k));cursor:pointer}
.tdatew::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.tpage .tdatew input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.tv{font-size:calc(17px*var(--k))}
.trowacts{display:flex;gap:6px;flex:none;margin-left:auto}
.trowacts .btn.sm{min-height:38px;padding:0 11px}
.btn.pick[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.tbar{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:var(--r);background:var(--panel);border:1px solid var(--accent)}
.tbtop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tbtop b{font-size:calc(15px*var(--k))}
.tbtop .linkbtn{padding:0;min-height:32px}
.tbrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tbrow .note{flex:1 1 200px}
.timp{flex:1;font:700 calc(15px*var(--k)) var(--font-num);white-space:nowrap}
.marks i.imp{top:-8px;height:28px;width:3px;background:var(--accent);box-shadow:0 0 0 1px var(--bg)}
.tbnum span{font-size:calc(13px*var(--k));color:var(--muted)}
.tbar input{width:120px;height:40px;font:700 18px var(--font-num)}
.tbcmp{color:var(--fg)}
.app.tctx #hint{display:none!important}
.vlab{position:absolute;z-index:3;pointer-events:none;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700}
.vlab.r{transform:translateX(-100%)}
@media (min-width: 900px) and (min-aspect-ratio: 1/1), (orientation: landscape) and (max-height: 520px){
  .tbar{background:var(--raise)}
  .app.tview #btnMenu{margin-left:auto}
  .tin{padding-top:18px}
}
@media (max-width: 430px){ .modes button{padding:0 11px} .brand .wordmark{height:19px} header.top{gap:6px} }
/* set by fitHeader() only when the header would not fit */
header.top.fit1{gap:4px;padding:0 4px 0 8px}
header.top.fit1 .modes button{padding:0 8px;font-size:12px}
header.top.fit1 .brand .wordmark{height:16px}
header.top.fit1 .ibtn{min-width:38px;padding:0 6px}
header.top.fit2 .brand{display:none}
header.top.fit2 .modes{margin-left:0}

/* 作戦ボードの動き (steps): only on the board; the list of drawn moments is for videos only */
.app:not(.board) #animSec,.app:not(.board) #btnTurn,.app:not(.board) #btnOffside,.app:not(.board) #btnLineup,.app:not(.board) #animDir,.app.board .scenes{display:none}
.animsec{display:flex;flex-direction:column;gap:8px}
.asteps{display:flex;flex-wrap:wrap;gap:6px}
.asteps .chip{min-width:44px;font-family:var(--font-num);font-weight:700}
.asteps .chip[aria-current="true"]{box-shadow:0 0 0 2px var(--fg)}
.asteps .aadd{font-family:var(--font-ui);font-weight:400;display:inline-flex;align-items:center;gap:4px}
.asteps .aadd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* filming from the same spot: the previous day's first frame before choosing today's video, and laid over today's */
.tprev{width:100%;max-height:50vh;object-fit:contain;border-radius:10px;background:#000}
.ghost{position:absolute;z-index:1;opacity:.45;pointer-events:none;object-fit:fill}

.tjump{display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.tjump .obtn{align-self:flex-start}
.aauto{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:var(--r);border:1px dashed var(--line)}
.aauto .btn{align-self:flex-start}
.awhy{list-style:none;margin:0;padding:8px 10px;display:flex;flex-direction:column;gap:6px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);font-size:calc(12.5px*var(--k));line-height:1.5;color:var(--muted)}
.awhy b{color:var(--fg)}
.awhy i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}
.adir{gap:6px}
.adir .chip{height:32px;padding:0 10px}
/* the steps' explanations: typed per step, shown under the board (two lines kept, so the board does not jump while playing) */
.capin{width:100%;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--raise);color:var(--fg);font:inherit;font-size:calc(14px*var(--k))}
.capin:focus{outline:2px solid var(--accent);outline-offset:1px}
.capbar{margin:0;padding:8px 14px;min-height:calc(2.9em + 16px);background:var(--panel);border-bottom:1px solid var(--line);color:var(--fg);font-weight:700;font-size:calc(14px*var(--k));line-height:1.45;flex:none}
.app:not(.board) .capbar{display:none}
/* パターンから選ぶ */
.patlist{display:flex;flex-direction:column;gap:8px}
.patlist h3{margin:8px 0 0;font-size:13px;color:var(--muted)}
.pat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--raise);color:var(--fg);cursor:pointer;text-align:left;font:inherit}
.pat b{font-size:calc(14px*var(--k))}
.pat span{color:var(--muted);font-size:calc(12.5px*var(--k));line-height:1.45}
.pat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width: 900px) and (min-aspect-ratio: 1/1), (orientation: landscape) and (max-height: 520px){ .capbar{margin-top:8px;border:1px solid var(--line);border-radius:var(--r)} }
/* まとめて動かす: how to choose, a whole team, how many are chosen */
.selbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:0}
.selbar .note{flex:1 1 100%;margin:0}
/* 作戦を保存 / 作戦を開く */
.h2acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.playname{margin:-4px 0 0;color:var(--accent)}
.playrow{display:flex;gap:8px;align-items:stretch}
.playrow .pat{flex:1;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center}
.playrow .pat img{grid-row:span 2;width:96px;height:auto;border-radius:6px;display:block}
.playrow .pat b,.playrow .pat span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.playrow .chip{align-self:center}
.playacts{display:flex;flex-direction:column;justify-content:center;gap:6px;flex:none}
.textin.numin{min-width:0;width:80px;text-align:center;font-size:20px}
.selbar .chip.on{border-color:var(--accent);color:var(--accent);font-weight:700}
/* the board's steps right under it on a phone (1 2 3 ＋ ▶), like the video's transport; the panel keeps the full section */
.stepbar{display:none}
.app.board .stepbar{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid var(--line);flex:none}
.ssteps{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.ssteps::-webkit-scrollbar{display:none}
.ssteps .chip{min-width:40px;padding:0 10px}
.sstep[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
.stepbar .sadd{flex:none}
@media (min-width: 900px) and (min-aspect-ratio: 1/1), (orientation: landscape) and (max-height: 520px){ .app.board .stepbar{display:none} }

/* 編集 (切り取り・つなぐ): the kept stretches under the scrub bar, the chosen stretch over it, the list in order */
.edbands{position:absolute;left:8px;right:8px;top:0;bottom:0;pointer-events:none}
.edbands i{position:absolute;bottom:4px;height:5px;border-radius:3px;background:var(--ok);opacity:.85}
.edbands i.slow{background:repeating-linear-gradient(90deg,var(--ok) 0 4px,transparent 4px 7px);opacity:1}
.edbands i.fast{background:repeating-linear-gradient(90deg,var(--ok) 0 10px,transparent 10px 12px);opacity:1}
.edbands b{position:absolute;top:14px;height:16px;border-radius:4px;background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid var(--accent)}
.edbands b.open{border-right-style:dashed}
.edsec{display:flex;flex-direction:column;gap:10px}
.edsec h2{margin:0}
.edmark{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.edmark .btn svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.edsel{text-align:center;font-family:var(--font-num);font-size:calc(13px*var(--k));color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edsel.on{color:var(--accent);font-weight:700}
.edselbox{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
.edselbox .edsel{min-width:0;white-space:normal;line-height:1.3}
.edsel .nw{display:inline-block;white-space:nowrap}
.edselx{min-width:30px;min-height:34px;flex:none}
.edacts .btn{flex:1 1 0}
.edlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:ed}
.edrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);counter-increment:ed}
.edrow.now{border-color:var(--accent)}
.edtime{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-width:0;min-height:36px;padding:2px 0;border:0;background:transparent;color:var(--fg);font-family:var(--font-num);font-size:calc(14px*var(--k));line-height:1.35;cursor:pointer;text-align:left;white-space:nowrap}   /* the length goes under the times when the row is narrow, never cut off */
.edtime::before{content:counter(ed);flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--raise);color:var(--muted);font-size:12px}
.edtime small{color:var(--muted);font-size:calc(12px*var(--k))}
.edbtns{display:flex;gap:4px}
.edbtns button{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--fg);cursor:pointer;font-size:14px;line-height:1}
.edbtns button[disabled]{opacity:.3;cursor:default}
.edbtns button.del[data-armed]{border-color:var(--ng);color:var(--ng)}
.edrow .sel{height:36px}
.edtitle{grid-column:1 / -1;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit;font-size:calc(13px*var(--k));min-width:0;-webkit-user-select:text;user-select:text}
.edtitle:focus{outline:2px solid var(--accent);outline-offset:0}
.edopts{grid-column:1 / -1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.edopts .chip{height:32px;padding:0 10px;font-size:calc(12px*var(--k))}
.edgo{margin-top:2px}

/* 速さを比べる */
.spsec{display:flex;flex-direction:column;gap:10px}
.spsec h2{margin:0}
.spsec h3{margin:6px 0 0;font-size:calc(13px*var(--k));color:var(--muted)}
.sppicked{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--muted);font-size:calc(12px*var(--k))}
.spchip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg);font-weight:700;font-size:13px}
.spdot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.spcal{display:flex;flex-direction:column;gap:6px}
.splist{display:flex;flex-direction:column;gap:10px}
.spres{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.sphead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sphead .note{flex:1}
.sphead .del{width:34px;height:30px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--fg);cursor:pointer}
.sphead .del[data-armed]{width:auto;padding:0 8px;border-color:var(--ng);color:var(--ng)}
.spcards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.spcards li{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.spcards li .spdot{align-self:center}
.sptop{font-family:var(--font-num);font-weight:700}
.spcards .warn{color:var(--ng)}
.spcmp{margin:0;font-weight:700;font-size:calc(13px*var(--k))}
.spchart{width:100%;height:auto;max-height:150px}
.spchart .grid{stroke:var(--line);stroke-width:1}
.spchart .ax{fill:var(--muted);font-size:9px;font-family:var(--font-num)}
.sprank{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--accent);border-radius:10px;background:var(--panel)}
.sprank h3{margin:0;color:var(--fg)}
.sprank ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sprank li{display:grid;grid-template-columns:22px minmax(48px,auto) minmax(40px,1fr) auto auto;align-items:center;gap:8px}
.sprk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--raise);color:var(--muted);font-size:12px;font-family:var(--font-num)}
.sprank li:first-child .sprk{background:var(--accent);color:var(--accent-ink);font-weight:700}
.spname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spbar{height:8px;border-radius:4px;background:var(--raise);overflow:hidden}
.spbar i{display:block;height:100%;background:var(--accent)}
.linkbtn.sm{font-size:calc(12px*var(--k))}
.spwho{width:7.5em;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit;font-size:calc(13px*var(--k));-webkit-user-select:text;user-select:text}
.spwho:focus{outline:2px solid var(--accent);outline-offset:0}
/* 動画の結合 */
.joinlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.jrow{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 10px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.jno{flex:none;width:20px;color:var(--accent);font-family:var(--font-num)}
.jname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.jsize{flex:none;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.note.warn:empty{display:none}
.note.warn{color:var(--ng)}
.tagplay{gap:8px;margin:0}
.tagplay .sel{flex:1;min-width:0}
#statsTable td.acts{white-space:nowrap}
#statsTable td.acts .btn+.btn{margin-left:6px}
.recvimg{display:block;width:100%;max-width:420px;height:auto;border-radius:8px;margin:0 auto}
.shsteps{margin:4px 0 0;padding-left:1.3em;color:var(--muted);font-size:calc(12.5px*var(--k));line-height:1.6}
.shsteps li+li{margin-top:2px}

/* ボール保持 (記録・ラボ): three buttons, the video's time painted in their colours */
.possum{font-family:var(--font-num);font-weight:700;font-size:13px;color:var(--fg)}
.possbtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:6px 0 8px}
.possbtns .btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 6px;font-size:13px}
.possbtns .btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.pdot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none}
.pdot.us,.possbar i.us{background:var(--accent)}
.pdot.them,.possbar i.them{background:#4f8fe6}
.pdot.stop,.possbar i.stop{background:repeating-linear-gradient(135deg,#7b818c 0 3px,#3a3f47 3px 6px)}
.possbar{position:relative;height:16px;border-radius:6px;background:var(--raise);overflow:hidden;cursor:pointer;margin:2px 0 6px}
.possbar i{position:absolute;top:0;bottom:0}
.possbar .ph{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--fg)}
.possacts{gap:6px}

/* わが子ハイライト (編集): the ★ button, the ★ moments, ★ on the play bar */
.hlsec{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.hlstar{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;font-size:16px;font-weight:700}
.hlstar>span:first-child{font-size:20px;line-height:1}
.hlstar.hit{transform:scale(.97)}
.hlcount{min-width:24px;padding:1px 7px;border-radius:999px;background:var(--accent-ink);color:var(--accent);font-family:var(--font-num);font-size:13px}
.hlcount:empty{display:none}
.hllist{display:flex;flex-wrap:wrap;gap:6px}
.hlitem{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--raise)}
.hlchip{border:0;background:transparent;color:var(--fg);font-family:var(--font-num);font-size:13px;padding:6px 4px 6px 8px;cursor:pointer}
.hlitem .del{width:28px;height:30px}
.hlrow{display:flex;align-items:center;gap:8px}
.hlrow .flabel{flex:none;min-width:6.5em}
.hlin{flex:1;min-width:0;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--raise);color:var(--fg);font:inherit;font-size:14px;-webkit-user-select:text;user-select:text}
.marks b.star{position:absolute;top:-15px;transform:translateX(-50%);font-size:12px;line-height:1;color:var(--accent);text-shadow:0 0 2px var(--bg)}