/* ═══ KONMAIL ═══ */

.km-body {
    display: flex;
    height: 676px;
    background: var(--cream);
    overflow: hidden;
}

/* ── Sidebar ── */
.km-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--cream);
    border-right: 2px solid var(--pink);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4) var(--space-3);
    gap: var(--space-3);
}

/* 180px portrait frame · warm yellow gradient · ink border · 4px pink shadow.
   Same stamped-tile treatment as the logbook character portrait. */
.km-portrait-box {
    width: 180px;
    height: 180px;
    border: 2.5px solid var(--ink);
    border-radius: var(--r-card);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 4px 4px 0 var(--pink);
    background: linear-gradient(135deg, #FFE9B0 0%, #F5C56E 100%);
}

.km-portrait-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background 0.2s;
}

.km-folders {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
}

/* Capsule folder buttons — inactive: white w/ pink border + pink-deep text;
   active: pink fill + white text. Press Start 2P pixel font for pill chrome. */
.km-folder-btn {
    font-family: var(--font-display);
    font-size: 10px;
    background: #fff;
    color: var(--pink-deep);
    border: 2px solid var(--pink);
    border-radius: var(--r-button);
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.04em;
    box-shadow: 0 3px 0 var(--pink-soft);
    transition: background 0.1s, box-shadow 0.05s, transform 0.06s;
    position: relative;
}

.km-folder-btn:hover {
    background: var(--pink-pale);
}
.km-folder-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--pink-soft);
}

.km-folder-btn.active {
    background: var(--pink);
    color: #fff;
    border-color: var(--pink-deep);
    box-shadow: 0 3px 0 var(--pink-deep);
}

.km-badge {
    display: inline-block;
    background: var(--pink);
    color: white;
    border-radius: var(--radius-pill);
    padding: 1px 5px;
    font-size: 8px;
    margin-left: 3px;
    vertical-align: middle;
}

/* ── Main panel ── */
.km-panel {
    flex: 1;
    overflow-y: auto;
    padding: 1.4rem 1.6rem;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* ── Email list ── */
.km-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.km-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--blue);
    border: 2px solid var(--blue);
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    cursor: pointer;
    transition: filter 0.1s;
    min-width: 0;
    box-shadow: 2px 3px 0 rgba(125, 211, 252, 0.45);
}

.km-row:hover {
    filter: brightness(0.93);
}

.km-row.km-read {
    background: rgba(125, 211, 252, 0.12);
    border: 1.5px dashed rgba(125, 211, 252, 0.55);
    box-shadow: none;
    opacity: 0.82;
}

.km-status {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--pink);
    color: white;
    letter-spacing: 0.03em;
}

.km-row.km-read .km-status {
    background: transparent;
    color: rgba(26, 0, 16, 0.3);
    border: 1px solid rgba(125, 211, 252, 0.5);
}

.km-row-from {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 800;
    width: 237px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark);
}

.km-row-sub {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: rgba(26, 0, 16, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.km-row-trash {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
    background: transparent;
    color: rgba(26, 0, 16, 0.32);
    border: 1px dashed rgba(125, 211, 252, 0.45);
    border-radius: var(--radius-pill);
    padding: 5px 9px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.km-row-trash:hover {
    color: var(--pink);
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--pink);
}

.km-row-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pink);
}

.km-action-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    background: rgba(125, 211, 252, 0.22);
    border: 1.5px solid var(--blue);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    box-shadow: 2px 3px 0 rgba(125, 211, 252, 0.4);
}

.km-action-count {
    flex: 1;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
}

.km-action-trash,
.km-action-clear {
    font-family: var(--font-display);
    font-size: 11px;
    background: var(--cream);
    color: var(--dark);
    border: 1.5px solid var(--blue);
    border-radius: var(--radius-pill);
    padding: 5px 11px;
    cursor: pointer;
    box-shadow: 2px 2px 0 rgba(125, 211, 252, 0.4);
    transition: background 0.1s, color 0.1s, border-color 0.1s, box-shadow 0.05s;
}

