/*

- PURPOSE: Module-specific styles for MySabun Starter Pack (Phase 3 + Phase 4).
- RESPONSIBILITY: Reader typography, headers, callouts, native accordions,
- static checklists, module navigation, and Modul 2 MULA Builder presentation.
- WHAT MUST NOT BE PUT HERE: Global layout, dashboard logic, or JavaScript behavior.

  */

/* -------------------------------------------------------

MODULE READER

------------------------------------------------------- */

.module-reader-article {

width: 100%;

padding-bottom: calc(var(--space-lg) * 2);

}

/* -------------------------------------------------------

MODULE HEADER

------------------------------------------------------- */

.module-header {

margin-bottom: calc(var(--space-lg) * 2);

padding-bottom: var(--space-lg);

border-bottom: 2px solid var(--color-brand-soft-pink);

}

.module-eyebrow {

display: inline-block;

margin-bottom: var(--space-xs);

font-size: var(--font-size-xs);

font-weight: var(--font-weight-bold);

color: var(--color-action);

text-transform: uppercase;

letter-spacing: 0.08em;

}

.module-title {

margin-bottom: var(--space-sm);

color: var(--color-primary);

line-height: 1.2;

}

.module-subtitle {

margin-bottom: var(--space-md);

font-size: var(--font-size-lg);

font-weight: var(--font-weight-medium);

color: var(--color-text-muted);

}

.module-intro {

padding: var(--space-md);

color: var(--color-text-main);

background-color: var(--color-surface-white);

border-left: 4px solid var(--color-accent);

border-radius: var(--radius-md);

line-height: 1.6;

}

.module-intro p:last-child {

margin-bottom: 0;

}

/* -------------------------------------------------------

MODULE CONTENT & SECTIONS

------------------------------------------------------- */

.module-contents {

width: 100%;

}

.module-section {

margin-bottom: calc(var(--space-lg) * 2);

}

.module-section-title {

margin-bottom: var(--space-md);

color: var(--color-primary);

line-height: 1.25;

}

.module-heading {

margin-top: var(--space-lg);

margin-bottom: var(--space-sm);

font-size: var(--font-size-lg);

color: var(--color-primary);

line-height: 1.3;

}

.module-paragraph {

margin-bottom: var(--space-md);

color: var(--color-text-main);

line-height: 1.7;

}

/* -------------------------------------------------------

CALLOUTS

------------------------------------------------------- */

.module-callout {

margin: var(--space-md) 0;

padding: var(--space-md);

border-radius: var(--radius-md);

color: var(--color-text-main);

line-height: 1.6;

}

.module-callout p:last-child {

margin-bottom: 0;

}

.module-callout.callout-info {

background-color: var(--color-surface-light);

border-left: 4px solid var(--color-accent);

}

.module-callout.callout-tip {

background-color: var(--color-brand-soft-pink);

border-left: 4px solid var(--color-action);

}

.module-callout.callout-important {

background-color: var(--color-surface-light);

border-left: 4px solid var(--color-primary);

}

/* -------------------------------------------------------

QUOTE

------------------------------------------------------- */

.module-quote {

margin: var(--space-lg) 0;

padding: var(--space-lg);

background-color: var(--color-surface-light);

border-radius: var(--radius-lg);

color: var(--color-primary);

font-size: var(--font-size-lg);

font-style: italic;

line-height: 1.6;

}

.module-quote p {

margin-bottom: 0;

}

.module-quote-attribution {

display: block;

margin-top: var(--space-sm);

color: var(--color-text-muted);

font-size: var(--font-size-sm);

font-style: normal;

font-weight: var(--font-weight-medium);

}

/* -------------------------------------------------------

STATIC CHECKLIST

------------------------------------------------------- */

.module-checklist {

list-style: none;

margin: var(--space-sm) 0 var(--space-md);

padding: 0;

}

.module-checklist li {

position: relative;

margin-bottom: var(--space-sm);

padding-left: calc(var(--space-lg) + var(--space-xs));

color: var(--color-text-main);

line-height: 1.6;

}

.module-checklist li::before {

content: "✓";

position: absolute;

top: 0;

left: 0;

color: var(--color-action);

font-weight: var(--font-weight-bold);

}

/* -------------------------------------------------------

NATIVE ACCORDION

------------------------------------------------------- */

.module-accordion {

margin: var(--space-md) 0;

overflow: hidden;

background-color: var(--color-surface-white);

border: 1px solid var(--color-border-light);

border-radius: var(--radius-md);

}

