/* Plate & Glass — mobile-first, dyslexia-friendly design.
   Overview first, complexity behind a tap, never everything at once.

   Note on "modern": the refresh here is icons, states and surfaces — a real
   stroke icon set, visible selection, layered hairline elevation. It is
   deliberately NOT the other half of the current idiom: thin grey type, tight
   line height and monochrome minimalism all work against a dyslexic reader,
   so the large text, wide leading and warm colour stay. */

:root {
  color-scheme: light;

  --bg: #fbf7f2;
  --surface: #ffffff;
  --surface-sunken: #f4eee6;
  --text: #2b2622;
  --text-muted: #6f665d;
  --accent: #e08a3c;
  --accent-strong: #c96f22;
  --accent-soft: rgba(224, 138, 60, 0.15);
  --accent-contrast: #ffffff;
  --danger: #c94f3c;
  --danger-bg: #fbe9e5;
  --info: #3c7ae0;
  --info-bg: #e7eefc;
  --warn: #b8892b;
  --warn-bg: #faf0dd;
  --border: #e9e0d5;

  /* Two layers, both tight. One soft 18px blur under every surface was what
     read as 2016 Material: a close contact shadow plus a faint lift gives
     depth without the whole page looking like it is floating. */
  --shadow: 0 1px 2px rgba(60, 45, 20, 0.06), 0 4px 12px rgba(60, 45, 20, 0.05);
  --shadow-lifted: 0 2px 4px rgba(60, 45, 20, 0.07), 0 10px 24px rgba(60, 45, 20, 0.08);

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --nav-height: 68px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Without this the date picker, the radios and the file controls keep
       rendering as light-mode widgets on a dark page. */
    color-scheme: dark;

    --bg: #1c1a17;
    --surface: #262320;
    --surface-sunken: #201d1a;
    --text: #f1ece4;
    --text-muted: #b3a99c;
    --accent: #e79a52;
    --accent-strong: #f0ac6c;
    --accent-soft: rgba(231, 154, 82, 0.18);
    --accent-contrast: #1c1a17;
    --danger: #e28173;
    --danger-bg: #3a231f;
    --info: #7fa8f2;
    --info-bg: #1f2b3f;
    --warn: #e0b767;
    --warn-bg: #3a2f1a;
    --border: #38332c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.28);
    --shadow-lifted: 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.35);
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  /* Suppressed because every tappable thing below has its own press state.
     The grey flash was arriving on top of them and looking like a glitch. */
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

/* Several things below are display:flex, which would otherwise win over the
   hidden attribute and show an empty error box or an empty photo grid. */
[hidden] {
  display: none !important;
}

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

/* ---- icons and flags ---- */

/* The sprite itself: present in the document so <use> can reach it, taking up
   no space and reachable by nothing else. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Lucide geometry, coloured by inheritance. The symbols carry no stroke or
   fill attributes precisely so that currentColor reaches them here — which is
   what lets a selected tab tint its icon, something emoji could never do. */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flag {
  width: 1.45em;
  height: 0.725em; /* every flag here is 2:1 */
  flex: none;
  border-radius: 2px;
  /* Both flags run white to the edge, so on a white card they would dissolve
     without a ring. Inset, so it never changes the box size. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 12px;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.page-header .page-title {
  margin: 0;
}

/* ---- feed of cards ---- */

.feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}

.entry-card {
  display: flex;
  align-items: stretch;
  min-height: 84px;
}

.entry-card:active {
  transform: scale(0.985);
  box-shadow: var(--shadow-lifted);
}

/* A thumbnail, not a banner. An entry with no photo renders no element at
   all rather than a placeholder: reserving 220px for a picture that does not
   exist was costing about three anecdotes of screen on every scroll. */
.entry-card-photo {
  /* A fixed square, not a stretched one. With height:auto the image's own
     aspect ratio drove the card, so one portrait photo made its row twice
     the height of every other and the feed stopped scanning evenly. */
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  align-self: center;
  object-fit: cover;
  border-radius: 10px;
  margin: 10px 0 10px 10px;
  background: var(--surface-sunken);
}