.km-action-trash:hover {
    background: var(--pink);
    color: white;
    border-color: var(--pink);
    box-shadow: none;
}

.km-action-clear:hover {
    background: rgba(125, 211, 252, 0.4);
    box-shadow: none;
}

.km-empty {
    font-family: var(--font-display);
    font-size: 14px;
    color: rgba(125, 211, 252, 0.65);
    text-align: center;
    padding: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════════
   §06 EMAIL READER — opened view.
   Two columns inside .km-body: left sidebar (220px portrait + folder
   capsules), right .km-panel (meta pills + body card + reply choices
   or "Your reply" record + BACK button).
   ═══════════════════════════════════════════════════════════════════ */

.km-detail {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
}

/* ── META PILLS — From + Date side by side, Subject full-width below ── */
.km-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.km-meta-pill {
    background: var(--cream);
    border: 2px solid var(--pink);
    border-radius: var(--r-button);
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 13px;
    min-width: 0;
}
.km-meta-pill.km-meta-subject {
    margin-top: 0;
}

/* Critical typography rule (§06): label and value share the Fredoka family,
   different weights and colors. Label gets `font-variant-caps: small-caps`
   (NOT all-small-caps) and is written in title case — full-height F, smaller
   "rom" follows. Pixel font would baseline-clash with the chunky value. */
.km-meta-label {
    font-family: var(--font-fredoka);
    font-weight: 600;
    font-size: 14px;
    color: var(--pink-deep);
    font-variant-caps: small-caps;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    line-height: 1.1;
}
.km-meta-value {
    font-family: var(--font-fredoka);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-meta-pill.km-meta-subject .km-meta-value {
    font-weight: 600;
    font-size: 18px;
}

/* ── EMAIL BODY — cream card, soft pink-soft border, DM Sans, pre-line.
   No max-height — body grows to fit content. The outer .km-panel
   handles scrolling for any unusually long email. */
.km-detail-body {
    background: var(--cream);
    border: 1.5px solid var(--pink-soft);
    border-radius: var(--r-card);
    padding: 1.2rem 1.4rem;
    font-family: var(--font-dmsans);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink);
    white-space: pre-line;
    margin-top: 0.4rem;
}

/* ── ACTIONS area (choices, reply record, trash button) ── */
.km-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

/* ── REPLY CHOICES — A/B/C cream capsules with pink circle bullets ── */
.km-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.km-choices-label {
    font-family: var(--font-display);
    font-size: 9px;
    color: var(--pink-deep);
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
    padding-bottom: 0.3rem;
    border-bottom: 1.5px dashed var(--pink-soft);
}

.km-choice {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--cream);
    border: 2px solid var(--pink-soft);
    border-radius: var(--r-button);
    padding: 0.7rem 1rem;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-dmsans);
    font-size: 14px;
    color: var(--ink);
    line-height: 1.4;
    transition: background 0.1s, border-color 0.1s, transform 0.06s;
    width: 100%;
}
.km-choice:hover {
    background: var(--pink-pale);
    border-color: var(--pink);
}
.km-choice:active { transform: translateY(1px); }

.km-choice-bullet {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-fredoka);
    font-weight: 700;
    font-size: 13px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px var(--pink-soft);
}
.km-choice-text { flex: 1; min-width: 0; }

/* ── "YOUR REPLY" RECORD — green-soft card with italic Fraunces text ── */
.km-reply-record {
    background: var(--green-soft);
    border: 2px solid var(--green);
    border-radius: var(--r-card);
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.km-reply-record-label {
    font-family: var(--font-display);
    font-size: 9px;
    color: #1F6B30;
    letter-spacing: 0.05em;
}
.km-reply-record-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 15px;
    color: #1F6B30;
    line-height: 1.5;
}
.km-reply-record-attrib {
    font-family: var(--font-dmmono);
    font-size: 10.5px;
    color: var(--mid);
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
}

.km-replied {
    font-family: var(--font-dmsans);
    font-size: 14px;
    color: var(--mid);
    background: var(--cream);
    border: 1.5px dashed var(--pink-soft);
    border-radius: var(--r-card);
    padding: 0.8rem 1rem;
    font-style: italic;
}

