/* Annual plan and energy budget */
.turn-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.energy-planner {
    border-top: 1px solid var(--line);
    padding: 18px 0;
}

.planner-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
}

.planner-heading small {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 700;
}

.planner-heading strong {
    color: var(--green);
    font-size: 20px;
}

.energy-breakdown {
    display: grid;
    gap: 6px;
    border-top: 1px solid var(--line);
    margin-top: 12px;
    padding-top: 12px;
}

.energy-breakdown span {
    font-size: 11px;
    color: var(--muted);
}

.energy-breakdown b {
    float: right;
    color: var(--ink);
}

.energy-source summary {
    cursor: pointer;
    color: var(--green);
    font-weight: 700;
}

.energy-source div {
    margin-top: 6px;
    background: #f3f5ef;
    border-radius: 7px;
    padding: 8px;
}

.energy-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 12px 0;
}

.energy-status-grid small,
.energy-status-grid strong {
    display: block;
}

.energy-status-grid small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.energy-status-grid strong {
    margin-top: 4px;
    font: 700 24px "Playfair Display",serif;
}

.energy-balance-tile.rest,
.energy-exhaustion-tile.falling {
    background: #e8f5eb;
    border-color: #aed4ba;
    color: #236442;
}

.energy-balance-tile.fatigue,
.energy-exhaustion-tile.rising {
    background: var(--danger-surface);
    border-color: #dfa7a1;
    color: var(--danger-ink);
}

.energy-exhaustion-tile.stable {
    background: #f4f3ed;
    border-color: var(--line);
    color: var(--muted);
}

@media(max-width:850px) {
    .annual-plan-panel>.primary {
        display: none;
    }
}

@media(min-width:851px) {
    .annual-plan-panel {
        display: flex!important;
    }
}

@media(max-width:850px) {
    .turn-panel {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .annual-plan-panel .plan-age {
        display: none;
    }

    .annual-plan-panel .event {
        gap: 7px;
        margin: 4px 0 7px;
        padding: 8px 9px;
    }

    .annual-plan-panel .planner-heading {
        margin-bottom: 7px;
    }

    .annual-plan-panel .energy-planner {
        padding: 8px 0;
    }

    .annual-plan-panel .energy-status-grid {
        gap: 5px;
        margin: 6px 0;
    }

    .annual-plan-panel .energy-status-grid strong {
        font-size: 19px;
    }

    .annual-plan-panel .energy-breakdown {
        gap: 4px;
        margin-top: 7px;
        padding-top: 7px;
    }
}

@media(max-width:520px) {
    .energy-status-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.annual-plan-panel .date {
    font-size: 19px;
}

.energy-source {
    margin: 0 0 8px;
    font-size: 10px;
    color: var(--muted);
}

.energy-source>.planner-heading {
    margin: 0;
    padding: 2px 0 7px;
    list-style: none;
    cursor: pointer;
}

.energy-source>.planner-heading::-webkit-details-marker {
    display: none;
}

.energy-source>.planner-heading small:after {
    content: "⌄";
    display: inline-block;
    margin-left: 5px;
    color: var(--green);
    font-size: 12px;
    transition: transform .15s;
}

.energy-source[open]>.planner-heading small:after {
    transform: rotate(180deg);
}

.energy-source-details {
    margin: 0 0 7px;
    padding: 8px;
    border-radius: 7px;
    background: #f3f5ef;
}

.energy-status-grid article>small {
    grid-column: 1/-1;
}

.energy-exhaustion-tile em {
    font-style: normal;
    font-weight: 900;
    right: 10px;
    top: 10px;
    position: static;
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    padding-bottom: 2px;
    font-size: 13px;
}

@media(max-width:850px) {
    .annual-plan-panel .date {
        margin: 0 0 6px;
        font-size: 15px;
    }

    .mobile-year-view {
        display: grid;
        gap: 14px;
    }
}

.energy-status-grid article {
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
}

@media(max-width:850px) {
    .annual-plan-panel .energy-status-grid article {
        padding: 6px 8px;
    }
}

@media(min-width:851px) {
    .desktop-game-shell .annual-plan-panel {
        padding: 14px 20px 12px;
    }

    .desktop-game-shell .annual-plan-panel>.date {
        display: none;
    }

    .desktop-game-shell .annual-plan-panel .energy-planner {
        border: 0;
        padding: 6px 0;
    }

    .desktop-game-shell .annual-plan-panel .energy-breakdown {
        border: 0;
        margin-top: 6px;
        padding-top: 0;
        gap: 4px;
    }

    .desktop-game-shell .annual-plan-panel .energy-source {
        margin-bottom: 4px;
    }

    .desktop-game-shell .annual-plan-panel .energy-status-grid {
        margin: 6px 0;
    }
}

/* School and work controls */
.engagement {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    font-size: 12px;
    margin-bottom: 14px;
}

.engagement input {
    grid-column: 1/-1;
}

.school-preview {
    grid-column: 1/-1;
    color: var(--green);
    font-weight: 600;
    line-height: 1.4;
}

@media(max-width:850px) {
    .annual-plan-panel .engagement {
        margin-bottom: 7px;
    }
}

.occupation-planner:empty {
    display: none;
}

.occupation-control {
    display: grid;
    gap: 7px;
    margin: 7px 0 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7f7f2;
}

.occupation-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
}

.occupation-heading span {
    color: var(--muted);
    font-weight: 700;
}

.occupation-heading b {
    color: var(--green);
    text-align: right;
}

.occupation-slider-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 7px;
    align-items: center;
}

