/* ============================================================
   Peku — application styles
   Built on peku.tokens.css + peku.css.
   All component class names map to the Peku visual language:
   moss = primary/positive · clay = expense/danger
   sand = warning · sky = allocation/info
   Paper surfaces · hairline borders · flat 2–3 px radius
   ============================================================ */

/* ---------- App-level layout tokens ---------- */
:root {
    --nav-width: 224px;
    --nav-height: 56px;
    --content-pad: 28px;
    --ease: var(--peku-easing);
}

/* ---------- Reset + base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
#app {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--peku-font-ui);
    font-size: var(--peku-fs-body);
    line-height: var(--peku-lh-body);
    color: var(--peku-ink);
    background: var(--peku-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-image: var(--peku-grain-image);
    background-size: var(--peku-grain-size);
    transition: background var(--peku-dur) var(--peku-easing),
                color var(--peku-dur) var(--peku-easing);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em 0;
    font-family: var(--peku-font-display);
    font-weight: 400;
    line-height: var(--peku-lh-display);
    color: var(--peku-ink);
    letter-spacing: var(--peku-tracking-display);
}
h1 { font-size: var(--peku-fs-display-sm); }
h2 { font-size: var(--peku-fs-display-xs); }
h3 { font-size: 18px; font-family: var(--peku-font-ui); font-weight: 600; letter-spacing: -0.005em; }
h4 { font-size: var(--peku-fs-body-lg); font-family: var(--peku-font-ui); font-weight: 600; }

p { margin: 0 0 0.8em 0; }

a {
    color: var(--peku-moss);
    text-decoration: none;
    transition: color var(--peku-dur-fast) var(--peku-easing);
}
a:hover { color: var(--peku-moss-2); text-decoration: underline; }

::selection { background: var(--peku-moss-soft); color: var(--peku-moss); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--peku-line-2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
    background: var(--peku-line-2);
    border-radius: 1px;
    border: 2px solid var(--peku-bg);
}
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Loading ---------- */
.loading {
    padding: 60px 24px;
    text-align: center;
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    letter-spacing: var(--peku-tracking-stamp);
    text-transform: uppercase;
}

/* ============================================================
   Auth pages (login / signup)
   ============================================================ */
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: var(--peku-bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-2);
    padding: 36px 32px;
    box-shadow: var(--peku-shadow-1);
    position: relative;
}
.auth-card::before,
.auth-card::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--peku-moss);
    pointer-events: none;
}
.auth-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.auth-card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.auth-card h1 {
    margin-bottom: 24px;
    font-size: var(--peku-fs-display-sm);
}
.auth-warnings {
    display: grid;
    gap: 6px;
    margin: 8px 0 22px 0;
    padding: 12px 14px;
    background: var(--peku-sand-soft);
    border: 1px solid var(--peku-sand);
    border-radius: var(--peku-radius-1);
    font-size: var(--peku-fs-body-sm);
    color: var(--peku-sand-ink);
}
.auth-warnings .warning { margin: 0; }
.auth-link {
    margin-top: 18px;
    font-size: var(--peku-fs-body-sm);
    color: var(--peku-ink-3);
    text-align: center;
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}

/* ============================================================
   Forms
   ============================================================ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.form-group > label,
.form-group > span {
    font-family: var(--peku-font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: var(--peku-tracking-label);
    text-transform: uppercase;
    color: var(--peku-ink-3);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
    font: inherit;
    width: 100%;
    padding: 9px 12px;
    color: var(--peku-ink);
    background: var(--peku-bg);
    border: 1px solid var(--peku-line-2);
    border-bottom: 1.5px solid var(--peku-ink-2);
    border-radius: 0;
    outline: none;
    transition: border-color var(--peku-dur-fast) var(--peku-easing);
    min-height: 40px;
    appearance: none;
}
/* Chromium pads the internal datetime-edit, making date inputs ~2px taller
   than text/number inputs. Zero it so heights match across allocation fields. */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}
textarea {
    min-height: 88px;
    resize: vertical;
    line-height: var(--peku-lh-body);
}
input:focus,
textarea:focus,
select:focus {
    border-bottom-color: var(--peku-moss);
    box-shadow: none;
}
input::placeholder,
textarea::placeholder { color: var(--peku-ink-4); }
input:disabled,
textarea:disabled,
select:disabled {
    background: var(--peku-bg-2);
    color: var(--peku-ink-3);
    cursor: not-allowed;
    opacity: 0.6;
}

select {
    padding-right: 36px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238a9084' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

/* iOS Safari auto-zooms into any focused form control whose computed
   font-size is below 16px and never zooms back out (the user must pinch).
   Keep the 14px desktop type scale but bump controls to 16px on touch
   devices to suppress the zoom. */
@media (pointer: coarse) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    textarea,
    select,
    .peku-input,
    .peku-textarea,
    .peku-select {
        font-size: 16px;
    }
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: 0;
    accent-color: var(--peku-moss);
    margin: 0 8px 0 0;
    transform: translateY(1px);
}

.form-check,
.form-group.form-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.form-check > label,
.form-group.form-inline > label {
    font-family: var(--peku-font-ui);
    font-size: var(--peku-fs-body-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--peku-ink);
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    justify-content: flex-end;
}

.form-fieldset {
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    padding: 14px 16px;
    margin: 6px 0 18px 0;
}
.form-fieldset > legend {
    padding: 0 6px;
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    letter-spacing: var(--peku-tracking-stamp);
    text-transform: uppercase;
    color: var(--peku-ink-3);
    font-weight: 500;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--peku-line-2);
    border-radius: var(--peku-radius-1);
    cursor: pointer;
    transition: background var(--peku-dur-fast) var(--peku-easing),
                border-color var(--peku-dur-fast) var(--peku-easing);
    font-size: var(--peku-fs-body-sm);
}
.radio-label:hover { background: var(--peku-bg-2); }
.radio-label input[type="radio"]:checked + span,
.radio-label:has(input:checked) {
    border-color: var(--peku-moss);
    background: var(--peku-moss-soft);
    color: var(--peku-moss);
}

/* Password hint under signup input */
.password-hint { min-height: 18px; font-size: var(--peku-fs-body-sm); }
.hint-weak { color: var(--peku-clay); font-family: var(--peku-font-mono); font-size: var(--peku-fs-micro); letter-spacing: 0.08em; }
.hint-ok { color: var(--peku-moss); font-family: var(--peku-font-mono); font-size: var(--peku-fs-micro); letter-spacing: 0.08em; font-weight: 600; }

/* ============================================================
   Buttons
   ============================================================ */
button {
    font-family: var(--peku-font-ui);
    font-weight: 600;
    font-size: var(--peku-fs-body-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    min-height: 38px;
    border-radius: var(--peku-radius-1);
    border: 1px solid var(--peku-line-2);
    cursor: pointer;
    transition: background var(--peku-dur-fast) var(--peku-easing),
                border-color var(--peku-dur-fast) var(--peku-easing),
                color var(--peku-dur-fast) var(--peku-easing);
    white-space: nowrap;
    background: transparent;
    color: var(--peku-ink-2);
    letter-spacing: -0.005em;
}
button:hover { background: var(--peku-bg-2); border-color: var(--peku-line-2); }
button:active { opacity: 0.85; }
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
button:focus-visible {
    outline: none;
    box-shadow: var(--peku-focus);
}

.btn-primary {
    background: var(--peku-moss);
    color: var(--peku-paper);
    border-color: var(--peku-moss);
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--peku-moss-2);
    border-color: var(--peku-moss-2);
    color: var(--peku-paper);
}

