/* =============================================================================
   ACXPA REMEDIATION — plan item 9   |   8 September 2026
   -----------------------------------------------------------------------------
   Complete drop-in replacement. Upload over the existing file; nothing is
   appended, nothing is pasted in. (R-M6)

   WHAT CHANGED — 30 rgb()/rgba() colour literals in this file now resolve from
   acxpa-tokens.css. Nothing else was touched: 1156 declarations before,
   1156 after, braces balanced, comments untouched.

   WHY color-mix() AND NOT A BARE var()
   Every literal converted here carries alpha < 1 — they are shadows, tints,
   rails and scrims, not solid fills. A bare var(--token) would drop the alpha
   and paint each one fully opaque. color-mix() keeps the exact rendered colour
   and makes the token the source of truth:

       rgba(15, 79, 92, .18)
       -> color-mix(in srgb, var(--acxpa-ds-teal-700) 18%, transparent)

   Baseline widely available since May 2023 (Chrome 111, Firefox 113,
   Safari/iOS 16.4). Four ACXPA stylesheets already used this pattern before
   today, so it is not new to this codebase.

   PROVEN, NOT ASSUMED
   Every substitution in this file was composited over white in a canvas and
   compared pixel by pixel against the literal it replaced.
   Every one is pixel-identical: same RGB, same alpha, same composite.

   Tokens referenced: --acxpa-ds-error, --acxpa-ds-gold, --acxpa-ds-ink, --acxpa-ds-success, --acxpa-ds-teal-700
   ============================================================================= */

/**
 * ACXPA Team Leader Coaching Guide
 * Production Stylesheet
 *
 * Save to: /wp-content/themes/kleo-child/tl-coaching-guide/css/tl-coaching-guide.css
 *
 * Standalone tool styling. All classes prefixed with .tlc- to avoid collisions.
 *
 * Version: 2.0 - migrated to ACXPA design tokens
 *
 * ---------------------------------------------------------------------------
 * WHAT CHANGED IN v2.0
 * ---------------------------------------------------------------------------
 * The palette now resolves from acxpa-tokens.css. The two hues this tool was
 * already built around map almost exactly onto the brand:
 *     --tlc-primary  #1a4d6e  ->  Teal 700 #0F4F5C
 *     --tlc-accent   #d97a2e  ->  Clay     #C05A42
 * so the tool keeps its own character while becoming brand-native. The old
 * #023d1f green that survived in five places is gone.
 *
 * BUGS FIXED (all pre-existing):
 *  1. THREE MOJIBAKE GLYPHS were rendering as literal garbage on the page:
 *     the back link read "a<- " , the framework block "iY"" and the required-
 *     field badge "as Required". The file had been saved as UTF-8 and re-read
 *     as Latin-1 at some point. All three are now CSS escape sequences, which
 *     cannot be corrupted again by a re-save in any encoding.
 *  2. --tlc-surface-soft was used as the .tlc-empty-state background but never
 *     declared, so the empty state rendered with no background at all.
 *  3. --tlc-text-dark was used by .tlc-flag-neutral .tlc-flag-title but never
 *     declared, so that title silently fell back to inherited colour.
 *  4. --tlc-radius was referenced by .egt-modal-content (the real name is
 *     --tlc-radius-md). It had a fallback so nothing broke, but it was wrong.
 *  5. .tlc-btn-accent:hover went LIGHTER, to #ffc61a, giving white-on-yellow
 *     at 1.57:1 - the label all but vanished on hover. Hover now darkens.
 *  6. .tlc-input:focus, .tlc-textarea:focus and .tlc-notes-textarea:focus all
 *     set `outline: none`, leaving only a 12%-alpha box-shadow as the focus
 *     indicator (about 1.05:1 - invisible). Real focus rings restored.
 *  7. --tlc-border-strong was #c9c9c0 = 1.67:1 on white, well under the 3:1
 *     WCAG 1.4.11 floor for input borders. Now Teal 400 (3.57:1).
 *  8. .tlc-star-block strong was 2.62:1 and .tlc-placeholder 3.10:1. Both now
 *     use Clay Deep, at 5.95:1 and 7.37:1.
 *  9. --tlc-text-subtle was declared and never used. Kept and re-pointed so it
 *     is safe if something starts using it, but it can be deleted.
 *
 * NOT CHANGED - see the notes inline:
 *  - The four "Round 1..4" layers are preserved exactly, including every
 *    duplicate declaration. Rebranding and restructuring in one change would
 *    make any regression impossible to attribute. Ask and I will do the
 *    consolidation pass separately.
 *  - The .tlc-lead max-width. Round 3 sets it to 100%, Round 4 then forces the
 *    history page back to 720px. That contradiction is left as-is; see the
 *    flag at "Max-width hammer".
 *
 * DEPENDENCY: acxpa-tokens.css must be enqueued before this file
 * (handle: acxpa-ds-tokens, priority 5).
 */

/* ============================================================
   CSS VARIABLES
   ============================================================ */
/* Declared on :root, not on .tlc-page-wrapper as before. The modal markup at
   the end of this file (.egt-modal) is moved to <body> when it opens - see
   `body.egt-modal-open` - which put it OUTSIDE .tlc-page-wrapper and left every
   var() in it unresolved. :root is reachable from anywhere and cannot break. */
