/* 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-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:clamp(16px,4.4cqw,26px);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}

.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}

.og-keypad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.og-keypad button{background:var(--ivory);border:1px solid var(--line);border-radius:8px;padding:12px 0;
  font-family:var(--mono);font-size:17px;color:var(--ink);cursor:pointer}
.og-keypad button:hover{background:var(--celadon)}
.og-keypad button:disabled{opacity:.35;cursor:default}
.og-keypad.notes-on button{font-style:italic}

/* Undo · Erase · Notes · Hint — one row, 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(4,1fr);gap:8px}
.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:13px 0;font-size:18px}
  .og-tool span{font-size:11px}
}