/* BALIA Trade Tools v1.1.4 — shared styles.
 * Palette: navy #0A2540, warm cream #F7F4EE, white, dark gold #85681E
 * (gold text only on light backgrounds). Mobile-first, WCAG-conscious. */

.balia-tt {
    --balia-navy: #0A2540;
    --balia-cream: #F7F4EE;
    --balia-gold: #85681E;
    --balia-ink: #1c2733;
    --balia-muted: #5b6b7c;
    --balia-line: #e3ddd0;
    --balia-good: #1e6e4e;
    --balia-gap: #a33b2e;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--balia-ink);
    max-width: 880px;
    margin: 0 auto;
}

.balia-tt * { box-sizing: border-box; }

.balia-tt-card {
    background: #fff;
    border: 1px solid var(--balia-line);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(10, 37, 64, 0.06);
    padding: 1.75rem;
    margin: 0 0 1.25rem;
}

.balia-tt-eyebrow {
    color: var(--balia-gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.balia-tt-h2 {
    color: var(--balia-navy);
    font-size: 1.65rem;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

.balia-tt-h3 {
    color: var(--balia-navy);
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}

.balia-tt-lead { font-size: 1.05rem; color: var(--balia-muted); margin: 0 0 1.25rem; }
.balia-tt-disclaimer { font-size: 0.85rem; color: var(--balia-muted); margin: 1rem 0 0; }

.balia-tt-btn {
    display: inline-block;
    background: var(--balia-navy);
    color: #fff;
    border: 2px solid var(--balia-navy);
    border-radius: 999px;
    padding: 0.7rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}
.balia-tt-btn:hover { background: #12325a; border-color: #12325a; color: #fff; }
.balia-tt-btn-ghost { background: transparent; color: var(--balia-navy); }
.balia-tt-btn-ghost:hover { background: var(--balia-cream); color: var(--balia-navy); }
.balia-tt-btn-small { padding: 0.45rem 1rem; font-size: 0.9rem; }

.balia-tt :focus-visible {
    outline: 3px solid var(--balia-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- progress ---------- */
.balia-tt-progress {
    height: 10px;
    background: var(--balia-cream);
    border: 1px solid var(--balia-line);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.balia-tt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--balia-gold), #c9a227);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.balia-tt-qcount { font-size: 0.9rem; color: var(--balia-muted); margin: 0 0 0.25rem; }
.balia-tt-progresstext { margin: 0.5rem 0 0; }

/* ---------- questions ---------- */
.balia-tt-fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.balia-tt-question { font-size: 1.25rem; font-weight: 700; color: var(--balia-navy); padding: 0; margin-bottom: 0.75rem; }
.balia-tt-help { margin: 0 0 1rem; font-size: 0.95rem; }
.balia-tt-help summary { cursor: pointer; color: var(--balia-gold); font-weight: 600; }
.balia-tt-help p { margin: 0.5rem 0 0; color: var(--balia-muted); }

.balia-tt-options { display: grid; gap: 0.6rem; }
.balia-tt-option { position: relative; }
.balia-tt-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.balia-tt-option label {
    display: block;
    border: 2px solid var(--balia-line);
    border-radius: 10px;
    padding: 0.8rem 1rem 0.8rem 2.9rem;
    cursor: pointer;
    background: #fff;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.balia-tt-option label::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--balia-muted);
    border-radius: 50%;
    background: #fff;
}
.balia-tt-option input:checked + label {
    border-color: var(--balia-navy);
    background: var(--balia-cream);
}
.balia-tt-option input:checked + label::before {
    border-color: var(--balia-navy);
    background: radial-gradient(circle, var(--balia-navy) 0 45%, #fff 50%);
}
.balia-tt-option input:focus-visible + label { outline: 3px solid var(--balia-gold); outline-offset: 2px; }

.balia-tt-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.balia-tt-error { color: var(--balia-gap); font-weight: 600; margin: 0.5rem 0; }

/* ---------- forms ---------- */
.balia-tt-form { display: grid; gap: 1.1rem; }
.balia-tt-grid2 { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .balia-tt-grid2 { grid-template-columns: 1fr 1fr; } }

.balia-tt-field label { display: block; font-weight: 600; color: var(--balia-navy); margin-bottom: 0.35rem; }
.balia-tt-field input[type="text"],
.balia-tt-field select,
.balia-tt-addtask input[type="text"] {
    width: 100%;
    border: 2px solid var(--balia-line);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--balia-ink);
}
.balia-tt-fieldhelp { font-size: 0.88rem; color: var(--balia-muted); margin: 0.3rem 0 0; }
.balia-tt-legend { font-weight: 700; color: var(--balia-navy); padding: 0; margin-bottom: 0.5rem; }

.balia-tt-radios { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }
.balia-tt-radio { display: flex; align-items: center; gap: 0.5rem; }
.balia-tt-radio input { width: 1.15rem; height: 1.15rem; accent-color: var(--balia-navy); }

.balia-tt-checks { display: grid; gap: 0.6rem; }
.balia-tt-check { display: flex; gap: 0.7rem; align-items: flex-start; border: 1px solid var(--balia-line); border-radius: 10px; padding: 0.7rem 0.9rem; }
.balia-tt-check input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: var(--balia-navy); flex-shrink: 0; }
.balia-tt-check label { cursor: pointer; }
.balia-tt-check-desc { display: block; font-size: 0.9rem; color: var(--balia-muted); font-weight: 400; }

/* ---------- results ---------- */
.balia-tt-bandcard { background: var(--balia-navy); border-color: var(--balia-navy); color: #fff; }
.balia-tt-bandcard .balia-tt-h2,
.balia-tt-bandcard .balia-tt-eyebrow { color: #fff; }
.balia-tt-bandcard .balia-tt-lead { color: rgba(255, 255, 255, 0.85); }
.balia-tt-score { font-size: 1.2rem; margin: 0 0 0.75rem; }
.balia-tt-score strong { font-size: 1.6rem; }

.balia-tt-dims { display: grid; gap: 0.9rem; }
.balia-tt-dim-head { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; margin-bottom: 0.3rem; }
.balia-tt-dim-pct { color: var(--balia-navy); }
.balia-tt-dim-unknown { color: var(--balia-muted); font-style: italic; font-weight: 400; }
.balia-tt-bar { height: 10px; background: var(--balia-cream); border: 1px solid var(--balia-line); border-radius: 999px; overflow: hidden; }
.balia-tt-bar-fill { height: 100%; background: var(--balia-navy); border-radius: 999px; }

.balia-tt-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.balia-tt-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.8rem; border-radius: 8px; background: var(--balia-cream); }
.balia-tt-list-good li { border-left: 4px solid var(--balia-good); }
.balia-tt-list-gap li { border-left: 4px solid var(--balia-gap); }
.balia-tt-list span { color: var(--balia-muted); white-space: nowrap; }

.balia-tt-unknownbox { border-left: 4px solid var(--balia-gold); }
.balia-tt-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.7rem; }
.balia-tt-method p { color: var(--balia-muted); }
.balia-tt-meta { font-size: 0.9rem; color: var(--balia-muted); }

.balia-tt-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.25rem; }

.balia-tt-cta { background: var(--balia-cream); text-align: center; }
.balia-tt-cta p { color: var(--balia-muted); }

/* ---------- document output ---------- */
.balia-tt-scenario { display: grid; gap: 0.6rem; margin: 1rem 0; }
.balia-tt-scenario > div { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; }
.balia-tt-scenario dt { font-weight: 600; color: var(--balia-navy); }
.balia-tt-scenario dd { margin: 0; }
.balia-tt-tailored { background: var(--balia-cream); border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.95rem; }
.balia-tt-workinglabel { border: 2px dashed var(--balia-gold); border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.92rem; color: var(--balia-ink); }

.balia-tt-doclist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; counter-reset: docitem; }
.balia-tt-doclist li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.45rem 0; border-bottom: 1px solid var(--balia-cream); }
.balia-tt-doclist li:last-child { border-bottom: 0; }
.balia-tt-doclist input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--balia-navy); flex-shrink: 0; }
.balia-tt-doclist label { cursor: pointer; }
.balia-tt-docdesc { color: var(--balia-muted); margin: 0 0 0.75rem; }