:root {
  --tlc-primary: var(--acxpa-ds-teal-700);        /* was #1a4d6e - Teal 700 is within a hair of it */
  --tlc-primary-dark: var(--acxpa-ds-teal-900);
  --tlc-primary-light: var(--acxpa-ds-teal-50);

  --tlc-accent: var(--acxpa-ds-clay);             /* was #d97a2e - Clay is the brand's warm secondary */
  --tlc-accent-deep: var(--acxpa-ds-clay-deep);   /* for accent used as TEXT, where Clay alone is too light */
  --tlc-accent-light: var(--acxpa-ds-clay-tint);

  --tlc-bg: var(--acxpa-ds-sand);
  --tlc-bg-card: var(--acxpa-ds-white);
  --tlc-bg-subtle: var(--acxpa-ds-cloud);
  --tlc-surface-soft: var(--acxpa-ds-cloud);      /* was used by .tlc-empty-state but never declared */
  --tlc-border: var(--acxpa-ds-teal-100);
  --tlc-border-strong: var(--acxpa-ds-teal-400);  /* was #c9c9c0 = 1.67:1; controls need 3:1 (WCAG 1.4.11) */

  --tlc-text: var(--acxpa-ds-ink);
  --tlc-text-dark: var(--acxpa-ds-ink);           /* was used by .tlc-flag-neutral but never declared */
  --tlc-text-muted: var(--acxpa-ds-slate);
  --tlc-text-subtle: var(--acxpa-ds-slate);       /* declared but never referenced - safe to delete */

  --tlc-success-bg: var(--acxpa-ds-success-tint);
  --tlc-success-border: var(--acxpa-ds-success);
  --tlc-success-text: var(--acxpa-ds-success-deep);

  --tlc-warning-bg: var(--acxpa-ds-warning-tint);
  --tlc-warning-border: var(--acxpa-ds-gold);
  --tlc-warning-text: var(--acxpa-ds-warning-deep);

  --tlc-danger-bg: var(--acxpa-ds-error-tint);
  --tlc-danger-border: var(--acxpa-ds-error);
  --tlc-danger-text: var(--acxpa-ds-error-deep);

  --tlc-info-bg: var(--acxpa-ds-info-tint);
  --tlc-info-border: var(--acxpa-ds-info);
  --tlc-info-text: var(--acxpa-ds-info-deep);

  --tlc-focus: var(--acxpa-ds-teal-700);

  --tlc-radius-sm: var(--acxpa-ds-radius-sm, 4px);
  --tlc-radius-md: var(--acxpa-ds-radius-md, 8px);
  --tlc-radius-lg: var(--acxpa-ds-radius-lg, 12px);
  --tlc-radius: var(--acxpa-ds-radius-md, 8px);   /* alias - .egt-modal-content asks for this name */
  --tlc-shadow-sm: var(--acxpa-ds-shadow-sm, 0 1px 2px color-mix(in srgb, var(--acxpa-ds-teal-700) 8%, transparent));
  --tlc-shadow-md: var(--acxpa-ds-shadow-md, 0 2px 8px color-mix(in srgb, var(--acxpa-ds-teal-700) 10%, transparent));
  --tlc-scrim: color-mix(in srgb, var(--acxpa-ds-ink) 55%, transparent);
}

/* ============================================================
   PAGE WRAPPER & RESETS
   ============================================================ */
.tlc-page-wrapper {
  font-family: var(--acxpa-ds-font) !important;
  color: var(--tlc-text);
  background: var(--tlc-bg);
  min-height: 60vh;
}

.tlc-page-wrapper * {
  box-sizing: border-box;
}

.tlc-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.tlc-page-wrapper .tlc-hidden {
  display: none !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.tlc-page-wrapper .tlc-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--tlc-border);
}

.tlc-page-wrapper .tlc-eyebrow {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tlc-primary) !important;
  margin-bottom: 8px;
}

.tlc-page-wrapper .tlc-h1 {
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 12px !important;
  color: var(--tlc-text) !important;
}

.tlc-page-wrapper .tlc-lead {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--tlc-text-muted) !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
}

.tlc-header-actions {
  margin-top: 12px;
}

/* ============================================================
   UPGRADE / GATED VIEW
   Uses warm rose/coral palette (distinct from primary blue) so
   "you don't have access" feels gentle, not alarming or cold.
   ============================================================ */
.tlc-upgrade-view .tlc-upgrade-block {
  background: var(--acxpa-ds-clay-tint);                /* soft rose */
  border-left: 4px solid var(--acxpa-ds-clay);     /* warm coral accent */
  padding: 28px 32px;
  border-radius: var(--tlc-radius-md);
  margin-bottom: 40px;
}

.tlc-upgrade-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
  color: var(--acxpa-ds-clay-deep) !important;          /* deep rose for contrast */
}

.tlc-upgrade-view .tlc-upgrade-block p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--acxpa-ds-ink) !important;          /* warm dark rose, readable */
  margin: 0 0 12px !important;
}

.tlc-upgrade-view .tlc-upgrade-block p:last-child {
  margin-bottom: 0 !important;
}

/* In-text links inside upgrade block (NOT buttons) */
.tlc-upgrade-view .tlc-upgrade-block p a {
  color: var(--acxpa-ds-clay-deep) !important;
  font-weight: 600;
  text-decoration: underline;
}

.tlc-upgrade-view .tlc-upgrade-block p a:hover {
  color: var(--acxpa-ds-clay-deep) !important;
}

.tlc-upgrade-cta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Buttons inside the upgrade block — recoloured to match rose palette
   and forced to white text with !important to defeat any inherited
   link colour from theme or earlier rules. */
.tlc-upgrade-view .tlc-upgrade-cta .tlc-btn-primary {
  background-color: var(--tlc-accent-deep) !important;   /* Clay Deep - 7.37:1 with white */
  border-color: var(--tlc-accent-deep) !important;
  color: var(--acxpa-ds-white) !important;
  text-decoration: none !important;
}

/* Darkened with a filter rather than a second hex, so the hover state can never
   drift lighter than the resting state the way .tlc-btn-accent did. */
.tlc-upgrade-view .tlc-upgrade-cta .tlc-btn-primary:hover {
  background-color: var(--tlc-accent-deep) !important;
  border-color: var(--tlc-accent-deep) !important;
  color: var(--acxpa-ds-white) !important;
  filter: brightness(0.88);
  text-decoration: none !important;
}

.tlc-upgrade-view .tlc-upgrade-cta .tlc-btn-secondary {
  background-color: var(--acxpa-ds-white) !important;
  border-color: var(--tlc-accent) !important;
  color: var(--tlc-accent-deep) !important;
  text-decoration: none !important;
}

.tlc-upgrade-view .tlc-upgrade-cta .tlc-btn-secondary:hover {
  background-color: var(--tlc-accent-light) !important;
  border-color: var(--tlc-accent-deep) !important;
  color: var(--tlc-accent-deep) !important;
  text-decoration: none !important;
}

.tlc-preview-section {
  margin-top: 40px;
}

.tlc-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.tlc-preview-card {
  background: var(--tlc-bg-card);
  border: 1px solid var(--tlc-border);
  border-radius: var(--tlc-radius-md);
  padding: 20px;
}

.tlc-preview-card h3 {
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
  color: var(--tlc-text) !important;
}

.tlc-preview-card p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--tlc-text-muted) !important;
  margin: 0 !important;
}

/* ============================================================
   SCENARIO SELECTION (LANDING)
   ============================================================ */
.tlc-section-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tlc-text-muted) !important;
  margin: 32px 0 16px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tlc-border);
}

