/* STG Diary client portal. No remote fonts loaded over the network — the two optional reading
   fonts below are plugin assets served from the same origin. No gradients, no inline styles
   (strict CSP). */
:root {
  --blue: #1b2e91;
  --blue-dark: #14226d;
  --yellow: #fee33e;
  --ink: #111111;
  --muted: #4a4f5c;
  --line: #c9cddb;
  --wash: #f3f4f9;
  --white: #ffffff;
  --radius: 10px;
  --tap: 44px;
}

/* ---- display: theme (class on <html>, set from a display preference) ----
   Everything below is drawn from these few tokens, so each theme is a small override block.
   Contrast is checked against the "body text ≥ 4.5:1" rule for both alternates. */
html.stgd-theme--dark {
  --blue: #9fb4ff;
  --blue-dark: #c3d1ff;
  --yellow: #f6d35a;
  --ink: #f1f2fa;
  --muted: #b7bce0;
  --line: #383e63;
  --wash: #171b2c;
  --white: #10131f;
}
html.stgd-theme--calm {
  /* Low-saturation, warm-neutral surfaces; no bright yellow blocks; softer, lower-contrast borders. */
  --blue: #3b5a86;
  --blue-dark: #2c4468;
  --yellow: #cdbf93;
  --ink: #2b2e33;
  --muted: #6b6f76;
  --line: #ddd9cd;
  --wash: #f2efe6;
  --white: #fbfaf5;
}

/* ---- display: optional reading fonts, served from this plugin's own assets ---- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
html.stgd-font--hyperlegible body.stgd-portal {
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html.stgd-font--lexend body.stgd-portal {
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- display: density (class on <html>) ---- */
html.stgd-density--roomy body.stgd-portal {
  line-height: 1.8;
}
html.stgd-density--roomy .stgd-field {
  padding: 22px 0;
}
html.stgd-density--roomy .stgd-choices {
  gap: 12px;
}
html.stgd-density--roomy .stgd-actions {
  gap: 14px;
  margin: 16px 0;
}
html.stgd-density--roomy .stgd-panel {
  padding: 20px;
  margin-bottom: 20px;
}
html.stgd-density--roomy .stgd-inline-field {
  margin-bottom: 22px;
}
html.stgd-density--roomy p {
  margin-bottom: 16px;
}
html.stgd-density--roomy .stgd-choice__label {
  min-height: 54px;
  padding: 10px 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Keeps focused controls clear of the sticky save bar. */
  scroll-padding-bottom: 120px;
  scroll-padding-top: 12px;
}

body.stgd-portal {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

[hidden] {
  display: none !important;
}

.stgd-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- focus ---- */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--yellow);
}
main:focus,
h1:focus,
h2:focus,
section:focus,
fieldset:focus,
[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}
fieldset:focus > legend,
section[tabindex="-1"]:focus > h2 {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--yellow);
}

.stgd-skip {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 20;
  padding: 12px 16px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius);
}
.stgd-skip:focus {
  top: 8px;
}

a {
  color: var(--blue);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--blue-dark);
}

p {
  margin: 0 0 12px;
}

.stgd-noscript {
  max-width: 640px;
  margin: 24px auto;
  padding: 0 16px;
}

/* ---- headings ---- */
.stgd-h1 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--blue);
}
.stgd-h1__sub {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
}
.stgd-h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 700;
}
.stgd-h3 {
  margin: 12px 0 4px;
  font-size: 1rem;
  font-weight: 700;
}
.stgd-lead {
  font-size: 1.05rem;
}
.stgd-hint,
.stgd-optional {
  color: var(--muted);
  font-size: 0.925rem;
  font-weight: 400;
}
.stgd-prewrap {
  white-space: pre-wrap;
}

/* ---- header, nav, layout ---- */
.stgd-header {
  background: var(--white);
  color: var(--ink, #111);
  padding: 10px 16px 8px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 3px solid var(--yellow);
}
.stgd-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  max-width: 640px;
  margin: 0 auto;
}
.stgd-header__logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 62%;
}
.stgd-header__practice {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue);
}
.stgd-header__hello {
  max-width: 640px;
  margin: 2px auto 0;
  font-size: 0.95rem;
}
.stgd-header__out {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--blue);
  font-weight: 600;
}
.stgd-header__out:hover {
  color: #000;
}