.km-missed-note {
    background: var(--cream-deep);
    border: 2px solid var(--faint);
    border-radius: var(--r-card);
    padding: 0.7rem 1rem;
    font-family: var(--font-dmsans);
    font-size: 13px;
    color: var(--mid);
    font-style: italic;
}

/* ── FOLLOW-UP (sender's same-day response after you reply) ──
   Header tells the player WHO is responding so the layered
   conversation reads cleanly under the green "Your reply" card. */
.km-followup {
    background: var(--pink-pale);
    border: 1.5px solid var(--pink-soft);
    border-left: 4px solid var(--pink);
    border-radius: var(--r-card);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.km-followup-header {
    font-family: var(--font-fredoka);
    font-weight: 600;
    font-size: 11px;
    color: var(--pink-deep);
    letter-spacing: 0.02em;
    line-height: 1.25;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--pink-soft);
}
.km-followup-body {
    font-family: var(--font-dmsans);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink);
    white-space: pre-line;
}

/* ── TRASH / DELETE buttons (muted utility) ── */
.km-trash-btn,
.km-delete-btn {
    align-self: flex-end;
    font-family: var(--font-display);
    font-size: 8px;
    background: transparent;
    color: var(--faint);
    border: 1px dashed var(--pink-soft);
    border-radius: var(--r-pill);
    padding: 5px 10px;
    cursor: pointer;
    margin-top: 0.4rem;
    transition: color 0.15s, border-color 0.15s;
    letter-spacing: 0.04em;
}
.km-trash-btn:hover,
.km-delete-btn:hover {
    color: var(--pink-deep);
    border-color: var(--pink);
    border-style: solid;
}

/* ── BACK button — teal capsule, pixel font ── */
.km-back-btn {
    align-self: flex-start;
    font-family: var(--font-display);
    font-size: 10px;
    background: var(--teal);
    color: #fff;
    border: 2px solid var(--teal-deep);
    border-radius: var(--r-button);
    padding: 0.55rem 1rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--teal-deep);
    margin-top: 0.6rem;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    transition: transform 0.06s;
}
.km-back-btn:hover { filter: brightness(1.05); }
.km-back-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--teal-deep);
}
.km-back-arrow {
    display: inline-block;
    font-family: var(--font-dmsans);
    margin-right: 4px;
}

/* ── Sidebar address footer ── */
.km-sidebar::after {
    content: 'you@konbini-workers.bun';
    font-family: var(--font-dmmono);
    font-size: 8px;
    color: var(--faint);
    text-align: center;
    margin-top: auto;
    letter-spacing: 0.04em;
    padding-top: var(--space-2);
    word-break: break-all;
}

.km-followup::before {
    content: '↩  reply received';
    display: block;
    font-family: var(--font-display);
    font-size: 7px;
    color: rgba(26, 0, 16, 0.28);
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

/* ── Inbox column header ── */
.km-col-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 2px 12px 6px;
    border-bottom: 1px dashed rgba(125, 211, 252, 0.4);
    margin-bottom: 4px;
}

.km-col-header-gap {
    width: 58px;
    flex-shrink: 0;
}

.km-col-check-gap {
    width: 18px;
    flex-shrink: 0;
}

.km-col-label {
    font-family: var(--font-display);
    font-size: 6px;
    color: rgba(26, 0, 16, 0.22);
    letter-spacing: 0.08em;
}

.km-col-label-sub {
    font-family: var(--font-display);
    font-size: 6px;
    color: rgba(26, 0, 16, 0.22);
    letter-spacing: 0.08em;
    flex: 1;
}

/* ═══ KONMAIL v3 — calendar arc additions ═══ */

/* Inbox status bar (informational, not punitive) */
.km-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: 9px 14px;
    margin-bottom: 8px;
    background: rgba(125, 211, 252, 0.16);
    border: 1.5px solid var(--blue);
    border-left: 5px solid var(--pink);
    border-radius: var(--radius-md);
    box-shadow: 2px 3px 0 rgba(125, 211, 252, 0.35);
}