.module-accordion-summary {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--space-md);

min-height: 44px;

padding: var(--space-sm) var(--space-md);

background-color: var(--color-surface-white);

color: var(--color-primary);

font-family: var(--font-heading);

font-weight: var(--font-weight-medium);

cursor: pointer;

list-style: none;

transition: background-color 0.2s ease;

}

.module-accordion-summary::-webkit-details-marker {

display: none;

}

.module-accordion-summary:hover {

background-color: var(--color-surface-light);

}

.module-accordion-summary:focus-visible {

outline: 2px solid var(--color-border-focus);

outline-offset: -2px;

}

.summary-text {

flex: 1;

}

.summary-icon {

flex-shrink: 0;

}

.summary-icon::before {

content: "+";

display: inline-block;

color: var(--color-action);

font-size: var(--font-size-lg);

font-weight: var(--font-weight-medium);

line-height: 1;

transition: transform 0.2s ease;

}

.module-accordion[open] .summary-icon::before {

transform: rotate(45deg);

}

.module-accordion-content {

padding: var(--space-md);

background-color: var(--color-bg-base);

border-top: 1px solid var(--color-border-light);

}

.module-accordion-content > *:last-child {

margin-bottom: 0;

}

/* -------------------------------------------------------

PREVIOUS / NEXT MODULE NAVIGATION

------------------------------------------------------- */

.module-navigation {

display: flex;

flex-direction: column;

gap: var(--space-md);

margin-top: calc(var(--space-lg) * 2);

padding-top: var(--space-lg);

border-top: 1px solid var(--color-border-light);

}

.module-nav-btn {

display: flex;

align-items: center;

min-height: 44px;

padding: var(--space-md);

background-color: var(--color-surface-white);

border: 1px solid var(--color-border-light);

border-radius: var(--radius-md);

color: var(--color-primary);

font-family: var(--font-heading);

font-size: var(--font-size-sm);

font-weight: var(--font-weight-semibold);

text-decoration: none;

transition: background-color 0.2s ease, border-color 0.2s ease;

}

.module-nav-btn:hover {

background-color: var(--color-surface-light);

border-color: var(--color-accent);

}

.module-nav-btn:focus-visible {

outline: 2px solid var(--color-border-focus);

outline-offset: 2px;

}

.nav-prev {

justify-content: flex-start;

}

.nav-next {

justify-content: flex-end;

text-align: right;

}

.nav-prev span[aria-hidden="true"] {

margin-right: var(--space-sm);

}

.nav-next span[aria-hidden="true"] {

margin-left: var(--space-sm);

}

.nav-empty-placeholder {

display: none;

}

/* -------------------------------------------------------

PHASE 4 — MULA BUILDER

------------------------------------------------------- */

.builder-card {

margin: var(--space-lg) 0;

padding: var(--space-lg);

background-color: var(--color-surface-white);

border: 1px solid var(--color-border-light);

border-radius: var(--radius-md);

}

.builder-helper {

margin-bottom: var(--space-md);

color: var(--color-text-muted);

font-size: var(--font-size-sm);

line-height: 1.6;

}

.builder-fieldset {

min-width: 0;

margin: 0;

padding: 0;

border: 0;

}

.option-grid {

display: grid;

grid-template-columns: minmax(0, 1fr);

gap: var(--space-sm);

}

.option-card {

position: relative;

display: block;

min-width: 0;

cursor: pointer;

}

.option-card-content {

display: flex;

align-items: flex-start;

gap: var(--space-md);

min-width: 0;

min-height: 44px;

padding: var(--space-md);

background-color: var(--color-surface-white);

border: 1px solid var(--color-border-light);

border-radius: var(--radius-md);

transition: background-color 0.2s ease, border-color 0.2s ease;

}

.option-card:hover .option-card-content {

background-color: var(--color-surface-light);

border-color: var(--color-accent);

}

.option-card-input:focus-visible + .option-card-content {

outline: 2px solid var(--color-border-focus);

outline-offset: 2px;

}

.option-card-input:checked + .option-card-content {

background-color: var(--color-brand-soft-pink);

border-color: var(--color-action);

}

.option-card-custom-radio {

position: relative;

flex: 0 0 20px;

width: 20px;

height: 20px;

margin-top: 2px;

border: 2px solid var(--color-border-light);

border-radius: 50%;

}

