/* The exercise's own layout. The kit (kit/) sets the type, colour, buttons, lists and rhythm; this file only places
   things and draws the answers, bars and grid. It reads the semantic tokens only, so the same parts work on a phone
   (the web surface) and on Harry's screen (the slide surface, where every space step is 1.5x). */

.app-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.app-main { flex: 1; width: 100%; padding-block: var(--ot-space-7) var(--ot-space-9); }
.app-main:focus { outline: none; }
.app-main h1:focus { outline: none; }

/* one column for everything a person reads and taps, so a question and its answers share one edge and one width */
.app-col { max-width: 40rem; }

/* each screen slides in from the side it comes from; a chosen answer holds for a moment first (app.js HOLD) */
.app-screen { animation: app-in 280ms var(--ot-ease) both; }
.app-screen[data-dir="back"] { animation-name: app-in-back; }
.app-screen[data-dir="none"] { animation: none; }
@keyframes app-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes app-in-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-screen { animation: none; } }

/* progress: the part of the exercise on the left, the count on the right, a line beneath, ink for the part done */
.app-progress { display: block; max-width: 40rem; margin-top: -2px; }   /* the line sits on the bar's own hairline: one rule, not two */
.app-progress-line { display: block; height: 2px; background: var(--ot-rule); }
.app-progress-line > span { display: block; height: 100%; width: calc(var(--done, 0) * 100%); background: var(--ot-text); transition: width 280ms var(--ot-ease); }
.app-progress-text { display: flex; justify-content: space-between; gap: var(--ot-space-4); padding-top: var(--ot-space-2);
                     font-size: var(--ot-small-size); line-height: var(--ot-small-line); color: var(--ot-text-secondary); }
.app-progress-text > :first-child { color: var(--ot-text); font-weight: var(--ot-weight-medium); }

/* the start: the title, one line, Start, and the note beneath */

/* answers: ruled rows, the whole row is the target; the chosen one turns ink */
.app-options { border-top: var(--ot-line-hairline) solid var(--ot-rule-strong); }
.app-option {
  display: flex; align-items: center; gap: var(--ot-space-4);
  width: 100%; min-height: calc(var(--ot-button-height) + var(--ot-space-3)); margin: 0;
  padding: var(--ot-space-3) var(--ot-space-4);
  border: 0; border-bottom: var(--ot-line-hairline) solid var(--ot-rule); border-radius: var(--ot-radius);
  background: transparent; color: var(--ot-text);
  font: inherit; font-size: var(--ot-body-size); line-height: var(--ot-body-line); letter-spacing: var(--ot-body-track);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.app-option::before { content: ""; flex: none; width: 0.9em; height: 0.9em; border-radius: 50%; box-shadow: inset 0 0 0 var(--ot-line-button-outline) var(--ot-text-secondary); }
.app-option[role="checkbox"]::before { border-radius: var(--ot-radius); }
.app-option[aria-checked="true"] { background: var(--ot-text); color: var(--ot-ground); }
.app-option[aria-checked="true"]::before { box-shadow: inset 0 0 0 0.3em var(--ot-ground); }
.app-option[role="checkbox"][aria-checked="true"]::before { box-shadow: inset 0 0 0 0.45em var(--ot-ground); }

/* the three self-ratings: four boxes in a row */
.app-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--ot-line-hairline) solid var(--ot-rule-strong); }
.app-scale button {
  min-height: calc(var(--ot-button-height) + var(--ot-space-2)); margin: 0; padding: var(--ot-space-2) var(--ot-space-1);
  border: 0; border-bottom: var(--ot-line-hairline) solid var(--ot-rule); border-radius: var(--ot-radius);
  background: transparent; color: var(--ot-text);
  font: inherit; font-size: var(--ot-small-size); line-height: var(--ot-small-line); text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-scale button + button { box-shadow: inset var(--ot-line-hairline) 0 0 var(--ot-rule); }
.app-scale button[aria-checked="true"] { background: var(--ot-text); color: var(--ot-ground); box-shadow: none; }
.app-self + .app-self { margin-top: var(--ot-space-7); }
.app-self > * + * { margin-top: var(--ot-space-3); }

/* a button that reads as a link: Back, Start over */
.app-text-button {
  min-height: 44px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ot-text);
  text-decoration: underline; text-decoration-color: var(--ot-underline);
  text-decoration-thickness: var(--ot-line-underline); text-underline-offset: var(--ot-line-underline-offset);
}
.app-step-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--ot-space-4); min-height: var(--ot-button-height); }