.entry-card-body {
  flex: 1;
  min-width: 0; /* lets long words wrap instead of stretching the card */
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.entry-card-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 1px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Titles: the thing you scan. Bigger and heavier than the lead under it. */
.entry-card-title {
  margin: 0 0 2px;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entry-card-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- badges ---- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-info {
  background: var(--info-bg);
  color: var(--info);
}

.badge-warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.badge-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  align-self: center;
}

/* Badges on a card are a footnote, not a headline: the reader needs to know
   a translation is missing, not to be stopped by it. */
.entry-card-body .badge {
  margin-top: 5px;
  align-self: flex-start;
  font-size: 0.7rem;
  padding: 2px 7px;
}

/* ---- empty state ---- */

.empty-state {
  margin-top: 40px;
  padding: 44px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* A tinted disc around the glyph, rather than a 3.5rem emoji. It reads as a
   deliberate illustration instead of a piece of text that got large. */
.empty-icon,
.centred-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.empty-icon .icon,
.centred-icon .icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.75;
}

.centred-icon-warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.empty-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.empty-hint {
  color: var(--text-muted);
  margin: 0 0 20px;
}

/* ---- entry detail ---- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.back-link .icon {
  width: 1.1em;
  height: 1.1em;
}

.entry-photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 -16px 16px;
}

.entry-photo {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
}

.entry-detail {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 20px;
}

.entry-date {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.entry-title {
  margin: 0.2rem 0 0.9rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}

.entry-text {
  font-size: 1.2rem;
  line-height: 1.75;
  white-space: pre-wrap;
  margin: 0 0 20px;
}

.entry-author {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0 0 20px;
}

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

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

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-text-danger {
  background: transparent;
  color: var(--danger);
  border: none;
  font-weight: 600;
}

.btn-large {
  width: 100%;
  padding: 16px 20px;
  font-size: 1.15rem;
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
.photo-action:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---- forms ---- */

.field {
  display: block;
  margin-bottom: 18px;
}

.field-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.field-input,
.field-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.field-input:focus,
.field-textarea:focus {
  background: var(--surface);
  border-color: var(--accent);
}

.field-textarea {
  resize: vertical;
}

.field-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.entry-form,
.section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 24px;
}

.danger-zone {
  margin: 28px 0 12px;
  text-align: center;
}

.error {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.error .icon {
  margin-top: 0.2em;
}

/* Each language gets its own visible block on the edit screen, so the title
   and the story it belongs to read as one thing rather than four fields. */
.lang-block {
  margin: 0 0 1.4rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.lang-block > legend {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 0.5rem;
  font-weight: 700;
}

.lang-block .field-input,
.lang-block .field-textarea {
  background: var(--surface);
}

/* ---- photos ---- */

/* Camera and gallery side by side, equal halves. `capture` and `multiple` are
   mutually exclusive on one input, so two controls is not a layout choice. */
.photo-actions {
  display: flex;
  gap: 10px;
}

.photo-action {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  padding: 12px 10px;
  text-align: center;
}

#photoDrop.dragging {
  outline: 3px dashed var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* One grid for both the photos already saved and the ones waiting to upload.
   Seeing them before saving matters more here than anywhere else: you cannot
   tell one blurry thumbnail from another by filename, and a file input shows
   only a count. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 0 0 1.4rem;
}

.photo-cell {
  position: relative;
}

.photo-cell img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
}

/* A corner affordance over the picture, not a red bar under it. Nine photos
   used to mean nine full-width Delete buttons, which drowned the grid. */
.photo-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(20, 16, 12, 0.62);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.photo-remove:active {
  transform: scale(0.92);
  background: var(--danger);
}

.photo-remove .icon {
  width: 18px;
  height: 18px;
}

/* ---- settings ---- */

.identity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 1.4rem;
  font-weight: 700;
}

.identity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.identity-name {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.identity-role {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.lang-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.lang-fieldset > legend {
  padding: 0;
}

.lang-choice-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lang-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lang-choice input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--accent);
}

.lang-choice .flag {
  width: 2.2em;
  height: 1.1em;
}

.lang-choice-label {
  font-size: 1.15rem;
  font-weight: 600;
}

.lang-choice-selected,
.lang-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.signout-form {
  text-align: center;
}

/* ---- centred pages (login, enrol, error) ---- */

.page-centred {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  padding: 24px 16px;
}

.centred-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 36px 24px;
}

.centred-hint {
  color: var(--text-muted);
  margin: 0 0 24px;
  font-size: 1.05rem;
}

/* The error box is flex and left-aligned everywhere else; on these pages it
   is the only thing in a centred card. */