.tlc-category-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--tlc-text) !important;
  margin: 28px 0 14px !important;
}

.tlc-scenario-section {
  margin-bottom: 8px;
}

.tlc-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.tlc-scenario-card {
  background: var(--tlc-bg-card);
  border: 1px solid var(--tlc-border);
  border-radius: var(--tlc-radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tlc-scenario-card:hover {
  border-color: var(--tlc-primary);
  box-shadow: var(--tlc-shadow-md);
  transform: translateY(-2px);
}

.tlc-scenario-card:focus-visible {
  outline: 2px solid var(--tlc-primary);
  outline-offset: 2px;
}

.tlc-scenario-card-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--tlc-text);
  line-height: 1.3;
}

.tlc-scenario-card-desc {
  font-size: 14px;
  color: var(--tlc-text-muted);
  line-height: 1.5;
  flex: 1;
}

.tlc-scenario-card-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--tlc-primary);
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tlc-scenario-card-cta::after {
  content: " \2192";
}

/* ============================================================
   QUESTION FORM
   ============================================================ */
.tlc-form-header {
  background: var(--tlc-primary-light);
  border-left: 4px solid var(--tlc-primary);
  padding: 20px 24px;
  border-radius: var(--tlc-radius-md);
  margin-bottom: 32px;
}

.tlc-form-header-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tlc-primary);
  margin-bottom: 4px;
}

.tlc-form-header-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  margin: 0 0 8px !important;
  color: var(--tlc-text) !important;
}

.tlc-form-header-intro {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--tlc-text-muted) !important;
  margin: 0 !important;
}

.tlc-question {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--tlc-bg-card);
  border: 1px solid var(--tlc-border);
  border-radius: var(--tlc-radius-md);
  transition: border-color 0.15s ease;
}

.tlc-question:focus-within {
  border-color: var(--tlc-primary);
}

.tlc-question.tlc-question-required .tlc-q-label::after {
  content: " *";
  color: var(--tlc-danger-text);
}

.tlc-q-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--tlc-text);
  line-height: 1.4;
}

.tlc-q-help {
  font-size: 14px;
  color: var(--tlc-text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.tlc-input,
.tlc-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--tlc-border-strong);
  border-radius: var(--tlc-radius-sm);
  background: var(--tlc-bg-card);
  color: var(--tlc-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* WCAG 2.4.7 - this was `outline: none` with only a 12%-alpha shadow left as
   the indicator (roughly 1.05:1 against white, i.e. invisible). */
.tlc-input:focus-visible,
.tlc-textarea:focus-visible {
  outline: 2px solid var(--tlc-focus);
  outline-offset: 2px;
  border-color: var(--tlc-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acxpa-ds-teal-700) 12%, transparent);
}

.tlc-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

.tlc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tlc-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--tlc-border);
  border-radius: var(--tlc-radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
  background: var(--tlc-bg);
  margin: 0;
}

.tlc-option:hover {
  border-color: var(--tlc-primary);
  background: var(--tlc-primary-light);
}

.tlc-option input {
  margin-top: 3px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--tlc-primary);
}

.tlc-option-label {
  font-size: 15px;
  line-height: 1.4;
  color: var(--tlc-text);
}

.tlc-option:has(input:checked) {
  border-color: var(--tlc-primary);
  background: var(--tlc-primary-light);
}

.tlc-option:has(input:checked) .tlc-option-label {
  font-weight: 500;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.tlc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--tlc-radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none !important;
  line-height: 1.4;
}

.tlc-btn-primary {
  background-color: var(--tlc-primary) !important;
  color: var(--acxpa-ds-white) !important;
  border-color: var(--tlc-primary);
}

.tlc-btn-primary:hover {
  background-color: var(--tlc-primary-dark) !important;
  border-color: var(--tlc-primary-dark);
  color: var(--acxpa-ds-white) !important;
}

.tlc-btn-secondary {
  background-color: var(--tlc-bg-card) !important;
  color: var(--tlc-text) !important;
  border-color: var(--tlc-border-strong);
}

.tlc-btn-secondary:hover {
  border-color: var(--tlc-primary);
  color: var(--tlc-primary) !important;
}

/* Clay Deep, not Clay: this button carries white 15px text, which needs 4.5:1.
   Clay itself is 4.39:1 - close, but under. */
.tlc-btn-accent {
  background-color: var(--tlc-accent-deep) !important;
  color: var(--acxpa-ds-white) !important;
  border-color: var(--tlc-accent-deep);
  font-weight: 600;
}

/* Was `background-color: #ffc61a` - a LIGHTER yellow, putting white text at
   1.57:1 on hover. The label effectively disappeared under the cursor.
   brightness() can only ever darken from here, so contrast improves on hover. */
.tlc-btn-accent:hover {
  background-color: var(--tlc-accent-deep) !important;
  border-color: var(--tlc-accent-deep);
  color: var(--acxpa-ds-white) !important;
  filter: brightness(0.88);
}

.tlc-btn-link {
  background: none;
  border: none;
  color: var(--tlc-primary) !important;
  padding: 8px 4px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-decoration: none !important;
}

.tlc-btn-link:hover {
  text-decoration: underline !important;
}

.tlc-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tlc-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--tlc-border);
}

.tlc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tlc-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.tlc-back-link:hover {
  text-decoration: underline;
}

.tlc-back-link::before {
  content: "\2190\00a0";
}

.tlc-output-toolbar {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* ============================================================
   OUTPUT GUIDE
   ============================================================ */
.tlc-output {
  background: var(--tlc-bg-card);
  border: 1px solid var(--tlc-border);
  border-radius: var(--tlc-radius-lg);
  padding: 32px 36px;
  box-shadow: var(--tlc-shadow-sm);
}

.tlc-output-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--tlc-primary);
}

.tlc-output-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tlc-primary);
  margin-bottom: 6px;
}

.tlc-output-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--tlc-text) !important;
  line-height: 1.2 !important;
}

.tlc-output-meta {
  font-size: 13px;
  color: var(--tlc-text-muted);
  margin-top: 8px;
}

.tlc-output-section {
  margin-bottom: 32px;
}

.tlc-output-section:last-child {
  margin-bottom: 0;
}

.tlc-output-h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--tlc-text) !important;
  margin: 0 0 14px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tlc-border);
}

.tlc-output-h3 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--tlc-text) !important;
  margin: 24px 0 10px !important;
}

.tlc-output-h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--tlc-primary) !important;
  margin: 18px 0 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tlc-output-section p {
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: var(--tlc-text) !important;
  margin: 0 0 12px !important;
}