.stgd-demo {
  margin: 0;
  padding: 4px 16px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

.stgd-nav {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.stgd-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.stgd-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 4px 2px;
  border-bottom: 4px solid transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.stgd-tab[aria-current="page"] {
  /* Colour and the bar only — a heavier weight would shift the other tabs sideways. */
  border-bottom-color: var(--blue);
  color: var(--blue);
}
.stgd-tab:focus-visible {
  outline-offset: -3px;
  box-shadow: none;
}

.stgd-main,
.stgd-front {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}
.stgd-front__main {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 0 24px;
}
#stgd-app > .stgd-front__main {
  padding: 24px 16px;
}
.stgd-brand {
  padding: 8px 0 16px;
  border-bottom: 4px solid var(--yellow);
  margin-bottom: 20px;
}
.stgd-brand__logo {
  display: block;
  max-width: min(260px, 80%);
  height: auto;
}
.stgd-brand__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--blue);
}
.stgd-login-name {
  display: inline-block;
  padding: 0 6px;
  background: var(--yellow);
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.stgd-supportlink {
  margin: 28px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.stgd-tall-link,
.stgd-supportlink a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.stgd-loading {
  color: var(--muted);
  padding: 16px 0;
}

/* ---- panels and banners ---- */
.stgd-panel {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.stgd-panel > :last-child {
  margin-bottom: 0;
}
.stgd-panel--notice {
  border: 2px solid var(--ink);
  border-left-width: 8px;
}
.stgd-banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 6px solid var(--blue);
  background: var(--wash);
  border-radius: 4px;
}
.stgd-banner--past {
  border-left-color: var(--ink);
  background: var(--yellow);
  font-weight: 600;
}
.stgd-banner--offline,
.stgd-banner--error {
  border-left-color: var(--ink);
  font-weight: 600;
}

/* ---- buttons ---- */
.stgd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: var(--tap);
  padding: 8px 18px;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--blue);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.stgd-btn:hover {
  background: var(--wash);
}
.stgd-btn--primary {
  background: var(--blue);
  color: var(--white);
}
.stgd-btn--primary:hover {
  background: var(--blue-dark);
  color: var(--white);
}
.stgd-btn--ghost {
  border-color: var(--line);
  color: var(--ink);
  font-weight: 600;
}
.stgd-btn--wide {
  width: 100%;
}
.stgd-btn:disabled,
.stgd-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.stgd-link-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.stgd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

/* ---- forms ---- */
.stgd-form {
  margin: 0 0 16px;
}
.stgd-inline-field {
  margin: 0 0 16px;
}
.stgd-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.stgd-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--muted);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}
.stgd-input--short {
  width: 9.5rem;
}
.stgd-input--date {
  width: auto;
  min-width: 0;
}
.stgd-input[aria-invalid="true"] {
  border-color: var(--ink);
  border-width: 3px;
}
.stgd-textarea {
  min-height: 9rem;
  resize: vertical;
}
.stgd-error-text {
  margin: 4px 0 0;
  font-weight: 600;
}
.stgd-checkrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--tap);
  margin: 0 0 14px;
}
.stgd-check {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 2px 0 0;
  accent-color: var(--blue);
}
.stgd-checkrow label {
  padding-top: 3px;
}

/* ---- choice groups (radios and checkboxes drawn as tap targets) ---- */
.stgd-field {
  min-width: 0;
  margin: 0 0 8px;
  padding: 16px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.stgd-field__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 700;
}
.stgd-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stgd-choices--scale {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}
.stgd-choices--secondary {
  align-items: center;
  margin-top: 8px;
}
.stgd-choice {
  position: relative;
  display: flex;
  min-width: 0;
}
.stgd-choice__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  min-width: var(--tap);
  padding: 6px 14px;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.stgd-choice--num .stgd-choice__label {
  padding: 6px 2px;
  font-size: 1.1rem;
}
.stgd-choice--quiet .stgd-choice__label {
  border-color: var(--muted);
  border-style: dashed;
  font-weight: 500;
}
.stgd-choice__input:checked + .stgd-choice__label {
  /* Selection changes colour and adds an underline only. Nothing here may change the chip's size: a heavier weight or a
     wider chip reflows the wrapped row and every neighbour jumps, which is hard on sensory-sensitive clients (1.11.1). */
  background: var(--blue);
  border-color: var(--blue);
  border-style: solid;
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* The tick's space is reserved from the start, so ticking a box does not widen it. */
.stgd-choice--check .stgd-choice__label::before {
  content: "\2713";
  margin-right: 6px;
  visibility: hidden;
}
.stgd-choice--check .stgd-choice__input:checked + .stgd-choice__label::before {
  visibility: visible;
}
.stgd-choice__input:focus-visible + .stgd-choice__label {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--yellow);
}

