/* Step Away screens. Every colour comes from brand/mye-tokens.css (v3.1 "Namib"); no hex values here. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--mye-page); color: var(--mye-body);
  font: 400 15px/1.5 var(--mye-font);
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wrap { max-width: 480px; margin: 0 auto; padding: 12px 20px 32px; }

/* App bar with the L1 lockup, name as live text */
.bar { display: flex; align-items: center; gap: 10px; padding: 8px 0 16px; border-bottom: 1px solid var(--mye-line); margin-bottom: 20px; }
.bar img { width: 20px; height: 20px; display: block; }
.bar .mye-logo { font-size: 15px; }
.bar .back { margin-left: auto; }

h1, h2, h3 { color: var(--mye-ink); font-weight: 500; line-height: 1.15; margin: 0 0 12px; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; margin-top: 24px; }
p { margin: 0 0 12px; }
.muted { color: var(--mye-muted); }
.figure { font-family: var(--mye-font-figures); }
a, .link { color: var(--mye-ink); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.link { min-height: 44px; display: inline-flex; align-items: center; }

/* Cards are square, on the paper ground */
.card { background: var(--mye-card); border: 1px solid var(--mye-line); padding: 16px; margin-bottom: 16px; }
.card.warn { border-left: 4px solid var(--mye-ink); }
.card p:last-child { margin-bottom: 0; }

/* Buttons: 48 px full width on a phone, 6 px corners. Main = filled ink, second = outlined. */
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: var(--mye-button-h-touch); margin: 0 0 12px; padding: 0 16px;
  border-radius: var(--mye-radius); font: 600 16px/1.2 var(--mye-font); cursor: pointer;
  background: transparent; color: var(--mye-ink); border: 1px solid var(--mye-ink); text-decoration: none;
}
.btn.main { background: var(--mye-ink); color: var(--mye-page); }
.btn[disabled] { color: var(--mye-muted); border-color: var(--mye-line); background: transparent; cursor: default; }
.btn.main[disabled] { background: var(--mye-fill); border-color: var(--mye-fill); }
/* The one big button: the moment it is needed, it must be impossible to miss */
.btn.urge { min-height: 112px; font-size: 22px; font-weight: 500; margin: 8px 0 20px; }
/* One muted line under a home button saying what it is for */
.hint { font-size: 13px; line-height: 1.4; margin: -6px 0 16px; }
.btn.urge + .hint { margin-top: -14px; margin-bottom: 20px; }
.link + .hint { margin-top: -6px; }

/* Choices: resting = fill; selected = card colour with a 1 px ink outline (spec rule 10) */
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { color: var(--mye-ink); font: 500 17px/1.3 var(--mye-font); margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: var(--mye-touch-min); padding: 10px 14px; border-radius: var(--mye-radius);
  background: var(--mye-fill); color: var(--mye-ink); border: 0; font: 400 15px/1.3 var(--mye-font);
  cursor: pointer; text-align: left;
}
.chip[aria-pressed="true"] { background: var(--mye-card); box-shadow: inset 0 0 0 1px var(--mye-ink); font-weight: 600; }
.chips.yesno .chip { min-width: 88px; text-align: center; }
.chips.score { display: grid; grid-template-columns: repeat(5, 1fr); }
.chips.score .chip { text-align: center; font-family: var(--mye-font-figures); padding: 10px 0; }
.scale-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--mye-muted); margin-top: 6px; }

input[type="text"], input[type="number"], textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: 400 16px/1.4 var(--mye-font);
  border: 1px solid var(--mye-field); border-radius: var(--mye-radius); background: var(--mye-card); color: var(--mye-ink);
}
textarea { min-height: 72px; resize: vertical; }
.other { margin-top: 8px; }
.field-label { display: block; color: var(--mye-ink); font: 500 17px/1.3 var(--mye-font); margin-bottom: 10px; }

/* The calm timer: a slow square that breathes, in ink only */
.calm { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.breath { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; }
.breath span { width: 40px; height: 40px; border: 1.5px solid var(--mye-ink); border-radius: var(--mye-radius); }
@media (prefers-reduced-motion: no-preference) {
  .breath span { animation: breathe 10s ease-in-out infinite; }
  @keyframes breathe { 0%, 100% { transform: scale(.55); } 45%, 55% { transform: scale(1); } }
}
.timer { font-family: var(--mye-font-figures); font-size: 28px; color: var(--mye-ink); }

/* The grading moment: the grade becomes the field (spec rule 3), marker large and low on a white print card */
.mye-moment { margin: -12px -20px 20px; padding: 28px 20px; }
/* The moment fades in over about 250 ms (spec, motion); none when motion is turned off */
@media (prefers-reduced-motion: no-preference) {
  .mye-moment { animation: moment-in 250ms ease-out; }
  @keyframes moment-in { from { opacity: 0; } to { opacity: 1; } }
}
h1:focus, h2:focus, legend:focus { outline: none; }
.mye-moment .print { background: var(--mye-card); border: 1px solid var(--mye-line); width: 120px; padding: 12px 12px 28px; margin-bottom: 16px; }
.mye-moment .print img { width: 96px; height: 96px; display: block; }
.mye-moment h2 { color: var(--mye-ink); }

/* Markers */
.marker { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
.marker img { width: 16px; height: 16px; display: block; }

/* The 20-trade strip */
.strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 8px 0 12px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.slot .marker, .slot .marker img { width: 22px; height: 22px; }
.slot .empty { width: 22px; height: 22px; border: 1px solid var(--mye-line); border-radius: 5px; }
.slot .figure { font-size: 12px; color: var(--mye-muted); min-height: 16px; }
.slot.hot .figure { color: var(--mye-ink); font-weight: 500; text-decoration: underline; }

/* Rows: plain facts in ink; grade rows take their faint tint (spec rule 2) */
.rows { border-top: 1px solid var(--mye-line); margin-bottom: 16px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mye-line); }
.row .figure { color: var(--mye-ink); white-space: nowrap; }
.row.green { background: var(--mye-green-tint); } .row.amber { background: var(--mye-amber-tint); } .row.red { background: var(--mye-red-tint); }
.row.green, .row.amber, .row.red { padding-left: 10px; padding-right: 10px; }
.big { font: 500 64px/1 var(--mye-font); color: var(--mye-ink); margin: 4px 0 8px; }

.status { display: grid; gap: 4px; }
.banner { background: var(--mye-fill); color: var(--mye-muted); font: 600 11px/1.3 var(--mye-font); letter-spacing: var(--mye-label-spacing); text-transform: uppercase; padding: 8px 20px; text-align: center; }
.foot { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--mye-line); display: flex; justify-content: space-between; align-items: center; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--mye-ink); color: var(--mye-page); padding: 12px 16px; border-radius: var(--mye-radius); font-weight: 600; }
[hidden] { display: none !important; }