.btn-secondary {
    background: transparent;
    color: var(--peku-ink-2);
    border-color: var(--peku-line-2);
}
.btn-secondary:hover { background: var(--peku-bg-2); color: var(--peku-ink); }

.btn-danger {
    background: transparent;
    color: var(--peku-clay);
    border-color: var(--peku-clay);
}
.btn-danger:hover {
    background: var(--peku-clay);
    color: var(--peku-paper);
    border-color: var(--peku-clay);
}

.btn-sm { padding: 5px 12px; min-height: 30px; font-size: var(--peku-fs-mono-sm); }
.btn-xs { padding: 3px 9px; min-height: 24px; font-size: var(--peku-fs-mini); }

/* ============================================================
   App shell layout
   ============================================================ */
.app-layout {
    display: grid;
    grid-template-columns: var(--nav-width) 1fr;
    min-height: 100vh;
}

.app-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--peku-paper);
    border-right: 1px solid var(--peku-line);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

/* Brand wordmark */
.app-nav::before {
    content: "Peku";
    display: block;
    font-family: var(--peku-font-display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--peku-ink);
    padding: 4px 10px 20px 10px;
    line-height: 1;
}

.app-nav a {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--peku-radius-1);
    color: var(--peku-ink-2);
    font-size: var(--peku-fs-body-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--peku-dur-fast) var(--peku-easing),
                color var(--peku-dur-fast) var(--peku-easing);
    gap: 8px;
}
.app-nav a::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--peku-ink-4);
    flex-shrink: 0;
    transition: background var(--peku-dur-fast) var(--peku-easing);
}
.app-nav a:hover {
    background: var(--peku-bg-2);
    color: var(--peku-ink);
    text-decoration: none;
}
.app-nav a:hover::before { background: var(--peku-ink-3); }
.app-nav a.active,
.app-nav a[aria-current="page"] {
    background: var(--peku-bg-2);
    color: var(--peku-ink);
    font-weight: 600;
}
.app-nav a.active::before,
.app-nav a[aria-current="page"]::before {
    background: var(--peku-moss);
}

.logout-btn {
    margin-top: auto;
    justify-content: flex-start;
    background: transparent;
    color: var(--peku-ink-3);
    border: 1px solid transparent;
    padding: 6px 10px;
    min-height: 34px;
    font-size: var(--peku-fs-body-sm);
    font-weight: 500;
}
.logout-btn:hover {
    background: var(--peku-clay-soft);
    color: var(--peku-clay);
    border-color: transparent;
}

.app-content {
    padding: var(--content-pad);
    min-width: 0;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Mobile-only navigation chrome — the sidebar is the nav on desktop. */
.app-topbar,
.nav-backdrop { display: none; }

/* Page header (title + actions) */
.page,
.page-header {
    margin: 0;
}
.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--peku-line);
}
.page-header h1 { margin: 0; }
.page-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--peku-fs-body-sm);
    color: var(--peku-ink-3);
    cursor: pointer;
    user-select: none;
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}

/* Period label in header */
.period-label {
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    letter-spacing: var(--peku-tracking-stamp);
    text-transform: uppercase;
    color: var(--peku-ink-3);
    padding: 0 8px;
}

/* ============================================================
   Cards / surfaces
   ============================================================ */
.card,
.budget-summary-card,
.balance-list,
.settings-section,
.onboarding-card,
.pending-occurrence-card,
.entity-detail,
.error-boundary {
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-2);
    padding: 20px;
    box-shadow: var(--peku-shadow-0);
}

.detail-section {
    margin-top: 16px;
    padding: 18px;
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
}

/* ============================================================
   Dashboard
   ============================================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.budget-summary-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 24px;
    align-items: start;
    background: var(--peku-paper);
    position: relative;
}
/* Moss left accent bar */
.budget-summary-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--peku-moss);
    border-radius: 0 0 0 var(--peku-radius-2);
}
.budget-summary-card { padding-left: 23px; }

@media (max-width: 720px) {
    .budget-summary-card { grid-template-columns: 1fr; }
}

.budget-main { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.budget-label {
    font-family: var(--peku-font-mono);
    text-transform: uppercase;
    letter-spacing: var(--peku-tracking-stamp);
    font-size: var(--peku-fs-micro);
    font-weight: 500;
    color: var(--peku-ink-3);
}
.budget-remaining-block { display: flex; flex-direction: column; gap: 6px; }
.budget-remaining {
    font-family: var(--peku-font-display);
    font-size: 56px;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 0.95;
    color: var(--peku-ink);
    font-variant-numeric: tabular-nums;
}
.budget-remaining.positive { color: var(--peku-moss); }
.budget-remaining.negative { color: var(--peku-clay); }

.budget-daily {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--peku-ink-3);
    font-size: var(--peku-fs-body-sm);
    margin-top: 6px;
    font-family: var(--peku-font-mono);
}
.budget-daily strong {
    color: var(--peku-ink-2);
    font-size: var(--peku-fs-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.budget-daily-amount { font-family: var(--peku-font-mono); font-weight: 600; }
.budget-daily-amount.positive { color: var(--peku-moss); }
.budget-daily-amount.negative { color: var(--peku-clay); }

/* Recorded / Upcoming / Total breakdown table.
   Each .budget-row is display:contents so its cells land directly in the
   4-column grid (label + three value columns). */
.budget-breakdown {
    display: grid;
    grid-template-columns: minmax(80px, 1.2fr) repeat(3, 1fr);
    border-left: 1px solid var(--peku-line);
    align-content: start;
}
.budget-row { display: contents; }
.budget-col-head {
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    color: var(--peku-ink-3);
    text-transform: uppercase;
    letter-spacing: var(--peku-tracking-label);
    font-weight: 500;
    text-align: right;
    padding: 12px 18px 6px;
    border-bottom: 1px solid var(--peku-line);
}
.budget-cell-corner { padding: 12px 18px 6px; border-bottom: 1px solid var(--peku-line); }
.budget-cell-label {
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    color: var(--peku-ink-3);
    text-transform: uppercase;
    letter-spacing: var(--peku-tracking-label);
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--peku-line);
}
.budget-cell-value {
    font-family: var(--peku-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: var(--peku-fs-mono);
    color: var(--peku-ink);
    text-align: right;
    padding: 12px 18px;
    border-bottom: 1px solid var(--peku-line);
}
.budget-cell-value.positive { color: var(--peku-moss); }
.budget-cell-value.negative { color: var(--peku-clay); }
/* Upcoming column: discreet, marks projected (not-yet-recorded) values. */
.budget-col-upcoming { font-style: italic; color: var(--peku-ink-3); }

/* Balance/savings lists on dashboard */
.balance-list-title {
    margin-bottom: 12px;
    font-size: 18px;
}
.balance-list-rows { display: grid; gap: 0; }
.balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--peku-line);
    transition: none;
}
.balance-row:last-child { border-bottom: 0; }
.balance-row-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.balance-row-name { font-weight: 500; font-size: var(--peku-fs-body-sm); }
.balance-target-info,
.balance-target-label {
    font-size: var(--peku-fs-micro);
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.06em;
}
.balance-progress-bar,
.progress-bar-track {
    position: relative;
    height: 5px;
    background: var(--peku-bg-2);
    border: 1px solid var(--peku-line);
    border-radius: 1px;
    overflow: hidden;
    margin-top: 4px;
}
.balance-progress-fill,
.progress-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--peku-moss);
    border-radius: 0;
    transition: width var(--peku-dur) var(--peku-easing);
}
.balance-row-amount {
    font-family: var(--peku-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: var(--peku-fs-mono);
    text-align: right;
    flex-shrink: 0;
}
.balance-row-amount.positive { color: var(--peku-moss); }
.balance-row-amount.negative { color: var(--peku-clay); }

.threshold-fill {
    font-family: var(--peku-font-mono);
    font-weight: 600;
    color: var(--peku-ink);
    font-variant-numeric: tabular-nums;
    min-width: 64px;
}
.progress-pct {
    font-size: var(--peku-fs-micro);
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Amount display */
.amount {
    font-family: var(--peku-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.amount.projected { color: var(--peku-ink-3); }
.amount-positive { color: var(--peku-moss); font-family: var(--peku-font-mono); font-weight: 600; }
.amount-negative { color: var(--peku-clay); font-family: var(--peku-font-mono); font-weight: 600; }

/* ============================================================
   Tables / entity lists
   ============================================================ */
.entity-list,
.priority-list-entries,
.transaction-list,
.timeline,
.settings-sections,
.threshold-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.list-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 12px;
    padding: 6px 14px;
    background: transparent;
    border-bottom: 1px solid var(--peku-line);
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--peku-tracking-stamp);
    font-weight: 500;
    color: var(--peku-ink-3);
    margin-bottom: 4px;
}
.list-header button {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    /* Base buttons are `display: flex; justify-content: center`, which centers
       the label and overrides `text-align`. Header labels must sit at the start
       of their column to line up with the left-aligned cell content below. */
    justify-content: flex-start;
    min-height: auto;
    cursor: pointer;
    text-transform: inherit;
    letter-spacing: inherit;
}
.list-header button:hover { color: var(--peku-ink-2); background: transparent; }

.entity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    margin-bottom: 4px;
    transition: border-color var(--peku-dur-fast) var(--peku-easing);
}
.entity-row:hover {
    border-color: var(--peku-line-2);
    background: var(--peku-bg-2);
}
.entity-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.entity-info > * { max-width: 100%; }
.entity-name,
.account-name,
.priority-name,
.timeline-name {
    font-weight: 500;
    color: var(--peku-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entity-name a,
.balance-row-name a { color: inherit; }
.entity-name a:hover { color: var(--peku-moss); text-decoration: none; }

.entity-balance,
.entity-balance-large {
    font-family: var(--peku-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--peku-ink);
}
.entity-balance-large { font-size: 22px; }

.entity-alloc,
.entity-date,
.timeline-item-meta,
.muted,
.priority-info,
.priority-note {
    font-size: var(--peku-fs-mono-sm);
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}
.entity-actions,
.timeline-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.entity-actions button,
.timeline-item-actions button {
    min-height: 28px;
    padding: 4px 10px;
    font-size: var(--peku-fs-mono-sm);
}
.color-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    background: var(--peku-moss);
    flex-shrink: 0;
}
.category-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ============================================================
   Badges
   ============================================================ */
.badge,
.stale-badge,
.entity-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--peku-radius-1);
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    color: var(--peku-ink-3);
    border: 1px solid var(--peku-ink-3);
    white-space: nowrap;
}
.badge-info { background: transparent; color: var(--peku-sky); border-color: var(--peku-sky); }
.badge-muted { background: transparent; color: var(--peku-ink-3); border-color: var(--peku-ink-3); }
.badge-savings { background: var(--peku-moss-soft); color: var(--peku-moss); border-color: var(--peku-moss); }
.badge-warning { background: transparent; color: var(--peku-sand-ink); border-color: var(--peku-sand-ink); }
[data-theme="dark"] .badge-warning { color: var(--peku-sand); border-color: var(--peku-sand); }
.reconcile-reminder { font-weight: 700; }
.stale-badge { background: transparent; color: var(--peku-sand-ink); border-color: var(--peku-sand-ink); }
[data-theme="dark"] .stale-badge { color: var(--peku-sand); border-color: var(--peku-sand); }
.fluctuating-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
}