.km-status-day {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: 0.08em;
}

.km-status-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
}

.km-stat {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.7);
    color: var(--dark);
    border: 1px solid rgba(125, 211, 252, 0.6);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    letter-spacing: 0.02em;
}

.km-stat.km-stat-good { border-color: #4ade80; background: rgba(220, 252, 231, 0.7); }
.km-stat.km-stat-mid  { border-color: #fbbf24; background: rgba(254, 243, 199, 0.7); }
.km-stat.km-stat-low  { border-color: var(--pink); background: rgba(252, 231, 243, 0.75); color: var(--pink); }

/* Pre-game notice (before May 18) */
.km-pregame {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(26, 0, 16, 0.6);
    background: rgba(125, 211, 252, 0.1);
    border: 1.5px dashed rgba(125, 211, 252, 0.55);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 10px;
}

/* MISSED rows — greyed, lock icon, window closed */
.km-row.km-missed {
    background: rgba(180, 180, 180, 0.16);
    border-color: rgba(160, 160, 160, 0.5);
    border-style: dashed;
    box-shadow: none;
    opacity: 0.75;
    cursor: pointer;
}

.km-row.km-missed .km-status {
    background: rgba(120, 120, 120, 0.6);
    color: #fff;
}

.km-row.km-missed .km-row-from,
.km-row.km-missed .km-row-sub {
    color: rgba(26, 0, 16, 0.45);
    text-decoration: line-through;
    text-decoration-color: rgba(26, 0, 16, 0.18);
}

.km-row.km-missed::before {
    content: '🔒';
    flex-shrink: 0;
    font-size: 12px;
    opacity: 0.55;
    margin-left: -4px;
}

/* Day 11 ending row — make it pop */
.km-row.km-ending-row {
    background: linear-gradient(95deg, rgba(233, 213, 255, 0.55), rgba(252, 231, 243, 0.55));
    border-color: #c084fc;
    border-width: 2px;
    box-shadow: 3px 4px 0 rgba(192, 132, 252, 0.4);
}

.km-row.km-ending-row .km-status {
    background: #a855f7;
    color: #fff;
}

.km-check-disabled {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: transparent;
}

/* Arrived-date tag on story rows */
.km-arrived {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 9px;
    color: rgba(26, 0, 16, 0.4);
    background: rgba(255, 255, 255, 0.55);
    border: 1px dashed rgba(125, 211, 252, 0.5);
    border-radius: var(--radius-pill);
    padding: 2px 7px;
    letter-spacing: 0.04em;
}

.km-row.km-missed .km-arrived {
    border-color: rgba(120, 120, 120, 0.5);
    color: rgba(26, 0, 16, 0.35);
}

/* Missed-detail notice in the detail panel */
.km-missed-note {
    background: rgba(255, 240, 240, 0.7);
    border: 1.5px solid rgba(220, 100, 100, 0.45);
    border-left: 4px solid var(--pink);
    color: rgba(26, 0, 16, 0.7);
    font-style: italic;
}

/* Day-11 ending screen */
.km-ending-screen {
    background:
        linear-gradient(180deg, var(--ending-accent, #fef9ff) 0%, transparent 100%);
    border: 2px solid #c084fc;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: 4px 5px 0 rgba(192, 132, 252, 0.3);
}

.km-ending-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px dashed rgba(192, 132, 252, 0.45);
    margin-bottom: var(--space-2);
}

.km-ending-icon {
    font-size: 44px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(2px 3px 0 rgba(192, 132, 252, 0.3));
}

.km-ending-titles {
    flex: 1;
}

.km-ending-label {
    font-family: var(--font-display);
    font-size: 10px;
    color: #a855f7;
    letter-spacing: 0.2em;
}

.km-ending-name {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    color: var(--dark);
    margin-top: 2px;
}

.km-ending-cta {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #15803d;
    background: rgba(220, 252, 231, 0.6);
    border: 1.5px solid #4ade80;
    border-left: 5px solid #15803d;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-top: var(--space-2);
    line-height: 1.5;
}