.tlc-output-section ul,
.tlc-output-section ol {
  padding-left: 24px;
  margin: 8px 0 16px;
}

.tlc-output-section li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tlc-text);
  margin-bottom: 6px;
}

/* Diagnostic reading */
.tlc-diagnostic {
  background: var(--tlc-primary-light);
  border-left: 4px solid var(--tlc-primary);
  padding: 18px 22px;
  border-radius: var(--tlc-radius-md);
  margin-bottom: 16px;
}

.tlc-diagnostic-headline {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--tlc-primary-dark) !important;
  margin: 0 0 10px !important;
}

.tlc-diagnostic p {
  margin-bottom: 10px !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.tlc-diagnostic p:last-child {
  margin-bottom: 0 !important;
}

/* Framework explanation block */
.tlc-framework {
  background: var(--tlc-bg-subtle);
  border-radius: var(--tlc-radius-md);
  padding: 18px 22px;
  margin-bottom: 16px;
}

.tlc-framework-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--tlc-text) !important;
  margin: 0 0 10px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tlc-framework-name::before {
  content: "\1F4CB";
  font-size: 18px;
}

.tlc-framework p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin-bottom: 10px !important;
}

.tlc-framework strong {
  color: var(--tlc-primary);
}

/* Flag callouts */
.tlc-flag {
  border-radius: var(--tlc-radius-md);
  padding: 16px 20px;
  margin: 16px 0;
  border-left: 4px solid;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.tlc-flag-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.tlc-flag-content {
  flex: 1;
}

.tlc-flag-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
}

.tlc-flag-body {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.tlc-flag-warning {
  background: var(--tlc-warning-bg);
  border-left-color: var(--tlc-warning-border);
  color: var(--tlc-warning-text);
}

.tlc-flag-warning .tlc-flag-title {
  color: var(--tlc-warning-text) !important;
}

.tlc-flag-danger {
  background: var(--tlc-danger-bg);
  border-left-color: var(--tlc-danger-border);
  color: var(--tlc-danger-text);
}

.tlc-flag-danger .tlc-flag-title {
  color: var(--tlc-danger-text) !important;
}

.tlc-flag-info {
  background: var(--tlc-info-bg);
  border-left-color: var(--tlc-info-border);
  color: var(--tlc-info-text);
}

.tlc-flag-info .tlc-flag-title {
  color: var(--tlc-info-text) !important;
}

.tlc-flag-neutral {
  background: var(--acxpa-ds-cloud);
  border-left-color: var(--acxpa-ds-slate);
  color: var(--tlc-text);
}

.tlc-flag-neutral .tlc-flag-title {
  color: var(--tlc-text-dark) !important;
}

/* Quote/suggestion lists */
.tlc-quote-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 !important;
}

.tlc-quote-list li {
  background: var(--tlc-bg-subtle);
  border-left: 3px solid var(--tlc-primary);
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  border-radius: 0 var(--tlc-radius-sm) var(--tlc-radius-sm) 0;
  font-style: italic;
  color: var(--tlc-text);
  font-size: 15px;
  line-height: 1.6;
}

/* GROW phase blocks */
.tlc-grow-phase {
  background: var(--tlc-bg-card);
  border: 1px solid var(--tlc-border);
  border-radius: var(--tlc-radius-md);
  padding: 18px 20px;
  margin-bottom: 14px;
}

.tlc-grow-phase-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--tlc-primary);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.tlc-grow-phase-intro {
  font-size: 15px !important;
  color: var(--tlc-text-muted) !important;
  margin-bottom: 12px !important;
  font-style: italic;
}

.tlc-grow-sublabel {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tlc-text-muted);
  margin-top: 14px;
  margin-bottom: 6px;
}

.tlc-listen-block {
  background: var(--tlc-bg-subtle);
  padding: 12px 16px;
  border-radius: var(--tlc-radius-sm);
  margin-top: 10px;
  font-size: 14.5px;
}

.tlc-listen-block strong {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tlc-text-muted);
  margin-bottom: 6px;
}

.tlc-listen-block ul {
  margin: 0 !important;
  padding-left: 18px !important;
}

.tlc-listen-block li {
  font-size: 14.5px !important;
  margin-bottom: 4px !important;
}

/* STAR template block */
.tlc-star-block {
  background: var(--tlc-accent-light);
  border-left: 3px solid var(--tlc-accent);
  padding: 14px 18px;
  border-radius: 0 var(--tlc-radius-sm) var(--tlc-radius-sm) 0;
  margin: 12px 0;
  font-size: 15px;
  line-height: 1.7;
}

.tlc-star-block strong {
  color: var(--tlc-accent);
}

/* SMART goal template */
.tlc-smart-template {
  background: var(--tlc-success-bg);
  border-left: 3px solid var(--tlc-success-border);
  padding: 14px 18px;
  border-radius: 0 var(--tlc-radius-sm) var(--tlc-radius-sm) 0;
  margin: 12px 0;
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
}

/* Avoid blocks */
.tlc-avoid {
  background: var(--tlc-danger-bg);
  border-left: 3px solid var(--tlc-danger-border);
  padding: 12px 16px;
  border-radius: 0 var(--tlc-radius-sm) var(--tlc-radius-sm) 0;
  margin: 12px 0;
  font-size: 14.5px;
  color: var(--tlc-danger-text);
}

.tlc-avoid strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tlc-avoid ul {
  margin: 0 !important;
  padding-left: 18px !important;
}

.tlc-avoid li {
  font-size: 14.5px !important;
  color: var(--tlc-danger-text) !important;
  margin-bottom: 4px !important;
}