/* the two views: You and The room (the workshop portal's tab row; the current one in ink and weight, never blue) */
/* three tabs fit one line on a 375 px phone; on smaller screens or at 200% zoom a whole tab moves to the next line */
.app-tabs { display: flex; flex-wrap: wrap; column-gap: var(--ot-space-6); border-bottom: var(--ot-line-hairline) solid var(--ot-rule); }
.app-tabs button {
  min-height: var(--ot-button-height); padding: var(--ot-space-3) 0 calc(var(--ot-space-3) - 2px); margin: 0;
  border: 0; border-bottom: 2px solid transparent; border-radius: var(--ot-radius); background: none; cursor: pointer;
  font: inherit; font-size: var(--ot-body-size); color: var(--ot-text-body); white-space: nowrap;
}
.app-tabs button[aria-selected="true"] { color: var(--ot-text); font-weight: var(--ot-weight-medium); border-bottom-color: var(--ot-text); }
.app-panel { padding-top: var(--ot-space-7); }

/* a principle's name over its bars */
.app-group > * + * { margin-top: var(--ot-space-3); }
.ot-stack > .app-group + .app-group { margin-top: var(--ot-space-6); }
.app-group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--ot-space-4); }
.app-group-head .ot-meta { white-space: nowrap; }

/* bars: the label above, the bar with its value on the end */
.app-bars > * + * { margin-top: var(--ot-space-3); }
.app-bar-label { font-size: var(--ot-small-size); line-height: var(--ot-small-line); color: var(--ot-text-body); }
.app-bar-note { color: var(--ot-text); font-weight: var(--ot-weight-medium); }
.app-bar-line { display: flex; align-items: center; gap: var(--ot-space-2); margin-top: var(--ot-space-1); }
.app-bar { display: block; flex: none; height: var(--ot-space-3); min-width: 2px; width: calc(var(--share) * (100% - 3.5em)); }
.app-bar-ink { background: var(--ot-text); }
.app-bar-quiet { background: var(--ot-text-quiet); }
.app-bar-lead { background: var(--ot-lead); }
.app-bar-value { font-size: var(--ot-small-size); line-height: var(--ot-small-line); color: var(--ot-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the moves grid: principles down the side, what each move asks across the top */
.app-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); }
.app-grid-head, .app-grid-side { font-size: var(--ot-small-size); line-height: var(--ot-small-line); color: var(--ot-text-secondary); }
.app-grid-head { padding: 0 var(--ot-space-2) var(--ot-space-2); align-self: end; }
.app-grid-side { padding: var(--ot-space-3) var(--ot-space-2) var(--ot-space-3) 0; border-top: var(--ot-line-hairline) solid var(--ot-rule); color: var(--ot-text); }
.app-grid-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ot-space-1);
  min-height: calc(var(--ot-button-height) * 1.5); margin: var(--ot-space-1);
  box-shadow: inset 0 0 0 var(--ot-line-hairline) var(--ot-rule);
  color: var(--ot-text); text-align: center;
}
.app-grid-cell.is-lead { background: var(--ot-lead); box-shadow: none; color: var(--ot-ground); }
.app-grid.is-compact .app-grid-cell { min-height: var(--ot-button-height); }
.app-grid-n { font-size: var(--ot-heading-size); line-height: var(--ot-heading-line); font-weight: var(--ot-weight-medium); font-variant-numeric: tabular-nums; }
.app-grid-word { font-size: var(--ot-small-size); line-height: var(--ot-small-line); font-weight: var(--ot-weight-medium); }
/* On a phone the principle names sit above their row, so the three columns get the full width */
@media (max-width: 759px) {
  [data-ot-surface="web"] .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-ot-surface="web"] .app-grid-corner { display: none; }
  [data-ot-surface="web"] .app-grid-head { padding: 0 var(--ot-space-1) var(--ot-space-2); }
  [data-ot-surface="web"] .app-grid-side { grid-column: 1 / -1; padding: var(--ot-space-3) 0 var(--ot-space-1); }
}