.centred-card .error {
  text-align: left;
  margin: 16px 0 0;
}

/* ---- language switcher ---- */

/* Both options always visible, the current one filled. A single link reading
   "Language: French" is ambiguous — it could mean the page is French or that
   tapping makes it French. Showing both removes the question entirely.

   The flag is the fast visual anchor and the two-letter code is the check on
   it: flag emoji do not render at all on Windows, and a flag alone leaves
   "which English" and "is that selected or available" to inference. */
.lang-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.lang-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Filled, not merely tinted: the selected one must survive a colour-blind
   reader and a dim screen. */
.lang-opt.on,
.lang-opt:has(input[type="radio"]:checked) {
  background: var(--accent);
  color: var(--accent-contrast);
}

.lang-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* On the new-entry form this is a full-width question, not a header control,
   so the two options split the row and become proper tap targets. */
.lang-pick {
  border: none;
  padding: 0;
  margin: 0 0 1.4rem;
}

.lang-pick > legend {
  padding: 0;
}

.lang-pick .lang-switch {
  display: flex;
  width: 100%;
}

.lang-pick .lang-opt {
  flex: 1;
  min-height: 48px;
}

/* ---- bottom navigation ---- */

.bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
  z-index: 10;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--nav-height);
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

/* The pill behind the icon is the selection, and it is the reason the tab bar
   now answers "where am I". Previously nothing marked the current tab at all:
   the only colour change was :active, which lasts exactly as long as your
   finger is on the glass. */
.tab-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 32px;
  border-radius: 999px;
  transition: background-color 0.18s ease;
}

.tab .icon {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
}

.tab-label {
  font-size: 0.8rem;
  font-weight: 600;
}

.tab.on {
  color: var(--accent-strong);
}

.tab.on .tab-pill {
  background: var(--accent-soft);
}

.tab.on .tab-label {
  font-weight: 700;
}

.tab:active {
  color: var(--accent-strong);
}

/* The Menu tab is a <button>: strip the button chrome so it matches the links. */
button.tab {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ---- the menu, as a bottom sheet (after nextpattern-trip) ----------------
   A bottom sheet rather than a side drawer, because a thumb reaches the
   bottom of a phone and does not reach the top left of one. */
.sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 88svh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 -8px 40px rgba(10, 12, 16, 0.22);
  /* The entry animation: @starting-style is what makes a transition run on
     something that has just appeared, which a popover always has. */
  transition: translate 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease,
    overlay 220ms allow-discrete, display 220ms allow-discrete;
  translate: 0 0;
  opacity: 1;
}

@starting-style {
  .sheet:popover-open {
    translate: 0 100%;
    opacity: 0.4;
  }
}

.sheet::backdrop {
  background: rgba(8, 10, 14, 0.42);
  transition: opacity 200ms ease, display 200ms allow-discrete;
  opacity: 1;
}

@starting-style {
  .sheet:popover-open::backdrop {
    opacity: 0;
  }
}

/* The grab handle says "this came up from the bottom and can go back down". */
.sheet-handle {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--border);
  margin: 12px auto 8px;
}

.sheet-body {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px calc(24px + var(--safe-bottom));
}

