/* Fence the Pen */

:root {
  --accent:       #004445;
  --accent-light: #006668;
  --accent-soft:  #E3EFED;
  --focus-glow:   #FFD166;
  --ink:          #2C3E3E;
  --muted:        #3F5252;
  --card:         #ffffff;
  --card-border:  #C9C1AD;
  --navy:         #1F2A7A;
  --red:          #C81E1E;
  --tape:         #FFE27A;
  --ray:          #E8A317;
  --good-bg:      #E6F3EA;
  --warn-bg:      #FBEAEA;
  --note-bg:      #FBF4E2;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #F5F1E5;
  font-family: Roboto, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* The shared toolbar is inserted as the first child of <body>; the app takes the rest. */
body { display: flex; flex-direction: column; }
#sim-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }

#sim-header { flex: none; padding: 8px 12px 0; }
#sim-header p { font-size: 13.5px; line-height: 1.4; color: var(--muted); }

#stage-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
  padding: 8px 10px 10px;
}

#scene-wrap {
  container-type: inline-size;
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #8EC5E8 0%, #CFE6F2 60%, #EAF2E3 100%);
}

#sim-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#sim-canvas { touch-action: none; cursor: grab; }
#sim-canvas:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Pills over the scene ── */
.scene-pill {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-size: 13px;
  color: var(--ink);
}
#site-tag { top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; pointer-events: none; }
#site-tag b { font-weight: 700; }
#site-tag .sep { width: 1px; height: 14px; background: var(--card-border); }
/* Show why: a live readout of the pen on show (a number readout, not a graph). */
#why-readout { top: 12px; right: 12px; padding: 8px 12px; font-weight: 700; font-size: 15px; color: var(--accent); border-color: var(--accent); font-variant-numeric: tabular-nums; }
#why-readout[hidden] { display: none; }
/* The two tape readings float beside the sides they measure. */
.tape-label { position: absolute; transform: translate(-50%, -50%); padding: 3px 8px; font-size: 13px; font-weight: 700; background: var(--tape); border: 1px solid #A07D00; border-radius: 6px; color: #3A2E00; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tape-label[hidden] { display: none; }
/* Point names in the top view, as in the Sketchpad construction. */
.pt-label { position: absolute; transform: translate(-50%, -50%); font: italic 700 18px Roboto, Arial, sans-serif; color: #1B1B1B; pointer-events: none; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.pt-label[hidden] { display: none; }
#views { right: 12px; bottom: 12px; padding: 4px; }
/* Shown only when WebGL cannot start: the field is empty, and this says why. */
#no-gl { top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: min(380px, calc(100% - 24px)); padding: 12px 16px; line-height: 1.45; background: var(--warn-bg); border-color: #B26464; text-align: center; }
#views .seg-btn { padding: 6px 12px; }
/* Messages show in the hint's place, bottom left, so they never cover the pen or its tapes. */
#stage-toast {
  bottom: 12px; left: 12px; max-width: calc(100% - 230px);
  padding: 9px 13px; background: #FFF7E0; border: 1px solid #B8860B; color: var(--ink); line-height: 1.4; pointer-events: none;
}
#stage-toast[hidden] { display: none; }
.result.flash { animation: flash .45s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--focus-glow); } to { box-shadow: 0 0 0 0 rgba(255,209,102,0); } }
#stage-hint { bottom: 12px; left: 12px; max-width: 260px; padding: 8px 11px; color: var(--ink); pointer-events: none; line-height: 1.35; }
#stage-hint:empty, #stage-hint[hidden] { display: none; }

/* ── Controls dock ── */
#controls-dock {
  width: 320px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.control-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-head { display: flex; align-items: center; gap: 6px; }
.card-head .tries { margin-left: auto; }

/* Tooltips: shown on hover and on keyboard focus; the text is also the
   button's accessible description. */
