/* GB Game mini-simulation. Every rule is scoped under .mini so the page can sit
   inside the fkiquality.com site without touching its styles. Colors follow the
   GB Game v2 tokens (warm paper, deep ink, process teal) and its zone colors. */
.mini {
  --bg: hsl(42 39% 94%);
  --ink: hsl(210 30% 13%);
  --card: hsl(43 100% 99%);
  --line: hsl(186 8% 74%);
  --muted: hsl(42 24% 90%);
  --muted-ink: hsl(206 16% 31%);
  --primary: hsl(187 66% 23%);
  --primary-ink: #fff;
  --accent: hsl(25 58% 90%);
  --define: #2563eb;  --define-tint: #eff6ff;  --define-text: #1d4ed8;
  --measure: #16a34a; --measure-tint: #f0fdf4; --measure-text: #15803d;
  --analyze: #f59e0b; --improve: #ea580c; --control: #7c3aed;
  --ok: #15803d; --warn: #b45309;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  font-size: 16px;
  min-height: 100vh;
  box-sizing: border-box;
}
.mini *, .mini *::before, .mini *::after { box-sizing: inherit; }
.mini h1, .mini h2, .mini h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.mini button { font: inherit; cursor: pointer; }
.mini button:disabled { cursor: not-allowed; }
.mini :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.mini-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }
.mini-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 6px; }
.mini-head h1 { font-size: 30px; }
.mini-head .sub { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-ink); }
.mini-back { margin-left: auto; font-size: 14px; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.mini-opening { color: var(--muted-ink); margin: 0 0 18px; max-width: 60em; }

.mini-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .mini-grid { grid-template-columns: minmax(0, 1fr); } }

/* Phase strip */
.mini-phases { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.mini-phase-note { margin: 0 0 12px; font-size: 13px; }
.mini-phase { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card);
  border-radius: 6px; padding: 6px 12px 6px 6px; color: var(--ink); font-size: 14px; }
.mini-phase .chip { width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center; color: #fff;
  font-family: var(--mono); font-weight: 600; font-size: 13px; }
.mini-phase[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--zone, var(--ink)); }
.mini-phase.locked { opacity: .55; }
.mini-phase .note { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-ink); }

/* Spaces */
.mini-spaces { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.mini-space { position: relative; width: 190px; min-height: 120px; text-align: left; border: 2px solid var(--line);
  background: var(--card); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; color: var(--ink); }
.mini-space.gate { width: 250px; }
.mini-space .glyph { font-size: 22px; line-height: 1; }
.mini-space .mark { position: absolute; top: 10px; right: 12px; font-size: 13px; font-family: var(--mono); }
.mini-space h3 { font-size: 16px; margin-top: 8px; line-height: 1.25; }
.mini-space .state { margin-top: 6px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-ink); }
.mini-space .code { margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-ink); }
.mini-space.open { border-color: var(--zone); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.mini-space.reference { background: var(--zone-tint); border-color: transparent; }
.mini-space.current { outline: 2px solid var(--zone); outline-offset: 3px; }
.mini-space.done { background: var(--zone); border-color: transparent; color: #fff; }
.mini-space.done .state, .mini-space.done .code { color: rgba(255,255,255,.85); }
.mini-space.locked { background: hsl(42 24% 90% / .6); border-style: dashed; color: var(--muted-ink); }
.mini-space.locked .lock { font-size: 12px; font-style: italic; margin-top: 6px; }
@media (max-width: 560px) { .mini-space, .mini-space.gate { width: calc(50% - 6px); min-height: 104px; } }

/* Work panel */
.mini-work { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.mini-work .eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--zone-text, var(--muted-ink)); margin-bottom: 4px; }
.mini-work h2 { font-size: 24px; margin-bottom: 12px; }
.mini-work p { margin: 0 0 12px; max-width: 46em; }
.mini-remark { border-left: 3px solid var(--zone); padding: 4px 0 4px 12px; margin: 10px 0; }
.mini-remark .who { font-size: 13px; color: var(--muted-ink); }
.mini-remark q { font-style: italic; quotes: '\201C' '\201D'; }
.mini-hint { background: var(--accent); border-radius: 8px; padding: 10px 14px; margin: 12px 0 16px; font-size: 15px; }
.mini-hint b { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-bottom: 2px; }
.mini-options { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; border: 0; }
.mini-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fff; cursor: pointer; }
.mini-option input { margin-top: 4px; accent-color: var(--primary); }
.mini-option.chosen { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.mini-option.tried { opacity: .5; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.mini-option.right { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.mini-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.mini-btn { border: 1px solid var(--primary); background: var(--primary); color: var(--primary-ink); border-radius: 6px; padding: 10px 16px; font-weight: 600; font-size: 15px; }
.mini-btn.secondary { background: transparent; color: var(--primary); }
.mini-btn:disabled { opacity: .45; }
.mini-note { font-size: 14px; color: var(--muted-ink); }
.mini-charter { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.mini-charter dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-ink); padding-top: 3px; }
.mini-charter dd { margin: 0; }
@media (max-width: 560px) { .mini-charter { grid-template-columns: 1fr; } .mini-charter dd { margin-bottom: 8px; } }

/* Pareto */
.mini-pareto { margin: 6px 0 14px; }
.mini-pareto svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.mini-table th, .mini-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.mini-table th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-ink); font-weight: 500; }
.mini-table td.num, .mini-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mini-table td.ctr, .mini-table th.ctr { text-align: center; }