.sheet-head {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.sheet-who {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.sheet-list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.sheet-list a,
.sheet-list button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sheet-list .icon {
  color: var(--text-muted);
}

.sheet-list a:active,
.sheet-list button:active {
  background: var(--surface-sunken);
}

.sheet-close {
  display: block;
  width: 100%;
  margin-top: 20px;
  min-height: 48px;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

@media (min-width: 700px) {
  .page {
    padding-top: 32px;
  }

  .entry-card-photo {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
  }

  .entry-card {
    min-height: 116px;
  }
}

/* ---- capture: home list, add/edit form, item page ---- */

.add-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

/* Tall, because these are the two taps the whole app exists for and they are
   pressed one-handed at a table. */
.add-btn {
  min-height: 72px;
  flex-direction: column;
  gap: 4px;
  font-size: 1.1rem;
}

.add-btn .icon {
  width: 1.6em;
  height: 1.6em;
}

.day-title {
  margin: 24px 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.sitting {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  overflow: hidden;
}

.sitting-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 4px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.sitting-place {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-weight: 700;
}

.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
}

.item-row + .item-row {
  border-top: 1px solid var(--border);
}

.item-row:active {
  background: var(--surface-sunken);
}

.item-kind {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.item-name {
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.chip {
  background: var(--surface-sunken);
  border-radius: 999px;
  padding: 0 8px;
}

.fav-mark {
  color: var(--accent-strong);
}

.fav-mark .icon {
  fill: currentColor;
  width: 0.95em;
  height: 0.95em;
}

.item-thumb {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: cover;
  border-radius: 10px;
  background: var(--surface-sunken);
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

.facts dt {
  color: var(--text-muted);
  font-weight: 600;
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.danger-zone summary {
  list-style: none;
  cursor: pointer;
}

.danger-zone summary::-webkit-details-marker {
  display: none;
}

/* The form. Choices are big labelled tiles: a radio dot or a checkbox square
   is a 20px target, and a thumb at a restaurant table misses it. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cost-row {
  grid-template-columns: 1fr 110px;
}

.currency {
  text-transform: uppercase;
}

fieldset.field {
  border: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}

.preset-cat {
  margin: 12px 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.choice {
  display: block;
}

.choice-body,
.toggle-body,
.place-opt {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.choice-body {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  line-height: 1.3;
}

.choice-sub,
.place-opt-sub {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.choice-input:checked + .choice-body,
.toggle input:checked + .toggle-body,
.place-opt.on,
.btn.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.choice-input:focus-visible + .choice-body,
.toggle input:focus-visible + .toggle-body {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.toggle {
  display: block;
  margin-bottom: 18px;
}

.toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toggle-row .toggle {
  margin-bottom: 0;
  flex: 1 1 140px;
}

.fav-toggle input:checked + .toggle-body .icon {
  fill: var(--accent-strong);
  color: var(--accent-strong);
}

.units-preview {
  margin: -6px 0 18px;
  font-weight: 700;
  color: var(--accent-strong);
}

.loc-status {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.place-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.place-opt {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.place-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.place-quick .btn {
  flex: 1 1 130px;
}

.photo-keep {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: 0.85rem;
}

.photo-keep input {
  width: 22px;
  height: 22px;
}

/* ---- the drink flow: same again, three steps, strength, More… ------------ */

.step {
  border: none;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;
}

.step[hidden],
.steps[hidden],
.custom-drink[hidden] {
  display: none;
}

.step-title {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.btn-grid,
.again-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Five categories: the first row of three, then two. */
.btn-grid-cats {
  grid-template-columns: repeat(6, 1fr);
}

.btn-grid-cats .pick-btn {
  grid-column: span 2;
}

.btn-grid-cats .pick-btn:nth-child(n + 4) {
  grid-column: span 3;
}

.pick-btn,
.again-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pick-btn.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.pick-btn:active,
.again-btn:active {
  transform: scale(0.97);
}

.again-btn {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.custom-drink {
  margin-top: 12px;
}

.strength-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.strength-input {
  width: 6.5rem;
  flex: none;
}

.strength-units {
  font-weight: 700;
  color: var(--accent-strong);
}

.drink-summary {
  margin: 4px 0 12px;
  font-weight: 700;
  font-size: 1.1rem;
}

.prominent {
  margin-bottom: 16px;
  padding: 12px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}

.more {
  margin-top: 20px;
}

.more-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}

.more[open] .more-summary {
  margin-bottom: 12px;
}

.btn:disabled {
  opacity: 0.5;
}

/* ---- the Drinks screen ---------------------------------------------------- */

.add-drink {
  width: 100%;
  margin-bottom: 8px;
}

.drink-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.drink-row:active {
  background: var(--surface-sunken);
}

.drink-row-abv {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.save-abv {
  margin: 8px 0 0;
}

.save-abv[hidden] {
  display: none;
}

/* ---- dropdown forms: date, selects, place select, star toggle ------------- */

.capture [hidden] {
  display: none !important;
}

.date-field .field-input {
  max-width: 14rem;
}

.link-btn {
  display: inline-block;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-strong);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.drink-row {
  padding: 0;
}

.drink-row-main {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 6px 10px 14px;
  color: inherit;
  text-decoration: none;
}

.star-form {
  margin: 0;
}

/* The one button-like control on the Drinks list: a toggle, so it may be one. */
.star-btn {
  min-width: 48px;
  min-height: 48px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.star-btn.on {
  color: var(--accent-strong);
}

.check-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
}