/* ==========================================================================
   Math Katas — Tips section styles
   Mirrors the iOS app's HelpView palette and table treatment.
   Load AFTER theme.css.
   ========================================================================== */

/* ----- Tips landing layout ----- */
.tips-hero {
    text-align: center;
    padding: var(--sp-9) 0 var(--sp-7);
    background:
        radial-gradient(ellipse at 50% 0%,
            color-mix(in srgb, var(--c-cta-grad-start) 22%, transparent) 0%,
            transparent 60%),
        var(--c-app-bg);
}
.tips-hero h1 {
    font-size: var(--fs-display);
    margin-bottom: var(--sp-4);
}
.tips-hero p.lede {
    font-size: 1.2rem;
    max-width: 52ch;
    margin: 0 auto var(--sp-5);
    color: var(--c-text-secondary);
}

/* ----- Rule grid (links to each rule page) ----- */
.rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}
.rule-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--c-surface);
    padding: var(--sp-5);
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--c-text-primary) 6%, transparent);
    box-shadow: var(--shadow-soft);
    transition:
        transform var(--t-med) var(--ease-spring),
        box-shadow var(--t-med) var(--ease-spring),
        border-color var(--t-fast) var(--ease-spring);
}
.rule-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: var(--c-accent);
}
.rule-card__num {
    display: inline-block;
    background: linear-gradient(90deg,
        var(--c-cta-grad-start) 0%, var(--c-cta-grad-end) 100%);
    color: #fff;
    width: 32px; height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: var(--sp-3);
}
.rule-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--sp-2);
}
.rule-card__sub {
    font-size: var(--fs-small);
    color: var(--c-text-secondary);
}
.rule-card--hard {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--c-highlight-fill) 70%, var(--c-surface)) 0%,
        var(--c-surface) 100%);
    border-color: color-mix(in srgb, var(--c-warning) 25%, transparent);
}

/* ----- Rule page header ----- */
.rule-page-header {
    padding: var(--sp-8) 0 var(--sp-5);
}
.breadcrumb {
    font-size: var(--fs-small);
    color: var(--c-text-secondary);
    margin-bottom: var(--sp-4);
}
.breadcrumb a { color: var(--c-text-secondary); }
.breadcrumb a:hover { color: var(--c-accent); }
.rule-page-header h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: var(--sp-3);
}
.rule-statement {
    font-size: 1.2rem;
    color: var(--c-text-secondary);
    max-width: 60ch;
}

/* ----- Two-column layout (table + content) ----- */
.rule-body {
    display: grid;
    grid-template-columns: minmax(280px, 460px) 1fr;
    gap: var(--sp-7);
    align-items: start;
}
@media (max-width: 880px) {
    .rule-body { grid-template-columns: 1fr; }
}

.rule-content h2 {
    font-size: 1.3rem;
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-3);
}
.rule-content h2:first-child { margin-top: 0; }
.rule-content ul { padding-left: 1.2em; }
.rule-content li + li { margin-top: var(--sp-2); }

/* ----- Worked-example block ----- */
.example {
    background: var(--c-panel-fill);
    border: 1px solid color-mix(in srgb, var(--c-panel-stroke) 25%, transparent);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-4) 0;
    color: var(--c-panel-text);
}
.example__problem {
    font-family: var(--font-rounded);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--c-text-primary);
    margin-bottom: var(--sp-2);
}
.example__work {
    color: var(--c-text-secondary);
    font-size: var(--fs-small);
    line-height: 1.5;
}

/* ----- Prev / next nav ----- */
.rule-pager {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid color-mix(in srgb, var(--c-text-primary) 8%, transparent);
}
.rule-pager a {
    text-decoration: none;
    color: var(--c-accent);
    font-weight: 600;
}
.rule-pager a small {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-secondary);
    font-weight: 700;
    margin-bottom: 2px;
}
.rule-pager .next { text-align: right; margin-left: auto; }