/* ---- entry flow ---- */
.stgd-datebar {
  margin-bottom: 12px;
}
.stgd-datebar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.stgd-datebar__controls .stgd-btn {
  padding: 8px 12px;
  font-size: 0.95rem;
}
.stgd-datebar__controls .stgd-btn {
  flex: 1 1 0;
}
.stgd-datebar__pick {
  flex: 1 1 100%;
  order: -1;
  min-width: 0;
}
.stgd-datebar__pick .stgd-input {
  width: 100%;
}
.stgd-stephead {
  margin: 8px 0 4px;
}
.stgd-stephead__count {
  margin: 0 0 4px;
  color: var(--muted);
  font-weight: 600;
}
.stgd-progress {
  display: block;
  width: 100%;
  height: 8px;
  margin: 0 0 12px;
  border: 0;
  border-radius: 4px;
  background: var(--wash);
  color: var(--blue);
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
}
.stgd-progress::-webkit-progress-bar {
  background: var(--wash);
}
.stgd-progress::-webkit-progress-value {
  background: var(--blue);
}
.stgd-progress::-moz-progress-bar {
  background: var(--blue);
}
.stgd-target {
  margin-top: 20px;
  padding-top: 4px;
  border-top: 4px solid var(--wash);
}
.stgd-target__title {
  margin: 12px 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--blue);
}
.stgd-target .stgd-field:first-of-type {
  border-top: 0;
  padding-top: 8px;
}
.stgd-follow:empty {
  display: none;
}
.stgd-med {
  margin-top: 32px;
  padding: 4px 16px 8px;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
}
.stgd-med .stgd-field {
  border-top: 0;
  padding-top: 4px;
}

.stgd-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 24px -16px 0;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--blue);
  background: var(--white);
}
.stgd-savebar__status {
  flex: 1 1 8rem;
  min-width: 0;
  margin: 0;
  font-weight: 600;
}
.stgd-savebar__status--error {
  flex-basis: 100%;
  padding-left: 10px;
  border-left: 6px solid var(--ink);
}
.stgd-savebar__buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ---- skills ---- */
.stgd-skillgroup {
  margin-top: 20px;
}
.stgd-skillgroup__title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
}
.stgd-skills,
.stgd-cardlist,
.stgd-events,
.stgd-values {
  margin: 0;
  padding: 0;
  list-style: none;
}
.stgd-skill {
  border-top: 1px solid var(--line);
}
.stgd-skill__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stgd-skill__toggle[aria-expanded="true"] {
  background: var(--wash);
}
.stgd-skill__name {
  grid-column: 1;
  font-weight: 700;
}
.stgd-skill__module,
.stgd-skill__desc {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.925rem;
}
.stgd-skill__badge {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
}
.stgd-skill__panel {
  padding: 0 4px 8px;
  background: var(--wash);
}
.stgd-skill__panel .stgd-field {
  border-top: 0;
  padding: 8px 0;
}
.stgd-skill__panel .stgd-field__legend {
  font-size: 0.95rem;
}

/* ---- reflection ---- */
.stgd-prompts {
  margin: 0 0 8px;
  padding-left: 20px;
  color: var(--muted);
}
.stgd-events__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.stgd-settle {
  margin-top: 12px;
}

/* ---- lists ---- */
.stgd-list,
.stgd-linklist {
  margin: 0 0 12px;
  padding-left: 22px;
}
.stgd-list li,
.stgd-linklist li {
  margin-bottom: 6px;
}
.stgd-linklist a {
  display: inline-block;
  padding: 8px 0;
}