/* ============================================================
   Timeline
   ============================================================ */
.timeline-day {
    margin-bottom: 20px;
}
.timeline-day-header,
.timeline-date {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--peku-font-mono);
    font-weight: 500;
    color: var(--peku-ink-3);
    text-transform: uppercase;
    letter-spacing: var(--peku-tracking-stamp);
    font-size: var(--peku-fs-micro);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--peku-line);
}
.timeline-day-header::after,
.timeline-date::after {
    display: none;
}
.timeline-entry {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--peku-line);
    align-items: center;
    margin-bottom: 0;
    background: transparent;
    border-radius: 0;
    border-top: 0; border-left: 0; border-right: 0;
}
.timeline-entry:last-child { border-bottom: 0; }
.timeline-entry:hover { background: transparent; }

/* The timeline *page* wraps each transaction in a .timeline-item-wrapper that
   carries only drag-and-drop affordance — it holds a single .timeline-item,
   which owns the row's visual layout. (Distinct from .timeline-entry, the
   three-column date/name/amount grid used on the account/envelope detail
   pages.) */
.timeline-item-wrapper {
    display: block;
    cursor: grab;
    border-radius: var(--peku-radius-1);
}
.timeline-item-wrapper:active { cursor: grabbing; }

/* Timeline item date/time column */
.timeline-date {
    font-family: var(--peku-font-mono);
    font-size: 11px;
    color: var(--peku-ink-3);
    letter-spacing: 0.06em;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    font-weight: 400;
    text-transform: lowercase;
    display: block;
}

.timeline-item-main,
.timeline-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.timeline-item-name { font-weight: 500; color: var(--peku-ink); font-size: var(--peku-fs-body); }
.timeline-item-entities {
    font-size: 10.5px;
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}
.timeline-item-note { font-size: var(--peku-fs-body-sm); color: var(--peku-ink-3); font-style: italic; }
.timeline-item-amount {
    font-family: var(--peku-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: var(--peku-fs-mono);
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
}
.timeline-item-amount .amount { color: var(--peku-ink); }

.timeline-item.income .timeline-item-amount   { color: var(--peku-moss); }
.timeline-item.expense .timeline-item-amount  { color: var(--peku-clay); }
.timeline-item.alloc .timeline-item-amount    { color: var(--peku-sky); }

/* Period nav (prev/next month) */
.period-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    margin-bottom: 16px;
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-mono-sm);
}
.period-nav button {
    min-height: 28px;
    padding: 4px 10px;
    font-size: var(--peku-fs-mono-sm);
}
.period-status {
    text-align: center;
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--peku-ink-3);
    text-decoration: none;
    display: block;
}
.period-status-warn {
    color: var(--peku-clay);
}
.period-status-closed {
    color: var(--peku-ink-3);
    font-style: italic;
}