.option-card-custom-radio::after {

content: "";

position: absolute;

top: 50%;

left: 50%;

width: 10px;

height: 10px;

background-color: var(--color-action);

border-radius: 50%;

transform: translate(-50%, -50%) scale(0);

transition: transform 0.2s ease;

}

.option-card-input:checked + .option-card-content .option-card-custom-radio {

border-color: var(--color-action);

}

.option-card-input:checked + .option-card-content .option-card-custom-radio::after {

transform: translate(-50%, -50%) scale(1);

}

.option-card-text {

min-width: 0;

}

.option-card-title {

display: block;

color: var(--color-primary);

font-weight: var(--font-weight-semibold);

line-height: 1.4;

}

.option-card-description {

display: block;

margin-top: var(--space-xs);

color: var(--color-text-muted);

font-size: var(--font-size-sm);

line-height: 1.5;

}

.f111-grid {

display: grid;

grid-template-columns: minmax(0, 1fr);

gap: var(--space-md);

}

.f111-grid > * {

min-width: 0;

}

.f111-grid .form-input,

.f111-grid .form-select,

.builder-card .form-input,

.builder-card .form-select {

width: 100%;

min-width: 0;

min-height: 44px;

}

/* -------------------------------------------------------

MULA SUMMARY

------------------------------------------------------- */

.mula-summary {

margin: calc(var(--space-lg) * 2) 0;

padding: var(--space-lg);

background-color: var(--color-surface-light);

border: 1px solid var(--color-accent);

border-radius: var(--radius-lg);

}

.mula-summary h3 {

margin-bottom: var(--space-sm);

color: var(--color-primary);

}

.mula-summary-content {

padding: var(--space-md);

background-color: var(--color-surface-white);

border-radius: var(--radius-md);

}

.mula-summary-row {

display: flex;

flex-direction: column;

gap: var(--space-xs);

min-width: 0;

padding: var(--space-sm) 0;

border-bottom: 1px solid var(--color-border-light);

}

.mula-summary-row:first-child {

padding-top: 0;

}

.mula-summary-row:last-child {

padding-bottom: 0;

border-bottom: 0;

}

.summary-label {

color: var(--color-text-muted);

font-size: var(--font-size-sm);

font-weight: var(--font-weight-semibold);

}

.summary-value {

min-width: 0;

min-height: 1.5em;

color: var(--color-primary);

font-weight: var(--font-weight-medium);

overflow-wrap: anywhere;

}

.autosave-note {

margin-top: var(--space-md);

color: var(--color-text-muted);

font-size: var(--font-size-xs);

line-height: 1.5;

text-align: center;

}

/* -------------------------------------------------------

TABLET / DESKTOP

------------------------------------------------------- */

@media (min-width: 768px) {

.module-navigation {

flex-direction: row;

align-items: stretch;

justify-content: space-between;

}

.module-nav-btn {
    flex: 1;
    max-width: 48%;
}

.nav-empty-placeholder {
    display: block;
    flex: 1;
    max-width: 48%;
}

.option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.f111-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mula-summary-row {
    display: grid;
    grid-template-columns: minmax(130px, 160px) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-md);
}



}


/* -------------------------------------------------------
   PHASE 5 — BINA BUILDER
------------------------------------------------------- */

.bina-review-card {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background-color: var(--color-surface-light);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
}

.bina-review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.bina-review-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
}

.review-value {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    min-height: 1.5em;
}

.form-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
    margin-top: -2px;
}

.bina-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.bina-grid .form-field {
    margin-bottom: 0;
}

.bina-template-box {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background-color: var(--color-surface-light);
    border: 1px dashed var(--color-accent);
    border-radius: var(--radius-md);
}

.template-text {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    line-height: var(--line-height-relaxed);
    font-style: italic;
    margin: 0;
}

.template-text strong {
    color: var(--color-action);
    font-weight: var(--font-weight-bold);
    padding: 0 4px;
    background-color: var(--color-surface-white);
    border-radius: var(--radius-sm);
    border-bottom: 2px solid var(--color-action);
    display: inline-block;
    line-height: 1.2;
    max-width: 100%;
}

