/* O2 Engine's pages (/engine/): the teaching page's kit, copied in by the build as /engine/kit.css (a public page never
   points at /teach/), and only what the engine adds to it. */
/* A heading the page moves to when a view changes is not a control: no ring is drawn round it. */
.eng h1[tabindex="-1"]:focus, .eng h2[tabindex="-1"]:focus { outline: none; }
/* The lockup: the O2 mark and the word "Engine" (the owner's words: "just our logo and the word engine"). */
.brand { text-decoration: none; color: var(--ink); }
.brand .brand__name { color: var(--ink); font-weight: 650; letter-spacing: -.01em; }
.brand .brand__beta { color: var(--ink-2); font-weight: 400; white-space: nowrap; }

/* One column: the teaching page's main is a list beside an editor; the engine's #view takes the whole width. */
.teach.eng { grid-template-columns: minmax(0, 1fr); padding-bottom: 48px; }
.eng-start textarea { min-height: 140px; }
.eng-refused h2 { margin: 0; }

/* What it builds: one ready, the rest next. Read, not pressed. */
.eng-kinds { display: grid; gap: 10px; }
.eng-kinds__h { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.eng-kinds ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.eng-kinds li { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--sunken); font-size: .875rem; }
.eng-kinds li small { font-size: .75rem; color: var(--ink-3); }
.eng-kinds li.is-ready { box-shadow: inset 0 0 0 1.5px var(--accent); }
.eng-kinds li.is-ready small { color: var(--accent); font-weight: 600; }
.eng-kinds li.is-next span { color: var(--ink-2); }

/* Building: what they wrote, and the steps as the server takes them. */
.eng-said { font-style: italic; color: var(--ink-2); }
:lang(th) .eng-said { font-style: normal; }
.eng-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.eng-steps li { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 1rem; transition: color 240ms var(--ease); }
.eng-steps li.is-on, .eng-steps li.is-done { color: var(--ink); }
.eng-steps__dot { position: relative; width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hair-2); }
.eng-steps li.is-on .eng-steps__dot { box-shadow: inset 0 0 0 2px var(--accent); }
.eng-steps li.is-on .eng-steps__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); animation: eng-spin 900ms linear infinite; }
.eng-steps li.is-done .eng-steps__dot { background: var(--accent); box-shadow: none; }
.eng-steps li.is-done .eng-steps__dot::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes eng-spin { to { transform: rotate(360deg); } }

/* The result: the whole website, large, and beside it the box to tell the engine what to change (like a chat with a
   designer), with the conversation above the box. On a phone the website comes first. */