/* ---------- roadmap ---------- */
.balia-tt-phase-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.balia-tt-slot { font-size: 0.85rem; font-weight: 700; color: var(--balia-gold); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.balia-tt-phasedesc { color: var(--balia-muted); margin: 0 0 1rem; }
.balia-tt-typenote, .balia-tt-savednote { font-size: 0.9rem; color: var(--balia-muted); margin: 0.75rem 0 0; }

.balia-tt-tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.balia-tt-task { display: flex; gap: 0.7rem; align-items: flex-start; border: 1px solid var(--balia-line); border-radius: 10px; padding: 0.7rem 0.8rem; }
.balia-tt-task > input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--balia-navy); flex-shrink: 0; }
.balia-tt-task.is-done { background: var(--balia-cream); }
.balia-tt-task.is-done .balia-tt-task-title { text-decoration: line-through; color: var(--balia-muted); }
.balia-tt-task-body { flex: 1; min-width: 0; }
.balia-tt-task-title { font-weight: 600; cursor: pointer; display: block; }
.balia-tt-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; background: var(--balia-cream); color: var(--balia-navy); border: 1px solid var(--balia-line); border-radius: 999px; padding: 0.15rem 0.6rem; margin-top: 0.35rem; }
.balia-tt-badge-reg { background: #fff8e6; border-color: var(--balia-gold); color: var(--balia-gold); }
.balia-tt-taskmeta { margin-top: 0.4rem; font-size: 0.9rem; }
.balia-tt-taskmeta summary { cursor: pointer; color: var(--balia-muted); }
.balia-tt-taskmeta dl { margin: 0.5rem 0 0; display: grid; gap: 0.3rem; }
.balia-tt-taskmeta dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 0.75rem; }
.balia-tt-taskmeta dt { font-weight: 600; color: var(--balia-navy); }
.balia-tt-taskmeta dd { margin: 0; }
.balia-tt-task-remove { background: none; border: 0; color: var(--balia-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 6px; flex-shrink: 0; }
.balia-tt-task-remove:hover { color: var(--balia-gap); background: #fbeeee; }

.balia-tt-addtask { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.balia-tt-sronly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 560px) {
    .balia-tt-card { padding: 1.25rem; }
    .balia-tt-h2 { font-size: 1.4rem; }
    .balia-tt-nav { flex-direction: column-reverse; align-items: stretch; }
    .balia-tt-nav .balia-tt-btn { text-align: center; }
    .balia-tt-scenario > div { grid-template-columns: 1fr; gap: 0.1rem; }
    .balia-tt-taskmeta dl > div { grid-template-columns: 1fr; gap: 0; }
    .balia-tt-addtask { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .balia-tt-progress-fill, .balia-tt-bar-fill, .balia-tt-tool-card { transition: none; }
    .balia-tt-tool-card:hover { transform: none; }
}

/* ---------- tools landing grid ---------- */
.balia-tt-wide { max-width: 1080px; }

.balia-tt-tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 860px) {
    .balia-tt-tools-grid { grid-template-columns: repeat(3, 1fr); }
}

.balia-tt-tool-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(10, 37, 64, 0.08);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.balia-tt-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.12);
}
.balia-tt-tool-step {
    color: var(--balia-gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}
.balia-tt-tool-title {
    color: var(--balia-navy);
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 0.75rem;
}
.balia-tt-tool-desc { color: #333; margin: 0 0 1.5rem; flex: 1 1 auto; }
.balia-tt-tool-cta { align-self: flex-start; }

.balia-tt-btn-gold { background: #c9a227; border-color: #c9a227; color: var(--balia-navy); }
.balia-tt-btn-gold:hover { background: #b8911f; border-color: #b8911f; color: var(--balia-navy); }

/* ---------- tool intro cards: generous breathing room ---------- */
.balia-tt-intro { padding: 2.5rem; }
.balia-tt-intro .balia-tt-eyebrow { margin: 0 0 1rem; }
.balia-tt-intro .balia-tt-h2 { margin: 0 0 1.25rem; }
.balia-tt-intro .balia-tt-lead { margin: 0 0 1.75rem; line-height: 1.75; }
.balia-tt-intro .balia-tt-btn { margin: 0 0 1.25rem; }
.balia-tt-intro .balia-tt-disclaimer { margin: 0; }
/* The intro title receives programmatic focus on load, which draws the gold
   :focus-visible ring. Keep the gold accent but give it breathing room so it
   does not hug the text like a tight pill. */
.balia-tt-h2:focus-visible { outline-offset: 6px; }

@media (max-width: 560px) {
    .balia-tt-intro { padding: 1.75rem; }
}

/* ---------- print ---------- */
@media print {
    .balia-tt-no-print,
    .balia-tt-actions,
    .balia-tt-addtask,
    .balia-tt-task-remove,
    .balia-tt-cta { display: none !important; }
    .balia-tt { max-width: none; }
    .balia-tt-card { box-shadow: none; break-inside: avoid; border-color: #ccc; }
    .balia-tt-tool-card { box-shadow: none; break-inside: avoid; }
    .balia-tt-bandcard { background: #fff !important; color: #000 !important; border: 2px solid #000; }
    .balia-tt-bandcard .balia-tt-h2,
    .balia-tt-bandcard .balia-tt-eyebrow,
    .balia-tt-bandcard .balia-tt-lead { color: #000 !important; }
    .balia-tt-help { display: none; }
}

/* Fixed-header clearance: Bricks pages render the H1 outside our shortcode
   output, and the fixed header overlaps it on tool pages. Only pages whose
   content wrapper contains our shortcode output get the extra top padding.
   Bricks renders the wrapper as <article id="brx-content" role="main"> (no
   <main> element), so the role="main" selector is the one that matches. */
main:has([class*="balia-tt-"]),
[role="main"]:has([class*="balia-tt-"]) { padding-top: 140px; }
@media (max-width: 991px) {
  main:has([class*="balia-tt-"]),
  [role="main"]:has([class*="balia-tt-"]) { padding-top: 104px; }
}

/* Mobile H1 side padding: the Bricks-rendered page H1 sits outside our
   shortcode markup and has zero horizontal padding at mobile widths, so it
   touches the screen edges while the header logo and our cards are inset.
   Scoped to tool pages only via :has(). 20px matches the surrounding inset. */
@media (max-width: 991px) {
  [role="main"]:has([class*="balia-tt-"]) > h1,
  main:has([class*="balia-tt-"]) > h1,
  [role="main"]:has([class*="balia-tt-"]) h1.brxe-post-title,
  [role="main"]:has([class*="balia-tt-"]) h1.page-title {
    padding-left: 20px;
    padding-right: 20px;
  }
}