/* ---- week ---- */
.stgd-weeknav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.stgd-day {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius);
}
.stgd-day__head .stgd-h2 {
  margin-bottom: 0;
}
.stgd-day__state {
  color: var(--muted);
  font-weight: 600;
}
.stgd-day__group {
  margin-bottom: 12px;
}
.stgd-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.stgd-values__item {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--wash);
  font-size: 0.95rem;
}
.stgd-values__num {
  font-weight: 800;
}
.stgd-details summary {
  min-height: var(--tap);
  padding: 8px 0;
  cursor: pointer;
}

/* ---- reports ---- */
.stgd-cardlist li {
  margin-bottom: 10px;
}
.stgd-cardbtn {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--blue);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stgd-cardbtn__title {
  display: block;
  font-weight: 700;
}
.stgd-rsec {
  margin: 24px 0 0;
}
.stgd-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.stgd-stat {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.stgd-stat__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
}
.stgd-stat__value {
  margin: 0;
}
.stgd-stat__big {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue);
}
.stgd-stat__sub {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
}
.stgd-tablewrap {
  max-width: 100%;
  margin-bottom: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stgd-table {
  border-collapse: collapse;
  font-size: 0.95rem;
}
.stgd-table th,
.stgd-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}
.stgd-table th[scope="row"],
.stgd-table thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--white);
  text-align: left;
}
.stgd-table thead th {
  background: var(--wash);
  font-size: 0.85rem;
}
.stgd-block {
  margin: 0 0 16px;
}
.stgd-quote {
  margin: 4px 0 8px;
  padding: 4px 0 4px 14px;
  border-left: 4px solid var(--yellow);
  font-style: italic;
}
.stgd-chain {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  border-left: 4px solid var(--blue);
}
.stgd-chain__item {
  padding: 4px 0 12px 14px;
}
.stgd-chain__item p {
  margin-bottom: 4px;
}
.stgd-chain__type {
  font-weight: 800;
  color: var(--blue);
}
.stgd-chain__evidence {
  display: inline-block;
  padding: 1px 10px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
}
.stgd-closing {
  padding: 16px;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius);
}
.stgd-closing p {
  margin-bottom: 4px;
}
.stgd-closing__head {
  font-size: 1.15rem;
  font-weight: 800;
}

/* ---- skills area (Skills tab: list, coach, practice records) ---- */
.stgd-entrycard {
  border-left: 8px solid var(--blue);
}
.stgd-entrycard__title {
  margin: 0 0 6px;
}

