/* Angle Outpost — a lighthouse on a night sea, brass instruments, to-scale charts. */
.lh-wrap { width: 100%; display: grid; gap: 18px; justify-items: center; }
.lh-wrap.has-pad { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; justify-items: stretch; }
/* each diagram sets --ar (its width / height) so it fits the screen height on desktop */
.lh-stage { position: relative; width: 100%; max-width: max(300px, min(660px, calc((100vh - 380px) * var(--ar, 1.4)))); margin-inline: auto; min-width: 0; }
.lh-svg { display: block; width: 100%; height: auto; border-radius: 22px; background: #0F1B33; overflow: hidden; user-select: none; -webkit-user-select: none; }
/* only the turnable beam takes over touch; diagrams leave the page free to scroll */
.lh-svg[role="slider"] { cursor: grab; touch-action: none; }
.lh-svg[role="img"] { touch-action: pan-y; }
.lh-svg:focus { outline: none; }
.lh-svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.lh-side { display: grid; gap: 10px; align-content: center; }

/* free turning (level 1) */
.lh-ring { fill: none; stroke: rgba(157, 184, 218, .35); stroke-width: 2; stroke-dasharray: 4 8; }
.lh-tick { stroke: #9DB8DA; stroke-width: 3; }
.lh-ticklab { font: 700 17px var(--f-math); fill: #B9CDE6; text-anchor: middle; }
.lh-zero { stroke: #FFC94D; stroke-width: 4; stroke-dasharray: 10 7; stroke-linecap: round; }
.lh-beam { fill: url(#lh-beam); }
.lh-ray { stroke: #FFF6CC; stroke-width: 3.5; stroke-linecap: round; }
.lh-turn { fill: none; stroke: #FFC94D; stroke-width: 3; opacity: .8; }
.lh-turn.exact { opacity: 1; stroke-width: 4; }
.lh-quarter { fill: rgba(255, 201, 77, .16); stroke: rgba(255, 201, 77, .55); stroke-width: 1.5; }
.lh-quarter.next { fill: none; stroke: rgba(255, 214, 120, .85); stroke-width: 2; stroke-dasharray: 6 6; }
.lh-half { stroke: #FFE38A; stroke-width: 2.5; stroke-dasharray: 6 6; stroke-linecap: round; }
.lh-lamp { fill: #FFC94D; stroke: #0F1B33; stroke-width: 3; filter: drop-shadow(0 0 10px #FFE38A); }
.lh-ship .lh-bob { animation: lhBob 1.6s ease-in-out infinite alternate; }
.lh-ship { animation: lhSail .7s var(--spring) both; transform-box: fill-box; transform-origin: center; }
@keyframes lhBob { to { transform: translateY(-3px) rotate(-2deg); } }
@keyframes lhSail { from { opacity: 0; transform: scale(.3); } }

/* the protractor: outer row (yellow) from 0 on the right, inner row (blue) from 0 on the left */
.lh-pro-body { fill: rgba(255, 233, 170, .14); stroke: #E8C76A; stroke-width: 2; }
.lh-pro line { stroke: #E8C76A; stroke-width: 1; }
.lh-pro line.big { stroke-width: 2; }
.lh-pro text { text-anchor: middle; }
.lh-pro text.o { font: 800 15px var(--f-math); letter-spacing: -.6px; fill: #FFE38A; }
.lh-pro text.i { font: 700 13.5px var(--f-math); letter-spacing: -.5px; fill: #B4CBEA; }
.lh-rowhi { fill: none; stroke: rgba(255, 246, 204, .2); stroke-width: 24; }
.lh-pro-dot { fill: #E8C76A; }
/* the brass lens that rides on the beam */
.lh-lens { pointer-events: none; }
.lh-lens-bg { fill: #1D3760; }
.lh-lens-ray { stroke: #FFF6CC; stroke-width: 1.3; stroke-linecap: round; }
.lh-lens-rim { fill: none; stroke: #E8C76A; stroke-width: 4.5; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
/* fine-turn buttons over the protractor's empty top corners */
.lh-nb { position: absolute; top: 10px; display: inline-flex; align-items: center; gap: 3px; height: 44px; min-width: 60px; padding: 0 10px; border-radius: 999px; border: 2px solid #E8C76A; background: rgba(15, 27, 51, .86); color: #FFE38A; font: 800 .95rem var(--f-math); }
.lh-nb svg { width: 20px; height: 20px; flex: none; }
.lh-nb.ccw { left: 10px; } .lh-nb.cw { right: 10px; }
.lh-nb:hover { background: #1D3760; }
.lh-nb:active { transform: translateY(1px); }
.lh-nb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* charts */
.lh-arm { stroke: #DDE7F3; stroke-width: 3.5; stroke-linecap: round; }
.lh-arm.ext { stroke-dasharray: 8 6; }
.lh-buoy { fill: #C2402F; stroke: #fff; stroke-width: 2; }
.lh-beacon { fill: #FFC94D; stroke: #0F1B33; stroke-width: 2.5; filter: drop-shadow(0 0 6px #FFE38A); }
.lh-shape { fill: rgba(157, 184, 218, .12); stroke: #DDE7F3; stroke-width: 3.5; stroke-linejoin: round; }
.lh-arc { fill: none; stroke: #9DB8DA; stroke-width: 3; }
.lh-arc.fill { fill: rgba(157, 184, 218, .25); }
.lh-arc.q { stroke: #FFC94D; }
.lh-arc.q.fill { fill: rgba(255, 201, 77, .22); }
.lh-arc.whole { stroke-dasharray: 6 5; }
.lh-arc.pair { stroke: #F49AC1; stroke-width: 3.5; stroke-dasharray: 5 5; }
.lh-arc.hl { animation: lhPulse 1s ease-in-out 3; }
.lh-arc.lit { stroke: #7BE0A6; }
.lh-arc.lit.fill { fill: rgba(123, 224, 166, .25); }
.lh-arc.w0.fill { fill: rgba(255, 201, 77, .6); stroke: #FFC94D; }
.lh-arc.w1.fill { fill: rgba(123, 224, 166, .6); stroke: #7BE0A6; }
.lh-arc.w2.fill { fill: rgba(244, 154, 193, .6); stroke: #F49AC1; }
@keyframes lhPulse { 50% { stroke-width: 7; } }
.lh-right { fill: none; stroke: #DDE7F3; stroke-width: 2.5; }
.lh-iso { stroke: #FFC94D; stroke-width: 3; }
.lh-base { stroke: #DDE7F3; stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.lh-diag { stroke: #FFC94D; stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.lh-lab rect { fill: #0F1B33; stroke: #9DB8DA; stroke-width: 1.6; }
.lh-lab text { font: 800 17px var(--f-math); fill: #EAF1FA; text-anchor: middle; }
.lh-lab.q rect { stroke: #FFC94D; stroke-width: 2.4; } .lh-lab.q text { fill: #FFC94D; }
.lh-lab.whole rect { stroke-dasharray: 3 3; }
.lh-lab.done rect { fill: #1E5C43; stroke: #7BE0A6; } .lh-lab.done text { fill: #fff; }
/* the tear-off */
.lh-wedge { transform-box: view-box; transform-origin: 0 0; transform: translate(var(--fx), var(--fy)); animation: lhTear 1s var(--d) cubic-bezier(.5, 0, .2, 1) forwards; }
.lh-wedge.still { animation: none; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
@keyframes lhTear { to { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); } }
.lh-wfill { stroke: #0F1B33; stroke-width: 1.5; }
.lh-wfill.c0 { fill: #FFC94D; } .lh-wfill.c1 { fill: #7BE0A6; } .lh-wfill.c2 { fill: #F49AC1; }
.lh-180 text { font: 800 17px var(--f-math); fill: #FFE38A; text-anchor: middle; }
.lh-svg.narrow .lh-180 text { font-size: 19.5px; }
.lh-180 .c0 { fill: #FFC94D; } .lh-180 .c1 { fill: #7BE0A6; } .lh-180 .c2 { fill: #F7A8CB; }
.lh-180 { opacity: 0; animation: lhIn .4s var(--d) forwards; }
@keyframes lhIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lh-ship, .lh-ship .lh-bob, .lh-arc.hl { animation: none; }
  .lh-wedge { animation: none; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
  .lh-180 { animation: none; opacity: 1; }
}
[data-motion="reduced"] .lh-ship, [data-motion="reduced"] .lh-ship .lh-bob { animation: none; }
[data-motion="reduced"] .lh-180 { animation: none; opacity: 1; }

/* phones: the diagram takes the full width, and the number pad sits beside its display so the board fits above the dock */
@media (max-width: 760px) {
  .lh-wrap { gap: 12px; }
  .lh-wrap.has-pad { grid-template-columns: 1fr; }
  .lh-stage { max-width: 100%; }
  .lh-side { width: 100%; max-width: 440px; margin-inline: auto; }
  .lh-side .np { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); align-items: stretch; gap: 8px; }
  .lh-side .np-display { min-height: 0; font-size: 1.75rem; }
  .lh-side .np-keys { gap: 6px; }
  .lh-side .np-k { min-height: 44px; font-size: 1.2rem; }
  .lh-nb { top: 6px; min-width: 56px; padding: 0 8px; }
  .lh-nb.ccw { left: 6px; } .lh-nb.cw { right: 6px; }
}

/* measuring (level 2): turn the protractor onto an arm, then read it */
.lh-card { display: grid; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--panel-2); border: 1.5px solid var(--line); }
.lh-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: .95rem; line-height: 1.35; color: var(--ink-2); }
.lh-steps li.on { font-weight: 700; color: var(--ink); }
.lh-turns { display: flex; gap: 10px; justify-content: center; }
.lh-turns .lh-nb { position: static; }
.lh-armhi { stroke: #FFE38A; stroke-width: 13; stroke-linecap: round; opacity: .45; animation: lhGlow 1.2s ease-in-out 3 alternate; }
@keyframes lhGlow { from { opacity: .2; } to { opacity: .6; } }
#lh-promain, #lh-lens-pro { transition: none; }

/* picture proofs after a solve */
.lh-wfill.c3 { fill: #8FC3FF; } .lh-arc.w3.fill { fill: rgba(143, 195, 255, .6); stroke: #8FC3FF; } .lh-180 .c3 { fill: #A9D1FF; }
.lh-late { opacity: 0; animation: lhIn .45s var(--d, 0ms) forwards; }
.lh-late.dim { animation-name: lhDim; }
@keyframes lhDim { to { opacity: .4; } }
.lh-late.still { animation: none; opacity: 1; }
.lh-late.soft .lh-wfill { fill-opacity: .82; } .lh-late.dim.still { opacity: .4; }
.lh-180.still { animation: none; opacity: 1; }
.lh-half-tri { fill: rgba(255, 201, 77, .2); stroke: #FFC94D; stroke-width: 2; stroke-dasharray: 6 5; }
.lh-fold { transform-box: view-box; transform-origin: 0 0; animation: lhFold 1.1s .15s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes lhFold { to { transform: translateX(var(--ax)) scaleX(-1) translateX(calc(-1 * var(--ax))); } }
.lh-fold.still { animation: none; transform: translateX(var(--ax)) scaleX(-1) translateX(calc(-1 * var(--ax))); }
@media (prefers-reduced-motion: reduce) {
  .lh-late, .lh-armhi { animation: none; opacity: 1; } .lh-late.dim { opacity: .4; } .lh-armhi { opacity: .45; }
  .lh-fold { animation: none; transform: translateX(var(--ax)) scaleX(-1) translateX(calc(-1 * var(--ax))); }
}
[data-motion="reduced"] .lh-armhi { animation: none; }
/* phones: the instruction line already says what to do; keep just the fine-turn buttons under the chart */
@media (max-width: 760px) {
  .lh-card { padding: 0; background: none; border: 0; }
  .lh-steps { display: none; }
}

/* the top bar is see-through; scrolled over the board in Night mode its small kicker needs the stronger ink to keep 4.5:1 */
.ar-brand small { color: var(--ink-2); }

/* narrow screens: bigger protractor numbers, set a little tighter so neighbouring three-digit numbers keep a clear gap */
.lh-svg.narrow .lh-pro text.o { font-size: 16px; letter-spacing: -1px; }
.lh-svg.narrow .lh-pro text.i { font-size: 14px; letter-spacing: -.9px; }
.lh-svg.snug .lh-pro text.o { letter-spacing: -1.5px; } .lh-svg.snug .lh-pro text.i { letter-spacing: -1.2px; }

/* short laptop screens: the dock is sticky there too, so the chart may use more of the height */
@media (min-width: 761px) and (max-height: 800px) {
  .lh-stage { max-width: max(300px, min(660px, calc((100vh - 300px) * var(--ar, 1.4)))); }
}

/* short phones: the number pad folds into two rows (1–6, 7–0) under a slim display, so it fits above the dock */
@media (max-width: 760px) and (max-height: 720px) {
  .lh-side .np { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lh-side .np-display { min-height: 46px; font-size: 1.5rem; }
  .lh-side .np-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .lh-side .np-keys > span { display: none; }
  .lh-side .np-k { min-height: 46px; padding: 0; }
  .lh-side .np-k[data-k="1"] { order: 1; } .lh-side .np-k[data-k="2"] { order: 2; } .lh-side .np-k[data-k="3"] { order: 3; }
  .lh-side .np-k[data-k="4"] { order: 4; } .lh-side .np-k[data-k="5"] { order: 5; } .lh-side .np-k[data-k="6"] { order: 6; }
  .lh-side .np-k[data-k="7"] { order: 7; } .lh-side .np-k[data-k="8"] { order: 8; } .lh-side .np-k[data-k="9"] { order: 9; }
  .lh-side .np-k[data-k="0"] { order: 10; } .lh-side .np-k[data-k="back"] { order: 11; }
  .lh-wrap { gap: 10px; }
}

/* Calm (the in-game setting) and the OS setting both stop the hint pulse; a steady thicker arc marks the ? instead */
[data-motion="reduced"] .lh-arc.hl { animation: none; stroke-width: 5.5; }
@media (prefers-reduced-motion: reduce) { .lh-arc.hl { stroke-width: 5.5; } }