/* Checklist items */
.tlc-checklist {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.tlc-checklist li {
  padding: 6px 0 !important;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.6;
}

.tlc-checklist-marker {
  color: var(--tlc-primary);
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Resource cards */
.tlc-resource-card {
  background: var(--tlc-bg-card);
  border: 1px solid var(--tlc-border);
  border-radius: var(--tlc-radius-md);
  padding: 16px 20px;
  margin-bottom: 12px;
}

.tlc-resource-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.tlc-resource-tag-free {
  background: var(--tlc-success-bg);
  color: var(--tlc-success-text);
}

.tlc-resource-tag-paid {
  background: var(--tlc-primary-light);
  color: var(--tlc-primary-dark);
}

.tlc-resource-tag-self-paced {
  background: var(--tlc-warning-bg);
  color: var(--tlc-warning-text);
}

.tlc-resource-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  color: var(--tlc-text) !important;
}

.tlc-resource-title a {
  color: var(--tlc-primary) !important;
  text-decoration: none !important;
}

.tlc-resource-title a:hover {
  text-decoration: underline !important;
}

.tlc-resource-trainer {
  font-size: 13px;
  color: var(--tlc-text-muted);
  margin-bottom: 6px;
}

.tlc-resource-summary {
  font-size: 14px !important;
  color: var(--tlc-text-muted) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Channel-aware block */
.tlc-channel-block {
  background: var(--tlc-bg-subtle);
  border-radius: var(--tlc-radius-md);
  padding: 14px 18px;
  margin: 12px 0;
}

.tlc-channel-block-intro {
  font-size: 14px !important;
  color: var(--tlc-text-muted) !important;
  margin: 0 0 10px !important;
  font-style: italic;
}

.tlc-channel-block ul {
  margin: 0 !important;
  padding-left: 20px !important;
}

.tlc-channel-block li {
  font-size: 14px !important;
  margin-bottom: 4px !important;
}

/* Personal notes */
.tlc-notes {
  background: var(--tlc-bg-subtle);
  border-radius: var(--tlc-radius-md);
  padding: 16px 18px;
  margin-top: 16px;
}

.tlc-notes-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--tlc-border);
  border-radius: var(--tlc-radius-sm);
  background: var(--tlc-bg-card);
  resize: vertical;
}

.tlc-notes-textarea:focus-visible {
  outline: 2px solid var(--tlc-focus);
  outline-offset: 2px;
  border-color: var(--tlc-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acxpa-ds-teal-700) 12%, transparent);
}

/* Save actions */
.tlc-save-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--tlc-border);
  flex-wrap: wrap;
}

.tlc-save-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--tlc-radius-sm);
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}

.tlc-save-status-success {
  background: var(--tlc-success-bg);
  color: var(--tlc-success-text);
  border: 1px solid var(--tlc-success-border);
}

.tlc-save-status-error {
  background: var(--tlc-danger-bg);
  color: var(--tlc-danger-text);
  border: 1px solid var(--tlc-danger-border);
}

.tlc-save-status-loading {
  background: var(--tlc-info-bg);
  color: var(--tlc-info-text);
  border: 1px solid var(--tlc-info-border);
}

/* Placeholder span (for unfilled template tokens like [date]) */
.tlc-placeholder {
  color: var(--tlc-accent);
  font-style: italic;
  font-weight: 500;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .tlc-back-link,
  .tlc-output-toolbar,
  .tlc-save-actions,
  .tlc-form-actions,
  .tlc-header-actions,
  .tlc-save-status {
    display: none !important;
  }

  .tlc-output {
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .tlc-page-wrapper {
    background: var(--acxpa-ds-white) !important;
  }
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .tlc-container {
    padding: 20px 14px 60px;
  }

  .tlc-page-wrapper .tlc-h1 {
    font-size: 26px !important;
  }

  .tlc-output {
    padding: 22px 18px;
  }

  .tlc-output-title {
    font-size: 22px !important;
  }

  .tlc-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .tlc-form-actions .tlc-btn {
    width: 100%;
    justify-content: center;
  }

  .tlc-save-actions {
    flex-direction: column;
  }

  .tlc-save-actions .tlc-btn {
    width: 100%;
    justify-content: center;
  }

  .tlc-output-toolbar {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* ============================================================
   HISTORY PAGE — My Saved Coaching Guides
   ============================================================ */
.tlc-history-view .tlc-history-actions-top {
  margin: 0 0 24px;
}

.tlc-history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

.tlc-history-card {
  background: var(--acxpa-ds-white);
  border: 1px solid var(--tlc-border);
  border-radius: var(--tlc-radius-md);
  padding: 18px 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tlc-history-card:hover {
  border-color: var(--tlc-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acxpa-ds-teal-700) 6%, transparent);
}

.tlc-history-card-meta {
  margin-bottom: 8px;
}

.tlc-history-card-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--acxpa-ds-teal-50);
  color: var(--tlc-primary);
}

.tlc-history-cat-behavioural {
  background: var(--acxpa-ds-warning-tint);
  color: var(--acxpa-ds-warning-deep);
}

.tlc-history-cat-developmental {
  background: var(--acxpa-ds-success-tint);
  color: var(--acxpa-ds-success-deep);
}

.tlc-history-cat-general {
  background: var(--acxpa-ds-info-tint);
  color: var(--acxpa-ds-info-deep);
}

.tlc-history-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--tlc-text);
  margin: 0 0 6px;
  line-height: 1.35;
}

.tlc-history-card-dates {
  font-size: 13px;
  color: var(--tlc-text-muted);
  margin: 0 0 14px;
}

.tlc-history-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--tlc-border);
  padding-top: 12px;
}

.tlc-history-card-actions .tlc-btn {
  font-size: 13px;
  padding: 7px 12px;
}

.tlc-btn-text {
  background: transparent !important;
  border: none !important;
  color: var(--tlc-accent-deep) !important;   /* was #c5524a = 4.49:1, just under the floor */
  padding: 7px 8px !important;
  text-decoration: underline;
}

.tlc-btn-text:hover {
  color: var(--tlc-text) !important;
  background: transparent !important;
}

/* Empty state */
.tlc-empty-state {
  background: var(--tlc-surface-soft);
  border-radius: var(--tlc-radius-md);
  padding: 48px 32px;
  text-align: center;
}

.tlc-empty-state h2 {
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--tlc-text);
}

.tlc-empty-state p {
  font-size: 16px;
  color: var(--tlc-text-muted);
  max-width: 520px;
  margin: 0 auto 24px;
  line-height: 1.55;
}

@media (max-width: 600px) {
  .tlc-history-list {
    grid-template-columns: 1fr;
  }
  .tlc-history-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tlc-history-card-actions .tlc-btn {
    text-align: center;
  }
}

/* ===========================================================================
   Round 2: Accordions, new resource section, allocation callout, ACXPA courses
   =========================================================================== */

/* --------------------- Accordion --------------------- */
.tlc-accordion {
  border: 1px solid var(--tlc-border);
  border-radius: 8px;
  margin-bottom: 16px;
  background: var(--acxpa-ds-white);
}

.tlc-accordion-summary {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--tlc-text);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.tlc-accordion-summary:hover {
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 3%, transparent);
}

