/* Smaller surfaces: the in-app reader, settings import/export, the auth screen, comment counters, and the text-size/density controls. Part of the split style sheet — see index.html for the link order. */ /* ---------- Reddit reader view ---------- */ .reader-toggle { display: flex; gap: 8px; margin-bottom: 10px; } .reader-toggle .active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); } .reddit-post { padding: 4px 4px 12px; } .reddit-title { margin: 6px 0 8px; font-size: 15px; } .reddit-meta { font-size: 11.5px; color: var(--ink-muted); } .reddit-body { font-size: 13px; color: var(--ink-soft); white-space: pre-wrap; margin-top: 4px; overflow-wrap: anywhere; } .reddit-comment { border-top: 1px solid var(--rule); padding: 10px 4px; } /* ---------- Settings import/export ---------- */ .settings-io-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 14px; } /* ---------- Auth screen ---------- */ .auth-screen { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse at 20% 0%, var(--accent-soft) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--gold-soft) 60%, transparent) 0%, transparent 50%), var(--paper); } .auth-card { width: 100%; max-width: 380px; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-card); padding: 32px 28px; box-shadow: var(--shadow-md); } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .auth-brand .brand-name { font-size: 16px; font-weight: 700; } .auth-tabs { display: flex; gap: 6px; padding: 4px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-radius: var(--radius-md); margin-bottom: 16px; } .auth-tab { flex: 1; padding: 9px; font-size: 13px; font-weight: 600; background: transparent; border: 1px solid transparent; } .auth-tab.active { background: var(--surface); border-color: var(--glass-border); color: var(--accent-strong); box-shadow: var(--shadow-sm); } .auth-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 16px; } .auth-submit { margin-top: 18px; } .auth-error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 10px 0 0; } .auth-hint { margin-top: 12px; } /* ---------- Word/character count under comment boxes ---------- */ .field-count { font-size: calc(11.5px * var(--font-scale)); color: var(--ink-muted); margin-top: 6px; font-variant-numeric: tabular-nums; } /* ---------- Counts in the filter buttons ---------- */ .filter-btn .filter-count { font-variant-numeric: tabular-nums; font-weight: 700; opacity: 0.6; margin-left: 3px; } .filter-btn.active .filter-count { opacity: 0.85; } /* ---------- Appearance: text size + density ---------- Text size multiplies a --font-scale into the core reading surfaces. Density sets data-density on and tightens padding/gap. */ :root { --font-scale: 1; } button, input, select, textarea { font-size: calc(14px * var(--font-scale)); } .task-item .product { font-size: calc(14px * var(--font-scale)); } .task-item .type { font-size: calc(11px * var(--font-scale)); } .badge { font-size: calc(10.5px * var(--font-scale)); } .age-badge { font-size: calc(10.5px * var(--font-scale)); } .field-block label { font-size: calc(11px * var(--font-scale)); } .field-readonly { font-size: calc(13.5px * var(--font-scale)); } .detail-header h3 { font-size: calc(22px * var(--font-scale)); } .link-chip { font-size: calc(12.5px * var(--font-scale)); } .summary-table th { font-size: calc(11px * var(--font-scale)); } .summary-table td { font-size: calc(15px * var(--font-scale)); } .hint { font-size: calc(12px * var(--font-scale)); } html[data-density="cozy"] .task-item { padding: 11px 14px 11px 16px; } html[data-density="compact"] .task-item { padding: 8px 12px 8px 14px; } html[data-density="cozy"] .task-list { gap: 8px; } html[data-density="compact"] .task-list { gap: 6px; } html[data-density="cozy"] .field-block { margin-top: 13px; } html[data-density="compact"] .field-block { margin-top: 10px; } html[data-density="cozy"] .detail-pane { padding: 22px; } html[data-density="compact"] .detail-pane { padding: 18px; } html[data-density="cozy"] .summary-card { padding: 22px; } html[data-density="compact"] .summary-card { padding: 18px; } html[data-density="cozy"] .summary-table th, html[data-density="cozy"] .summary-table td { padding: 12px 14px; } html[data-density="compact"] .summary-table th, html[data-density="compact"] .summary-table td { padding: 9px 12px; } html[data-density="cozy"] .source-card { padding: 16px; } html[data-density="compact"] .source-card { padding: 13px; } /* Segmented controls (density / text size) in the Appearance modal */ .seg-control { display: flex; gap: 6px; } .seg-control button { flex: 1; padding: 9px 8px; font-size: 12.5px; font-weight: 600; background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--ink-soft); } .seg-control button.active { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }