/* Fieldwork: a small, conventional puzzle page. System fonts only. */
:root { --paper:#fff; --card:#fff; --ink:#111; --muted:#555; --line:#aaa; --accent:#fff099; --blue:#e7edf4; --orange:#990000; --grid:#222; --green:#326132; }
* { box-sizing:border-box; }
body { margin:0; background:#e6e6e6; color:var(--ink); font:14px/1.4 Arial,Helvetica,sans-serif; }
.page { width:900px; max-width:calc(100% - 24px); margin:18px auto; padding:14px 18px; border:1px solid #888; background:var(--paper); }
a, .text-button { color:#000099; text-decoration:underline; }
a:visited { color:#551a8b; }
a:hover, .text-button:hover { color:#990000; }
button { color:var(--ink); background:#e8e8e8; border:2px outset #ddd; border-radius:0; padding:3px 8px; font:12px Arial,Helvetica,sans-serif; cursor:pointer; }
button:active, button[aria-pressed=true]:not(.text-button) { border-style:inset; background:#ddd; }
button:disabled { color:#777; cursor:default; }
button:focus-visible, a:focus-visible { outline:2px solid #245b99; outline-offset:2px; }
.text-button { border:0; background:transparent; padding:0; font:inherit; }
.text-button:active { background:transparent; }
h1,h2,h3,p { margin:0; }
.site-heading { border-bottom:3px double #003366; padding:0 0 8px; }
.site-heading h1 { font:bold 30px/1.15 'Times New Roman',Times,serif; margin:0 0 3px; }
.site-heading h1 a { color:#003366; text-decoration:none; }
.site-heading>span { font-size:12px; color:#444; }
nav { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid #aaa; font-size:12px; }
.intro { padding:12px 0; }
#edition { font-size:12px; margin-bottom:7px; }
.daily-topics { width:100%; border-collapse:collapse; background:#f5f5e8; font-size:13px; border:1px solid #b0b0a0; }
.daily-topics th { text-align:left; font-weight:normal; width:65px; padding:5px 8px; }
.daily-topics td { padding:5px 8px 5px 0; }
.daily-topics td:nth-child(2) { width:38%; }
.instructions { margin-top:8px; font-size:12px; color:var(--muted); }
main { display:table; width:100%; table-layout:fixed; border-collapse:collapse; }
.puzzle-panel { display:table-cell; width:55%; vertical-align:top; padding-right:22px; }
.clue-panel { display:table-cell; width:45%; vertical-align:top; padding-left:16px; border-left:1px solid #bbb; }
.panel-bar { display:flex; align-items:center; justify-content:space-between; min-height:29px; font-size:11px; color:var(--muted); }
.panel-bar button { font:11px 'Courier New',monospace; padding:2px 5px; }
.active-clue { display:flex; align-items:center; gap:8px; min-height:66px; margin:6px 0 10px; padding:7px; border:1px solid #b9c4d0; background:var(--blue); }
.clue-index { font:bold 22px 'Times New Roman',serif; min-width:22px; }
#active-direction { font:11px Arial,sans-serif; color:var(--muted); }
#active-text { font:15px/1.25 'Times New Roman',serif; margin-top:2px; }
.clue-arrows { margin-left:auto; display:flex; gap:3px; flex-shrink:0; }
.clue-arrows button { padding:1px 4px; }
.grid-stage { position:relative; }
#grid { display:grid; gap:1px; background:var(--grid); border:2px solid var(--grid); width:100%; touch-action:manipulation; }
.square { position:relative; aspect-ratio:1; min-width:0; background:var(--card); }
.square.block { background:var(--grid); }
.square.word { background:#eef3f8; }
.square.solved { background:#e5efe0; }
.square.selected { background:var(--accent)!important; box-shadow:inset 0 0 0 2px #806000; color:#111; }
.square.error { background:#ffcccc!important; }
.square input { display:block; width:100%; height:100%; margin:0; padding:7px 0 0; border:0; border-radius:0; outline:0; background:transparent; color:inherit; font:22px/1 Arial,Helvetica,sans-serif; text-align:center; text-transform:uppercase; caret-color:transparent; cursor:text; }
.square small { position:absolute; top:1px; left:2px; font:9px/1 Arial,sans-serif; pointer-events:none; z-index:1; }
.square.penciled input { color:#777; font-style:italic; }
.square.probed:after { content:'.'; position:absolute; bottom:1px; right:2px; color:#900; font:bold 14px Arial; line-height:8px; pointer-events:none; }
.square.pop { animation:confirm-letter .5s steps(2,end); }
.grid-caption { display:flex; justify-content:space-between; gap:8px; margin:5px 0 9px; font:10px Arial,sans-serif; color:var(--muted); }
.toolbar { display:flex; flex-wrap:wrap; gap:5px; }
#probes { font:10px 'Courier New',monospace; }
#notice { font-size:12px; color:var(--muted); min-height:40px; margin-top:9px; }
.clue-header { display:flex; justify-content:space-between; align-items:baseline; padding:3px 0 5px; border-bottom:1px solid #777; }
.clue-header h2 { font:bold 18px 'Times New Roman',serif; }
.clue-header>span { font-size:11px; color:var(--muted); }
.clue-columns h3 { font:bold 15px 'Times New Roman',serif; color:#003366; margin:11px 0 4px; }
.clue-row { display:flex; gap:6px; width:100%; text-align:left; background:transparent; border:0; padding:5px 3px; font:14px/1.25 'Times New Roman',Times,serif; }
.clue-row:hover { background:#f0f0f0; }
.clue-row.active { background:var(--blue); }
.clue-row.active .num { font-weight:bold; }
.clue-row .num { min-width:16px; text-align:right; }
.clue-row .length { white-space:nowrap; font-size:12px; color:var(--muted); }
.clue-row.done .clue-copy { color:var(--green); }
.clue-row.done:after { content:'✓'; margin-left:auto; color:var(--green); font-size:11px; }
.keyboard-note { font:10px/1.7 Arial,sans-serif; border-top:1px solid #ccc; margin-top:12px; padding-top:7px; color:var(--muted); }
kbd { font:10px 'Courier New',monospace; }
.experiment { display:flex; gap:10px; align-items:center; border-top:1px solid #aaa; border-bottom:1px solid #aaa; margin-top:14px; padding:7px 0; }
.apparatus { width:72px; flex-shrink:0; }
.apparatus svg { display:block; width:100%; }
.wire,.flask { fill:none; stroke:var(--ink); stroke-width:1.5; }
.flask { fill:var(--card); }
#liquid { fill:#a4c5df; stroke:#336699; stroke-width:1; }
.bubble { fill:#336699; opacity:0; }
.energized .bubble { animation:bubble 2.5s infinite; }
.energized .b2 { animation-delay:.9s; }
.energized .b3 { animation-delay:1.7s; }
.eyebrow { font:bold 12px Arial,sans-serif; margin-bottom:3px; }
.experiment-copy { flex:1; }
.experiment h2 { font:bold 13px Arial,sans-serif; margin-bottom:3px; }
.experiment .eyebrow { display:none; }
.experiment-copy>p { font-size:11px; color:var(--muted); }
.segments { display:flex; gap:2px; margin-top:5px; }
.segment { width:19px; height:7px; background:#ddd; border:1px solid #aaa; }
.segment.on { background:#6688aa; border-color:#446688; }
.lab-stamp { text-align:right; padding-right:4px; }
.lab-stamp strong { display:block; font:bold 18px 'Courier New',monospace; }
.lab-stamp span { font-size:10px; color:var(--muted); }
.discovery { padding:10px 0; border-bottom:1px solid #aaa; }
.discovery p { font:14px/1.4 'Times New Roman',serif; }
.bottom-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; font-size:11px; }
.bottom-row>div { display:flex; gap:12px; align-items:flex-start; }
footer { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #aaa; padding-top:8px; font-size:10px; color:var(--muted); }
.pause-screen { position:absolute; inset:0; background:var(--card); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; border:1px solid #888; z-index:2; text-align:center; }
.pause-screen h2 { font:bold 22px 'Times New Roman',serif; }
.pause-screen p { font-size:13px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
dialog { width:460px; max-width:calc(100% - 24px); max-height:90vh; overflow:auto; border:2px outset #ccc; border-radius:0; padding:22px; background:var(--paper); color:var(--ink); font:14px/1.4 'Times New Roman',serif; }
dialog::backdrop { background:rgba(0,0,0,.35); }
dialog .close { position:absolute; right:5px; top:5px; font-size:14px; padding:0 5px; }
dialog h2 { font:bold 23px 'Times New Roman',serif; margin:7px 0 12px; }
dialog p { margin:8px 0; }
dialog li { margin:7px 0; }
dialog ol,dialog ul { padding-left:22px; }
dialog .eyebrow { font:11px Arial,sans-serif; color:var(--muted); }
dialog .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
dialog .report { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid #aaa; border-bottom:1px solid #aaa; margin:12px 0; }
dialog .report b { display:block; font:bold 20px 'Courier New',monospace; }
dialog .report span { font:11px Arial,sans-serif; }
dialog textarea { width:100%; min-height:130px; color:var(--ink); background:var(--card); padding:5px; border:2px inset #ddd; font:12px/1.5 'Courier New',monospace; }
.answer-item { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dotted #aaa; font:13px 'Courier New',monospace; }
.noscript { padding:15px; }
.particle { display:none; }
body.night { --paper:#20252a; --card:#30383f; --ink:#eee; --muted:#c2c6cb; --line:#70777f; --accent:#d9cb88; --blue:#354a5d; --grid:#101214; --green:#b0d0a0; background:#14181b; }
.night a,.night .text-button { color:#a9c7f2; }
.night .site-heading h1 a,.night .clue-columns h3 { color:#b9d2ee; }
.night .site-heading>span { color:#bbb; }
.night .daily-topics { background:#30383f; }
.night button:not(.text-button):not(.clue-row) { background:#3c454e; border-color:#68717a; }
.night .clue-row:hover,.night .square.word { background:#354a5d; }
.night .square.solved { background:#3a5035; }
.night .square.error { background:#743333!important; }
@keyframes bubble { 0%{opacity:0;transform:translateY(0)}25%{opacity:.8}100%{opacity:0;transform:translateY(-27px)} }
@keyframes confirm-letter { 50%{background:#d0e3bb} }
@media(max-width:650px) {
 .page { max-width:calc(100% - 12px); margin:6px auto; padding:10px; }
 .site-heading h1 { font-size:26px; }
 nav { font-size:11px; flex-wrap:wrap; }
 main,.puzzle-panel,.clue-panel { display:block; width:100%; }
 .puzzle-panel { padding-right:0; }
 .clue-panel { border-left:0; border-top:1px solid #aaa; padding:8px 0 0; margin-top:9px; }
 .daily-topics th { width:auto; padding:5px; }
 .daily-topics td { padding:5px 4px; font-size:12px; }
 .daily-topics td:nth-child(2) { width:auto; }
 .clue-columns { display:flex; gap:16px; }
 .clue-columns>section { width:50%; min-width:0; }
 .clue-row { font-size:14px; padding:6px 2px; }
 .grid-caption { font-size:9px; }
 .square input { font-size:20px; }
 .toolbar { gap:5px; }
 .toolbar button { padding:5px 6px; }
 .keyboard-note { display:none; }
 .bottom-row { display:block; }
 .bottom-row>div { margin-top:8px; }
 .lab-stamp { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; } }

/* Companion theme for aronnomirdha.com / Notes on Physics.
   Presentation only; puzzle controls and game rules are unchanged. */
:root { --ink:#000; --muted:#666; --line:#ddd; --blue:#edf1f5; --accent:#f7edb2; --grid:#252525; }
body { background:#fff; font:15px/1.55 Georgia,'Times New Roman',Times,serif; }
.page { width:940px; max-width:calc(100% - 40px); margin:22px auto; padding:0; border:0; }
a,.text-button { color:#0000aa; }
a:visited { color:#551a8b; }
a:hover,.text-button:hover { color:#551a8b; }
.site-heading { display:grid; grid-template-columns:1fr 245px; column-gap:30px; align-items:start; border:0; padding:0; }
.site-heading h1 { font:bold 34px/1.1 Georgia,'Times New Roman',serif; margin:0; }
.site-heading h1 a { color:#000; }
.site-heading>span { font:italic 14px/1.5 Georgia,'Times New Roman',serif; color:#666; padding-top:3px; }
.site-heading:after { content:''; display:block; grid-column:1/-1; height:112px; margin-top:21px; background:#394d61 url('physics-banner.jpg') center center / cover no-repeat; }
nav { border-bottom:1px solid #ddd; padding:9px 0; font:15px/1.5 Georgia,'Times New Roman',serif; }
nav a,nav .text-button { text-decoration:none; color:#551a8b; }
nav a:hover,nav .text-button:hover { text-decoration:underline; }
nav>div:last-child { font-size:12px; align-self:center; }
.intro { padding:15px 0 12px; }
#edition { font:12px/1.5 Georgia,'Times New Roman',serif; color:#666; }
.daily-topics { background:#fafafa; border:1px solid #ddd; font:14px Georgia,'Times New Roman',serif; }
.daily-topics th,.daily-topics td { padding-top:7px; padding-bottom:7px; }
.instructions { font:12px/1.5 Georgia,'Times New Roman',serif; }
.puzzle-panel { width:57%; padding-right:30px; }
.clue-panel { width:43%; border-left:1px solid #e4e4e4; padding-left:22px; }
.active-clue { background:#f3f5f7; border-color:#d4d9df; }
#active-text { font:15px/1.35 Georgia,'Times New Roman',serif; }
.clue-header { border-bottom:1px solid #ddd; }
.clue-header h2 { font:bold 21px/1.3 Georgia,'Times New Roman',serif; }
.clue-columns h3 { font:bold 16px/1.3 Georgia,'Times New Roman',serif; color:#000; }
.clue-row { font:14px/1.4 Georgia,'Times New Roman',serif; padding:6px 3px; }
.clue-row .num { font-size:13px; }
.clue-row .length { font-size:11px; }
.keyboard-note { border-color:#ddd; }
.experiment { border-color:#ddd; margin-top:18px; }
.experiment h2 { font:bold 13px/1.5 Georgia,'Times New Roman',serif; }
.experiment-copy>p { font:12px/1.5 Georgia,'Times New Roman',serif; }
.discovery { border-color:#ddd; }
.discovery p { font:14px/1.55 Georgia,'Times New Roman',serif; }
.bottom-row { font:12px/1.5 Georgia,'Times New Roman',serif; padding:12px 0; }
footer { border-color:#ddd; font:11px/1.5 Georgia,'Times New Roman',serif; padding:10px 0 16px; }
dialog { font-family:Georgia,'Times New Roman',serif; }
dialog h2 { font-family:Georgia,'Times New Roman',serif; }
.night .site-heading h1 a,.night .clue-columns h3 { color:#eee; }
.night .active-clue { background:var(--blue); border-color:#68717a; }
.night .site-heading>span { color:#bbb; }
.night nav a,.night nav .text-button { color:#c6b6e5; }
@media(max-width:650px) {
 .page { max-width:calc(100% - 24px); margin:12px auto; }
 .site-heading { display:block; }
 .site-heading h1 { font-size:28px; }
 .site-heading>span { display:block; font-size:13px; margin-top:5px; }
 .site-heading:after { height:75px; margin-top:12px; }
 nav { font-size:13px; gap:6px; }
 nav>div:last-child { font-size:11px; }
 .intro { padding:11px 0; }
 .daily-topics { font-size:12px; }
 .puzzle-panel { width:100%; padding-right:0; }
 .clue-panel { width:100%; padding:8px 0 0; border-left:0; }
 .clue-row { font-size:13px; }
 .bottom-row { font-size:11px; }
}

.home-return { margin:0 0 12px; font:12px/1.5 Georgia,'Times New Roman',serif; }

/* Explicit answer feedback. Correctness takes priority over word selection. */
:root { --correct-bg:#c4e9bc; --correct-ink:#174d16; --wrong-bg:#f5bdbd; --wrong-ink:#8b1515; --active-bg:#d4e6fa; --cursor:#b37e00; }
body.night { --correct-bg:#28532a; --correct-ink:#d6ffd2; --wrong-bg:#743030; --wrong-ink:#fff0f0; --active-bg:#294e70; --cursor:#ffdc56; }
.square.word,.night .square.word { background:var(--active-bg); }
.square.selected { background:#fff0a0!important; box-shadow:inset 0 0 0 3px var(--cursor); }
.square.solved,.night .square.solved { background:var(--correct-bg)!important; color:var(--correct-ink); }
.square.error,.night .square.error { background:var(--wrong-bg)!important; color:var(--wrong-ink); }
.square.solved:before,.square.error:before { position:absolute; right:2px; bottom:1px; z-index:1; font:bold 10px/1 Arial,sans-serif; pointer-events:none; }
.square.solved:before { content:'✓'; color:var(--correct-ink); }
.square.error:before { content:'×'; color:var(--wrong-ink); }
.square.probed:after { right:auto; left:2px; }
.clue-row.done,.clue-row.done.active { background:var(--correct-bg); }
.clue-row.done .num,.clue-row.done .clue-copy,.clue-row.done:after { color:var(--correct-ink); }
.clue-row.active:not(.done) { background:var(--active-bg); }
.segment.on { background:#3b8737; border-color:#245c21; }
#liquid { fill:var(--correct-bg); stroke:#3b8737; }
.color-key { display:flex; flex-wrap:wrap; gap:5px 12px; margin:0 0 10px; font:11px/1.5 Arial,sans-serif; color:var(--ink); }
.color-key>span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.color-key i { display:inline-block; width:14px; height:14px; border:1px solid #888; font:bold 11px/12px Arial,sans-serif; text-align:center; }
.key-correct { background:var(--correct-bg); color:var(--correct-ink); }
.key-wrong { background:var(--wrong-bg); color:var(--wrong-ink); }
.key-active { background:var(--active-bg); }
.color-key .key-selected { background:#fff0a0; border:2px solid var(--cursor); }

/* A brief travelling wave confirms a newly solved answer. */
.answer-wave { visibility:hidden; flex-shrink:0; width:72px; margin-left:auto; text-align:center; color:#28712c; }
.answer-wave.playing { visibility:visible; }
.answer-wave svg { display:block; overflow:hidden; }
.answer-wave path { fill:none; stroke:currentColor; stroke-width:2; }
.answer-wave.playing path { animation:answer-wave-travel .9s linear 2; }
.answer-wave span { display:block; font:11px Georgia,'Times New Roman',serif; }
.night .answer-wave { color:#b1e6a9; }
.square.pop { animation:answer-cell-wave .55s ease-in-out both; }
@keyframes answer-wave-travel { from { transform:translateX(0); } to { transform:translateX(-48px); } }
@keyframes answer-cell-wave { 0%,100% { transform:translateY(0); } 45% { transform:translateY(-3px); box-shadow:inset 0 0 0 2px #4b9746; } }
@media(prefers-reduced-motion:reduce) { .answer-wave.playing path,.square.pop { animation:none!important; } }