:root {
  color-scheme: light dark;
  --page:#f7f8fa; --panel:#fff; --soft:#f2f5f8; --ink:#172d40; --muted:#5d7080; --faint:#8495a2; --line:#dfe6eb;
  --blue:#237dac; --blue-soft:#eaf4fa; --accent:#b44b1c; --accent-soft:#fff2e9;
  --water:#9fd4ed; --water-stroke:#378fb8; --earth:#3d829e; --land:#a9c6ad; --orbit:#bccbd6;
  --sun:#e9b34a; --sun-ink:#91630f; --sand:#e9dac1; --sand-line:#c3ab87; --sky:#f3f8fa; --pier:#667b86;
  --moon:#c0cbd3; --moon-edge:#728797; --phase-dark:#344b60; --phase-light:#eef2f5; --force:#956720;
}
@media (prefers-color-scheme:dark) {
  :root {
    --page:#11171e; --panel:#19222c; --soft:#202c38; --ink:#edf2f6; --muted:#acbbc8; --faint:#8093a3; --line:#344250;
    --blue:#80c7eb; --blue-soft:#223c4c; --accent:#ffb17c; --accent-soft:#3d2b23;
    --water:#214f68; --water-stroke:#67b7df; --earth:#2b6079; --land:#83a798; --orbit:#526879;
    --sun:#ebbd60; --sun-ink:#f0c66f; --sand:#645b4c; --sand-line:#9c8e78; --sky:#1b2a37; --pier:#b6c4ce;
    --moon:#a6b6c2; --moon-edge:#d5e0e7; --phase-dark:#233444; --phase-light:#e4edf3; --force:#e0b768;
  }
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--page); }
body { margin:0; color:var(--ink); font-family:'Lato',sans-serif; }
button,input,select { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; color:var(--ink); }
button:disabled { opacity:.45; cursor:wait; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
button svg,.interaction-hint svg { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
p,h1,h2,h3 { margin:0; }
a { color:var(--blue); text-underline-offset:3px; }
.tide-app { width:100%; height:calc(100dvh - var(--sim-nav-offset,44px)); margin-top:var(--sim-nav-offset,44px); padding:10px clamp(8px,1.3vw,24px); display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; }
.intro>div:first-child { min-width:0; }
.intro .eyebrow,.intro-copy { display:none; }
h1 { font-size:clamp(1.05rem,1.6vw,1.4rem); letter-spacing:-.025em; line-height:1.25; }
.eyebrow { font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.intro-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.experiment-switch { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }
.experiment-switch button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:6px 12px; background:transparent; border:1px solid transparent; border-radius:5px; font-size:.85rem; font-weight:700; color:var(--muted); }
.experiment-switch button[aria-pressed="true"] { background:var(--panel); border-color:var(--line); color:var(--ink); }
.help-actions { display:flex; gap:5px; }
.help-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:6px; background:var(--panel); padding:6px 10px; font-size:.8rem; }
.help-button b { font-size:1rem; width:17px; text-align:center; color:var(--blue); }
.help-button:hover,.reset-button:hover { background:var(--soft); }
.workbench { min-height:0; min-width:0; display:grid; grid-template-areas:'tabs' 'views' 'controls'; grid-template-rows:auto minmax(0,1fr) auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.view-switch { display:none; grid-area:tabs; }
.views { grid-area:views; min-height:0; min-width:0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.orbit-panel { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; min-width:0; min-height:0; border-right:1px solid var(--line); }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:38px; padding:8px 14px; }
.panel-heading>div { display:flex; align-items:center; gap:8px; min-width:0; }
.panel-heading h2 { font-size:.83rem; font-weight:700; line-height:1.3; }
.section-number { font-size:.65rem; color:var(--faint); font-weight:700; font-variant-numeric:tabular-nums; }
.coast-number { color:var(--accent); }
.view-tag { color:var(--muted); font-size:.7rem; white-space:nowrap; }
#orbit-svg,#coast-svg,#chart-svg { display:block; width:100%; height:100%; min-height:0; min-width:0; }
#orbit-svg { padding:0 8px; }
.orbit-key { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px 18px; font-size:.73rem; color:var(--muted); padding:4px 8px; }
.orbit-key>span { display:inline-flex; align-items:center; gap:6px; }
.key-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.key-line { width:22px; border-top:1.5px dashed var(--water-stroke); }
.interaction-hint { display:flex; align-items:center; justify-content:center; gap:6px; padding:4px 12px 8px; font-size:.73rem; color:var(--muted); line-height:1.35; }
.interaction-hint svg { width:16px; height:16px; }
.local-panels { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); min-width:0; min-height:0; }
.coast-panel,.chart-panel { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; min-width:0; }
.coast-panel { border-bottom:1px solid var(--line); }
.status-badge { font-size:.72rem; font-weight:700; background:var(--accent-soft); color:var(--accent); border-radius:4px; padding:5px 7px; white-space:nowrap; }
#coast-svg { padding:0 12px; }
.coast-caption { padding:5px 14px 8px; font-size:.76rem; line-height:1.4; color:var(--muted); }
#chart-svg { padding:0 8px; }
.chart-key { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 16px; padding:3px 10px 8px; font-size:.72rem; color:var(--muted); }
.chart-key b { color:var(--blue); font-size:.9rem; }
.workspace-controls { grid-area:controls; display:flex; flex-direction:column; min-width:0; }
.phase-panel { display:grid; grid-template-columns:150px minmax(0,1fr) minmax(155px,220px); align-items:center; gap:12px; padding:8px 14px; border-top:1px solid var(--line); background:var(--soft); }
.phase-intro .eyebrow { font-size:.6rem; }
.current-phase { display:flex; align-items:center; gap:6px; font-size:.78rem; margin-top:2px; }
#phase-icon { width:26px; height:26px; flex:0 0 auto; }
.phase-dark { fill:var(--phase-dark); stroke:var(--moon-edge); stroke-width:1.5; }
.phase-light { fill:var(--phase-light); }
.phase-presets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.phase-presets button { display:flex; align-items:center; justify-content:center; min-height:44px; gap:6px; border:1px solid var(--line); border-radius:5px; background:var(--panel); padding:4px 6px; font-size:.75rem; line-height:1.2; }
.phase-presets button:hover,.phase-presets button[aria-pressed="true"] { border-color:var(--blue); background:var(--blue-soft); }
.phase-presets svg { width:20px; height:20px; fill:var(--phase-dark); stroke:var(--moon-edge); stroke-width:1; }
.phase-presets .preset-light { fill:var(--phase-light); }
.phase-select { display:none; min-width:0; width:100%; min-height:44px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:var(--panel); padding:5px; font-size:.8rem; }
.phase-observation { font-size:.75rem; line-height:1.35; color:var(--muted); }
.transport { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:8px 14px; border-top:1px solid var(--line); background:var(--panel); border-radius:0 0 10px 10px; }
.primary-button,.reset-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; border-radius:5px; padding:8px 12px; font-size:.83rem; font-weight:700; }
.primary-button { min-width:106px; background:var(--ink); color:var(--panel); border:1px solid var(--ink); }
.primary-button svg { width:17px; height:17px; fill:currentColor; stroke-width:0; }
.primary-button:hover { opacity:.85; }
.reset-button { border:1px solid var(--line); background:transparent; }
.reset-button svg { width:17px; height:17px; }
.timeline { min-width:0; }
.time-label { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:.74rem; font-weight:700; }
#time-display { font-variant-numeric:tabular-nums; color:var(--accent); white-space:nowrap; }
#time-slider { display:block; width:100%; accent-color:var(--accent); height:44px; margin:0; cursor:pointer; }
.time-endpoints { display:none; }
.observation { display:flex; align-items:baseline; gap:8px; padding:0 3px; font-size:.78rem; line-height:1.35; min-width:0; }
.observation-mark { color:var(--accent); font-size:1.1rem; }
.observation p { flex:1; }
#learning-dialog { width:min(960px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--panel); }
#learning-dialog[open] { display:flex; flex-direction:column; }
#learning-dialog::backdrop { background:rgb(8 20 32 / .5); }
.dialog-header { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; border-bottom:1px solid var(--line); }
.dialog-header h2 { font-size:1rem; }
.dialog-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:14px 20px; }
.model-note { color:var(--muted); font-size:.76rem; line-height:1.5; margin:0 0 12px; }
.explanation { border-top:1px solid var(--line); }
.explanation summary { cursor:pointer; padding:14px 0; font-size:.87rem; font-weight:700; }
.explanation p { user-select:text; -webkit-user-select:text; color:var(--muted); font-size:.85rem; line-height:1.6; }
.explanation-intro { margin-bottom:16px; }
.force-panels,.learning-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.force-panels article { padding:14px; border:1px solid var(--line); border-radius:7px; background:var(--soft); }
.explanation h3 { font-size:.87rem; margin-bottom:8px; }
.force-panels svg { display:block; width:100%; max-height:170px; margin:8px 0; }
.explanation .explanation-footnote { margin-top:10px; font-size:.73rem; }
.learning-notes { padding:20px 0; }
.model-details p { margin:0 0 14px; }
.model-details .source-links { font-size:.75rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.load-error { position:fixed; inset:60px 20px auto; padding:20px; color:var(--accent); background:var(--panel); }
/* Tall tablets use the full width for the orbit, with the two local views below. */
@media (min-width:600px) and (max-width:899px) and (min-height:900px) {
  .views { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1.25fr) minmax(0,1fr); }
  .orbit-panel { border-right:0; border-bottom:1px solid var(--line); }
  .local-panels { grid-template-rows:minmax(0,1fr); grid-template-columns:repeat(2,minmax(0,1fr)); }
  .coast-panel { border-bottom:0; border-right:1px solid var(--line); }
}
@media (max-width:1100px) {
  .help-button span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .phase-panel { grid-template-columns:125px minmax(0,1fr); gap:6px 12px; }
  .phase-observation { grid-column:2; text-align:center; }
  .phase-intro { grid-row:1 / span 2; }
  .phase-presets button { gap:4px; }
  .panel-heading { padding:7px 10px; }
  .view-tag { font-size:.65rem; }
}
@media (max-height:749px) { .observation { display:none; } .tide-app { grid-template-rows:auto minmax(0,1fr); } }
/* Compact screens select a view instead of shrinking three diagrams to thumbnails. */
@media (max-width:599px), (max-height:639px) {
  .tide-app { padding:6px 8px; gap:6px; grid-template-rows:auto minmax(0,1fr); }
  .intro>div:first-child,.observation { display:none; }
  .intro-actions { width:100%; justify-content:space-between; gap:6px; }
  .help-button span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .experiment-switch { padding:2px; min-width:0; }
  .experiment-switch button { padding:5px 10px; font-size:.8rem; }
  .view-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-bottom:1px solid var(--line); padding:0 6px; }
  .view-switch button { min-height:44px; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted); padding:6px; font-size:.8rem; font-weight:700; }
  .view-switch button[aria-selected='true'] { color:var(--blue); border-bottom-color:var(--blue); }
  .views { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .local-panels { display:contents; }
  .orbit-panel,.coast-panel,.chart-panel { border:0; }
  .views:not([data-active-view='orbit']) .orbit-panel,
  .views:not([data-active-view='coast']) .coast-panel,
  .views:not([data-active-view='chart']) .chart-panel { display:none; }
  .panel-heading { min-height:32px; padding:5px 10px; }
  .panel-heading h2 { font-size:.8rem; }
  .section-number { display:none; }
  .interaction-hint { font-size:.72rem; padding:3px 10px 7px; }
  .orbit-key { font-size:.71rem; gap:5px 12px; padding:3px 8px; }
  .coast-caption { font-size:.85rem; padding:8px 14px; }
  .chart-key { font-size:.8rem; padding:8px 10px; }
  .phase-panel { grid-template-columns:minmax(0,1fr); gap:5px; padding:6px 8px; }
  .phase-intro { display:none; }
  .phase-observation { grid-column:1; text-align:center; font-size:.72rem; }
  .phase-presets { gap:5px; }
  .phase-presets button { font-size:.72rem; padding:3px 4px; }
  .phase-presets svg { display:none; }
  .transport { padding:6px 8px; gap:8px; }
  .primary-button,.reset-button { min-width:44px; width:44px; padding:8px; }
  #play-label,.reset-button span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .time-label { font-size:.7rem; }
  #learning-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .dialog-header { padding:7px 12px; }
  .dialog-body { padding:12px; }
  .force-panels,.learning-notes { grid-template-columns:minmax(0,1fr); gap:14px; }
}
@media (max-width:359px) {
  .experiment-switch { flex:1; }
  .experiment-switch button { flex:1; padding:4px 5px; font-size:.75rem; }
  .experiment-switch svg { display:none; }
  .help-actions { gap:4px; }
  .orbit-key { font-size:.66rem; gap:5px 10px; }
  .panel-heading h2 { font-size:.74rem; }
}
/* Short landscape screens place controls beside the chosen view. */
@media (min-width:500px) and (max-height:639px) {
  .workbench { grid-template-areas:'tabs controls' 'views controls'; grid-template-columns:minmax(0,1fr) clamp(180px,25vw,260px); grid-template-rows:auto minmax(0,1fr); }
  .workspace-controls { border-left:1px solid var(--line); justify-content:flex-end; background:var(--soft); border-radius:0 10px 10px 0; }
  .phase-panel { border-top:0; margin-bottom:auto; gap:8px; padding:10px; }
  .phase-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phase-intro { display:block; grid-row:auto; }
  .phase-intro .eyebrow { display:none; }
  .phase-observation { text-align:left; }
  .phase-presets svg { display:block; width:17px; height:17px; }
  .transport { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:8px 10px; border-radius:0 0 10px 0; }
  .timeline { grid-column:1/-1; grid-row:1; }
  .primary-button,.reset-button { width:100%; }
  .orbit-key { padding:2px 6px; }
  .interaction-hint { display:none; }
  .coast-caption { font-size:.76rem; padding:4px 10px 6px; }
  .chart-key { font-size:.73rem; padding:4px 8px 6px; }
  .force-panels,.learning-notes { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:500px) and (max-height:419px) {
  .phase-intro,.phase-presets { display:none; }
  .phase-select { display:block; }
  .phase-panel { padding:6px 8px; gap:5px; }
  .transport { padding:5px 8px; }
  .current-phase { font-size:.72rem; }
}

/* Scene colours and vector details are independent of the responsive layout. */
.space-axis { stroke:var(--line); stroke-width:1; stroke-dasharray:2 7; fill:none; }
.moon-orbit { stroke:var(--orbit); stroke-width:1.4; fill:none; }
.water-envelope { fill:var(--water); stroke:var(--water-stroke); stroke-width:1.5; }
.mean-level { fill:none; stroke:var(--water-stroke); stroke-width:1; stroke-dasharray:4 5; }
.earth-ocean { fill:var(--earth); }
.earth-land { fill:var(--land); }
.earth-grid { stroke:var(--panel); opacity:.17; fill:none; stroke-width:1; }
.earth-outline { stroke:var(--earth); stroke-width:1; fill:none; }
.earth-label { fill:#fff; paint-order:stroke; stroke:var(--earth); stroke-width:5px; font-size:16px; font-weight:700; }
.rotation-guide { stroke:var(--muted); stroke-width:1.5; fill:none; }
.rotation-head { fill:var(--muted); }
.coast-dot { fill:var(--accent); stroke:var(--panel); stroke-width:2.5; }
.coast-ring { fill:none; stroke:var(--accent); stroke-width:1.4; }
.coast-link { stroke:var(--accent); stroke-width:2; stroke-dasharray:3 3; }
.coast-water-dot { fill:var(--accent); }
#moon-control { cursor:grab; touch-action:none; outline:none; }
#moon-control.dragging { cursor:grabbing; }
.moon-hit { fill:transparent; }
.moon-focus { fill:none; stroke:var(--blue); stroke-width:2; opacity:0; }
#moon-control:focus-visible .moon-focus,#moon-control:hover .moon-focus,#moon-control.dragging .moon-focus { opacity:1; }
.moon-disc { fill:var(--moon); stroke:var(--moon-edge); stroke-width:1.5; }
.moon-craters { fill:var(--moon-edge); opacity:.5; pointer-events:none; }
.orbital-moon-light { fill:var(--phase-light); }
.moon-label { font-size:15px; font-weight:700; fill:var(--ink); pointer-events:none; }
.sun-disc { fill:var(--sun); }
.sun-halo { fill:var(--sun); opacity:.09; }
.sun-rays,.sun-direction { stroke:var(--sun); stroke-width:1.6; }
.sun-direction { stroke-dasharray:4 6; }
.sun-label { fill:var(--sun-ink); font-size:15px; font-weight:700; }
.coast-sky { fill:var(--sky); }
.dune-back { fill:var(--sand-line); opacity:.28; }
.sand { fill:var(--sand); }
.sand-edge { stroke:var(--sand-line); stroke-width:1.5; }
.beach-grass { stroke:var(--muted); stroke-width:1.5; fill:none; }
.pier-legs { stroke:var(--pier); stroke-width:6; }
.pier-deck { fill:var(--pier); }
.pier-rail { stroke:var(--pier); stroke-width:2; fill:none; }
.sea-water { fill:var(--water); opacity:.88; }
.sea-surface { stroke:var(--water-stroke); stroke-width:2.5; fill:none; }
.gauge-pole { stroke:var(--pier); stroke-width:3; }
.gauge-ticks { stroke:var(--pier); stroke-width:1.5; }
.shore-marker { stroke:var(--accent); stroke-width:3; stroke-linecap:round; fill:none; }
.chart-grid { stroke:var(--line); stroke-width:1; fill:none; }
.chart-zero { stroke:var(--orbit); stroke-dasharray:4 4; stroke-width:1; }
.axis-label { fill:var(--muted); font-size:12px; }
.curve-area { fill:var(--water); opacity:.18; }
.tide-curve { stroke:var(--blue); stroke-width:2.5; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.event-dot { fill:var(--blue); }
.event-label { fill:var(--muted); font-size:12px; }
.time-cursor { stroke:var(--accent); stroke-width:1.5; stroke-dasharray:3 3; }
.force-earth { fill:var(--earth); opacity:.2; stroke:var(--earth); stroke-width:1.5; }
.force-water { fill:var(--water); stroke:var(--water-stroke); stroke-width:1; }
.force-arrow { stroke:var(--force); stroke-width:3; fill:none; }
.force-head { fill:var(--force); }
.difference-arrow { stroke:var(--blue); stroke-width:3; fill:none; }
.difference-head { fill:var(--blue); }
.force-point { fill:var(--ink); }
.diagram-label { fill:var(--muted); font-size:12px; }

.axis-label,.event-label,.diagram-label { font-size:var(--svg-label-size,12px); }
.earth-label,.moon-label,.sun-label { font-size:var(--body-label-size,16px); }