.eng-result__body { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.eng-result__side { display: grid; gap: 14px; position: sticky; top: calc(var(--bar-h, 64px) + 12px); min-width: 0; }
.eng-result__main { display: grid; gap: 12px; min-width: 0; }
.eng-result__views { justify-content: flex-end; }
.eng-result__acts { align-items: center; flex-wrap: wrap; gap: 8px; }
.eng-look { margin: 0; }
.eng-ask textarea { min-height: 84px; }
.eng-turns { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; max-height: 42vh; overflow-y: auto; }
.eng-turns:empty { display: none; }
.eng-turn { display: grid; gap: 2px; max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: .9375rem; line-height: 1.45; }
.eng-turn p { margin: 0; }
.eng-turn__who { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.eng-turn--you { justify-self: end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.eng-turn--you .eng-turn__who { color: rgba(255, 255, 255, .8); }
.eng-turn--ai { justify-self: start; background: var(--sunken); color: var(--ink); border-bottom-left-radius: 6px; }
.eng-turn.is-pending p { color: var(--ink-2); animation: eng-pulse 1.4s ease-in-out infinite; }
.eng-turn.is-err p { color: var(--err); }
@keyframes eng-pulse { 50% { opacity: .45; } }
@media (max-width: 900px) {
  .eng-result__body { grid-template-columns: minmax(0, 1fr); }
  .eng-result__side { position: static; order: 2; }
  .eng-result__views { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .eng-turn.is-pending p { animation: none; } }
.eng-stage { display: grid; justify-items: center; }
.eng-device--result { width: 100%; transition: max-width 320ms var(--ease); max-width: 100%; }
.eng-device--result[data-view="phone"] { max-width: 410px; }
.eng-frame--result { height: calc(100vh - 230px); height: calc(100dvh - 230px); min-height: 560px; }
.eng-next { max-width: 760px; }
@media (max-width: 700px) { .eng-frame--result { height: 70vh; height: 70dvh; min-height: 440px; } }
@media (prefers-reduced-motion: reduce) {
  .eng-steps li.is-on .eng-steps__dot::after { animation: none; }
  .eng-device--result { transition: none; }
}

/* The editor beside its preview: side by side on a wide screen, the preview first-class; stacked on a phone. */
.eng-grid { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
.eng-side { display: grid; gap: 16px; min-width: 0; }
.eng-form { display: grid; gap: 16px; }
.eng-form fieldset { border: 0; margin: 0; min-width: 0; }
.eng-form legend { padding: 0; margin-bottom: 4px; }
.eng-save { position: sticky; bottom: 12px; z-index: 2; justify-content: flex-end; }
.eng-save .btn { box-shadow: 0 10px 24px -12px rgba(17, 23, 34, .45); }
.eng-preview { position: sticky; top: calc(var(--bar-h, 64px) + 12px); min-width: 0; }
.eng-device { border-radius: 22px; padding: 10px; background: var(--sunken); box-shadow: var(--shadow); }
.eng-frame { display: block; width: 100%; height: calc(100vh - 140px); min-height: 560px; border: 0; border-radius: 14px; background: #fff; }
.eng-err { color: var(--err); }
.eng-slug { display: flex; align-items: stretch; min-width: 0; }
.eng-slug input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.eng-slug__suffix { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--sunken); color: var(--ink-2); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.eng-signin { display: grid; gap: 12px; }
.eng-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.eng-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.eng-item p { margin: 2px 0 0; }

.eng-panes { display: none; }
@media (max-width: 900px) {
  .eng-grid { grid-template-columns: minmax(0, 1fr); }
  .eng-preview { position: static; }
  .eng-frame { height: calc(100vh - 230px); height: calc(100dvh - 230px); min-height: 440px; }
  /* Edit and Preview take turns on a phone; the switch stays in reach at the top. */
  .eng-panes { display: inline-flex; position: sticky; top: calc(var(--bar-h, 64px) + 8px); z-index: 3; box-shadow: var(--shadow); }
  .eng-grid[data-pane="edit"] .eng-preview, .eng-grid[data-pane="preview"] .eng-side { display: none; }
}
@media (max-width: 520px) {
  .eng-item { grid-template-columns: minmax(0, 1fr) auto; }
  .eng-item .btn { grid-column: 1 / -1; justify-self: start; }
}

/* The kit styles text and search fields; the engine also asks for an email, a phone and a map link. */
.eng input[type="email"], .eng input[type="tel"], .eng input[type="url"] { width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: var(--r-m); background: var(--sunken); color: var(--ink); font: inherit; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 160ms var(--ease), background 160ms var(--ease); }
@media (prefers-contrast: more) { .eng input[type="email"], .eng input[type="tel"], .eng input[type="url"] { box-shadow: inset 0 0 0 1px var(--hair-2); } }
.eng [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--err); }

/* The report page's formal complaint: its fields under the box that asks for them. */
.eng-formal { display: grid; gap: 14px; padding: 14px; border-radius: var(--r-m); background: var(--sunken); }

/* The brand study's notes, behind one press. */
.eng-why summary { cursor: pointer; list-style: none; }
.eng-why summary::-webkit-details-marker { display: none; }
.eng-why summary::after { content: " +"; color: var(--ink-3); }
.eng-why[open] summary::after { content: " −"; }
.eng-why dl { display: grid; gap: 10px; margin: 8px 0 0; }
.eng-why dt { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.eng-why dd { margin: 2px 0 0; font-size: .9375rem; }
/* The build, step by step (server/engine/jobs.js): the steps beside the preview as it fills in; on a phone, stacked. */
.eng-building__body { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.eng-building__steps { display: grid; gap: 14px; min-width: 0; }
.eng-building__preview[hidden] { display: none; }
.eng-count { margin: 0; font-variant-numeric: tabular-nums; }
.eng-stopped h2 { margin: 0 0 6px; }
.eng-stopped p { margin: 0 0 12px; }
.eng-turn__acts { margin-top: 10px; gap: 8px; }
.eng-partly { margin: 0; }
@media (max-width: 900px) { .eng-building__body { grid-template-columns: minmax(0, 1fr); } }
/* The editor, page by page: each page a card, each section in it a group of its own fields (server/engine/library.js). */
.eng-page { display: grid; gap: 14px; }
.eng-sec { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-m); background: var(--sunken); }
.eng-sec__h { margin: 0; font-size: .875rem; font-weight: 650; color: var(--ink-2); }
.eng-item-fields { display: grid; gap: 8px; padding-left: 12px; box-shadow: inset 2px 0 0 var(--hair-2); }
.eng-item-n { font-size: .75rem; color: var(--ink-3); }
/* What the review checked (server/engine/critique.js), under the brand study's notes. */
.eng-checked { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--hair-2); }
.eng-checked h3, .eng-checked h4 { margin: 0; }
.eng-checked h4 { margin-top: 6px; font-size: .8125rem; font-weight: 650; color: var(--ink-2); }
.eng-checked__list { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: .9375rem; }
.eng-checked__list li strong { display: block; font-weight: 600; }
.eng-checked__list li span { color: var(--ink-3); font-size: .875rem; overflow-wrap: anywhere; }
.eng-checked__marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; margin: 0; }
.eng-checked__marks dt { font-size: .75rem; color: var(--ink-3); }
.eng-checked__marks dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 650; }
.eng-checked__marks dt:nth-of-type(n) { grid-row: 1; } .eng-checked__marks dd { grid-row: 2; }
/* A demo link: the link itself, readable and selectable, its actions under it; the note says what happened. */
.eng-share { display: grid; gap: 10px; }
.eng-share h2 { margin: 0; }
.eng-share p { margin: 0; }
.eng-share .row { flex-wrap: wrap; gap: 8px; }
.eng-share__link { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.eng-share__note:empty { display: none; }