/* Pending occurrence "⏳" button */
.pending-occurrence-card {
    display: flex;
    align-items: stretch;
    /* The interactive element (.pending-occurrence-confirm) owns its padding, like
       every other clickable row in the app (timeline items, dropdown items). The
       wrapper only insets the skip button from the right frame, with a matching gap
       between the confirm and skip buttons. */
    gap: var(--peku-space-3);
    padding: 0 var(--peku-space-3) 0 0;
    background: var(--peku-moss-soft);
    border: 1px dashed var(--peku-moss);
    color: var(--peku-moss);
    font-weight: 500;
    text-align: left;
    width: 100%;
    min-height: auto;
    white-space: normal;
    border-radius: var(--peku-radius-1);
    margin-bottom: 12px;
    font-size: var(--peku-fs-body-sm);
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
/* Hovering the confirm area "activates" the card: solid border + faint lift,
   instead of a muddy opacity dim. The skip button keeps its own hover. */
.pending-occurrence-card:has(.pending-occurrence-confirm:hover) {
    background: color-mix(in srgb, var(--peku-moss-soft) 82%, var(--peku-moss) 18%);
    border-style: solid;
    box-shadow: var(--peku-shadow-1);
}
.pending-occurrence-confirm {
    display: flex;
    align-items: center;
    gap: var(--peku-space-3);
    flex: 1;
    min-width: 0;
    /* Same rhythm as .timeline-item so the row reads consistently in the timeline. */
    padding: var(--peku-space-3) var(--peku-space-4);
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.pending-occurrence-icon { font-size: 1rem; }
.pending-occurrence-label { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.pending-occurrence-skip {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    color: var(--peku-ink-3);
    cursor: pointer;
    line-height: 1;
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.pending-occurrence-skip:hover {
    color: var(--peku-clay);
    border-color: var(--peku-clay);
    background: color-mix(in srgb, transparent 88%, var(--peku-clay) 12%);
}

/* Skipped occurrences list (recurring template editor) */
.skipped-dates {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.skipped-dates-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    font-size: var(--peku-fs-body-sm);
    font-variant-numeric: tabular-nums;
}
.skipped-dates-restore {
    flex: none;
    background: transparent;
    border: none;
    color: var(--peku-moss);
    cursor: pointer;
    font-size: var(--peku-fs-body-sm);
    padding: 2px 6px;
}
.skipped-dates-restore:hover { text-decoration: underline; }

.period-closing {
    padding: 20px;
    margin-top: 12px;
    text-align: center;
    border: 1px solid var(--peku-moss);
    border-radius: var(--peku-radius-2);
    background: var(--peku-paper);
    position: relative;
}
.period-closing::before,
.period-closing::after {
    content: "";
    position: absolute;
    width: 12px; height: 12px;
    border: 1px solid var(--peku-moss);
}
.period-closing::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.period-closing::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.closing-preview { text-align: left; }
.closing-preview h3 { text-align: center; }
.closing-preview .empty-state { text-align: center; }

.preview-section { margin-top: 16px; }
.preview-section h4 {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--peku-ink-3);
}

.preview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.preview-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-radius: var(--peku-radius-1);
    background: var(--peku-paper-hi);
}
.preview-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.preview-label .color-dot { align-self: center; }
.preview-name {
    color: var(--peku-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preview-type {
    color: var(--peku-ink-3);
    font-size: 0.75rem;
    white-space: nowrap;
}
.preview-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.preview-total {
    background: none;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--peku-line);
    border-radius: 0;
    font-weight: 600;
}
.preview-total .preview-amount { color: var(--peku-money-pos); }
.preview-reason {
    color: var(--peku-ink-2);
    font-style: italic;
}

.preview-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

/* ============================================================
   Dialogs / modals
   ============================================================ */
.dialog-backdrop,
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(30, 38, 32, 0.4);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    padding: 16px;
    z-index: 50;
}
.dialog,
.modal {
    width: 100%;
    max-width: 460px;
    background: var(--peku-paper);
    border-radius: var(--peku-radius-2);
    box-shadow: var(--peku-shadow-2);
    border: 1px solid var(--peku-line-2);
    padding: 24px;
    position: relative;
}
.dialog::before, .dialog::after,
.modal::before, .modal::after {
    content: "";
    position: absolute;
    width: 12px; height: 12px;
    border: 1px solid var(--peku-line-2);
    pointer-events: none;
}
.dialog::before, .modal::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.dialog::after, .modal::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* Cap the panel to the viewport and scroll its content; a tall form (e.g. the
   recurring editor) would otherwise overflow off-screen with no way to reach
   the bottom actions. The mobile sheet (below) further overrides these. */
.modal { max-height: calc(100vh - 32px); overflow-y: auto; }
/* The corner brackets sit at -1px; inside a scroll container they overflow and
   trigger a phantom scrollbar (see the mobile sheet note). Drop them on .modal
   — they remain on .dialog, which never scrolls. */
.modal::before, .modal::after { display: none; }
.modal-wide { max-width: 700px; }
.dialog-title { margin-top: 0; }
.dialog-body { margin: 8px 0 14px 0; color: var(--peku-ink-2); font-size: var(--peku-fs-body-sm); }
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* --- Bottom sheet on mobile (≤ 720px) --------------------------------- */
@media (max-width: 720px) {
    /* The modal anchors flush to the bottom as a sheet (delete_dialog `.dialog`
       and the discard confirmation stay centered). */
    .modal-backdrop {
        place-items: end center;
        padding: 0;
    }
    .modal {
        max-width: 100%;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        /* Reserve the scrollbar gutter so toggling a scrollbar (e.g. opening a
           Combo dropdown) doesn't reflow the sheet's width. */
        scrollbar-gutter: stable;
        border-radius: var(--peku-radius-2) var(--peku-radius-2) 0 0;
        border-bottom: 0;
        animation: peku-sheet-up 180ms ease-out;
    }
    /* The corner brackets are a centered-dialog flourish; sitting at -1px they
       overflow the scrollable sheet and trigger a phantom scrollbar. Drop them. */
    .modal::before, .modal::after {
        display: none;
    }
}

@keyframes peku-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

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

/* ============================================================
   Onboarding
   ============================================================ */
.onboarding-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: var(--peku-bg);
}
.onboarding-page > * { width: 100%; max-width: 520px; }
.onboarding-page > h1 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--peku-ink);
}
.onboarding-card {
    padding: 28px;
    box-shadow: var(--peku-shadow-1);
    position: relative;
}
.onboarding-card::before,
.onboarding-card::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--peku-moss);
    pointer-events: none;
}
.onboarding-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.onboarding-card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.onboarding-card h2 { margin-top: 0; margin-bottom: 6px; }
.onboarding-card > p { color: var(--peku-ink-2); }
.onboarding-hint {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--peku-radius-1);
    background: var(--peku-sky-soft);
    border: 1px solid var(--peku-sky);
    color: var(--peku-sky);
    font-size: var(--peku-fs-body-sm);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}

/* ============================================================
   Messages (error/success/info/warning)
   ============================================================ */
.error-message,
.success-message,
.info-message,
.warning-message {
    margin: 12px 0;
    padding: 10px 14px;
    border-radius: var(--peku-radius-1);
    border: 1px solid transparent;
    font-size: var(--peku-fs-body-sm);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.03em;
}
.error-message,
.error-inline {
    background: var(--peku-clay-soft);
    color: var(--peku-clay);
    border-color: var(--peku-clay);
}
.error-inline { padding: 4px 0; border: 0; background: transparent; font-size: var(--peku-fs-body-sm); }
.success-message {
    background: var(--peku-moss-soft);
    color: var(--peku-moss);
    border-color: var(--peku-moss);
}
.info-message {
    background: var(--peku-sky-soft);
    color: var(--peku-sky);
    border-color: var(--peku-sky);
}
.warning-message,
.warning {
    background: var(--peku-sand-soft);
    color: var(--peku-sand-ink);
    border-color: var(--peku-sand-ink);
}
[data-theme="dark"] .warning-message,
[data-theme="dark"] .warning { color: var(--peku-sand); border-color: var(--peku-sand); }

/* Stale warning banner */
.stale-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--peku-sand-soft);
    border: 1px solid var(--peku-sand-ink);
    border-radius: var(--peku-radius-1);
    color: var(--peku-sand-ink);
    margin-bottom: 14px;
    font-size: var(--peku-fs-body-sm);
}
[data-theme="dark"] .stale-warning-banner { border-color: var(--peku-sand); color: var(--peku-sand); }
.stale-warning-icon { font-size: 1rem; flex-shrink: 0; }
.stale-warning-content { flex: 1; }
.stale-warning-actions { display: flex; gap: 8px; margin-top: 8px; }
.stale-tooltip {
    font-size: var(--peku-fs-micro);
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
}