/* ==========================================================================
   Multiplication Table component
   Mirrors HelpView's table treatment from the iOS app.
   ========================================================================== */
.tt-wrap {
    background: var(--c-table-fill);
    border: 1px solid var(--c-table-stroke);
    border-radius: var(--r-md);
    padding: 10px;
    box-shadow: var(--shadow-soft);
}
.tt {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 3px;
    font-family: var(--font-rounded);
    font-weight: 700;
}
.tt__cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-panel-fill);
    color: var(--c-panel-text);
    border-radius: 4px;
    font-size: clamp(0.6rem, 1.4vw, 0.85rem);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-panel-stroke) 10%, transparent);
    transition: transform var(--t-fast) var(--ease-spring);
}

/* Header (factor) cells: ×, top row, left column */
.tt__cell--header {
    background: var(--c-factors-fill);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--c-factors-stroke);
    font-weight: 800;
}

/* Cell highlighted because the current rule covers it */
.tt__cell--rule {
    background: var(--c-highlight-fill);
    color: var(--c-text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-cta-grad-end) 35%, transparent);
}

/* Commutative-pair (peach-gold) — used on commutative rule page and where helpful */
.tt__cell--commutative {
    background: var(--c-commutative-fill);
    color: var(--c-text-primary);
}

/* Cell that's covered by SOME rule but not the current focus — dimmed */
.tt__cell--other {
    background: color-mix(in srgb, var(--c-panel-fill) 86%, var(--c-text-primary));
    color: color-mix(in srgb, var(--c-text-primary) 65%, transparent);
    opacity: 0.85;
}

/* Cell that's not covered by ANY rule — "hard ones" */
.tt__cell--uncovered {
    background: color-mix(in srgb, var(--c-warning) 18%, var(--c-panel-fill));
    color: var(--c-text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-warning) 40%, transparent);
}

/* Specifically-emphasized cells in worked examples */
.tt__cell--spotlight {
    background: var(--c-cta-grad-end);
    color: #fff;
    transform: scale(1.04);
    z-index: 1;
    box-shadow:
        inset 0 0 0 1px var(--c-cta-grad-start),
        0 4px 12px color-mix(in srgb, var(--c-cta-grad-end) 55%, transparent);
}

/* Per-rule color tagging on the landing-page table (each rule a distinct hue) */
.tt__cell--ones        { background: #FFE9A8; }
.tt__cell--twos        { background: #FFD9B0; }
.tt__cell--fives       { background: #C8E5C5; }
.tt__cell--nines       { background: #BFD8EE; }
.tt__cell--tens        { background: #E1D2EB; }
.tt__cell--elevens     { background: #F5BFB1; }
.tt__cell--all-rules   { background: #F2C27A; } /* peach-gold for cells covered by multiple */

.tt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-size: var(--fs-small);
    margin-top: var(--sp-4);
    color: var(--c-text-secondary);
}
.tt-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tt-legend i {
    width: 14px; height: 14px;
    display: inline-block;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* ==========================================================================
   Tips page — mirrors the iOS app's HelpView
   Two-column layout: text panel + buttons on one side, table on the other.
   On narrow screens, stacks vertically.
   ========================================================================== */

.help-layout {
    position: relative;
    padding: var(--sp-7) 0 var(--sp-8);
    isolation: isolate;
}

/* Garden background, blurred — same image used on the homepage hero */
.help-layout__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--c-app-bg) 60%, transparent) 0%,
            color-mix(in srgb, var(--c-app-bg) 92%, transparent) 80%,
            var(--c-app-bg) 100%),
        url("../images/garden.jpg") center/cover no-repeat;
    filter: blur(3px);
    opacity: 0.6;
    transform: scale(1.05);
}
@media (prefers-color-scheme: dark) {
    .help-layout__bg {
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--c-app-bg) 60%, transparent) 0%,
                color-mix(in srgb, var(--c-app-bg) 92%, transparent) 80%,
                var(--c-app-bg) 100%),
            url("../images/garden-dark.jpg") center/cover no-repeat;
        opacity: 0.7;
    }
}