.tlc-accordion-summary:focus {
  outline: 2px solid var(--tlc-primary, #0F4F5C);
  outline-offset: -2px;
}

.tlc-accordion-title {
  font-size: 18px;
  font-weight: 700;
  flex: 1;
  line-height: 1.3;
}

.tlc-accordion-chevron {
  font-size: 18px;
  color: var(--tlc-text-muted);
  margin-left: 12px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tlc-accordion-open .tlc-accordion-chevron {
  transform: rotate(180deg);
}

.tlc-accordion-body {
  padding: 0 20px 20px;
}

.tlc-accordion-body[hidden] {
  display: none;
}

/* Add breathing room below accordion title */
.tlc-accordion-body > *:first-child {
  margin-top: 12px;
}

/* Suppress additional top margin on nested elements that already have spacing */
.tlc-accordion-body > p:first-child,
.tlc-accordion-body > .tlc-checklist:first-child,
.tlc-accordion-body > .tlc-diagnostic:first-child {
  margin-top: 12px;
}

/* ============================================================
   NESTED ACCORDIONS (H3 level within resource sections)
   ============================================================ */
/* Nested accordions get subtle background to visually distinguish from parent */
.tlc-accordion .tlc-accordion {
  background: var(--acxpa-ds-teal-50);
  border-color: var(--acxpa-ds-teal-100);
  margin-top: 16px;
}

.tlc-accordion .tlc-accordion-summary {
  background: var(--acxpa-ds-teal-50);
  font-size: 16px;
  padding: 14px 18px;
}

.tlc-accordion .tlc-accordion-summary:hover {
  background: var(--acxpa-ds-teal-100);
}

.tlc-accordion .tlc-accordion-title {
  font-size: 16px;
  font-weight: 600;
}

.tlc-accordion .tlc-accordion-body {
  padding: 0 18px 18px;
}

/* --------------------- Resource section subheads --------------------- */
.tlc-resource-intro {
  font-size: 14.5px;
  color: var(--tlc-text-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

.tlc-acxpa-subhead {
  margin-top: 8px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tlc-branch-intro {
  font-size: 14.5px;
  color: var(--tlc-text);
  margin: 8px 0 16px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--acxpa-ds-gold) 14%, transparent); /* gold tint */
  border-left: 3px solid var(--acxpa-ds-gold);
  border-radius: 0 4px 4px 0;
}

.tlc-branch-reinforcement {
  font-size: 14px;
  color: var(--tlc-text-muted);
  margin: 12px 0 0;
  font-style: italic;
}

.tlc-tl-completion-note {
  font-size: 14px;
  color: var(--tlc-text-muted);
  margin: 14px 0 0;
  font-style: italic;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 4%, transparent);
  border-radius: 4px;
}

/* --------------------- ACXPA self-paced course cards --------------------- */
.tlc-acxpa-course-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.tlc-acxpa-course-card {
  border: 1px solid var(--tlc-border);
  border-radius: 6px;
  padding: 14px 16px;
  background: var(--acxpa-ds-white);
  display: flex;
  flex-direction: column;
}

.tlc-acxpa-course-card.tlc-acxpa-micro {
  border-left: 3px solid var(--tlc-primary);
}

.tlc-acxpa-course-cat {
  font-size: 11px;
  color: var(--tlc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 600;
}

.tlc-acxpa-course-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tlc-primary, #0F4F5C);
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 6px;
}

.tlc-acxpa-course-title:hover {
  text-decoration: underline;
}

.tlc-acxpa-course-summary {
  font-size: 13.5px;
  color: var(--tlc-text-muted);
  margin: 4px 0 0;
  line-height: 1.45;
}

.tlc-bonus-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--acxpa-ds-warning-deep);   /* 6.45:1 - Gold Deep would be 4.26:1 at this 10px size */
  background: var(--acxpa-ds-gold-tint);
  padding: 1px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* --------------------- Allocation callout --------------------- */
.tlc-allocation-callout {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 4%, transparent); /* faint green tint */
  border: 1px solid color-mix(in srgb, var(--acxpa-ds-teal-700) 18%, transparent);
  border-radius: 8px;
}

.tlc-allocation-callout-warning {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--acxpa-ds-warning-tint); /* amber tint */
  border: 1px solid var(--acxpa-ds-gold);
  border-radius: 8px;
}

.tlc-allocation-callout-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.tlc-allocation-callout-content {
  flex: 1;
}

.tlc-allocation-callout-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tlc-text);
  margin-bottom: 8px;
}

.tlc-allocation-callout-body {
  font-size: 14.5px;
  color: var(--tlc-text);
  line-height: 1.55;
}

.tlc-allocation-callout-body p {
  margin: 0 0 8px;
}

.tlc-allocation-callout-body p:last-child {
  margin-bottom: 0;
}

.tlc-allocation-callout-footer {
  font-size: 13px;
  color: var(--tlc-text-muted);
  margin-top: 10px;
}

/* --------------------- Facilitator card tag --------------------- */
.tlc-resource-tag-business {
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 10%, transparent);
  color: var(--acxpa-ds-teal-700);
}

.tlc-facilitator-card {
  border-left: 3px solid var(--acxpa-ds-teal-700);
}

/* --------------------- Framework glossary link --------------------- */
.tlc-framework-glossary {
  font-size: 13.5px;
  margin: 6px 0 0;
}

.tlc-framework-glossary a {
  color: var(--tlc-primary, #0F4F5C);
  text-decoration: none;
  font-weight: 600;
}

.tlc-framework-glossary a:hover {
  text-decoration: underline;
}

/* --------------------- Mobile --------------------- */
@media (max-width: 600px) {
  .tlc-acxpa-course-list {
    grid-template-columns: 1fr;
  }
  .tlc-allocation-callout {
    flex-direction: column;
    gap: 10px;
  }
  .tlc-accordion-summary {
    padding: 14px 16px;
  }
  .tlc-accordion-title {
    font-size: 16px;
  }
}

/* ===========================================================================
   Round 3: Accordion polish, landing card colors, "Included" badge,
              framework link colour, micro-videos spacing, max-width fix,
              form validation error highlight
   =========================================================================== */

/* --------------------- Accordion: subtle coloured background --------------------- */
.tlc-accordion {
  background: var(--acxpa-ds-teal-50); /* very pale blue-grey wash */
  border-color: var(--acxpa-ds-teal-100);
}

.tlc-accordion-summary:hover {
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 4%, transparent); /* deep teal tint */
}