/* ============================================================
   Tabs
   ============================================================ */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--peku-line);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tab {
    padding: 8px 14px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--peku-ink-3);
    cursor: pointer;
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    letter-spacing: var(--peku-tracking-stamp);
    text-transform: uppercase;
    min-height: auto;
    font-weight: 500;
    border-radius: 0;
    margin-bottom: -1px;
    transition: color var(--peku-dur-fast) var(--peku-easing);
}
.tab:hover { color: var(--peku-ink-2); background: transparent; }
.tab.active,
.tab[aria-selected="true"] {
    color: var(--peku-ink);
    border-bottom-color: var(--peku-moss);
    font-weight: 600;
}

/* ============================================================
   Settings / Projections / Reconciliation
   ============================================================ */
.settings-sections { gap: 12px; }
.settings-section { padding: 20px; }
.settings-section h2 { margin-top: 0; }
.settings-danger-zone {
    border-color: var(--peku-clay);
    background: var(--peku-clay-soft);
}
.settings-danger-zone h2 { color: var(--peku-clay); }

.accounts-projection-card { grid-column: 1 / -1; }
.projections-table-container {
    overflow-x: auto;
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    background: var(--peku-paper);
}
.projections-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-family: var(--peku-font-mono);
}
.projections-table th,
.projections-table td {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid var(--peku-line);
    font-size: var(--peku-fs-body-sm);
}
.projections-table th {
    background: var(--peku-bg-2);
    font-weight: 600;
    color: var(--peku-ink-3);
    text-transform: uppercase;
    letter-spacing: var(--peku-tracking-stamp);
    font-size: var(--peku-fs-micro);
}
.projections-table tr:last-child td { border-bottom: 0; }

.reconcile-form,
.reconcile-info {
    padding: 16px;
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    margin-bottom: 12px;
}
.last-reconciled {
    font-size: var(--peku-fs-mono-sm);
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}

/* Threshold splits / savings slider */
.threshold-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    margin-bottom: 4px;
}
.threshold-fixed { background: var(--peku-moss-soft); border-color: var(--peku-moss); }
.threshold-split { display: flex; align-items: center; gap: 14px; }
.threshold-slider { flex: 1; accent-color: var(--peku-moss); }
.threshold-slider-hint {
    font-size: var(--peku-fs-micro);
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}
.threshold-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--peku-fs-micro);
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}
.ef-label, .if-label {
    font-family: var(--peku-font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 120px;
    font-size: var(--peku-fs-body-sm);
}
.threshold-note {
    font-size: var(--peku-fs-mono-sm);
    color: var(--peku-ink-3);
    margin-top: 6px;
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}
.threshold-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.split-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Paired number-input + range-slider control (fill level, fund split) */
.pct-control {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pct-control .pct-number {
    flex: 0 0 auto;
    width: 84px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pct-control input[type="range"] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    accent-color: var(--peku-moss);
}

/* Priority list */
.priority-list { display: flex; flex-direction: column; gap: 0; }
.priority-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.priority-list-note {
    font-size: var(--peku-fs-mono-sm);
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}
.priority-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    margin-bottom: 4px;
}
.priority-pos {
    font-family: var(--peku-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--peku-moss);
    min-width: 22px;
    text-align: right;
    font-size: var(--peku-fs-body-sm);
}
.priority-account {
    color: var(--peku-ink-3);
    font-size: var(--peku-fs-mono-sm);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}
.priority-actions { margin-left: auto; display: flex; gap: 6px; }

/* Empty states */
.empty-state {
    padding: 40px 24px;
    text-align: center;
    color: var(--peku-ink-3);
    background: transparent;
    border: 1px dashed var(--peku-line-2);
    border-radius: var(--peku-radius-1);
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    letter-spacing: var(--peku-tracking-stamp);
    text-transform: uppercase;
}

/* Entity detail pages */
.entity-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--peku-line);
}
.entity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--peku-radius-1);
    background: var(--peku-moss-soft);
    color: var(--peku-moss);
    font-family: var(--peku-font-mono);
    font-weight: 700;
    font-size: var(--peku-fs-body-sm);
}

/* TOTP / recovery codes */
.totp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.totp-hint {
    font-size: var(--peku-fs-body-sm);
    color: var(--peku-ink-3);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.04em;
}
.recovery-codes {
    font-family: var(--peku-font-mono);
    background: var(--peku-bg-2);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
    font-size: var(--peku-fs-body-sm);
    letter-spacing: 0.06em;
}

/* ============================================================
   Toasts
   ============================================================ */
.toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
    max-width: 340px;
}
.toast-stack > * {
    background: var(--peku-paper);
    border: 1px solid var(--peku-line-2);
    border-radius: var(--peku-radius-1);
    padding: 10px 14px;
    box-shadow: var(--peku-shadow-2);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: toast-in var(--peku-dur) var(--peku-easing);
}
.toast-message {
    flex: 1;
    font-size: var(--peku-fs-body-sm);
    font-family: var(--peku-font-mono);
    letter-spacing: 0.03em;
}
.toast-dismiss {
    background: transparent;
    border: 0;
    color: var(--peku-ink-3);
    padding: 2px 6px;
    min-height: auto;
    font-size: 1rem;
    line-height: 1;
}
.toast-dismiss:hover { color: var(--peku-ink); background: transparent; border-color: transparent; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Delete confirm inline */
.delete-confirm {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    background: var(--peku-clay-soft);
    border: 1px solid var(--peku-clay);
    border-radius: var(--peku-radius-1);
}

/* Error boundary */
.error-boundary {
    background: var(--peku-clay-soft);
    border-color: var(--peku-clay);
    color: var(--peku-clay);
    text-align: center;
}
.error-boundary-ok {
    display: none;
}

/* Target labels */
.target-label, .target-progress {
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    color: var(--peku-ink-3);
    letter-spacing: 0.04em;
}

/* Column classes (used in some list headers) */
.col-name, .col-type, .col-date, .col-actions {
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    letter-spacing: var(--peku-tracking-stamp);
    text-transform: uppercase;
    color: var(--peku-ink-3);
}

/* ============================================================
   Responsive: tablet/mobile
   ============================================================ */
@media (max-width: 900px) {
    :root { --content-pad: 20px; }
    .list-header { grid-template-columns: 2fr 1fr auto; }
    .list-header > :nth-child(3) { display: none; }
}

@media (max-width: 720px) {
    :root { --content-pad: 16px; }

    .app-layout {
        grid-template-columns: 1fr;
        padding-bottom: 64px;
    }

    /* The sidebar becomes a slide-in drawer toggled by the top-bar burger.
       It keeps its desktop vertical layout (links, dots, brand). The drawer
       slides via `left` rather than `transform` on purpose: its ActionButtons
       child is `position: fixed` (the persistent bottom bar), and a transformed
       ancestor would drag that fixed child off-screen too. `left` does not. */
    .app-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        width: min(82vw, 300px);
        height: 100dvh;
        padding: 20px 14px calc(80px + env(safe-area-inset-bottom, 0px)) 14px;
        z-index: 41;
        transition: left var(--peku-dur) var(--peku-easing);
    }
    .app-layout.nav-open .app-nav { left: 0; }

    /* Mobile top bar carrying the menu toggle + wordmark. */
    .app-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        padding: 0 12px;
        background: var(--peku-paper);
        border-bottom: 1px solid var(--peku-line);
        z-index: 35;
    }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--peku-radius-1);
        color: var(--peku-ink-2);
    }
    .nav-toggle:hover { background: var(--peku-bg-2); border-color: transparent; }
    .nav-toggle-icon { display: inline-flex; }
    .app-topbar-brand {
        font-family: var(--peku-font-display);
        font-size: 20px;
        letter-spacing: -0.02em;
        color: var(--peku-ink);
        line-height: 1;
    }

    /* Dim backdrop behind the open drawer; click anywhere to close. */
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--peku-dur) var(--peku-easing);
        z-index: 40;
    }
    .app-layout.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

    .app-content {
        padding: var(--content-pad);
        padding-top: calc(48px + var(--content-pad));
        max-width: 100%;
    }

    h1 { font-size: var(--peku-fs-display-xs); }
    h2 { font-size: 20px; }

    .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .page-header-actions { width: 100%; justify-content: space-between; }

    /* .entity-row is a flex row; grid-template-columns is a no-op on it. Stack
       info above actions so the info column gets the full width and badges can
       size to their content instead of being squeezed into a horizontal sliver. */
    .entity-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .timeline-entry {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .entity-actions,
    .timeline-item-actions { width: 100%; justify-content: flex-end; }
    /* No hover on touch/mobile: row actions must stay visible at all times. */
    .timeline-item-actions { opacity: 1; }

    .list-header { display: none; }

    .budget-remaining { font-size: 44px; }
    /* The 4-column Recorded/Upcoming/Total grid must fit a ~300px card on a
       375px phone. Shrink the value/label fonts and padding, keep amounts on a
       single line (auto-sized money columns), and let the label column take the
       remainder (ellipsis is a safety net — at these sizes every label fits). */
    .budget-breakdown {
        border-left: 0;
        grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    }
    .budget-col-head,
    .budget-cell-corner,
    .budget-cell-value { padding: 9px 5px; }
    .budget-cell-label { padding: 9px 4px 9px 8px; }
    .budget-cell-value { font-size: 11px; white-space: nowrap; }
    .budget-col-head {
        font-size: var(--peku-fs-mini);
        white-space: nowrap;
        letter-spacing: 0;
    }
    .budget-cell-label {
        font-size: var(--peku-fs-mini);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0;
    }

    /* Savings-threshold rows: the split description ("50% EF / 50% IF") plus the
       Edit/Delete actions overflow off-screen side-by-side. Stack them. */
    .threshold-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .threshold-actions { margin-left: 0; justify-content: flex-end; }

    .radio-group { gap: 6px; }
    .radio-label { padding: 5px 10px; font-size: var(--peku-fs-body-sm); }

    .form-actions {
        flex-direction: column-reverse;
    }
    .form-actions > button { width: 100%; }

    .auth-card {
        padding: 24px 20px;
    }

    .toast-stack {
        right: 12px;
        left: 12px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        max-width: unset;
    }
}

