/* Plain, small-screen-first styles. Designed for ~375px wide (iPhone 13 mini) upwards. */

:root {
  color-scheme: light dark;
  --fg: CanvasText;
  --bg: Canvas;
  /* Plain colours: colour mixing functions need Safari 16.2+. */
  --muted: #6e6e73;
  --line: rgba(128, 128, 128, 0.35);
  --ok-bg: rgba(26, 127, 55, 0.12);
  --bad-bg: rgba(198, 40, 40, 0.12);
  --accent: #0b57d0;
  --on-accent: #ffffff;
  --ok: #1a7f37;
  --warn: #9a6700;
  --bad: #c62828;
}
@media (prefers-color-scheme: dark) {
  :root { --accent: #8ab4f8; --on-accent: #111111; --ok: #4ac26b; --warn: #d4a72c; --bad: #ff6b6b; --muted: #98989d; --ok-bg: rgba(74, 194, 107, 0.15); --bad-bg: rgba(255, 107, 107, 0.15); }
}

* { box-sizing: border-box; }

html {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: 44rem;
  padding: 0 0.75rem 3rem;
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
}

header nav {
  display: flex;
  gap: 1.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
header nav a { padding: 0.5rem 0; text-decoration: none; }
header nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; }

h1 { font-size: 1.5rem; margin: 0.75rem 0; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }

a { color: var(--accent); }
small { color: var(--muted); }
.crumb { margin: 0.75rem 0 0; }
.crumb a { text-decoration: none; }
.pre { white-space: pre-wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Long URLs and filenames must never widen the page on a small screen. */
/* Words only break mid-word if they'd otherwise overflow (long URLs, filenames). In tables that
   needs "anywhere", but only on cells that hold such content (.wrap): applied to every cell it lets
   the browser squeeze columns until short words like "manual" or "Edit" split. */
body { overflow-wrap: break-word; }
td.wrap { overflow-wrap: anywhere; }
/* Labels and links like "manual", "receipt", "Edit", "part" never wrap. */
.nowrap, .kind, th { white-space: nowrap; }
td.nowrap { width: 1%; }

dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0.5rem 0; }
dt { color: var(--muted); }
dd { margin: 0; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: 0.85rem; color: var(--muted); }
th, td { padding: 0.5rem 0.4rem 0.5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td:last-child, th:last-child { padding-right: 0; }

/* Task tables: Done / Part stack in a narrow right-hand column. */
td.actions { width: 1%; white-space: nowrap; }
td.actions form { display: flex; flex-direction: column; gap: 0.35rem; }

.ok { color: var(--ok); }
.warn { color: var(--warn); }
.bad { color: var(--bad); font-weight: 600; }
.muted { color: var(--muted); }
.dot { color: var(--warn); }

.kind { font-size: 0.85rem; }
.kind-manual { color: var(--ok); }
.kind-receipt { color: var(--warn); }
.kind-video { color: #8250df; }
.kind-info { color: var(--accent); }

.flash { padding: 0.6rem 0.75rem; border-radius: 6px; background: var(--ok-bg); }
.flash.error { background: var(--bad-bg); }

/* Forms: full-width fields, 16px+ text (smaller makes iOS zoom in), 44px tap targets. */
form { margin: 0.5rem 0; }
form.inline { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
label { display: block; margin: 0.75rem 0 0.25rem; }
label.choice { display: flex; align-items: center; gap: 0.5rem; margin: 0; min-height: 44px; }
input, select, textarea, button, .button { font: inherit; font-size: 1rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
/* Safari ignores height/padding on native selects, so draw our own (with a ▾ arrow). */
select {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 2rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
}
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; margin: 0; }
fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 0.75rem 0 0; padding: 0.25rem 0.75rem; }
legend { padding: 0 0.25rem; }

button, .button {
  display: inline-block;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  cursor: pointer;
}
/* Space above a form's own Save button, but not in button groups (.inline). */
form:not(.inline) > button[type=submit]:last-child { margin-top: 1rem; }
td.actions button { min-height: 36px; min-width: 4.25rem; padding: 0.3rem 0.7rem; margin: 0; white-space: nowrap; }
button.secondary { background: transparent; color: var(--accent); }
button.danger { background: transparent; color: var(--bad); border-color: var(--bad); }

details { margin: 0.75rem 0; border: 1px solid var(--line); border-radius: 6px; padding: 0 0.75rem; }
summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent); }
details[open] { padding-bottom: 0.5rem; }

ul { padding-left: 1.25rem; }
li { margin: 0.35rem 0; }

/* Keyboard shortcuts (only relevant with a keyboard; see shortcuts.js) */
[data-item].selected { background: var(--ok-bg); outline: 2px solid var(--accent); outline-offset: -2px; }
li[data-item].selected { border-radius: 4px; }
kbd { font: inherit; font-size: 0.85em; padding: 0.05rem 0.35rem; border: 1px solid var(--line); border-radius: 4px; }
.keys-hint { display: none; margin-top: 2rem; }
@media (hover: hover) and (pointer: fine) { .keys-hint { display: block; } }
.key-status {
  position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; margin: 0 auto; max-width: 42rem;
  padding: 0.6rem 0.75rem; border-radius: 6px; background: var(--fg); color: var(--bg);
}
dialog { max-width: min(36rem, calc(100vw - 1.5rem)); border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog h2 { margin-top: 0; }

/* Room filter: a wrapping row of one-tap links. */
nav.rooms { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.75rem; }
nav.rooms a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0.2rem 0.65rem;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none; white-space: nowrap;
}
nav.rooms a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
fieldset p.group { margin: 0.6rem 0 0.1rem; font-size: 0.85rem; color: var(--muted); }

/* While something is dragged over a page that accepts drops. */
body.dragging main { outline: 3px dashed var(--accent); outline-offset: 6px; border-radius: 6px; }

fieldset.inline-choices { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
footer { margin-top: 2rem; }
form.inline .as-who { align-self: center; }