*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #0f0f0f;
    --surface: #1a1a1a;
    --surface2: #242424;
    --border: #333;
    --text: #e0e0e0;
    /* 7.6:1 on --bg at full strength, so it still clears WCAG AA 4.5:1 for text
       when dimmed to 0.8 (5.2:1) and the 3:1 non-text minimum for icons at 0.7
       (4.3:1). The previous #888 was only 5.4:1 undimmed, which left every
       dimmed use of it below threshold. */
    --text-dim: #a3a3a3;
    --accent: #7a9ef5;
    --accent-dim: #3d5a9a;
    --danger: #ff6b6b;
    --success: #6bff9b;
    --radius: 10px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* One compliant placeholder colour for every input. Left to the UA default this
   varies by browser (Firefox applies its own opacity: 0.54), and these inputs
   sit on three different surfaces — --bg, --surface and --surface2. --text-dim
   at 0.85 clears 4.5:1 on all three. */
::placeholder {
    color: var(--text-dim);
    opacity: 0.85;
}

/* Login */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 0%, #1a1a2e 0%, #0f0f0f 50%, #0a0a0a 100%);
    min-height: 100vh;
}

.login-container {
    text-align: center;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 340px;
}

.login-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--text);
    letter-spacing: -0.03em;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.passcode-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 1.3rem;
    padding: 0.85rem 1rem;
    text-align: center;
    letter-spacing: 0.25em;
    outline: none;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.passcode-input::placeholder {
    font-family: inherit;
    letter-spacing: 0.15em;
    font-size: 1.1rem;
}

.passcode-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(108, 155, 255, 0.1);
}

.error-msg {
    color: var(--danger);
    font-size: 0.82rem;
    min-height: 1.2em;
}

/* Buttons */
.btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.btn:active {
    transform: scale(0.96);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    font-weight: 600;
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    min-width: 40px;
    min-height: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-icon:active {
    transform: scale(0.93);
    background: var(--surface2);
}

.btn-icon svg {
    display: block;
}

.btn-danger {
    color: var(--danger);
}

.btn-danger:active {
    background: rgba(255, 107, 107, 0.1);
}

/* Top bar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    padding: calc(var(--safe-top) + 0.5rem) 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(15, 15, 15, 0.85);
}

.topbar-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.topbar-stat {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-dim);
    opacity: 0.8;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Bottom navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(15, 15, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    display: flex;
    padding-bottom: var(--safe-bottom);
}

.bottom-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.5rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
    opacity: 0.8;
}

.bottom-nav-btn.active {
    color: var(--accent);
    opacity: 1;
}

.nav-btn-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-badge {
    position: absolute;
    top: -3px;
    right: -5px;
    background: var(--accent-dim);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    pointer-events: none;
}

.logout-form {
    display: flex;
}

.logout-btn {
    color: var(--text-dim);
    text-decoration: none;
    padding: 0.35rem;
    /* Topbar icons were ~29px; the row has slack, so give them a real target. */
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
    cursor: pointer;
}

.logout-btn:active {
    opacity: 1;
}

/* Reminders bell: brighten and fill when the current device is subscribed. */
.push-toggle-btn.push-on {
    opacity: 1;
    color: var(--accent, var(--text));
}

.push-toggle-btn.push-on svg {
    fill: currentColor;
}

/* Search */
.search-overlay {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease;
    background: var(--bg);
    border-bottom: 1px solid transparent;
}

.search-overlay.visible {
    max-height: 20rem;
    border-bottom-color: var(--border);
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
}

.search-icon {
    color: var(--text-dim);
    flex-shrink: 0;
    opacity: 0.7;
}

.search-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 16px; /* iOS zooms the viewport on focus below 16px */
    outline: none;
}

.search-close {
    background: none;
    border: none;
    flex-shrink: 0;
}

.search-results {
    max-height: 60vh;
    overflow-y: auto;
}

.search-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 1rem 0.25rem;
    opacity: 0.8;
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}