/* ============================================================
   Timeline item transaction-type color classes
   Used as modifier on .timeline-item and .badge
   ============================================================ */
.timeline-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--peku-space-4);
    padding: var(--peku-space-3) var(--peku-space-3) var(--peku-space-3) var(--peku-space-4);
    border-bottom: 1px dashed var(--peku-line);
    /* Type accent rail; coloured per transaction-type below. */
    border-left: 2px solid var(--peku-line-2);
    transition: background var(--peku-dur-fast) var(--peku-easing);
}
.timeline-item:last-child { border-bottom: 0; }
/* Right column: amount sits on a fixed right edge across every row; actions
   reveal beneath it on hover (reserved width keeps the amounts aligned). */
.timeline-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--peku-space-2);
    min-width: 0;
}
.timeline-item-wrapper:hover .timeline-item { background: var(--peku-bg-2); }

/* Type accent rail (left border) mirrors the amount colour for fast scanning. */
.timeline-item.tx-income       { border-left-color: var(--peku-moss); }
.timeline-item.tx-expense      { border-left-color: var(--peku-clay); }
.timeline-item.tx-env-expense  { border-left-color: var(--peku-clay); }
.timeline-item.tx-allocation   { border-left-color: var(--peku-sky); }
.timeline-item.tx-deallocation { border-left-color: var(--peku-sand-ink); }
[data-theme="dark"] .timeline-item.tx-deallocation { border-left-color: var(--peku-sand); }
.timeline-item.tx-transfer     { border-left-color: var(--peku-line-2); }
.timeline-item.tx-adjustment   { border-left-color: var(--peku-line-2); }

/* Reveal row actions on hover for true pointer (mouse) devices only; on touch
   devices (and the mobile layout above) they stay visible at all times. */
@media (hover: hover) and (pointer: fine) {
    .timeline-item-actions {
        opacity: 0;
        transition: opacity var(--peku-dur-fast) var(--peku-easing);
    }
    .timeline-item-wrapper:hover .timeline-item-actions,
    .timeline-item-actions:focus-within { opacity: 1; }
}
.timeline-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 3px;
}
.timeline-item-meta .timeline-item-amount {
    margin-left: auto;
}

.timeline-item.tx-income   .timeline-item-amount { color: var(--peku-moss); }
.timeline-item.tx-expense  .timeline-item-amount { color: var(--peku-clay); }
.timeline-item.tx-allocation .timeline-item-amount { color: var(--peku-sky); }
.timeline-item.tx-env-expense .timeline-item-amount { color: var(--peku-clay); }
.timeline-item.tx-deallocation .timeline-item-amount { color: var(--peku-sand-ink); }
[data-theme="dark"] .timeline-item.tx-deallocation .timeline-item-amount { color: var(--peku-sand); }

/* Badge modifiers for transaction types */
.badge.tx-income    { color: var(--peku-moss); border-color: var(--peku-moss); }
.badge.tx-expense   { color: var(--peku-clay); border-color: var(--peku-clay); }
.badge.tx-allocation { color: var(--peku-sky); border-color: var(--peku-sky); }
.badge.tx-env-expense { color: var(--peku-clay); border-color: var(--peku-clay); }
.badge.tx-deallocation { color: var(--peku-sand-ink); border-color: var(--peku-sand-ink); }
[data-theme="dark"] .badge.tx-deallocation { color: var(--peku-sand); border-color: var(--peku-sand); }
.badge.tx-transfer  { color: var(--peku-ink-3); border-color: var(--peku-ink-3); }
.badge.tx-adjustment { color: var(--peku-ink-3); border-color: var(--peku-ink-3); }

/* stale-warning class on closing button */
button.stale-warning {
    border-color: var(--peku-sand-ink);
    color: var(--peku-sand-ink);
}
[data-theme="dark"] button.stale-warning {
    border-color: var(--peku-sand);
    color: var(--peku-sand);
}

/* ============================================================
   TOTP QR setup panel
   ============================================================ */
.totp-qr-panel {
    /* Forced white regardless of theme — QR scanners are flaky on
       dark/inverted modules, so we don't switch the panel surface
       even when [data-theme="dark"] is active. */
    background: #fff;
    padding: var(--peku-space-4);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-2);
    max-width: 240px;
    margin: 0 auto var(--peku-space-4);
}

.totp-qr-panel svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   Print-friendly
   ============================================================ */
@media print {
    .app-nav, .toast-stack, .page-header-actions, .timeline-item-actions,
    .entity-actions { display: none; }
    body { background: #fff; }
    .app-content { padding: 0; }
}

/* ── Emoji Picker ──────────────────────────────────────────────────────────── */
.emoji-picker { display: flex; flex-direction: column; }

.emoji-picker__row { display: flex; gap: 6px; align-items: stretch; }

.emoji-picker__input {
    flex: 1;
    min-width: 0;
    font-size: var(--peku-fs-mono-lg);
    line-height: var(--peku-lh-tight);
}

.emoji-picker__btn,
.emoji-picker__clear {
    flex-shrink: 0;
    padding: 0 12px;
    min-height: 40px;
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-mono-sm);
    letter-spacing: var(--peku-tracking-label);
    background: var(--peku-bg);
    border: 1px solid var(--peku-line-2);
    border-bottom: 1.5px solid var(--peku-ink-2);
    color: var(--peku-ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--peku-dur-fast) var(--peku-easing),
                background var(--peku-dur-fast) var(--peku-easing);
}
.emoji-picker__btn:hover  { color: var(--peku-ink); background: var(--peku-bg-2); }
.emoji-picker__clear      { color: var(--peku-ink-3); }
.emoji-picker__clear:hover{ color: var(--peku-ink); background: var(--peku-bg-2); }