.tips-page-title {
    text-align: center;
    margin-bottom: var(--sp-2);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
}
.tips-page-subtitle {
    text-align: center;
    color: var(--c-text-secondary);
    margin-bottom: var(--sp-7);
    font-size: 1.05rem;
}

/* ---- Two-column grid ---- */
.help-grid {
    display: grid;
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: var(--sp-6);
    align-items: start;
}
@media (max-width: 920px) {
    .help-grid { grid-template-columns: 1fr; }
}

.help-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* ---- Text panel — frosted-glass like ultraThinMaterial ---- */
.help-text {
    background: color-mix(in srgb, var(--c-surface) 70%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-5);
    border: 1px solid color-mix(in srgb, var(--c-text-primary) 8%, transparent);
    box-shadow: var(--shadow-soft);
    min-height: 220px;
    overflow: auto;
    max-height: 50vh;
}
.help-text .tip-panel {
    color: var(--c-text-primary);
    font-size: 1rem;
    line-height: 1.55;
}
.help-text .tip-panel h2 {
    font-size: 1.15rem;
    margin: 0 0 var(--sp-3);
    line-height: 1.25;
}
.help-text .tip-panel p { margin: 0 0 var(--sp-3); }
.help-text .tip-panel p:last-child { margin-bottom: 0; }
.help-text .tip-panel ul {
    padding-left: 1.2em;
    margin: var(--sp-2) 0 var(--sp-3);
}
.help-text .tip-panel li + li { margin-top: 4px; }
.help-text .tip-panel .example {
    margin: var(--sp-3) 0;
    padding: var(--sp-3) var(--sp-4);
}
.help-text .tip-panel .example__problem {
    font-size: 1.15rem;
    margin-bottom: 4px;
}
.help-text .tip-panel .example__work {
    font-size: 0.9rem;
}

/* ---- Buttons grid — mirrors HelpButtonStyle ---- */
.help-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.help-buttons__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
}
.help-buttons__row--single {
    grid-template-columns: 1fr;
}
/* On iPhone widths, four buttons in a row leaves "Mirror" / "× 12" cramped.
   Drop to a 2-column grid so each button has room for its label. */
@media (max-width: 480px) {
    .help-buttons__row {
        grid-template-columns: repeat(2, 1fr);
    }
    .help-buttons__row--single {
        grid-template-columns: 1fr;
    }
}

.help-btn {
    background: linear-gradient(90deg,
        var(--c-cta-grad-start) 0%,
        var(--c-cta-grad-end) 100%);
    color: var(--c-cta-text);
    border: 0;
    border-radius: var(--r-sm);
    padding: 12px 8px;
    min-height: 46px;
    font-family: var(--font-rounded);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: transform var(--t-med) var(--ease-spring),
                opacity var(--t-fast) var(--ease-spring),
                box-shadow var(--t-med) var(--ease-spring);
    line-height: 1.1;
    letter-spacing: 0.02em;
}
.help-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
.help-btn:active {
    transform: scale(0.97);
    opacity: 0.92;
}
/* Active button: stronger shadow + ring */
.help-btn[aria-pressed="true"] {
    transform: scale(1.04);
    box-shadow:
        var(--shadow-card),
        0 0 0 3px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.help-btn--special {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--c-cta-grad-end) 50%, var(--c-warning)) 0%,
        var(--c-warning) 100%);
}

/* ---- Table side ---- */
.help-table-wrap {
    /* Just a positioning container; the .tt-wrap inside has its own styles */
}
.help-table-wrap .tt-wrap {
    /* Slightly bigger feel like the iOS app */
    padding: 12px;
    border-radius: 16px;
    border-width: 2px;
}
.help-table-wrap .tt {
    gap: 2px;
}
.help-table-wrap .tt__cell {
    border-radius: 6px;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-panel-stroke) 12%, transparent);
}