.occupation-slider-row .danger-action,
.occupation-slider-row .search-action,
.occupation-actions .danger-action,
.occupation-actions .search-action {
    width: auto;
    margin: 0;
    padding: 6px 9px;
    font-size: 10px;
}

.occupation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.occupation-control>.school-preview {
    margin: 0;
    font-size: 10px;
}

.occupation-search {
    margin: 7px 0 10px;
}

@media(max-width:850px) {
    .occupation-control {
        gap: 5px;
        margin: 5px 0;
        padding: 7px;
    }

    .occupation-slider-row {
        gap: 5px;
    }

    .occupation-slider-row .danger-action,
    .occupation-slider-row .search-action,
    .occupation-actions .danger-action,
    .occupation-actions .search-action {
        padding: 5px 7px;
        font-size: 9px;
    }
}

.school-control {
    border-color: #c8d9cd;
    background: #f1f6f2;
}

.school-control>.school-preview {
    font-size: 10px;
}

.mobile-sheet>.occupation-control,
.mobile-sheet>.occupation-planner .occupation-control {
    padding: 13px;
}

.mobile-sheet .occupation-heading,
.mobile-sheet .occupation-control>.school-preview {
    font-size: 13px;
}

.mobile-sheet .occupation-slider-row {
    grid-template-columns: 1fr;
    gap: 10px;
}

.mobile-sheet .occupation-slider-row button {
    width: 100%;
    min-height: 44px;
}

.mobile-sheet .occupation-actions {
    display: grid;
    grid-template-columns: 1fr;
}

.mobile-sheet .occupation-actions button,
.mobile-sheet .occupation-search {
    width: 100%;
    min-height: 44px;
    font-size: 13px;
}

@media(min-width:851px) {
    .desktop-game-shell .annual-plan-panel .occupation-control {
        gap: 6px;
        margin: 5px 0;
        padding: 8px;
    }
}

/* Activities and activity picker */
.activity {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 9px 10px;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    font: 500 11px "DM Sans";
}

.activity span small {
    display: block;
    color: var(--muted);
    font-size: 9px;
    margin-top: 3px;
}

.activity.selected {
    border-color: var(--green);
    background: #eaf3ec;
    color: var(--green);
}

.activity b:after {
    content: "⚡";
    font-size: 9px;
    margin-left: 2px;
}

.activity-summary {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    padding: 13px;
    margin: 10px 0;
    border: 1px solid var(--green);
    border-radius: 10px;
    background: var(--action-surface);
    color: var(--ink);
    cursor: pointer;
}

.activity-summary span {
    min-width: 0;
}

.activity-summary strong,
.activity-summary small {
    display: block;
}

.activity-summary small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

.activity-summary>b {
    color: #b33f37;
    white-space: nowrap;
}

.activities-total {
    display: grid;
    gap: 6px;
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 9px;
    background: var(--support-surface);
}

.activities-total>strong {
    color: #b33f37;
}

.activities-total small {
    color: var(--muted);
    line-height: 1.45;
}

@media(max-width:850px) {
    .annual-plan-panel .activity-summary {
        margin: 5px 0;
        padding: 8px;
    }
}

.activities-modal {
    width: min(760px,96vw);
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 24px);
    overflow: hidden;
    padding: clamp(16px,3vw,30px);
}

.activities-modal>.eyebrow,
.activities-modal>h2,
.activities-modal>.activities-total,
.activities-modal>.plan-error,
.activities-modal>.primary {
    flex: 0 0 auto;
}