.tip-wrap { position: relative; display: inline-flex; }
.tip-btn {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--accent);
  background: #fff; color: var(--accent); font: 700 12px Roboto, Arial, sans-serif; cursor: help; line-height: 1;
}
.tip-btn:focus-visible { outline: 3px solid var(--accent); box-shadow: 0 0 0 5px var(--focus-glow); }
.tip {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 240px; padding: 7px 10px; border-radius: 6px;
  background: #222B2B; color: #fff; font-size: 12.5px; line-height: 1.4; font-weight: 400;
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none;
}
.tip-wrap:hover .tip, .tip-wrap:focus-within .tip { opacity: 1; visibility: visible; }
.tip[hidden] { display: none; }
.reveal-wrap { flex: 1; }
.reveal-wrap .secondary-btn { width: 100%; }
.reveal-wrap .tip { top: auto; bottom: calc(100% + 6px); }
.control-card h2 { font-size: 15px; font-weight: 700; color: var(--accent); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row > span, .dim > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dim { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stepper { display: flex; align-items: center; border: 1px solid var(--accent); border-radius: 8px; overflow: hidden; }
.stepper button {
  width: 34px; height: 32px; flex: none; border: 0; background: #fff; color: var(--accent);
  font: 700 18px Roboto, Arial, sans-serif; cursor: pointer;
}
.stepper button:hover:not(:disabled) { background: #EEF3F2; }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--focus-glow); }
.stepper output {
  flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
  line-height: 32px; border-left: 1px solid var(--accent); border-right: 1px solid var(--accent);
}
#pen-card[hidden] { display: none; }
.mover { display: flex; gap: 6px; }
.mover .secondary-btn { padding: 6px 10px; font-size: 14px; white-space: nowrap; }

.seg { display: flex; border: 1px solid var(--accent); border-radius: 8px; overflow: hidden; }
.seg-btn {
  padding: 6px 9px; border: none; background: #fff; color: var(--accent);
  font: 500 13px Roboto, Arial, sans-serif; cursor: pointer; font-variant-numeric: tabular-nums;
}
.seg-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg-btn:disabled { opacity: .45; cursor: not-allowed; }
.seg-btn[hidden] { display: none; }
.seg-btn:not([hidden]) ~ .seg-btn:not([hidden]) { border-left: 1px solid var(--accent); }

/* The order card: the supply and the goal, with the pen's length as the one entry. */
.given { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.giv {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  border-radius: 9px; padding: 5px 10px; background: #F4F1E8; border: 1px solid transparent;
}
.giv-k { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.giv b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.giv b.goal { font-size: 14px; line-height: 1.25; }
.giv.bin { grid-column: 1 / -1; }
.bin { background: #fff; border-color: var(--card-border); }
.bin:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.num-v { display: flex; align-items: baseline; gap: 3px; }
.bin input {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent;
  font: 700 17px Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); padding: 0;
}
.num-u { font-size: 12px; color: var(--muted); white-space: nowrap; }

.tries { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tries i { width: 10px; height: 10px; border-radius: 50%; background: var(--ray); }
.tries i.used { background: #fff; box-shadow: inset 0 0 0 1.5px #8A8473; }
.tries span { margin-left: 3px; }

.result { font-size: 13px; line-height: 1.4; border-radius: 9px; padding: 7px 10px; background: var(--note-bg); border: 1px solid #C9AE5D; }
.result.good { background: var(--good-bg); border-color: #4F8A60; }
.result.warn { background: var(--warn-bg); border-color: #B26464; }

.btn-row { display: flex; gap: 8px; }
/* The test unlocks after pens at 3 lengths with each plan: until then the card shows a countdown. */
.test-intro, .test-body { display: flex; flex-direction: column; gap: 8px; }
.test-intro p, .test-body p.lead { font-size: 14px; color: var(--muted); line-height: 1.35; }
#why-card[hidden] { display: none; }
#why-card .lead { font-size: 14px; color: var(--muted); line-height: 1.45; }
.test-intro[hidden], .test-body[hidden], .tries[hidden], .result[hidden] { display: none; }
#back-btn { font-size: 14px; }
.btn-row .secondary-btn { flex: 1; font-size: 14px; }

.primary-btn, .secondary-btn {
  padding: 8px 12px; border-radius: 8px;
  font: 600 15px Roboto, Arial, sans-serif; cursor: pointer;
}
.primary-btn { border: none; background: var(--accent); color: #fff; }
.primary-btn:hover:not(:disabled) { background: var(--accent-light); }
.secondary-btn { border: 1px solid var(--accent); background: #fff; color: var(--accent); }
.secondary-btn:hover:not(:disabled) { background: #EEF3F2; }
.primary-btn:disabled, .secondary-btn:disabled,
.secondary-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.secondary-btn[aria-disabled="true"]:hover { background: #fff; }

.seg-btn:focus-visible, .primary-btn:focus-visible, .secondary-btn:focus-visible {
  outline: 3px solid var(--accent);
  box-shadow: 0 0 0 6px var(--focus-glow);
  outline-offset: 2px;
}

/* ── Info dialog (Tuva Sims chrome, espresso accent; kept in sync with the boilerplate) ── */
#info-dialog {
  border: none; border-radius: 12px; padding: 0;
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 80px);
  overflow: hidden; margin: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); background: #fff;
}
#info-dialog::backdrop { background: rgba(30, 16, 48, 0.55); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #5c4738; color: #fff; }
.dialog-header h2 { font-size: 16px; font-weight: 600; }
#dialog-close-btn {
  background: transparent; border: none; color: #fff; font-size: 18px; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; line-height: 1;
}
#dialog-close-btn:hover { background: rgba(255, 255, 255, 0.15); }
#dialog-close-btn:focus-visible { outline: 3px solid var(--focus-glow); outline-offset: 2px; }
.dialog-tabs { display: flex; border-bottom: 2px solid #E5EAE9; background: #F8FBFB; }
.tab-btn {
  flex: 1; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 10px 0; font: 600 14px Roboto, Arial, sans-serif; color: var(--muted); cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: #5c4738; }
.tab-btn.active, .tab-btn[aria-selected="true"] { color: #5c4738; border-bottom-color: #5c4738; }
.tab-btn:focus-visible { outline: 3px solid var(--focus-glow); outline-offset: -3px; }
.dialog-body { padding: 16px 20px; overflow-y: auto; max-height: calc(100vh - 240px); color: var(--ink); font-size: 14px; line-height: 1.55; }
.dialog-body h3 { font-size: 14px; font-weight: 600; color: #5c4738; margin-top: 14px; margin-bottom: 6px; }
.dialog-body h3:first-child { margin-top: 0; }
.dialog-body p { margin-bottom: 8px; }
.dialog-body ul, .dialog-body ol { padding-left: 20px; margin-bottom: 8px; }
.dialog-body li { margin-bottom: 4px; }
.dialog-body .standard-tag { display: inline-block; background: #E8F5F5; color: var(--accent); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 4px; margin-right: 6px; }
.dialog-body details { margin: 8px 0 10px; border: 1px solid #E5EAE9; border-radius: 6px; padding: 6px 12px; }
.dialog-body summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.dialog-body details[open] summary { margin-bottom: 6px; }

/* ── Reset confirmation ── */
#reset-dialog {
  border: none; border-radius: 12px; padding: 22px 24px; width: min(420px, calc(100vw - 32px));
  margin: auto; color: var(--ink); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}
#reset-dialog::backdrop { background: rgba(30, 16, 48, 0.55); }
#reset-dialog h2 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
#reset-dialog p { font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
.reset-dialog-controls { display: flex; justify-content: flex-end; gap: 10px; }
.reset-dialog-controls button { width: auto; font-size: 15px; padding: 9px 16px; }

/* Narrow frames (the sim beside the Data Tools): the test card goes under the scene. */
@media (max-width: 860px) {
  html, body { overflow: auto; height: auto; }
  #sim-app { min-height: 0; }
  #stage-panel { flex-direction: column; }
  /* The script sets the stage height (see stageHeightFor); 75vw is only the
     first-paint value. */
  #scene-wrap { flex: none; width: 100%; height: 52vw; min-height: 240px; }
  #controls-dock { width: auto; overflow: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; gap: 8px; }
  #stage-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .result.flash { animation: none; }
}

/* The stage reflows by its own width (it sits beside or under the panel, and
   the host can resize the frame). Below 640px the hint goes and messages take
   the full width; below 520px the site tag drops its title. */
@container (max-width: 640px) {
  #stage-hint { display: none; }
  /* The Show why readout drops below the site tag, so neither covers the other. */
  #why-readout { top: 54px; right: auto; left: 12px; max-width: calc(100% - 24px); }
  #stage-toast { max-width: calc(100% - 24px); bottom: 64px; }
}
@container (max-width: 520px) {
  #site-tag b, #site-tag .sep:first-of-type { display: none; }
}