.emoji-picker__panel {
    background: var(--peku-bg);
    border: 1px solid var(--peku-line-2);
    border-top: none;
    margin-top: 0;
}

.emoji-picker__tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--peku-line-2);
}
.emoji-picker__tabs::-webkit-scrollbar { display: none; }

.emoji-picker__tab {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: var(--peku-fs-body-lg);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--peku-ink-3);
    transition: border-color var(--peku-dur-fast) var(--peku-easing),
                color var(--peku-dur-fast) var(--peku-easing);
}
.emoji-picker__tab:hover           { color: var(--peku-ink); }
.emoji-picker__tab--active         { border-bottom-color: var(--peku-moss); color: var(--peku-ink); }

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    padding: 6px;
    gap: 2px;
}

.emoji-picker__cell {
    font-size: var(--peku-fs-mono-lg);
    padding: 4px;
    text-align: center;
    background: transparent;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1.4;
    transition: background var(--peku-dur-fast) var(--peku-easing);
}
.emoji-picker__cell:hover { background: var(--peku-bg-2); }

.emoji-picker__btn:focus-visible,
.emoji-picker__clear:focus-visible,
.emoji-picker__tab:focus-visible,
.emoji-picker__cell:focus-visible {
    outline: none;
    box-shadow: var(--peku-focus);
}

/* ── Date shortcuts ─────────────────────────────────────────────────────── */
.date-shortcuts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.date-shortcuts .date-chip {
  font-family: var(--peku-font-ui);
  font-size: var(--peku-fs-mini);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--peku-line);
  border-radius: 4px;
  background: var(--peku-bg);
  color: var(--peku-ink-2);
  cursor: pointer;
}
.date-shortcuts .date-chip:hover {
  background: var(--peku-bg-2);
  color: var(--peku-ink);
}
.date-shortcuts .date-chip.active {
  background: var(--peku-ink);
  color: var(--peku-bg);
  border-color: var(--peku-ink);
}
.date-shortcuts .date-input {
  flex: 1;
  min-width: 0;
}

/* ── Searchable combobox (peku-combo) ───────────────────────────────────── */
.peku-combo { position: relative; width: 100%; }
.peku-combo-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--peku-line);
  border-radius: 4px;
  background: var(--peku-bg);
  color: var(--peku-ink);
  cursor: pointer;
  text-align: left;
}
.peku-combo-trigger:hover { border-color: var(--peku-ink-3); }
.peku-combo-placeholder { color: var(--peku-ink-3); }
.peku-combo-caret { color: var(--peku-ink-3); margin-left: 0.5rem; }

/* Full-viewport click-catcher behind the popup. */
.peku-combo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
}
/* In-flow (not absolute) so the popup is real content: the enclosing modal —
   capped at `max-height` with `overflow-y: auto` — grows and scrolls to fit it
   instead of clipping a floating layer. `position: relative` + a z-index above
   the backdrop keeps clicks landing on the popup, not the click-catcher. */
.peku-combo-popup {
  position: relative;
  z-index: 21;
  margin-top: 4px;
  background: var(--peku-bg);
  border: 1px solid var(--peku-line);
  border-radius: 4px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
/* Scoped under .peku-combo-popup so this beats the global `input[type=search]`
   selector (specificity 0,1,1) — otherwise its width:100% wins and, added to
   the 0.5rem side margins, overflows the popup's right edge. */
.peku-combo-popup .peku-combo-search {
  width: calc(100% - 1rem);
  margin: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--peku-line);
  border-radius: 4px;
  background: var(--peku-bg-2);
  color: var(--peku-ink);
}
.peku-combo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.peku-combo-row {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.peku-combo-row:hover { background: var(--peku-bg-2); }
.peku-combo-empty {
  padding: 0.75rem;
  color: var(--peku-ink-3);
  text-align: center;
  font-style: italic;
}
.peku-combo-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.peku-combo-kind-icon { color: var(--peku-ink-3); display: inline-flex; }
.peku-combo-color-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.peku-combo-emoji { font-size: 1rem; }
.peku-combo-name { color: var(--peku-ink); }
/* Account balance, pushed to the right (exact value, not muted-italic). */
.peku-combo-balance { margin-left: auto; color: var(--peku-ink-2); }

/* Reserved space for the conditional account picker (avoid layout jank) */
.tx-form .account-slot {
  min-height: 3.5rem;
}
.tx-form .account-slot-placeholder {
  height: 1px;
}
.tx-form .form-hint {
  margin-top: 0.25rem;
  font-size: var(--peku-fs-mini);
  color: var(--peku-ink-3);
}
.tx-form .form-hint::before {
  content: "↳ ";
}

/* ── Action buttons (transactions: Revenu / Dépense / Transfert) ────────── */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
}
.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--peku-line);
  border-radius: 4px;
  background: var(--peku-bg);
  color: var(--peku-ink);
  font-family: var(--peku-font-ui);
  font-size: var(--peku-fs-mini);
  cursor: pointer;
  text-align: left;
}
.action-btn:hover { background: var(--peku-bg-2); border-color: var(--peku-ink-3); }
.action-btn-icon { color: var(--peku-ink-3); display: inline-flex; }

.app-nav-divider {
  height: 1px;
  background: var(--peku-line);
  margin: 0.75rem 0;
}
.action-btn-label { flex: 1; }

/* ── Mobile bottom-bar for action buttons ───────────────────────────────── */
@media (max-width: 720px) {
  /* Hide the sidebar divider on mobile when the action group becomes fixed */
  .app-nav-divider { display: none; }

  /* Promote the action group to a fixed bottom bar */
  .app-nav .action-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 31;
    flex-direction: row;
    gap: 0;
    padding: 0.5rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
    background: var(--peku-bg);
    border-top: 1px solid var(--peku-line);
    margin: 0;
  }
  .app-nav .action-buttons .action-btn {
    flex: 1;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.5rem;
    text-align: center;
  }
  .app-nav .action-buttons .action-btn:hover {
    background: var(--peku-bg-2);
  }
  .app-nav .action-buttons .action-btn-icon {
    margin: 0;
  }
  .app-nav .action-buttons .action-btn-label {
    flex: 0 0 auto;
    font-size: calc(var(--peku-fs-mini) * 0.95);
  }

  /* Push the page content above the fixed action-buttons bar */
  .app-layout {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
}

/* ============================================================
   Envelopes page — aligned grid
   ============================================================ */
/* The actions column is a fixed width (not `auto`): the header and every row
   are independent grid containers, so an `auto` track that is empty in the
   header but button-wide in rows would resolve the `fr` tracks differently and
   misalign the columns. A constant width keeps all tracks identical. */
.env-list {
    --env-actions-w: 250px;
    --env-cols: minmax(0, 2.2fr) 1.3fr 1fr 1fr var(--env-actions-w);
}

.env-list .list-header {
    grid-template-columns: var(--env-cols);
}
.col-balance {
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    letter-spacing: var(--peku-tracking-stamp);
    text-transform: uppercase;
    color: var(--peku-ink-3);
    text-align: right;
}