.activities-modal-list {
    display: grid;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.activities-modal>.primary {
    margin-top: 12px;
}

@media(max-width:850px) {
    .activities-modal {
        max-height: calc(100dvh - 12px);
        padding: 15px 12px;
    }

    .activities-modal h2 {
        margin-bottom: 10px;
        font-size: 26px;
    }

    .activities-modal .activities-total {
        margin-bottom: 8px;
        padding: 8px;
    }
}

.activity-choice {
    display: grid;
    grid-template-columns: 20px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.activity-choice.selected {
    border-color: var(--green);
    background: #e8f2e9;
}

.activity-choice:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.activity-choice-mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid #95a698;
    border-radius: 5px;
    color: white;
    font-size: 14px;
}

.activity-choice.selected .activity-choice-mark {
    border-color: var(--green);
    background: var(--green);
}

.activity-choice strong {
    display: block;
    font-size: 14px;
}

.activity-choice small {
    display: block;
    margin-top: 4px;
    color: #5f6c63;
    font-size: 12px;
    line-height: 1.4;
}

@media(max-width:850px) {
    .activities-modal .eyebrow {
        font-size: 13px;
    }

    .activities-modal h2,
    .childcare-modal h2 {
        font-size: 27px;
    }

    .activities-modal-list {
        gap: 6px;
    }
}

@media(min-width:851px) {
    .desktop-game-shell .annual-plan-panel .activity-summary {
        margin: 5px 0;
        padding: 9px;
    }
}

/* Recovery and risk notices */
.turn-panel .risk {
    text-align: center;
    color: var(--muted);
    margin-top: 12px;
}

.energy-warning {
    margin: 10px 0 0;
    padding: 9px 10px;
    background: #fff1cf;
    color: #8a5c0b;
    font-size: 11px;
    border: 1px solid #ebcf8b;
    border-radius: 8px;
}

.risk-details {
    margin-top: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}

.risk-details summary {
    cursor: pointer;
    list-style: none;
}

.risk-details summary::-webkit-details-marker {
    display: none;
}

.risk-details summary em {
    color: var(--gold);
    font-style: normal;
    font-weight: 700;
    margin-left: 5px;
}

.risk-details div {
    margin-top: 7px;
    padding: 8px;
    background: #fff4da;
    border: 1px solid #ecd59c;
    border-radius: 7px;
    color: #7d5a18;
}

.risk-details div b {
    margin-right: 4px;
}

.energy-recovery {
    margin: 10px 0 0;
    padding: 9px 10px;
    background: #e5f4e9;
    color: #236442;
    font-size: 11px;
    border: 1px solid #b8dcc3;
    border-radius: 8px;
}

.risk-breakdown {
    line-height: 1.6;
}

/* Childcare details */
.childcare-details {
    display: grid;
    gap: 6px;
    width: 100%;
}

.childcare-details>div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 7px;
    border-bottom: 1px solid #ead49d;
}

.childcare-details span {
    color: #875b12;
}

.childcare-details small {
    grid-column: 1/-1;
    color: #a33d35;
}

.childcare-summary {
    border-color: #d7bd72;
    background: #fff7df;
}

.childcare-modal {
    width: min(620px,96vw);
}

.childcare-modal .childcare-details {
    margin: 4px 0 18px;
}

.childcare-modal .childcare-details>div:last-child {
    border-bottom: 0;
}

/* Living standard */
.living-standard {
    border: 1px solid #d8c8a5;
    border-radius: .75rem;
    padding: .75rem;
    background: #fffaf0;
}

.living-standard-lock {
    display: block;
    margin-top: 7px;
    color: var(--danger-ink);
    font-weight: 700;
    line-height: 1.4;
}

@media(max-width:850px) {
    .annual-plan-panel .living-standard {
        margin-bottom: 7px;
        padding: 7px;
    }
}

.living-standard-selector {
    margin-bottom: 12px;
    font-size: 14px;
    align-items: center;
}

.living-standard-selector>b {
    text-align: right;
}

.living-standard-selector>small {
    grid-column: 1/-1;
    font-size: 12px;
    line-height: 1.4;
}

.living-standard-selector input {
    width: 100%;
    min-height: 24px;
    margin: 0;
}

@media(max-width:850px) {
    .mobile-sheet .living-standard-lock {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media(min-width:851px) {
    .desktop-game-shell .annual-plan-panel .living-standard-selector {
        margin-bottom: 6px;
        padding: 9px;
    }
}

/* Next year action */
.year-next-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.year-next-cta>span {
    float: none;
    margin: 0;
}

.year-next-cta>i {
    font-size: 20px;
    font-style: normal;
}

.mobile-next-energy {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media(max-width:850px) {
    .annual-plan-panel>.desktop-next-year {
        display: none;
    }
}

/* Forecast details */
.forecast-modal {
    width: min(460px,100%);
}

.forecast-modal>.eyebrow {
    padding-right: 30px;
    font-size: 11px;
    letter-spacing: .05em;
}

.forecast-modal h2 {
    margin-bottom: 16px;
}

.forecast-sources {
    display: grid;
    gap: 12px;
    font-size: 13px;
}

.forecast-sources>div,
.forecast-total,
.forecast-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.forecast-sources b,
.forecast-total strong,
.forecast-result strong {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.forecast-total {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.forecast-total strong {
    font-size: 20px;
}

.forecast-result {
    margin-top: 12px;
    font-size: 13px;
}

.forecast-limit,
.forecast-hint {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.forecast-limit {
    padding: 9px;
    border-radius: 7px;
    background: #edf3e9;
    color: var(--green);
}

@media(max-width:850px) {
    .modal-backdrop:has(.activities-modal),
    .modal-backdrop:has(.childcare-modal),
    .modal-backdrop:has(.forecast-modal) {
        align-items: end;
        padding: 0;
        background: #17251d99;
    }

    .activities-modal,
    .childcare-modal,
    .forecast-modal {
        width: min(560px,100%);
        max-height: 88dvh;
        border-radius: 22px 22px 0 0;
        padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
        animation: mobile-sheet-in .18s ease-out;
    }
}

@media(prefers-reduced-motion:reduce) {
    .activities-modal,
    .childcare-modal,
    .forecast-modal {
        animation: none;
    }
}