.stgd-skillrow-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  border-top: 1px solid var(--line);
}
.stgd-skillrow-wrap:first-child {
  border-top: 0;
}
.stgd-skillrow__open {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  display: block;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stgd-skillrow__name {
  display: block;
  font-weight: 700;
}
.stgd-skillrow__desc {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.925rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stgd-skillrow__fav {
  flex: 0 0 auto;
  align-self: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 6px 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.stgd-skillrow__fav[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.stgd-suggestion {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--blue);
  border-radius: var(--radius);
}

.stgd-badge--muted {
  background: var(--muted);
}

.stgd-practicecard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
}

/* ---- display: text size (class on <html>; every rem-based size below scales with it) ---- */
html.stgd-text--large {
  font-size: 118.75%;
}
html.stgd-text--xlarge {
  font-size: 137.5%;
}

/* ---- my plans (safety plan, cope-ahead, hope box) ---- */
.stgd-plan-intro {
  font-size: 1.05rem;
}
.stgd-plancard {
  display: block;
  width: 100%;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--blue);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stgd-plancard__title {
  display: block;
  font-weight: 700;
}
.stgd-safetylist {
  margin: 8px 0 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stgd-safetylist__title {
  margin: 0 0 8px;
}
.stgd-safetyitem {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.stgd-safetyitem:first-of-type {
  border-top: 0;
}
.stgd-safetyitem__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.stgd-safetyitem__row .stgd-input {
  flex: 1 1 12rem;
}
.stgd-plan-readonly {
  font-size: 1.15rem;
  line-height: 1.7;
}
.stgd-plan-readonly .stgd-h2 {
  font-size: 1.35rem;
}
.stgd-plan-readonly__list {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
}
.stgd-plan-readonly__list li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.stgd-plan-readonly__list li:first-child {
  border-top: 0;
}
.stgd-offlinecopy {
  border-left-color: var(--muted);
}
.stgd-copecard {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stgd-hopebox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.stgd-hopenote {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stgd-hopenote__img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
  background: var(--wash);
}
.stgd-hopenote__text {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

/* ---- worksheet (chain and missing-links) ---- */
.stgd-wsheet-step {
  margin-bottom: 12px;
  color: var(--muted);
  font-weight: 700;
}
.stgd-linkrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.stgd-linkrow:first-of-type {
  border-top: 0;
}
.stgd-linkrow__controls {
  display: flex;
  gap: 8px;
}
.stgd-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
}
.stgd-badge--muted {
  background: var(--muted);
}
.stgd-badge--warn {
  background: var(--ink);
}

/* ---- guided practice timers ---- */
.stgd-timer {
  text-align: center;
  padding: 24px 16px;
  margin: 8px 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
}
.stgd-timer__display {
  margin: 0 0 8px;
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.stgd-timer__phase {
  margin: 0 0 16px;
  font-size: 1.3rem;
  font-weight: 700;
  min-height: 1.6em;
}
.stgd-timer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.stgd-breathe-circle {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0.6);
}
.stgd-breathe-circle--in {
  animation: stgd-breathe-expand 4s ease-in-out forwards;
}
.stgd-breathe-circle--out {
  animation: stgd-breathe-contract 6s ease-in-out forwards;
}
@keyframes stgd-breathe-expand {
  from {
    transform: scale(0.6);
  }
  to {
    transform: scale(1);
  }
}
@keyframes stgd-breathe-contract {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.6);
  }
}
.stgd-checkin {
  border-left-color: var(--blue);
  font-weight: 600;
}

/* ---- header: persistent "I need a skill now" ---- */
.stgd-header__help {
  width: 100%;
  margin-top: 8px;
  font-size: 0.975rem;
}

/* ---- Today: why sentence, this week's focus, catch-up ---- */
.stgd-whycard {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 6px solid var(--line);
  background: var(--wash);
  border-radius: 4px;
  font-style: italic;
}
.stgd-whycard p {
  margin: 0 0 6px;
}
.stgd-focuscard {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--blue);
  border-radius: var(--radius);
  background: var(--white);
}
.stgd-catchup {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--wash);
  border-radius: 4px;
}

/* ---- Today: mode choice, "not today", sheets ---- */
.stgd-modehero {
  margin: 4px 0 8px;
}
.stgd-modehero .stgd-btn {
  min-width: 100%;
}
@media (min-width: 480px) {
  .stgd-modehero .stgd-btn {
    min-width: 0;
  }
}
.stgd-sheet {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
}
.stgd-sheet .stgd-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  margin-bottom: 8px;
}