/* ==========================================================================
   Per-rule highlighting (driven by [data-active-rule] on .tt-wrap)
   Includes scale-up to mirror the iOS app's 1.1x spring transition
   ========================================================================== */

/* Common cell transition */
.tt-wrap .tt__cell {
    transition: background-color 0.25s var(--ease-spring),
                color 0.25s var(--ease-spring),
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s var(--ease-spring);
}

/* "factor" / default: nothing highlighted, headers stay as headers (handled by .tt__cell--header) */

/* Generic rule highlighting (rules whose cells stay one color) */
.tt-wrap[data-active-rule="ones"]    .tt__cell[data-rules~="ones"],
.tt-wrap[data-active-rule="twos"]    .tt__cell[data-rules~="twos"],
.tt-wrap[data-active-rule="fives"]   .tt__cell[data-rules~="fives"],
.tt-wrap[data-active-rule="nines"]   .tt__cell[data-rules~="nines"],
.tt-wrap[data-active-rule="tens"]    .tt__cell[data-rules~="tens"],
.tt-wrap[data-active-rule="twelves"] .tt__cell[data-rules~="twelves"]
{
    background: var(--c-highlight-fill);
    color: var(--c-text-primary);
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--c-cta-grad-end) 35%, transparent),
        0 4px 12px color-mix(in srgb, var(--c-cta-grad-end) 20%, transparent);
    transform: scale(1.08);
    z-index: 1;
}

/* Elevens: split — single-digit other factor (1–9) gold, two-digit (10–12) peach */
.tt-wrap[data-active-rule="elevens"] .tt__cell[data-eleven-half="single"]
{
    background: var(--c-highlight-fill);
    color: var(--c-text-primary);
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--c-cta-grad-end) 35%, transparent),
        0 4px 12px color-mix(in srgb, var(--c-cta-grad-end) 20%, transparent);
    transform: scale(1.08);
    z-index: 1;
}
.tt-wrap[data-active-rule="elevens"] .tt__cell[data-eleven-half="double"]
{
    background: var(--c-commutative-fill);
    color: var(--c-text-primary);
    transform: scale(1.05);
    z-index: 1;
}

/* Commutative: above-diagonal gold, below-diagonal peach, diagonal default */
.tt-wrap[data-active-rule="commutative"] .tt__cell[data-triangle="upper"]
{
    background: var(--c-highlight-fill);
    color: var(--c-text-primary);
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--c-cta-grad-end) 35%, transparent);
    transform: scale(1.05);
    z-index: 1;
}
.tt-wrap[data-active-rule="commutative"] .tt__cell[data-triangle="lower"]
{
    background: var(--c-commutative-fill);
    color: var(--c-text-primary);
    transform: scale(1.05);
    z-index: 1;
}

/* Not covered by other tips */
.tt-wrap[data-active-rule="not-covered"] .tt__cell[data-uncovered="primary"]
{
    background: color-mix(in srgb, var(--c-warning) 26%, var(--c-panel-fill));
    color: var(--c-text-primary);
    font-weight: 800;
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--c-warning) 50%, transparent),
        0 4px 12px color-mix(in srgb, var(--c-warning) 20%, transparent);
    transform: scale(1.08);
    z-index: 1;
}
.tt-wrap[data-active-rule="not-covered"] .tt__cell[data-uncovered="mirror"]
{
    background: color-mix(in srgb, var(--c-warning) 8%, var(--c-panel-fill));
    color: color-mix(in srgb, var(--c-text-primary) 55%, transparent);
}

/* Header cells stay constant in every state */
.tt-wrap[data-active-rule] .tt__cell--header {
    background: var(--c-factors-fill);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1.5px var(--c-factors-stroke);
    transform: none !important;
}

/* Reduced motion — disable transforms */
@media (prefers-reduced-motion: reduce) {
    .tt-wrap .tt__cell { transition: background-color 0.15s linear; transform: none !important; }
    .help-btn { transition: opacity 0.1s linear; }
}