/* Side column */
.mini-side { display: grid; gap: 16px; position: sticky; top: 12px; }
@media (max-width: 900px) { .mini-side { position: static; } }
.mini-panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mini-panel > h2 { font-size: 18px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mini-coach-list { padding: 12px 16px; display: grid; gap: 10px; max-height: 340px; overflow: auto; }
.mini-coach-msg { border-left: 6px solid var(--line); padding: 2px 0 2px 12px; font-size: 15px; }
.mini-coach-msg.good { border-color: var(--ok); }
.mini-coach-msg.weak { border-color: var(--warn); }
.mini-coach-msg .tag { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-ink); }
.mini-inline-coach { display: none; margin: 0 0 14px; }
@media (max-width: 900px) { .mini-inline-coach { display: block; } }
.mini-coach-msg .quote { display: block; margin-top: 6px; font-style: italic; }
.mini-tabs { display: flex; border-bottom: 1px solid var(--line); }
.mini-tab { flex: 1; border: 0; background: transparent; padding: 10px 6px; font-size: 14px; color: var(--muted-ink); border-bottom: 3px solid transparent; }
.mini-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--primary); font-weight: 600; }
.mini-tab.flash { animation: mini-flash 1.2s ease 2; }
@keyframes mini-flash { 50% { background: var(--accent); } }
.mini-file { padding: 12px 16px; font-size: 14px; max-height: 420px; overflow: auto; }
.mini-file p { margin: 0 0 10px; }
.mini-file .log-tools { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.mini-file .log-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.mini-file .log-wrap table { margin: 0; font-size: 12px; }
.mini-file .log-wrap td, .mini-file .log-wrap th { white-space: nowrap; padding: 4px 6px; }
.mini-file .log-wrap td:last-child, .mini-file .log-wrap th:last-child { white-space: normal; }  /* the cause wraps so every column fits */
.mini-file .log-wrap th { position: sticky; top: 0; background: var(--card); }
.mini-file .log-wrap tr.no td { background: #fff7ed; }
.mini-work-item { border-bottom: 1px solid var(--line); padding: 8px 0; }
.mini-work-item:last-child { border-bottom: 0; }
.mini-work-item .tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-ink); }

/* End */
.mini-email { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.mini-email input { flex: 1 1 220px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.mini-status { font-size: 14px; color: var(--ok); min-height: 1.4em; }
.mini-status.bad { color: var(--warn); }

/* The one-page copy prints from its own hidden frame; see printCopy() in mini.js. */

/* Footer: the fkiQuality logo, linked to the home page, and the copyright line. */
.mini-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 32px; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--card); border-radius: 8px; }
.mini-foot-logo { display: inline-block; line-height: 0; }
.mini-foot-logo img { height: 40px; width: auto; display: block; }
.mini-foot-copy { font-size: 13px; color: var(--muted-ink); }