.search-result-cat {
    font-size: 0.72rem;
    color: var(--text-dim);
    opacity: 0.8;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.search-empty {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-dim);
    opacity: 0.8;
}

/* Tab bar */
.tab-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0;
    align-items: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

.tab-bar.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.tab-group {
    display: flex;
    flex: 1;
    gap: 0;
}

.tab {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 0.5rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.tab svg {
    opacity: 0.7;
}

.tab:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.tab:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.tab.active {
    background: var(--accent-dim);
    border-color: var(--accent-dim);
    color: var(--text);
    font-weight: 600;
}

.tab.active svg {
    opacity: 1;
}

/* Add form */
.add-form {
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.add-form.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.add-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0.6rem 0.8rem;
    font-size: 16px; /* iOS zooms the viewport on focus below 16px */
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.add-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(108, 155, 255, 0.08);
}

.calendar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.add-date {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: 0;
    padding: 0;
    pointer-events: none;
}

.calendar-btn.has-date {
    border-color: var(--accent);
    color: var(--accent);
    min-width: 3.2rem;
}

.calendar-btn-label {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-add {
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.1s;
}

.btn-add:active {
    transform: scale(0.92);
}

/* Todo items */
.todo-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Controls inside are 44px tall and set the row height, so the vertical
       padding is trimmed to keep rows the same size they were before. */
    padding: 0.35rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: opacity 0.2s;
}

/* Dim the label only, never the row. Opacity on the container multiplies with
   each control's own opacity, which pushed the delete icon to ~1.1:1 contrast.
   The green check and the strikethrough already carry the "done" signal. */
.todo-item.done .todo-text {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Touch targets. The row controls were 23.6-28.8px, well under the 44px iOS
   guideline — and the delete button was the smallest control in the whole app
   despite being the destructive one. Height is essentially free here because
   the rows already stood ~53px tall, so the extra size is paid for by trimming
   each row's own vertical padding rather than by making rows taller. Width is
   held at 40px so the denser habit-goal row (check, name, count, streak, minus,
   delete) still fits comfortably. */
.check-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.icon-checked { display: none; }
.checked .icon-unchecked { display: none; }
.checked .icon-checked { display: block; }

.check-btn.checked {
    color: var(--success);
}

.todo-text {
    flex: 1;
    font-size: 0.95rem;
    word-break: break-word;
}

/* Press-and-hold on these labels opens the inline editor, so stop iOS from
   claiming the same gesture for its selection magnifier and callout. Scoped to
   live rows: archived text isn't editable and stays selectable. */
.todo-item:not(.archived-item) .todo-text,
.habit-item:not(.archived-item) .habit-name {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.todo-date {
    color: var(--accent);
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.todo-date.overdue {
    color: var(--danger);
}

.archive-hint {
    font-size: 0.7rem;
    color: #c89a30;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.85;
}

.archived-ago {
    font-size: 0.7rem;
    color: var(--text-dim);
    white-space: nowrap;
    flex-shrink: 0;
}

.todo-edit-input {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 1px solid var(--accent);
    color: var(--text);
    font-size: 16px; /* iOS zooms the viewport on focus below 16px */
    font-family: inherit;
    padding: 0;
    outline: none;
    min-width: 0;
}

.del-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    -webkit-tap-highlight-color: transparent;
}

.del-btn:hover, .del-btn:active {
    color: var(--danger);
    opacity: 1;
}

.todo-check, .todo-del {
    display: flex;
    margin: 0;
}

/* Views */
.view {
    display: none;
}

.view.active {
    display: block;
}

/* Empty state */
.empty-state {
    text-align: center;
    color: var(--text-dim);
    padding: 4rem 1rem;
    font-size: 0.88rem;
    opacity: 0.8;
}

/* Notes */
.notes-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.note-picker {
    flex: 1;
    position: relative;
}

.note-picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.note-picker-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-picker-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.note-picker-search {
    width: 100%;
    background: var(--surface2);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 16px; /* iOS zooms the viewport on focus below 16px */
    padding: 0.6rem 0.8rem;
    outline: none;
}

.note-picker-list {
    max-height: 240px;
    overflow-y: auto;
}

.note-picker-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    padding: 0.6rem 0.8rem;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}

.note-picker-item:last-child {
    border-bottom: none;
}

.note-picker-item.active {
    color: var(--accent);
    font-weight: 500;
}

.notes-actions {
    display: flex;
    gap: 0.35rem;
}

.note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    height: 1.25rem;
}

.note-status {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.note-updated {
    font-size: 0.72rem;
    color: var(--text-dim);
    opacity: 0.8;
}

.note-editor {
    display: block;
    width: 100%;
    min-height: calc(100vh - 10rem);
    background: var(--bg);
    border: none;
    color: var(--text);
    padding: 0 1rem 2rem;
    font-size: 16px; /* iOS zooms the viewport on focus below 16px */
    font-family: inherit;
    line-height: 1.6;
    resize: none;
    outline: none;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* PWA standalone adjustments */
@media (display-mode: standalone) {
    .topbar {
        padding-top: calc(var(--safe-top) + 0.5rem);
    }
}

/* Very small screens */

/* Archive */
.archive-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.archive-title {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-weight: 600;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-back:active {
    background: var(--surface2);
}

.btn-restore {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.btn-restore:active {
    transform: scale(0.93);
}

.todo-action, .inline-form {
    display: flex;
    margin: 0;
}

.tab-archive {
    border-radius: 8px;
    flex: 0;
    padding: 0.45rem 0.5rem;
}

.tab-archive.active {
    background: var(--accent-dim);
    color: var(--text);
}

.archived-item {
    opacity: 0.85;
}

.archive-note-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Controls inside are 44px tall and set the row height, so the vertical
       padding is trimmed to keep rows the same size they were before. */
    padding: 0.35rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.archive-note-title {
    flex: 1;
    font-size: 0.95rem;
}

.archive-note-actions {
    display: flex;
    gap: 0.25rem;
}

.archive-habit-count {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Habits */
.habits-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.habits-title {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-weight: 600;
}

.habits-actions {
    display: flex;
    gap: 0.35rem;
}

.habit-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Controls inside are 44px tall and set the row height, so the vertical
       padding is trimmed to keep rows the same size they were before. */
    padding: 0.35rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: opacity 0.2s;
}

/* Same reasoning as .todo-item.done — dim the name, not the whole row. */
.habit-item.done .habit-name {
    opacity: 0.6;
}

.habit-name {
    flex: 1;
    font-size: 0.95rem;
    word-break: break-word;
}

.habit-check,
.habit-check-form,
.habit-del-form {
    display: flex;
    margin: 0;
}

.habit-check {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.habit-check.checked {
    color: var(--success);
}

.habit-streak {
    font-size: 0.75rem;
    color: rgba(255, 170, 68, 0.65);
    font-weight: 500;
    flex-shrink: 0;
}

/* Periodic goals (weekly / monthly / yearly) */
.habit-section-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    font-weight: 600;
    padding: 0.85rem 1rem 0.35rem;
}

.habit-goal-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.habit-goal .habit-name {
    flex: none;
}

.habit-progress {
    height: 3px;
    background: var(--surface2);
    border-radius: 3px;
    overflow: hidden;
}

.habit-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.2s ease;
}

.habit-item.done .habit-progress-fill {
    background: var(--success);
}

.habit-count {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.habit-minus {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 44px;
    flex-shrink: 0;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.habit-minus:hover, .habit-minus:active {
    color: var(--text);
    opacity: 1;
}

.custom-dialog-extra {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.chip-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.chip {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    min-height: 40px;
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.chip.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--text);
}

/* Inactivity warning */
.inactivity-warning {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.52);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
}

.inactivity-warning[hidden] {
    display: none !important;
}

/* Custom dialog */
.custom-dialog {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.custom-dialog[hidden] {
    display: none !important;
}

.custom-dialog-sheet {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.1rem 1rem 1rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.custom-dialog-label {
    font-size: 0.88rem;
    color: var(--text-dim);
    font-weight: 500;
}

.custom-dialog-input {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 16px; /* iOS zooms the viewport on focus below 16px */
    padding: 0.65rem 0.8rem;
    outline: none;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.custom-dialog-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(122, 158, 245, 0.1);
}

.custom-dialog-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.inactivity-sheet {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);
}

.inactivity-title {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.inactivity-message {
    font-size: 0.88rem;
    color: var(--text-dim);
    margin-bottom: 0.8rem;
}

.inactivity-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ===== Responsive & desktop polish ===== */

html {
    accent-color: var(--accent);
}

#app {
    width: 100%;
    padding-bottom: calc(var(--safe-bottom) + 4rem);
}

::selection {
    background: rgba(108, 155, 255, 0.3);
}

/* Larger screens (Mac / desktop PWA): center the app into a tasteful column */
@media (min-width: 768px) {
    body {
        background: #0a0a0a;
    }
    #app {
        max-width: 720px;
        margin-inline: auto;
        min-height: 100vh;
        background: var(--bg);
        border-inline: 1px solid var(--border);
    }
    .bottom-nav {
        left: 50%;
        transform: translateX(-50%);
        width: 720px;
        border-inline: 1px solid var(--border);
    }
    .note-editor {
        min-height: calc(100vh - 11rem);
        max-width: 65ch;
        margin-inline: auto;
    }
    .inactivity-warning {
        align-items: center;
    }
}

/* Mouse / trackpad hover affordances (skipped on touch devices) */
@media (hover: hover) {
    .bottom-nav-btn:hover {
        opacity: 1;
        color: var(--text);
    }
    .bottom-nav-btn.active:hover {
        opacity: 1;
    }
    .tab:hover {
        color: var(--text);
        background: var(--surface2);
    }
    .tab.active:hover {
        background: var(--accent-dim);
        color: var(--text);
    }
    .btn:hover {
        border-color: var(--text-dim);
    }
    .btn-primary:hover,
    .btn-add:hover {
        filter: brightness(1.07);
    }
    .btn-icon:hover {
        color: var(--text);
        background: var(--surface2);
        border-color: var(--text-dim);
    }
    .todo-item:hover,
    .habit-item:hover,
    .archive-note-item:hover {
        background: rgba(255, 255, 255, 0.025);
    }
    .check-btn:not(.checked):hover,
    .habit-check:not(.checked):hover {
        color: var(--text);
    }
    .btn-restore:hover {
        filter: brightness(1.15);
    }
    .logout-btn:hover {
        opacity: 1;
    }
    .search-result-item:hover {
        background: rgba(255, 255, 255, 0.03);
    }
    .note-picker-btn:hover,
    .note-picker-item:hover,
    .btn-back:hover {
        border-color: var(--text-dim);
        color: var(--text);
    }
}

/* Keyboard focus rings */
button:focus-visible,
a:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Toast: transient feedback for otherwise-silent failures.
   Sits above the bottom nav (z-index 100) but below the modal dialogs (1200+). */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 5rem);
    transform: translate(-50%, 1rem);
    z-index: 1100;
    max-width: calc(100% - 2rem);
    padding: 0.65rem 1rem;
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    font-size: 0.875rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Only an actionable toast accepts input; a plain one stays click-through so it
   never intercepts taps meant for the list beneath it. */
.toast.has-action {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.toast-action {
    background: none;
    border: none;
    color: var(--accent);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    /* Comfortable target without stretching the toast vertically. */
    min-height: 44px;
    padding: 0 0.5rem;
    margin: -0.65rem 0;
    -webkit-tap-highlight-color: transparent;
}

.toast[hidden] {
    display: none;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}