.env-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    margin-bottom: 4px;
    transition: border-color var(--peku-dur-fast) var(--peku-easing);
}
.env-row:hover {
    border-color: var(--peku-line-2);
    background: var(--peku-bg-2);
}

.env-row-main {
    display: grid;
    grid-template-columns: var(--env-cols);
    gap: 12px;
    align-items: center;
}
.env-row-main .entity-actions { justify-content: flex-end; }

.env-cell-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.env-name-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.env-cell-alloc {
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-mono-sm);
    letter-spacing: 0.04em;
    color: var(--peku-sky);
}
/* A computed/projected allocation (EF, IF, target-date, or the period amount of
   a % envelope) is rendered in a muted italic to mark it as derived rather than
   a fixed setting the user typed. Exact configured values keep the sky color. */
.env-cell-alloc .alloc-computed {
    font-style: italic;
    color: var(--peku-ink-3);
}
.env-cell-alloc .alloc-sep { color: var(--peku-ink-3); }

.env-cell-balance {
    font-family: var(--peku-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--peku-ink);
    text-align: right;
}
.env-cell-balance.env-balance-neg { color: var(--peku-clay); }

.env-cell-date {
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-mono-sm);
    letter-spacing: 0.04em;
    color: var(--peku-ink-3);
}

.env-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}
.env-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--peku-line);
    border-radius: 2px;
    overflow: hidden;
}
.env-progress-bar > i {
    display: block;
    height: 100%;
    background: var(--peku-moss);
}
.env-progress-label {
    font-family: var(--peku-font-mono);
    font-size: var(--peku-fs-micro);
    color: var(--peku-ink-3);
    white-space: nowrap;
}

/* Tablet: drop the target-date column */
@media (max-width: 900px) {
    .env-list { --env-cols: minmax(0, 2.2fr) 1.3fr 1fr var(--env-actions-w); }
    .env-list .list-header .col-date,
    .env-row-main .env-cell-date { display: none; }
}

/* Mobile: stack the row */
@media (max-width: 720px) {
    .env-row-main {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .env-row-main .env-cell-alloc,
    .env-row-main .env-cell-balance { text-align: left; }
    .env-row-main .entity-actions { width: 100%; justify-content: flex-end; }
}

/* === Envelope detail UI fixes (added) === */
.entity-detail-header { gap: 16px; }
.entity-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.entity-title-group h2 { margin: 0; }
.entity-balance-large { white-space: nowrap; }
/* Full ISO dates (e.g. 2026-05-29) need a touch more room than the 72px
   shared timeline column, otherwise they wrap onto two lines. */
.timeline-entry { grid-template-columns: 88px 1fr auto; }
.timeline-date { white-space: nowrap; }
.target-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
/* Transaction-history flow glyph (same SVGs as the income / expense / transfer
   action buttons) + neutral amount colour for internal transfers. */
.tx-flow-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    color: var(--peku-ink-3);
    vertical-align: -2px;
}
.amount-neutral {
    font-family: var(--peku-font-mono);
    font-weight: 600;
    color: var(--peku-ink-3);
}

/* ── Recurrence editor ─────────────────────────────────────────────── */
/* A row of inputs that reads as a plain-language sentence ("Répéter tous les
   2 mois", "le 15 du mois"). The connective words are <span>s, the controls
   are compact and inline rather than full-width form fields. */
.recurrence-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--peku-space-2);
    margin-bottom: var(--peku-space-3);
}
/* Sentence connectives: body text, not uppercase mono field labels. */
.recurrence-sentence > span {
    font-family: var(--peku-font-ui);
    font-size: var(--peku-fs-body);
    color: var(--peku-ink-2);
}
/* Compact inline number box. The `.recurrence-editor input` prefix raises
   specificity above the global `input[type="number"] { width: 100% }` rule. */
.recurrence-editor input.recurrence-num {
    width: 3.5rem;
    text-align: center;
    padding-left: var(--peku-space-2);
    padding-right: var(--peku-space-2);
}
/* Selects inside a sentence size to their content instead of stretching. */
.recurrence-editor .recurrence-sentence select {
    width: auto;
    min-width: 5.5rem;
}
.rec-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    overflow: hidden;
    margin-bottom: var(--peku-space-3);
}
.rec-mode-btn {
    padding: var(--peku-space-2) var(--peku-space-4);
    background: transparent;
    border: 0;
    font: inherit;
    color: var(--peku-ink-3);
    cursor: pointer;
    transition: background var(--peku-dur-fast) var(--peku-easing),
                color var(--peku-dur-fast) var(--peku-easing);
}
.rec-mode-btn + .rec-mode-btn { border-left: 1px solid var(--peku-line); }
.rec-mode-btn:hover { color: var(--peku-ink); }
.rec-mode-btn.selected {
    background: var(--peku-moss-soft);
    color: var(--peku-ink);
    font-weight: 600;
}
.day-pills {
    display: flex;
    gap: var(--peku-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--peku-space-3);
}
.day-pill {
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 var(--peku-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    background: transparent;
    font: inherit;
    color: var(--peku-ink-3);
    cursor: pointer;
    transition: border-color var(--peku-dur-fast) var(--peku-easing),
                color var(--peku-dur-fast) var(--peku-easing);
}
.day-pill:hover { border-color: var(--peku-ink-3); color: var(--peku-ink); }
.day-pill.selected {
    background: var(--peku-moss-soft);
    border-color: var(--peku-moss);
    color: var(--peku-ink);
    font-weight: 700;
}
.rec-summary {
    color: var(--peku-ink-3);
    font-style: italic;
    font-size: var(--peku-fs-body-sm);
    margin-top: var(--peku-space-2);
}

/* ── Dropdown launcher ─────────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-backdrop { position: fixed; inset: 0; z-index: var(--peku-z-overlay); }
.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--peku-space-1));
    z-index: calc(var(--peku-z-overlay) + 1);
    width: max-content;
    background: var(--peku-paper);
    border: 1px solid var(--peku-line);
    border-radius: var(--peku-radius-1);
    box-shadow: var(--peku-shadow-1);
    padding: var(--peku-space-1);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--peku-space-3);
    width: 100%;
    text-align: left;
    padding: var(--peku-space-2) var(--peku-space-3);
    background: transparent;
    border: 0;
    border-radius: var(--peku-radius-1);
    font: inherit;
    color: var(--peku-ink);
    cursor: pointer;
    transition: background var(--peku-dur-fast) var(--peku-easing);
}
.dropdown-item-icon {
    display: inline-flex;
    color: var(--peku-ink-3);
    transition: color var(--peku-dur-fast) var(--peku-easing);
}
.dropdown-item:hover { background: var(--peku-bg-2); }
.dropdown-item:hover .dropdown-item-icon { color: var(--peku-moss); }

/* ── Dashboard period block (status + closing action) ─────────────────────── */
.period-action-row {
  display: flex;
  justify-content: center;
  margin-block: var(--peku-space-3);
}

.period-action-row .period-closing {
  margin: 0;
}

/* ── Dashboard collapsible transactions section ───────────────────────────── */
.transactions-collapsible {
  margin-top: var(--peku-space-4);
  border-top: 1px solid var(--peku-line);
  padding-top: var(--peku-space-3);
}

.transactions-collapsible-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--peku-ink);
  padding-block: var(--peku-space-2);
  list-style: none;
}

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

.transactions-collapsible-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--peku-space-2);
  color: var(--peku-ink-3);
  transition: transform 0.15s ease;
}

.transactions-collapsible[open] > .transactions-collapsible-summary::before {
  transform: rotate(90deg);
}

.transactions-section-actions {
  display: flex;
  justify-content: flex-end;
  margin-block: var(--peku-space-2);
}