.tlc-accordion.tlc-accordion-open {
  background: var(--acxpa-ds-white);
  border-color: var(--tlc-primary, #0F4F5C);
}

.tlc-accordion.tlc-accordion-open .tlc-accordion-summary {
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 6%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--acxpa-ds-teal-700) 12%, transparent);
  border-radius: 8px 8px 0 0;
}

/* Body padding when accordion is open */
.tlc-accordion-body {
  padding: 20px;
  background: var(--acxpa-ds-white);
  border-radius: 0 0 8px 8px;
}

/* --------------------- Framework glossary link colour fix (item 7) --------------------- */
/* Previously the GROW Goal: Reality: etc. labels could read like links.
   Make sure framework strong terms render distinct from link colour. */
.tlc-framework strong {
  color: var(--tlc-text);
}

/* The "Read more about X →" link below frameworks */
.tlc-framework-glossary {
  margin-top: 12px;
}

.tlc-framework-glossary a {
  color: var(--tlc-primary, #0F4F5C);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 8%, transparent);
  border-radius: 4px;
  font-size: 13.5px;
}

.tlc-framework-glossary a:hover {
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 14%, transparent);
  text-decoration: none;
}

/* --------------------- Micro-videos spacing (item 22) --------------------- */
.tlc-micro-videos-header {
  margin-top: 28px !important;
  padding-top: 16px;
  border-top: 1px dashed color-mix(in srgb, var(--acxpa-ds-teal-700) 16%, transparent);
  font-size: 16px !important;
}

/* --------------------- "Included" badge (replaces "Business Members only", item 20) --------------------- */
.tlc-resource-tag-included {
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 10%, transparent);
  color: var(--acxpa-ds-teal-700);
  font-weight: 700;
}

/* --------------------- Form validation error highlight (item 18) --------------------- */
.tlc-question.tlc-question-error {
  background: color-mix(in srgb, var(--acxpa-ds-error) 5%, transparent);
  border: 1px solid var(--acxpa-ds-error);
  border-radius: 6px;
  padding: 12px;
  position: relative;
}

.tlc-question.tlc-question-error::before {
  content: "\26A0\FE0F\00a0Required";
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--acxpa-ds-error);
  color: var(--acxpa-ds-white);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}

.tlc-question.tlc-question-error .tlc-q-label {
  color: var(--acxpa-ds-error);
}

/* --------------------- Landing page scenario cards (item 25, option A) --------------------- */
/* Add a coloured top border + icon per category, with subtle bg wash */
.tlc-scenario-card {
  position: relative;
  border-top: 4px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tlc-scenario-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--acxpa-ds-teal-700) 10%, transparent);
}

.tlc-scenario-card-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 12px;
}

.tlc-scenario-card-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--tlc-text);
  margin-bottom: 6px;
}

.tlc-scenario-card-desc {
  font-size: 14px;
  color: var(--tlc-text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.tlc-scenario-card-cta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--tlc-primary, #0F4F5C);
  text-transform: uppercase;
  margin-top: auto;
}

/* Category-specific top border colours */
.tlc-scenario-card-cat--performance {
  border-top-color: var(--acxpa-ds-error); /* red — performance issues */
}
.tlc-scenario-card-cat--performance:hover {
  border-top-color: var(--acxpa-ds-error-deep);
}

.tlc-scenario-card-cat--behavioural {
  border-top-color: var(--acxpa-ds-gold); /* orange — behavioural matters */
}
.tlc-scenario-card-cat--behavioural:hover {
  border-top-color: var(--acxpa-ds-gold-deep);
}

.tlc-scenario-card-cat--developmental {
  border-top-color: var(--acxpa-ds-success); /* green — growth/development */
}
.tlc-scenario-card-cat--developmental:hover {
  border-top-color: var(--acxpa-ds-success-deep);
}

.tlc-scenario-card-cat--general {
  border-top-color: var(--tlc-primary); /* deep teal — general */
}
.tlc-scenario-card-cat--general:hover {
  border-top-color: var(--acxpa-ds-teal-900);
}

/* Subtle category wash on the card background */
.tlc-scenario-card-cat--performance {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acxpa-ds-error) 3%, transparent) 0%, var(--acxpa-ds-white) 60%);
}
.tlc-scenario-card-cat--behavioural {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acxpa-ds-gold) 7%, transparent) 0%, var(--acxpa-ds-white) 60%);
}
.tlc-scenario-card-cat--developmental {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acxpa-ds-success) 3%, transparent) 0%, var(--acxpa-ds-white) 60%);
}
.tlc-scenario-card-cat--general {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acxpa-ds-teal-700) 3%, transparent) 0%, var(--acxpa-ds-white) 60%);
}

/* --------------------- History page max-width fix (item 24) --------------------- */
.tlc-page-wrapper .tlc-lead,
.tlc-history-page .tlc-lead {
  max-width: 100% !important;
}

/* --------------------- Save status link styling --------------------- */
.tlc-save-status a {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}

.tlc-save-status a:hover {
  text-decoration: none;
}

/* --------------------- Allocation callout — slightly more emphasis at top of section --------------------- */
.tlc-allocation-callout {
  margin-top: 0;
  margin-bottom: 24px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--acxpa-ds-teal-700) 25%, transparent);
}

/* ===========================================================================
   Round 4: Chart, yes-note, allocation accordion polish, max-width hammer
   =========================================================================== */

/* --------------------- Max-width hammer for history intro (item 24) ---------------------
   FLAG - PLEASE CONFIRM. Round 3 above sets `.tlc-page-wrapper .tlc-lead` and
   `.tlc-history-page .tlc-lead` to `max-width: 100% !important`. This block then
   forces the history page back to 720px. The two rounds contradict each other,
   and 720px is what actually wins.
   You have said more than once that capping intro copy shunts it left and
   leaves dead space on the right. I have NOT touched it, because reverting it
   would undo whatever "item 24" was meant to solve in Round 4. Say the word and
   I will delete this block, which leaves the intro full width. */
body .tlc-history-page .tlc-header .tlc-lead,
body .tlc-history-page .tlc-lead,
.tlc-history-page p.tlc-lead {
  max-width: 720px !important;
  width: auto !important;
}

/* --------------------- Membership Yes-branch reinforcement note --------------------- */
.tlc-membership-yes-note {
  padding: 14px 18px;
  background: color-mix(in srgb, var(--acxpa-ds-success) 7%, transparent); /* faint green */
  border-left: 4px solid var(--acxpa-ds-success);
  border-radius: 0 6px 6px 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tlc-text);
  margin: 16px 0 24px;
}

/* --------------------- Metric comparison chart --------------------- */
.tlc-metric-chart {
  margin: 20px 0 28px;
  padding: 20px 22px;
  background: var(--acxpa-ds-cloud);
  border: 1px solid var(--acxpa-ds-teal-100);
  border-radius: 8px;
}

.tlc-metric-chart-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tlc-text);
  margin-bottom: 12px;
}

.tlc-metric-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.tlc-metric-chart-note {
  font-size: 12.5px;
  color: var(--tlc-text-muted);
  font-style: italic;
  margin-top: 10px;
  line-height: 1.5;
}

/* --------------------- Allocation callout — polish for the inline-at-top placement --------------------- */
.tlc-allocation-callout {
  padding: 20px 22px;
  background: color-mix(in srgb, var(--acxpa-ds-teal-700) 4%, transparent);
  border: 2px solid color-mix(in srgb, var(--acxpa-ds-teal-700) 20%, transparent);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 0 0 28px;
}

.tlc-allocation-callout-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

.tlc-allocation-callout-content {
  flex: 1;
}

.tlc-allocation-callout-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--tlc-text);
  margin-bottom: 10px;
  line-height: 1.3;
}

.tlc-allocation-callout-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tlc-text);
}

.tlc-allocation-callout-body p {
  margin: 0 0 10px;
}

.tlc-allocation-callout-body p:last-child {
  margin-bottom: 0;
}

.tlc-allocation-callout-footer {
  font-size: 13px;
  color: var(--tlc-text-muted);
  margin-top: 10px;
  font-style: italic;
}

/* --------------------- Output toolbar — saved-guides link styling --------------------- */
.tlc-output-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.tlc-output-toolbar .tlc-back-link {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tlc-primary, #0F4F5C);
  padding: 4px 0;
  text-decoration: none;
}

.tlc-output-toolbar .tlc-back-link:hover {
  text-decoration: underline;
}

/* --------------------- Mobile --------------------- */
@media (max-width: 600px) {
  .tlc-allocation-callout {
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
  }

  .tlc-metric-chart-svg {
    /* SVG viewBox handles scaling — but ensure container is full width */
    min-width: 0;
  }

  .tlc-output-toolbar {
    gap: 10px;
  }
}


/* --------------------- Goal Tracker Modal Integration (EGT styles) --------------------- */

.egt-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.egt-modal-visible {
  display: block;
}

.egt-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--tlc-scrim);
  animation: fadeIn 0.2s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.egt-modal-content {
  position: relative;
  max-width: 600px;
  margin: 60px auto;
  background: var(--acxpa-ds-white);
  border-radius: var(--tlc-radius, 8px);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--acxpa-ds-teal-700) 28%, transparent);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.egt-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--tlc-border);
}

.egt-modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: var(--tlc-primary);
}

.egt-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--tlc-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.egt-modal-close:hover {
  background: var(--tlc-bg-subtle, #F4F7F7);
}

.egt-modal-body {
  padding: 24px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  background: transparent !important;
}

.egt-modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  border-top: 1px solid var(--tlc-border) !important;
  background: var(--tlc-bg-subtle, #F4F7F7) !important;
}

.egt-form-group {
  margin-bottom: 20px;
}

.egt-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--tlc-text);
  margin-bottom: 6px;
}

.egt-form-group input[type="text"],
.egt-form-group input[type="date"],
.egt-form-group textarea,
.egt-form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tlc-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.egt-form-group textarea {
  resize: vertical;
}

.egt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.egt-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--tlc-text);
  cursor: pointer;
  user-select: none;
}

.egt-checkbox-label input[type="checkbox"] {
  cursor: pointer;
}

.egt-btn-primary,
.egt-btn-secondary {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.egt-btn-primary {
  background: var(--tlc-primary);
  color: var(--acxpa-ds-white);
}

.egt-btn-primary:hover {
  background: var(--tlc-primary-dark, #062831);
}

.egt-btn-secondary {
  background: var(--tlc-bg-card);
  color: var(--tlc-text);
  border: 1px solid var(--tlc-border);
}

.egt-btn-secondary:hover {
  background: var(--tlc-bg-subtle, #F4F7F7);
}

body.egt-modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .egt-form-row {
    grid-template-columns: 1fr;
  }
  
  .egt-modal-content {
    margin: 20px;
    max-width: calc(100% - 40px);
  }
}

/* ===========================================================================
   Goal Tracker integration callout (landing view)

   APPEND this block to the END of:
   /wp-content/themes/kleo-child/tl-coaching-guide/css/tl-coaching-guide.css

   Warm accent palette (matches the "Add to Goal Tracker" button) so members
   visually connect the callout with the action they'll take after generating
   a guide. Uses a soft warm tint as the background — never brand green.
   =========================================================================== */
.tlc-page-wrapper .tlc-egt-callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 32px;
  padding: 18px 22px;
  background: var(--acxpa-ds-clay-tint);                                /* soft warm tint */
  border: 1px solid var(--tlc-accent-light, #F7E3DC);
  border-left: 4px solid var(--tlc-accent, #C05A42);
  border-radius: var(--tlc-radius-md, 8px);
}

.tlc-page-wrapper .tlc-egt-callout-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.tlc-page-wrapper .tlc-egt-callout-content {
  flex: 1;
  min-width: 0;
}

.tlc-page-wrapper .tlc-egt-callout-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--tlc-text, #14252A) !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

.tlc-page-wrapper .tlc-egt-callout-body p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--tlc-text-muted, #5E7075) !important;
  margin: 0 0 8px !important;
}

.tlc-page-wrapper .tlc-egt-callout-body p:last-child {
  margin-bottom: 0 !important;
}

.tlc-page-wrapper .tlc-egt-callout-body a {
  color: var(--tlc-accent-deep) !important;   /* 5.95:1 on the Clay tint */
  font-weight: 600;
  text-decoration: underline;
}

/* Keeps the underline on hover - removing it is the one state where the link
   stops being identifiable as a link (WCAG 1.4.1). */
.tlc-page-wrapper .tlc-egt-callout-body a:hover {
  color: var(--tlc-text) !important;
  text-decoration: underline;
}

.tlc-page-wrapper .tlc-egt-callout-body strong {
  color: var(--tlc-text, #14252A) !important;
  font-weight: 700;
}

@media (max-width: 600px) {
  .tlc-page-wrapper .tlc-egt-callout {
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
  }
}