/* Orbace Sudoku — canonical grid block (docs/orbace-brand-standard.md §Grid & Keypad
 * Anatomy). Namespaced under .og- so this can be dropped into any page without
 * colliding with the legacy .board/.numpad/.toolrow (Play) or .v1-tea-* (Home/Tea
 * Moment) styles it is meant to eventually replace. Reads the same :root tokens
 * defined in styles.css (--tea, --seal, --amber, --ink, --rice, --ivory, --line,
 * --celadon) — no new palette introduced.
 *
 * Reconciles the two legacy button styles: SVG icons (Tea Moment) + always-visible
 * text label (Play) so an icon is never the sole label, and Erase is its own tool
 * button rather than a hidden 10th keypad key (both per docs/plans/
 * orbace-phase1-style-recommendations.md §1.2 / §2.3).
 */

/* --og-cell tracks the board's actual cell width (board is min(540px,92vw),
 * 9 cells across) so grid digits and keypad digits can both be sized as an
 * exact percentage of the same reference square, not two independent guesses.
 * Declared on :root (not .og-wrap) because mountControlled() renders the
 * board/keypad/toolrow into separate host-supplied elements that don't share
 * a common .og-* ancestor (e.g. Tea Moment's board and sidebar keypad live in
 * different DOM subtrees) — a custom property needs a shared ancestor to
 * inherit through, and :root is the one every mount mode has in common. */
:root{--og-cell:calc(min(540px,92vw) / 9)}
.og-wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}

.og-board-col{flex-shrink:0}

.og-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));
  width:min(540px,92vw);aspect-ratio:1;background:#FFF;border:2px solid var(--ink);border-radius:6px;overflow:hidden}

.og-cell{border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;
  font-family:var(--mono);font-size:max(16px,calc(var(--og-cell) * .68));cursor:pointer;user-select:none;background:#FFF}
.og-board{container-type:inline-size}
.og-cell.bt{border-top:2px solid var(--ink)}
.og-cell.bl{border-left:2px solid var(--ink)}
.og-cell.given{color:var(--ink);font-weight:500}
.og-cell.user{color:var(--tea);font-weight:600}
.og-cell.sel{background:var(--celadon)!important;box-shadow:inset 0 0 0 2px var(--celadon-d)}
.og-cell.peer{background:#EFE7D6}
.og-cell.same{background:#DCE6DF}
/* Mistakes are amber, never red — brand promise, see kbd-help copy on Play page. */
.og-cell.err{background:rgba(201,134,43,.16)!important;color:var(--amber-deep)}
.og-cell:focus-visible{outline:2px solid var(--tea);outline-offset:-2px}

/* Technique-hint tool (Phase 3 of the technique-playbook proposal,
 * 2026-07-18) — a ring, not a fill, so it layers cleanly over .sel/.peer/
 * .err instead of fighting them for the cell's background. Seal vermilion
 * ties it visually to the brand mark, distinct from amber (mistakes) and
 * celadon (selection/peers). */
.og-cell.tech-hint{box-shadow:inset 0 0 0 2px var(--seal);animation:ogTechPulse 1.6s ease-in-out 2}
@keyframes ogTechPulse{0%,100%{box-shadow:inset 0 0 0 2px var(--seal)}50%{box-shadow:inset 0 0 0 2px var(--seal),inset 0 0 0 5px rgba(196,30,58,.18)}}
/* Round 2 of validation feedback (2026-07-18): a fill on top of the ring,
 * for the specific cell(s) the explanation caption's text literally
 * refers to ("This cell…", "These two cells…") — distinct from any other
 * .tech-hint cell that's only lit up as row/col/box reasoning context
 * (naked/hidden single's peer set). See orbace-grid.js's techHighlightPrimary. */
.og-cell.tech-hint-primary{background:rgba(196,30,58,.16)}

/* Pause (mountControlled() hosts only — instance.pause()/resume()). Mirrors
 * the wording/treatment Tea Moment already used on .v1-home-tea-board, now
 * owned by the grid itself so any host gets it for free. */
.og-board.og-paused{position:relative}
.og-board.og-paused .og-cell{visibility:hidden}
.og-board.og-paused::after{content:"Paused — click ▶ to resume";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  background:rgba(251,248,239,.96);font-family:var(--sans);font-size:14px;color:var(--mid);z-index:3;border-radius:6px}

.og-notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  font-family:var(--mono);font-size:clamp(9px,3.4cqw,13px);color:var(--mid)}
.og-notes span{display:flex;align-items:center;justify-content:center}

.og-side{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:14px}

.og-meta{background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.og-meta-title{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--ink)}
.og-meta-sub{font-size:13px;color:var(--mid);margin-top:2px}
.og-timer{font-family:var(--mono);font-size:22px;color:var(--ink);margin-top:8px}

/* Two rows of 5: 1-5, then 6-9 + Erase — the grid auto-wraps 10 children at
 * 5 columns, so Erase lands as the last button on row 2. Fewer, wider columns
 * than the board's 9 means each key can run noticeably larger than the old
 * single-row-of-9 layout. */
.og-keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.og-keypad button{background:var(--ivory);border:1px solid var(--line);border-radius:10px;padding:18px 0;
  font-family:var(--mono);font-size:max(16px,calc(var(--og-cell) * .68));color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.og-keypad button:hover{background:var(--celadon)}
.og-keypad button:disabled{opacity:.35;cursor:default}
.og-keypad.notes-on button{font-style:italic}
.og-keypad button.og-erase-key svg{width:calc(var(--og-cell) * .5);height:calc(var(--og-cell) * .5)}

/* Undo · Notes · Hint — Erase lives in the keypad (above) as the 10th key,
 * not duplicated here. Icon + always-visible text label so the icon is never
 * the sole affordance (phase1 style doc §1.2). */
.og-toolrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* Practice mode's 4th tool (Show — technique-hint, Phase 3). */
.og-toolrow.og-toolrow--4{grid-template-columns:repeat(4,1fr)}
.og-tool{background:var(--ivory);border:1px solid var(--line);border-radius:10px;padding:10px 4px 8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);cursor:pointer}
.og-tool svg{width:22px;height:22px}
.og-tool span{font-size:12px;font-weight:500}
.og-tool:not(:disabled):hover{background:var(--celadon)}
.og-tool:disabled{opacity:.4;cursor:default}
.og-tool.on{background:var(--tea);border-color:var(--tea);color:#FFF}
.og-tool.flash{animation:ogFlash .35s ease-out}
@keyframes ogFlash{from{background:var(--celadon)}to{background:var(--ivory)}}

.og-help{font-size:12px;color:var(--light);line-height:1.8;background:var(--ivory);
  border:1px solid var(--line);border-radius:16px;padding:14px 18px}
.og-help b{font-family:var(--mono);background:#FFF;border:1px solid var(--line);border-radius:4px;
  padding:0 5px;color:var(--mid);font-weight:500}
.og-help .amber{color:var(--amber-deep)}

@media (max-width:720px){
  .og-wrap{gap:16px}
  .og-side{min-width:0}
  .og-keypad button{padding:14px 0}
  .og-tool span{font-size:11px}
}