/* ---- rating anchors, help text and the feelings word bank ---- */
.stgd-anchors {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.925rem;
}
.stgd-anchors li {
  margin: 0 0 2px;
}
.stgd-anchor-edit {
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stgd-anchor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.stgd-anchor-row .stgd-input--short {
  width: 5rem;
}
.stgd-anchor-row .stgd-input {
  flex: 1 1 10rem;
}
.stgd-wordbank {
  margin: 8px 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
}
.stgd-wordbank summary {
  cursor: pointer;
  font-weight: 700;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
.stgd-wordbank ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.stgd-wordbank li {
  margin-bottom: 6px;
}

/* ---- display preferences: live preview ---- */
.stgd-display-preview {
  margin: 8px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
}
.stgd-display-preview .stgd-h3 {
  margin-top: 0;
}

/* ---- "I need a skill now" screen ---- */
.stgd-help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0;
}
.stgd-help-btn {
  min-height: 64px;
  font-size: 1.05rem;
  justify-content: center;
}

/* ---- quick check-in ---- */
.stgd-quickhead {
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 700;
}
.stgd-quickcard {
  margin: 0 0 20px;
}

/* ---- print (safety plan, caregiver page) ---- */
@media print {
  .stgd-header,
  .stgd-nav,
  .stgd-supportlink,
  .stgd-savebar,
  .stgd-print-hide {
    display: none !important;
  }
  .stgd-main {
    padding: 0;
  }
}

@media (max-width: 359px) {
  .stgd-main,
  .stgd-front,
  #stgd-app > .stgd-front__main {
    padding-left: 12px;
    padding-right: 12px;
  }
  .stgd-savebar {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .stgd-tab {
    font-size: 0.875rem;
  }
  .stgd-btn {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .stgd-choice__input:checked + .stgd-choice__label {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
}

/* A released report that has not been opened yet: calm, not alarming. */
.stgd-panel--new { border-left: 6px solid var(--blue); }
.stgd-tab__new { margin-left: 4px; color: var(--blue); font-weight: 700; }
.stgd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Speak instead of typing */
.stgd-mic { margin-top: 8px; }
.stgd-btn--mic[aria-pressed="true"] { background: var(--blue); color: var(--white); }

/* The week strip on the "Saved" screen: seven quiet marks, no streaks. */
.stgd-weekstrip { margin: 12px 0; }
.stgd-weekstrip__days { display: flex; gap: 6px; list-style: none; margin: 4px 0; padding: 0; }
.stgd-weekstrip__day { flex: 1 1 0; max-width: 56px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 0; background: var(--white); }
.stgd-weekstrip__day--filled { border-color: var(--blue); }
.stgd-weekstrip__name { display: block; font-size: 0.8rem; color: var(--muted); }
.stgd-weekstrip__mark { display: block; font-size: 1.2rem; line-height: 1.2; color: var(--blue); }
.stgd-details > summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; }


/* ---- iPhone / iPad Safari: nothing may make the page wider than the screen ----
   Safari draws date and time fields with a native width that ignores width:100% and max-width, which pushed the Today
   screen sideways and made the sticky bar and fields "bounce". Remove the native box, let the field shrink, and clip
   any stray horizontal overflow at the page level (on html only, so position: sticky keeps working). */
html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body.stgd-portal {
  max-width: 100%;
  min-width: 0;
}
input[type="date"].stgd-input,
input[type="time"].stgd-input,
input[type="datetime-local"].stgd-input {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  line-height: 1.4;
}
input[type="date"].stgd-input::-webkit-date-and-time-value,
input[type="time"].stgd-input::-webkit-date-and-time-value {
  min-height: 1.4em;
  text-align: left;
}
.stgd-datebar,
.stgd-datebar__controls,
.stgd-datebar__pick {
  max-width: 100%;
  min-width: 0;
}
.stgd-datebar__controls > *,
.stgd-actions > *,
.stgd-inline-field > *,
.stgd-savebar > * {
  min-width: 0;
}
/* Safari zooms the whole page when a focused field's text is under 16px, and does not always zoom back. */
input.stgd-input,
select.stgd-input,
textarea.stgd-input,
.stgd-portal input,
.stgd-portal select,
.stgd-portal textarea {
  font-size: max(16px, 1em);
}
img, svg, video, canvas {
  max-width: 100%;
}
pre, code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* "What to do" beside every guided timer */
.stgd-howto { margin: 12px 0; }
.stgd-howto > summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.stgd-howto__steps { margin: 8px 0 0; padding-left: 1.4em; }
.stgd-howto__steps li { margin: 6px 0; font-size: 1.05rem; line-height: 1.5; }

/* ---- sleep diary (CBT-I): morning entry, sleep week, sleep summaries ----
   A calm, low-key panel for the practice tip: softer than .stgd-panel--notice (no bold outline),
   just a quiet wash background and a thin accent edge so it still reads as "read me first". */
.stgd-panel--calm {
  border-color: var(--line);
  border-left: 4px solid var(--blue);
  background: var(--wash);
}
.stgd-panel--calm p {
  margin: 0;
}

/* OCD template v2: compact optional practice controls, native portal theme retained. */
.stgd-ocd-details{border:1px solid var(--stgd-border,#c8d2d4);border-radius:10px;padding:12px;margin:14px 0;min-width:0}
.stgd-ocd-details>summary{cursor:pointer;min-height:32px;line-height:1.5;font-weight:600}
.stgd-ocd-module select{max-width:100%;width:100%;font-size:16px;white-space:normal}
.stgd-ocd-linked{max-width:100%;min-width:0}
.stgd-ocd-linked:empty{display:none}
.stgd-ocd-intro{border-left:4px solid #264348}
.stgd-ocd-intro p:last-child{margin-bottom:0}

.stgd-ocd-week {margin:12px 0;}.stgd-ocd-week dt{font-weight:600;margin-top:8px;}.stgd-ocd-week dd{margin:2px 0 0;overflow-wrap:anywhere;}