/* authored. journal: softer surfaces, loaded last so it sits over each view's own styles.
   Rounded controls with a light shadow that lifts a little on hover; cards, panels and entries sit on a soft
   shadow. Controls with no fill of their own (tabs, ghost buttons, the top bar) stay flat. */
:where(button, .btn) {
  box-shadow: var(--shadow-sm);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
:where(button:not(:disabled), .btn):hover { box-shadow: var(--shadow); transform: translateY(-1px); }
:where(button:not(:disabled), .btn):active { box-shadow: var(--shadow-sm); transform: translateY(0); }
button.ghost, button.ghost:hover, .topbar button, .topbar .btn:not(.add-btn), .chip button, .toast-action,
.segmented button, .seg-option, .capture-tab, .admin-tabs button, button.round, .mcal-cell, .capture-day-input,
.lock-forgot, .capture-close, .capture-photo-remove { box-shadow: none; transform: none; }
.topbar .add-btn { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.topbar .add-btn:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); transform: translateY(-1px); }
input, select, textarea { border-radius: var(--radius); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.chip { box-shadow: var(--shadow-sm); }

.card, .panel, .admin-card, .install-help, .ask-form, .modal, .photo-tile, .recs-policy, .mcal, .capture-sheet, .help-pdf {
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.card, .panel { border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.card, .admin-card, .ask-form, .modal, .mcal { background: var(--card); }
.mcal, .help-pdf { border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.admin-scroll, .cal-note, .file-view, .help-video, .capture-photo img, .entry-thumb { border-radius: var(--radius); }
.help-video { border-radius: var(--radius-lg); }
.modal { box-shadow: var(--shadow-lift); }
.capture-sheet { overflow: hidden; }
body.is-bare .capture-sheet { border-radius: 0; box-shadow: none; } /* full screen on the phone */
.toast { border-radius: var(--radius); }

/* Entries are separate cards that lift under the pointer. */
.entry-list { border-top: 0; gap: 10px; }
.entry-card {
  padding: 16px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.entry-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.entry-card:hover .entry-title { text-decoration: none; }
.entry-thumb { border-radius: var(--radius); }
.cal-cell { transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.cal-cell:not(.pad):hover { box-shadow: var(--shadow); }

/* Settings sections become cards. */
.set-section { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px 20px 12px; margin-bottom: 16px; background: var(--card); }
.bin-list { border-top: 0; display: flex; flex-direction: column; gap: 10px; }
.bin-row { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 14px 16px; background: var(--card); }

@media (prefers-reduced-motion: reduce) {
  :where(button, .btn), .entry-card, .cal-cell { transition: none; }
  :where(button, .btn):hover, .entry-card:hover, .topbar .add-btn:hover { transform: none; }
}