/* the review: every answer as a row; tapping one opens that question */
.app-review-group + .app-review-group { margin-top: var(--ot-space-6); }
.app-review-head { margin: 0 0 var(--ot-space-2); font-size: var(--ot-small-size); line-height: var(--ot-small-line); font-weight: var(--ot-weight-medium); color: var(--ot-text-secondary); }
.app-review-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ot-space-4); row-gap: var(--ot-space-1);
  width: 100%; margin: 0; padding: var(--ot-space-3) 0; border: 0; border-top: var(--ot-line-hairline) solid var(--ot-rule);
  background: none; text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.app-review-group > .app-review-row:last-child { border-bottom: var(--ot-line-hairline) solid var(--ot-rule); }
.app-review-q { grid-column: 1; font-size: var(--ot-small-size); line-height: var(--ot-small-line); color: var(--ot-text-secondary); }
.app-review-a { grid-column: 1; font-size: var(--ot-body-size); line-height: var(--ot-body-line); color: var(--ot-text); }
.app-review-change { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--ot-small-size); color: var(--ot-text);
                     text-decoration: underline; text-decoration-color: var(--ot-underline); text-underline-offset: var(--ot-line-underline-offset); }

/* the three principles on the You tab: name and step, what it means, a four-step meter */
.app-principles { border-top: var(--ot-line-hairline) solid var(--ot-rule-strong); }
.app-principle { padding-block: var(--ot-space-4); border-bottom: var(--ot-line-hairline) solid var(--ot-rule); }
.app-principle > * + * { margin-top: var(--ot-space-2); }
.app-principle-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ot-space-4); }
.app-principle-name { margin: 0; font-size: var(--ot-body-size); line-height: var(--ot-body-line); font-weight: var(--ot-weight-medium); color: var(--ot-text); }
.app-principle-band { font-size: var(--ot-small-size); line-height: var(--ot-small-line); color: var(--ot-text-secondary); white-space: nowrap; }
.app-principle-means { font-size: var(--ot-small-size); line-height: var(--ot-small-line); color: var(--ot-text-secondary); }
.app-principle-tag { font-size: var(--ot-small-size); line-height: var(--ot-small-line); font-weight: var(--ot-weight-medium); color: var(--ot-text); }
.app-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.app-step { display: block; height: var(--ot-space-3); background: var(--ot-rule); }
.app-step.is-on { background: var(--ot-text); }
.app-step.is-lead { background: var(--ot-lead); }
.app-self-read > * + * { margin-top: var(--ot-space-3); }
.ot-stack > .app-principles + .ot-meta { margin-top: var(--ot-space-3); }

/* the room's spread on one principle: a stacked bar, light to dark, with the counts written underneath */
.app-stack { display: flex; gap: 2px; height: var(--ot-space-5); }
.app-stack-seg { display: block; min-width: 4px; }
.app-stack-0 { background: var(--ot-rule); }
.app-stack-1 { background: var(--ot-text-quiet); }
.app-stack-2 { background: var(--ot-text-secondary); }
.app-stack-3 { background: var(--ot-text); }
.app-stack-seg.is-lead { background: var(--ot-lead); }
.app-stack-key { margin-top: var(--ot-space-2); font-size: var(--ot-small-size); line-height: var(--ot-small-line); color: var(--ot-text-secondary); font-variant-numeric: tabular-nums; }
.app-stack-mine { color: var(--ot-text); font-weight: var(--ot-weight-medium); }

/* labels inside The round table */
.app-block-label { margin: 0; font-size: var(--ot-small-size); line-height: var(--ot-small-line); font-weight: var(--ot-weight-medium); color: var(--ot-text-secondary); }

/* the line under the keep-a-copy buttons */
.app-keep-note:empty { display: none; }

/* the move itself */
.app-move { font-size: var(--ot-lede-size); line-height: var(--ot-lede-line); letter-spacing: var(--ot-lede-track); color: var(--ot-text); font-weight: var(--ot-weight-medium); }

/* the way to reach Harry, under the results and apart from them */
.app-harry { margin-top: var(--ot-space-9); padding-top: var(--ot-space-7); border-top: var(--ot-line-hairline) solid var(--ot-rule); }

[hidden] { display: none !important; }

/* 200% page zoom on a phone leaves about 195 px: let the long link break, and give the four self-rating boxes two rows */
.app-harry a { overflow-wrap: anywhere; }
@media (max-width: 299px) {
  .app-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-scale button:nth-child(3) { box-shadow: none; }
}