.bina-summary {
    margin: calc(var(--space-lg) * 2) 0;
    padding: var(--space-lg);
    background-color: var(--color-surface-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
}

.bina-summary h3 {
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

.bina-summary-content {
    padding: var(--space-md);
    background-color: var(--color-surface-white);
    border-radius: var(--radius-md);
}

.bina-summary-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.bina-summary-row:first-child {
    padding-top: 0;
}

.bina-summary-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.review-value,
.template-text,
.template-text strong,
.bina-summary-row .summary-value {
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------
   TABLET / DESKTOP (PHASE 5 RULES ONLY)
------------------------------------------------------- */

@media (min-width: 768px) {
    .bina-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bina-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bina-summary-row {
        display: grid;
        grid-template-columns: minmax(130px, 160px) minmax(0, 1fr);
        align-items: start;
        gap: var(--space-md);
    }
}

/* -------------------------------------------------------
   PHASE 6 — KIRA BUILDER
------------------------------------------------------- */

.kira-mode-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
}

.kira-mode-card {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

.kira-mode-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-md);
    background-color: var(--color-surface-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kira-mode-card:hover .kira-mode-content {
    background-color: var(--color-surface-light);
    border-color: var(--color-accent);
}

.kira-mode-card input:focus-visible + .kira-mode-content {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.kira-mode-card input:checked + .kira-mode-content {
    background-color: var(--color-brand-soft-pink);
    border-color: var(--color-action);
}

.kira-mode-title {
    display: block;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

.kira-mode-desc {
    display: block;
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.kira-cost-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.kira-panel-title {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    color: var(--color-primary);
    font-size: var(--font-size-base);
    border-bottom: 2px solid var(--color-surface-light);
}

.kira-subtotal {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-surface-light);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

.kira-divider {
    height: 1px;
    margin: var(--space-lg) 0;
    background-color: var(--color-border-light);
    border: 0;
}

.kira-divider-sm {
    height: 1px;
    margin: var(--space-sm) 0;
    background-color: var(--color-border-light);
    border: 0;
}

.kira-warning {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-status-warning-bg);
    border-left: 4px solid var(--color-status-warning);
    border-radius: var(--radius-sm);
    color: var(--color-status-warning);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.kira-highlight-input {
    background-color: var(--color-surface-light) !important;
    border-color: var(--color-primary) !important;
    font-weight: var(--font-weight-semibold);
}

.kira-result-card {
    padding: var(--space-md);
    background-color: var(--color-surface-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.kira-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-xs) 0;
}

.kira-result-label {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.kira-result-desc {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.kira-result-value {
    flex-shrink: 0;
    color: var(--color-primary);
    font-family: monospace;
    font-size: var(--font-size-lg);
    overflow-wrap: anywhere;
}

.kira-value-bold {
    font-weight: var(--font-weight-bold);
}

.kira-row-highlight {
    padding: var(--space-sm);
    background-color: var(--color-surface-white);
    border: 1px dashed var(--color-border-light);
    border-radius: var(--radius-sm);
}

.kira-market-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    margin-top: var(--space-md);
    padding: var(--space-md);
    background-color: var(--color-surface-white);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.kira-market-label {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.kira-market-value {
    color: var(--color-action);
    font-family: monospace;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.kira-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.kira-status[data-status="positive"] {
    background-color: var(--color-status-success-bg);
    color: var(--color-status-success);
}

.kira-status[data-status="thin"] {
    background-color: var(--color-status-warning-bg);
    color: var(--color-status-warning);
}

.kira-status[data-status="negative"] {
    background-color: var(--color-status-danger-bg);
    color: var(--color-status-danger);
}

.kira-summary {
    margin: calc(var(--space-lg) * 2) 0;
    padding: var(--space-lg);
    background-color: var(--color-surface-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
}

.kira-summary h3 {
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

.kira-summary-content {
    padding: var(--space-md);
    background-color: var(--color-surface-white);
    border-radius: var(--radius-md);
}

.kira-summary-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.kira-summary-row:first-child {
    padding-top: 0;
}

.kira-summary-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.kira-status-badge {
    display: inline-block;
    font-weight: var(--font-weight-bold);
}

.kira-status-badge[data-status="positive"] {
    color: var(--color-status-success);
}

.kira-status-badge[data-status="thin"] {
    color: var(--color-status-warning);
}

.kira-status-badge[data-status="negative"] {
    color: var(--color-status-danger);
}

/* -------------------------------------------------------
   TABLET / DESKTOP — PHASE 6
------------------------------------------------------- */

@media (min-width: 768px) {
    .kira-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kira-cost-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kira-summary-row {
        display: grid;
        grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
        align-items: start;
        gap: var(--space-md);
    }
}