/*
 * Tokens, base styles, forms, messages and utilities. Plain CSS: custom properties, native nesting,
 * light-dark(). The other files, all loaded after this one (alphabetical):
 *   components.css  buttons, round buttons, floating +, badge, dropdowns, section heading, form sections
 *   header.css      list header, page header, list switcher, ⋯ menu, mode toggle
 *   items.css       item rows, add and edit rows, shopping, "Bought already", reorder
 *   lists.css       list colours, list directory, colour picker, members
 */

:root {
  color-scheme: light dark;

  --color-text: light-dark(#1c1c1e, #f2f2f7);
  --color-text-muted: light-dark(#6e6e73, #98989f);
  --color-bg: light-dark(#ffffff, #000000);
  --color-surface: light-dark(#f2f2f7, #1c1c1e);
  --color-border: light-dark(#d1d1d6, #38383a);
  --color-disabled: light-dark(#c7c7cc, #48484a);
  --color-accent: light-dark(#0a84ff, #3d8eff);
  --color-on-accent: #ffffff;
  --color-danger: light-dark(#d70015, #ff6961);
  --color-success: light-dark(#248a3d, #30d158);

  /* Text sizes, named after Apple's text styles */
  --font-footnote: 0.8125rem; /* 13px: section headings */
  --font-subhead: 0.875rem;   /* 14px: badge, "Bought already" */
  --font-callout: 0.9375rem;  /* 15px: labels, hints, small buttons, secondary text */
  --font-body: 1.0625rem;     /* 17px */
  --font-title: 2.125rem;     /* 34px: large title */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --radius: 0.625rem;
  --tap-size: 2.75rem;            /* minimum touch target */
  --control-size-small: 2.25rem;  /* small buttons, compact selects, inline row fields */
  --circle-size: 2rem;            /* round buttons */
  --circle-size-small: 1.375rem;  /* undo, the + in "Add list" */
  --page-width: 30rem;
}

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

/* Fieldsets default to min-width: min-content and inputs carry a wide intrinsic size (size="72"),
   either of which can push a form past the screen edge on a phone. */
fieldset { min-width: 0; }
input, select, textarea { max-width: 100%; }

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.01em;
  font-size: var(--font-body);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: var(--page-width);
  margin-inline: auto;
  padding:
    max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom))
    max(var(--space-3), env(safe-area-inset-left));
}

/* Large title, like Reminders: the list name and every page title */
h1 { margin: 0; font-size: var(--font-title); line-height: 1.15; }

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

/* Lists with a class are layout, not text: no bullets or indent (zero specificity, so any class can
   still set its own margin or padding) */
:where(ul[class]) { margin: 0; padding: 0; list-style: none; }

/* Rails' button_to wraps each button in its own form: lay the button out as if the form weren't there */
form.button_to { display: contents; }


/* Forms */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);

  label { font-weight: 600; font-size: var(--font-callout); }
}

/* Rails wraps invalid fields in a div; keep it out of the layout. */
.field_with_errors { display: contents; }

.hint { margin: 0; color: var(--color-text-muted); font-size: var(--font-callout); }

/* Form fields: text inputs and selects share one look and height */
input:where([type="text"], [type="email"], [type="password"]), select {
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);

  &:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
}

/* The browser's own select arrow sits at the very edge (and differs per browser): draw a chevron like the
   header's instead, with the same inner spacing as the text. */
select {
  appearance: none;
  padding-inline-end: calc(var(--space-3) * 2 + 0.75rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1.125rem;
  cursor: pointer;
}

.secondary-action { margin-block-start: var(--space-4); color: var(--color-text-muted); }


/* Messages */

.flash {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.flash--alert { color: var(--color-danger); }
.flash--notice { color: var(--color-success); }

.form-errors {
  padding: var(--space-2) var(--space-3);
  color: var(--color-danger);
  background: var(--color-surface);
  border-radius: var(--radius);

  ul { margin: 0; padding-inline-start: var(--space-4); }
  p { margin: 0; }
}

.empty-state {
  margin-block: var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}


/* Utilities */

html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon { flex-shrink: 0; vertical-align: middle; }

/* Fade-out before removal (auto_dismiss controller): messages, the add-item error, "Bought already" entries */
.dismissable { transition: opacity 0.4s ease; }
.dismissable.is-dismissing { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .dismissable { transition: none; }
}