/* Always-visible controls: 44 px hit areas, existing navy/yellow/white palette. */
.video-controls{--video-ink:var(--ink,#123c55);--video-line:var(--line,#cadbe0);min-width:0;padding:3px 8px 6px;border:1px solid var(--video-line);border-top:0;color:var(--video-ink);background:#fff;font-size:13px;line-height:1.5;touch-action:manipulation}
.video-seek-row{display:flex;align-items:center;gap:12px;min-height:44px;min-width:0}
.video-seek-label{font-size:11px;font-weight:700;white-space:nowrap;flex:none}
.video-seek{--video-progress:0%;appearance:none;-webkit-appearance:none;display:block;min-width:0;flex:1;width:100%;height:44px;margin:0;padding:0;background:transparent;color:var(--video-ink);cursor:pointer;touch-action:none;border:0;border-radius:0}
.video-seek::-webkit-slider-runnable-track{height:6px;background:linear-gradient(to right,var(--video-ink) 0 var(--video-progress),var(--video-line) var(--video-progress) 100%);border:0;border-radius:0}
.video-seek::-moz-range-track{height:6px;background:var(--video-line);border:0;border-radius:0}
.video-seek::-moz-range-progress{height:6px;background:var(--video-ink);border:0;border-radius:0}
.video-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:2px solid var(--video-ink);border-radius:50%;background:var(--yellow,#ffe156);box-shadow:none}
.video-seek::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--video-ink);border-radius:50%;background:var(--yellow,#ffe156);box-shadow:none}
.video-seek:focus-visible{outline:3px solid #167dba;outline-offset:2px}
.video-seek:disabled{cursor:wait;opacity:.45}
.video-control-bar{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px}
.video-control-button{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:10px;border:1px solid var(--video-line);border-radius:0;background:#fff;color:var(--video-ink);line-height:1;cursor:pointer}
.video-control-button svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.video-play svg path:first-child{fill:currentColor}
.video-play[aria-label="一時停止"] svg path:first-child{fill:none;stroke-width:3}
.video-control-button:focus-visible{outline:3px solid #167dba;outline-offset:2px}
.video-control-button:active{background:var(--yellow,#ffe156)}
.video-time{flex:1;min-width:0;font-family:Arial,sans-serif;font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap}
.video-time-separator{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.video-audio-note{flex:none;font-size:11px;line-height:1.5;white-space:nowrap;color:var(--muted,#52707d)}
.video-controls .video-status{margin:5px 2px 2px;padding:0;font-size:12px;line-height:1.8;overflow-wrap:anywhere;color:var(--muted,#52707d)}
.video-controls [hidden]{display:none}
.video-controls[data-mode="native"] .video-seek-row,.video-controls[data-mode="native"] .video-control-bar{display:none}
.video-player-figure:is(:fullscreen,:-webkit-full-screen){display:flex!important;flex-direction:column;justify-content:center;gap:0;width:100%;height:100%;max-width:none;margin:0;padding:0;background:#051c28;color:#fff;overflow:hidden}
.video-player-figure:is(:fullscreen,:-webkit-full-screen) .slide-visual{flex:1;min-height:0;width:100%;height:auto;max-height:none;aspect-ratio:auto;background:#051c28}
.video-player-figure:is(:fullscreen,:-webkit-full-screen) .slide-visual video{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain}
.video-player-figure:is(:fullscreen,:-webkit-full-screen) .video-controls{flex:none;width:100%;max-width:none;padding-inline:max(12px,env(safe-area-inset-left),env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom));border:0}
.video-player-figure:is(:fullscreen,:-webkit-full-screen)>figcaption{display:none}
@media(hover:hover){.video-control-button:hover{background:var(--yellow,#ffe156)}}
@media(max-width:360px){.video-controls{padding-inline:5px}.video-seek-row{gap:8px}.video-control-bar{gap:5px}.video-time{font-size:12px}.video-audio-note{font-size:10px}}
/* Keep the range focus ring clear of the next row of controls. */
.video-seek-row{margin-bottom:8px}

/* Mobile: seeking stays distinct from moving to another photo or clip. */
@media(max-width:700px){
  .video-controls{position:relative;border:0;padding:0;background:#fff;font-size:12px}
  .video-seek-row{display:block;min-height:0;margin:14px 0 0}
  .video-seek-label{display:block;font-size:12px;line-height:18px;font-weight:600}
  .video-seek{height:36px;width:100%;margin:4px 0 0;padding:0}
  .video-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px}
  .video-seek::-moz-range-track,.video-seek::-moz-range-progress{height:4px;border-radius:2px}
  .video-seek::-webkit-slider-thumb{width:16px;height:16px;margin-top:-6px;border:2px solid white;background:var(--ink,#153f53);box-shadow:0 0 0 1px var(--ink,#153f53)}
  .video-seek::-moz-range-thumb{width:12px;height:12px;border:2px solid white;background:var(--ink,#153f53);box-shadow:0 0 0 1px var(--ink,#153f53)}
  .video-control-bar{min-height:44px;gap:8px;margin-top:-2px}
  .video-control-button{min-width:44px;min-height:44px;width:44px;height:44px;border:0;padding:10px;background:transparent}
  .video-control-button svg{width:21px;height:21px}
  .video-time{position:absolute;right:0;top:0;font-family:inherit;font-size:12px;font-weight:600;line-height:18px}
  .video-audio-note{margin-left:auto;font-size:12px;color:var(--muted,#52707e)}
  .video-sound{margin-left:auto}
  .video-audio-note+.video-sound[hidden]+.video-fullscreen{margin-left:0}
  .video-fullscreen{display:inline-flex;gap:5px;width:auto;font-size:12px;padding:0;min-width:70px;justify-content:flex-end}
  .video-fullscreen::after{content:"全画面";white-space:nowrap}
  .video-fullscreen[aria-label="全画面を終了する"]::after{content:"終了"}
  .video-controls .video-status{font-size:12px;line-height:1.8;margin:5px 0 8px}
  .video-player-figure:is(:fullscreen,:-webkit-full-screen) .video-controls{padding-top:8px}
  .video-player-figure:is(:fullscreen,:-webkit-full-screen) .video-time{top:8px;right:max(12px,env(safe-area-inset-right))}
}
/* The approved mobile view offers a direct play action on the stopped frame. */
.slide-visual{position:relative}
.video-overlay-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;min-width:48px;min-height:48px;padding:0;display:grid;place-items:center;border:1px solid #fff;border-radius:50%;background:#fffffff0;color:var(--ink);z-index:2}
.video-overlay-play svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.video-overlay-play[hidden]{display:none}
@media(max-width:700px){.video-seek{height:44px;min-height:44px}}