/* The stencil heading font, served from the site. public/fonts/OFL.txt is its license, which has to
   ship with it. Letters outside these two sets, such as Vietnamese ones, use the fallback font. */
@font-face {
  font-family: "Big Shoulders Stencil Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/big-shoulders-stencil-display-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Big Shoulders Stencil Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/big-shoulders-stencil-display-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk for headings and Inter for text, the landing page's fonts (#154), served from the
   site. Each is one variable file per set of letters, covering every weight the site uses.
   public/fonts/space-grotesk-OFL.txt and inter-OFL.txt are their licenses. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --text: #1f2328;
  --muted: #6a6f76;
  --border: #dedcd5;
  --accent: #2f6f5e;
  --accent-text: #ffffff;
  --in: #2f6f5e;
  --in-bg: #e3f1ec;
  --partial: #8a5a00;
  --partial-bg: #fbefd6;
  --out: #9b2f2f;
  --out-bg: #f8e3e3;
  --radius: 10px;
  /* Shed materials: header paint, pegboard, shelf wood, cardboard boxes. */
  --header-bg: #2f6f5e;
  --header-text: #f7f1e3;
  --board: #c9a473;
  --board-hole: #8a6a40;
  --peg-outline: #4a3826;
  --wood: #8b5e34;
  --wood-edge: #5e3d1f;
  --box: #ead7b5;
  --box-edge: #b8945f;
  --label-bg: #f7f1e3;
  /* Sticky notes are yellow in both themes, like the real thing. */
  --sticky: #fbe88a;
  --sticky-text: #3d3300;
  --sticky-shadow: rgba(0, 0, 0, 0.25);
  /* The Community board: cork, and one sticky-note color per kind of note, bright in both themes. */
  --cork: #c49a68;
  --cork-speck: rgba(92, 58, 26, 0.35);
  --cork-light: rgba(255, 236, 200, 0.25);
  --note-looking: #fbe88a;
  --note-looking-text: #3d3300;
  --note-help: #c4e2f2;
  --note-help-text: #0f2f3d;
  --note-want: #f8cbd4;
  --note-want-text: #3d1520;
  --stencil: "Big Shoulders Stencil Display", system-ui, sans-serif;
  color-scheme: light dark;
}

/* Dark colors apply when the device is in dark mode and the person hasn't picked Light,
   or when they picked Dark with the header button. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17191c;
    --surface: #212429;
    --text: #e8e6e1;
    --muted: #9ba1a8;
    --border: #353a41;
    --accent: #6cc2a8;
    --accent-text: #10201b;
    --in: #8fd6bf;
    --in-bg: #1d3530;
    --partial: #f0c574;
    --partial-bg: #3a3020;
    --out: #f0a0a0;
    --out-bg: #3d2224;
    --header-bg: #1d3a32;
    --header-text: #e8e6e1;
    --board: #3b2f22;
    --board-hole: #1f170f;
    --peg-outline: #a8957a;
    --wood: #5a3d22;
    --wood-edge: #36230f;
    --box: #3a3226;
    --box-edge: #6b5638;
    --label-bg: #2a241c;
    --sticky: #e3cc63;
    --sticky-text: #2b2400;
    --sticky-shadow: rgba(0, 0, 0, 0.5);
    --cork: #6b4f33;
    --cork-speck: rgba(20, 10, 2, 0.45);
    --cork-light: rgba(255, 220, 170, 0.08);
    --note-looking: #e3cc63;
    --note-looking-text: #2b2400;
    --note-help: #9ccae0;
    --note-help-text: #0b2430;
    --note-want: #e6aab6;
    --note-want-text: #2e0f17;
  }
}

:root[data-theme="dark"] {
  --bg: #17191c;
  --surface: #212429;
  --text: #e8e6e1;
  --muted: #9ba1a8;
  --border: #353a41;
  --accent: #6cc2a8;
  --accent-text: #10201b;
  --in: #8fd6bf;
  --in-bg: #1d3530;
  --partial: #f0c574;
  --partial-bg: #3a3020;
  --out: #f0a0a0;
  --out-bg: #3d2224;
  --header-bg: #1d3a32;
  --header-text: #e8e6e1;
  --board: #3b2f22;
  --board-hole: #1f170f;
  --peg-outline: #a8957a;
  --wood: #5a3d22;
  --wood-edge: #36230f;
  --box: #3a3226;
  --box-edge: #6b5638;
  --label-bg: #2a241c;
  --sticky: #e3cc63;
  --sticky-text: #2b2400;
  --sticky-shadow: rgba(0, 0, 0, 0.5);
  --cork: #6b4f33;
  --cork-speck: rgba(20, 10, 2, 0.45);
  --cork-light: rgba(255, 220, 170, 0.08);
  --note-looking: #e3cc63;
  --note-looking-text: #2b2400;
  --note-help: #9ccae0;
  --note-help-text: #0b2430;
  --note-want: #e6aab6;
  --note-want-text: #2e0f17;
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* The landing page's look (#154), which the whole site moves to in #157: pegboard, forest green,
   orange, ink borders and hard offset shadows. Only the landing and sign-in pages use these so far.
   They have no dark values yet, so those pages stay light in every theme until #157 adds them. */
:root {
  --pegboard: #f2efe7;
  --pegboard-dot: #d9d3c4;
  --forest: #1f4d3a;
  --forest-deep: #123024;
  --on-forest: #e4e9e1;
  --orange: #f28c38;
  --ink: #1b1f1c;
  --quiet: #3e4540;
  --paper: #ffffff;
  --cream: #faf8f3;
  --cream-line: #cfc8b6;
  --ink-border: 2px solid var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
  --radius-btn: 10px;
  --radius-card: 14px;
  --font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* The hidden attribute always wins. Without this, rules like `button { display: inline-block }`
   override it, and elements the page means to hide show up anyway. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  /* env() adds room for an iPhone's notch and rounded corners when running from the home screen. */
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background: var(--header-bg);
  color: var(--header-text);
}
header .brand { font-family: var(--stencil); font-size: 24px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: var(--header-text); line-height: 1; }
header nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
header nav a { padding: 4px 10px; border-radius: 6px; text-decoration: none; color: var(--header-text); opacity: 0.8; }
header nav a.active { opacity: 1; box-shadow: inset 0 -2px 0 #f0c574; border-radius: 0; }
header nav a:hover { opacity: 1; }
/* The menu under your name: Create new sign-in link and Sign out. */
.me-menu { position: relative; }
.me-menu summary { display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px; list-style: none; cursor: pointer;
  color: var(--header-text); opacity: 0.8; font-size: 14px; }
.me-menu summary::-webkit-details-marker { display: none; }
.me-menu summary:hover, .me-menu[open] summary { opacity: 1; }
.me-menu .caret { font-size: 10px; }
.me-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.me-menu form { margin: 0; }
.me-menu .menu button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.me-menu .menu button:hover, .me-menu .menu button:focus-visible { background: var(--bg); }
.share-self { margin-top: 10px; }

/* On phones: name and person on the first row, then the pages. */
@media (max-width: 560px) {
  header { column-gap: 12px; }
  header .me-menu { margin-left: auto; }
  header nav { order: 3; flex: 1 1 auto; gap: 2px; }
  header nav a { padding: 4px 8px; }
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
h1 { font-family: var(--stencil); font-size: 32px; letter-spacing: 0.5px; line-height: 1.1; margin: 0 0 16px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin: 0; }

input, select, textarea, button, .button {
  font: inherit;
  border-radius: 8px;
}
input, select, textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  max-width: 100%;
}
button, .button {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  cursor: pointer;
}
button.secondary, .button.secondary { background: transparent; color: var(--accent); }
button.danger { background: transparent; border-color: var(--out); color: var(--out); }
button:disabled { opacity: 0.4; cursor: default; }

.filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.search-row, .filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search-row input[type="search"] { flex: 1 1 220px; min-width: 0; }
.filter-row select { flex: 0 1 auto; max-width: 100%; }

.check { display: flex; align-items: center; gap: 6px; }

/* The People filter on The Shed and SkillShare: a button that opens saved sets and a checkbox per
   connection, then the picked people as chips with a ✕ each. */
.people-pick { position: relative; }
.people-pick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.people-pick > summary::-webkit-details-marker { display: none; }
.people-pick[open] > summary { border-color: var(--accent); }
.people-pick > summary:focus-visible, .chip-remove:focus-visible, .set-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.people-pick .caret { font-size: 10px; opacity: 0.7; }
.people-count { min-width: 1.5em; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-text);
  font-size: 12px; font-weight: 700; line-height: 1.6; text-align: center; }
.people-panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(320px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.picker-heading { margin: 4px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.set-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.set-pick { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--accent);
  border-radius: 999px; color: var(--accent); text-decoration: none; }
.set-pick .muted { margin-left: 4px; }
.set-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.set-empty .set-pick { border-color: var(--border); color: var(--muted); }
.name-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.name-list .check { min-height: 40px; padding: 0 4px; }
.name-list li + li { border-top: 1px solid var(--border); }
.find-none { margin: 0; font-size: 14px; }
.picked-people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 16px; }
.people-label { flex-basis: 100%; margin: 0; }
.person-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.person-chip { display: inline-flex; align-items: center; gap: 2px; padding-left: 12px; border-radius: 999px;
  background: var(--in-bg); color: var(--in); font-weight: 600; }
.chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 999px; color: inherit; text-decoration: none; }
.chip-remove:hover { background: rgba(0, 0, 0, 0.08); }
.people-note { flex-basis: 100%; margin: 0; font-size: 14px; }
.save-set > summary { color: var(--accent); cursor: pointer; font-size: 14px; list-style: none; padding: 6px 0; }
.save-set > summary::-webkit-details-marker { display: none; }
.save-set[open] { flex-basis: 100%; }
.save-set-form { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }

.owner { color: var(--muted); font-size: 14px; margin: 0; }
.notes { white-space: pre-line; overflow-wrap: anywhere; margin: 0; font-size: 14px; }

.status { flex-shrink: 0; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.status.in { color: var(--in); background: var(--in-bg); }
.status.partial { color: var(--partial); background: var(--partial-bg); }
.status.out { color: var(--out); background: var(--out-bg); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--muted); }
.chip:hover { color: var(--text); }

.controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.controls form { margin: 0; }
.controls button, .controls .button { padding: 5px 10px; font-size: 14px; }

.item-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.item-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.item-form small { font-weight: 400; color: var(--muted); }
.item-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
/* Private: a switch on the item form, a checkbox under quick add, and a line on My Shelf's boxes. */
.item-form .private-switch { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; cursor: pointer; }
.private-switch input { appearance: none; flex: 0 0 auto; width: 44px; height: 26px; margin: 2px 0 0; padding: 0; border: none;
                        border-radius: 13px; background: var(--muted); position: relative; cursor: pointer; transition: background 0.15s; }
.private-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
                               background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: left 0.15s; }
.private-switch input:checked { background: var(--accent); }
.private-switch input:checked::after { left: 21px; }
.private-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.private-switch b { font-weight: 600; }
.private-switch small { display: block; }
.quick-add .quick-private { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; font-weight: 400; cursor: pointer; }
.quick-private input { width: 18px; height: 18px; margin: 0; }
.private-tag { margin: 0; font-size: 13px; color: var(--muted); }
.danger-zone { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); max-width: 560px; }

.errors { color: var(--out); background: var(--out-bg); border-radius: var(--radius); padding: 10px 14px 10px 32px; }
.empty, .muted { color: var(--muted); }
.message { max-width: 520px; margin: 48px auto; text-align: center; }

.flash { background: var(--in-bg); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; }
.flash p { margin: 0 0 8px; }
.link-box { display: flex; gap: 8px; }
.link-box input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 14px; }

.add-person { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.add-person input { flex: 1 1 200px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 13px; color: var(--muted); font-weight: 600; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.actions form { margin: 0; }
.actions button { padding: 4px 10px; font-size: 14px; }

.install-tip { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 20px; }
.install-tip > div { flex: 1; }
.install-tip p { margin: 4px 0 0; }
.install-tip .install-now { margin-top: 10px; }
.install-tip .dismiss { background: transparent; border: none; color: var(--muted); padding: 2px 6px; font-size: 18px; line-height: 1; }
.site-footer { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: -24px; padding: 0 16px max(24px, env(safe-area-inset-bottom)); }
/* App Suggestions?: a small box in the header's colors, so it's easy to spot at the bottom of the page. */
.site-footer .app-suggestions { padding: 6px 14px; border-radius: var(--radius); background: var(--header-bg); color: var(--header-text); font-size: 14px; text-decoration: none; }
.site-footer .app-suggestions:hover, .site-footer .app-suggestions.active { text-decoration: underline; }
#theme-toggle { padding: 3px 10px; font-size: 13px; }
#notify-toggle { padding: 3px 10px; font-size: 13px; }

.quick-add { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.quick-add > label, .paste-link > label { font-weight: 600; }
.quick-add small { color: var(--muted); }
.quick-add-row { display: flex; gap: 8px; }
.quick-add-row input { flex: 1; min-width: 0; font-size: 16px; } /* 16px stops iPhones from zooming in on focus */
.field-error { color: var(--out); margin: 0; }
.flash.added { padding: 10px 14px; }

.paste-link { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; text-align: left; }

/* Long names without spaces wrap instead of stretching the table off the screen. */
td:first-child { overflow-wrap: anywhere; }
.rename { margin-top: 4px; }
.rename summary { color: var(--accent); cursor: pointer; font-size: 14px; width: fit-content; }
.rename form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rename input { flex: 1 1 6em; width: 6em; min-width: 0; max-width: 220px; padding: 4px 8px; }
.rename button { padding: 4px 10px; font-size: 14px; white-space: nowrap; }
/* Details under a person's link status: when they were added, whose shed link they used. */
.link-status small { display: block; color: var(--muted); }

/* On phones, each person on the Admin page is a stacked row: name and item count, then the link
   status on one line, then the buttons. */
@media (max-width: 560px) {
  .people-table thead { display: none; }
  .people-table, .people-table tbody, .people-table td { display: block; }
  .people-table tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name items" "link link" "actions actions";
                     column-gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); }
  .people-table td { padding: 0; border: none; }
  .people-table td:first-child { grid-area: name; }
  .people-table .item-count { grid-area: items; color: var(--muted); font-size: 14px; }
  .people-table .item-count::after { content: " items"; }
  .people-table .link-status { grid-area: link; margin-top: 4px; }
  .people-table .link-status small { display: inline; }
  .people-table .link-status small::before { content: " · "; }
  .people-table td:last-child { grid-area: actions; margin-top: 10px; }
  .people-table .actions { justify-content: flex-start; }
  .people-table .actions button { min-height: 44px; padding: 4px 14px; }
}

/* The Shed: a pegboard with items hanging in groups by category. */
.pegboard {
  background-color: var(--board);
  background-image: radial-gradient(circle, var(--board-hole) 2px, transparent 2.5px);
  background-size: 20px 20px;
  border: 6px solid var(--wood);
  border-radius: var(--radius);
  padding: 16px 12px;
}
.peg-group + .peg-group { margin-top: 20px; }
.peg-label, .shelf-label {
  display: inline-block;
  font-family: var(--stencil);
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--label-bg);
  color: var(--text);
  padding: 2px 10px;
  border-radius: 4px;
  margin: 0 0 10px;
}
.pegs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.peg {
  background: var(--surface);
  border: 2px solid var(--peg-outline);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.peg-icon, .box-icon { font-size: 28px; line-height: 1.1; }
.peg h3, .box h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.peg .chips { justify-content: center; }
/* Out on loan: the empty outline where the item usually hangs. */
.peg.out { background: var(--board); border-style: dashed; }
.peg.out .owner a { color: var(--text); }
.peg.out .peg-icon { opacity: 0.4; }
.peg.out h3 { color: var(--text); }
.peg.out .status { background: var(--surface); }

/* My Shelf: one wooden shelf per category, with each item as a box on it. */
.shelf { margin-bottom: 28px; }
.shelf-row {
  list-style: none;
  margin: 0;
  padding: 0 6px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  /* On phones a shelf scrolls sideways, like walking along it. */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.box {
  /* 172px, but never wider than half the row, so two boxes always fit side by side on a phone. */
  flex: 0 0 min(172px, calc((100% - 10px) / 2));
  scroll-snap-align: start;
  background: var(--box);
  border: 1px solid var(--box-edge);
  border-top-width: 6px;
  border-radius: 4px 4px 2px 2px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.box .status { align-self: flex-start; }
.box .controls { margin-top: auto; padding-top: 6px; }
.box .controls button, .box .controls .button { padding: 4px 8px; font-size: 13px; }
.box.out { background: transparent; border-style: dashed; }
.box.out .box-icon { opacity: 0.4; }
.plank { position: relative; height: 12px; background: var(--wood); border-bottom: 5px solid var(--wood-edge); border-radius: 2px; }
.plank::before, .plank::after { content: ""; position: absolute; top: 100%; width: 10px; height: 14px; background: var(--wood-edge); }
.plank::before { left: 24px; }
.plank::after { right: 24px; }
@media (min-width: 700px) {
  .shelf-row { flex-wrap: wrap; overflow-x: visible; }
}

/* Moving boxes between shelves. */
.shelf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.shelf-head .shelf-label { margin: 0; }
.shelf-head form { margin: 0; }
.shelf-delete { padding: 2px 10px; font-size: 13px; }
.shelf-row { min-height: 60px; border-radius: 6px; }
.shelf-empty { align-self: center; color: var(--muted); font-size: 14px; padding: 18px 4px; }
.box { position: relative; }
.box h3 { padding-right: 30px; }
.move-handle {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 0 6px;
  font-size: 18px;
  line-height: 1.4;
  background: transparent;
  border: 1px solid var(--box-edge);
  border-radius: 6px;
  color: var(--text);
  cursor: grab;
  touch-action: none;
}
.move-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.move-form select { flex: 1 1 8em; min-width: 0; padding: 4px 6px; font-size: 14px; }
.move-form button { padding: 4px 10px; font-size: 13px; }
.box.dragging, .box.saving { opacity: 0.35; }
.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  margin: 0;
  list-style: none;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.shelf.drop-target .shelf-row { outline: 3px dashed var(--accent); outline-offset: 4px; }
.new-shelf { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: 420px; }

/* The category drop-down from public/app.js, under a category field, or above it when there's no
   room below. Rows are 44px tall for tapping. */
.cat-field { position: relative; display: block; }
.cat-field > input { width: 100%; }
.quick-add-row .cat-field { flex: 1; min-width: 0; }
.prefix-row .cat-field { flex: 1; min-width: 0; }
/* On a Community board note, after I can help: above the notes next to it, in the page's colors
   rather than the note's, and wider than a half-width note on a phone. */
.board-note:has(.cat-list:not([hidden])) { z-index: 5; }
.board-note .cat-list { color: var(--text); right: auto; width: max(100%, min(260px, 80vw)); }
.cat-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
            background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); max-height: 264px; overflow-y: auto; font-weight: 400; }
.cat-list.up { top: auto; bottom: calc(100% + 4px); }
.cat-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
               border-radius: 6px; cursor: pointer; }
.cat-list li[aria-selected="true"] { background: var(--in-bg); }
@media (hover: hover) { .cat-list li:hover { background: var(--in-bg); } }
.cat-list .count { color: var(--muted); font-size: 14px; }
.cat-list mark { background: none; color: inherit; font-weight: 700; }

/* Merge into on a shelf's heading. Open, its form takes a row of its own under the heading. */
.shelf-head .merge { margin-left: auto; }
.shelf-head .merge[open] { flex-basis: 100%; margin-left: 0; }
.merge summary { color: var(--accent); cursor: pointer; font-size: 14px; list-style: none; padding: 6px 0; width: fit-content; }
.merge summary::-webkit-details-marker { display: none; }
.merge[open] summary { margin-left: auto; }
.merge form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; padding: 10px 12px; font-size: 14px;
              background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.merge select, .merge button { min-height: 44px; }
.new-shelf > label { font-weight: 600; }

/* Pokes. */
header nav .badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 6px;
  border-radius: 999px;
  background: #f0c574;
  color: #3b2a1a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.peg form { margin: 4px 0 0; }
.poke { padding: 4px 9px; font-size: 12px; border-radius: 999px; white-space: nowrap; max-width: 100%; }
.peg.out .poke { background: var(--surface); color: var(--accent); }
.poke-state { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.poke-state.yes { color: var(--in); font-weight: 600; }
.pokes { margin-bottom: 20px; }
.pokes-heading { font-family: var(--stencil); font-size: 20px; letter-spacing: 0.5px; text-transform: uppercase; margin: 0 0 8px; }
.poke-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid #f0c574;
  padding: 10px 12px;
  margin-bottom: 8px;
  max-width: 560px;
}
.poke-card.mine { border-left-color: var(--accent); }
/* The poke, ask or request a phone notification opened, outlined so it's easy to spot. */
.poke-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--in-bg); scroll-margin-top: 16px; }
.poke-card p { margin: 0; overflow-wrap: anywhere; }
.poke-card .controls { margin-top: 8px; }
.poke-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.when { color: var(--muted); font-size: 13px; }
.poke-status { flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.poke-status.yes { color: var(--in); background: var(--in-bg); }
.poke-status.waiting { color: var(--partial); background: var(--partial-bg); }
.poke-status.no { color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
.lent-to { margin: 0; font-size: 13px; color: var(--muted); }
.loan { border-top: 1px dashed var(--box-edge); padding-top: 6px; margin-top: 2px; }
.loan .controls { margin-top: 4px; }
.loan .poke { white-space: normal; text-align: left; }
.poke.secondary { background: transparent; color: var(--accent); }
.take-back { display: inline; margin: 0; }
.link-button { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; font-size: inherit; cursor: pointer; }

/* Suggesting something a friend hasn't listed, on their page. */
.suggest { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px dashed var(--box-edge); border-radius: var(--radius); padding: 12px; margin-bottom: 16px; }
.suggest > label { font-weight: 600; }
.suggest-row { display: flex; flex-wrap: wrap; gap: 8px; }
.suggest-row input { flex: 1 1 160px; min-width: 0; font-size: 16px; }
.suggest-row select { flex: 0 1 auto; max-width: 100%; }

/* Friends, and the page a shed link opens. */
.friends-section { margin-bottom: 28px; max-width: 560px; }
.friends-section > p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.friends-section .link-box + .controls { margin-top: 8px; }
.flash.welcome { text-align: left; }
.controls.centered { justify-content: center; }

/* App suggestions on the Admin page keep the sender's line breaks. */
.app-suggestion { white-space: pre-line; }

/* Replies to app suggestions: on the sender's My Shelf and under Answered on the Admin page. */
.app-reply { margin-top: 6px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 2px; }
.app-reply .kind { display: block; }
.poke-card .app-reply p + p { margin-top: 4px; }
.reply-text { white-space: pre-line; }
.poke-card .your-suggestion { margin-top: 2px; color: var(--muted); font-style: italic; }
.answered { margin-top: 12px; max-width: 560px; }
.answered summary { color: var(--accent); cursor: pointer; font-weight: 600; margin-bottom: 8px; width: fit-content; }
.reply-form .note-pick { display: none; }
.reply-form:has(input[value="added"]:checked) .note-pick { display: flex; }

/* Introducing a connection to others: a plain list of checkboxes. */
.pick-list { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; }
.item-form .pick-list label { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.intro-note { margin: 0; }
.actions .button { padding: 4px 10px; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pick-list .already { margin: 0; padding-left: 26px; }

/* SkillShare: a corkboard on the shed wall, with skills pinned up as index cards. */
.corkboard { background: var(--board); border: 6px solid var(--wood); padding: 14px; }
.skill-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.skill-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: var(--label-bg); color: var(--text); padding: 18px 12px 12px; border-radius: 2px; box-shadow: 0 2px 0 var(--peg-outline); overflow-wrap: anywhere; }
.skill-card:nth-child(3n+1) { transform: rotate(-1.2deg); }
.skill-card:nth-child(3n+2) { transform: rotate(0.8deg); }
.skill-card::before { content: ""; position: absolute; top: 6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--out); }
.skill-card h3 { margin: 0 0 2px; font-size: 16px; }
/* Each person on a card, then everyone's ask buttons together at the bottom. */
.skill-person { margin-bottom: 8px; }
.skill-person + .skill-person { border-top: 1px dashed var(--border); padding-top: 8px; }
.skill-person p { margin: 0 0 2px; }
.ask-row { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.ask-row .poke-state { margin: 0; }
/* Wait I need this on a card with several people: a button that opens their names to pick from. */
.ask-pick summary { list-style: none; cursor: pointer; }
.ask-pick summary::-webkit-details-marker { display: none; }
.ask-pick[open] summary { opacity: 0.7; }
.ask-pick p { margin: 8px 0 4px; font-size: 13px; }
.ask-pick-list { display: flex; flex-wrap: wrap; gap: 6px; }
/* I can help too: a sticky note stuck on the card's top-right corner. The name wraps before it. */
.help-too { position: absolute; top: -8px; right: -8px; z-index: 1; }
.help-too + h3 { padding-right: 64px; }
.sticky-note { position: relative; width: 70px; min-height: 58px; padding: 8px 6px 6px; border: none; border-radius: 0 0 2px 2px;
               background: var(--sticky); color: var(--sticky-text); font-size: 12px; font-weight: 600; line-height: 1.25;
               transform: rotate(4deg); box-shadow: 1px 3px 4px var(--sticky-shadow); transition: transform 0.12s; }
.sticky-note::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px; background: rgba(0, 0, 0, 0.06); }
.sticky-note:hover, .sticky-note:focus-visible { transform: rotate(1deg) translateY(-2px); }
.skill-card:nth-child(2n) .sticky-note { transform: rotate(-3deg); }
.skill-card:nth-child(2n) .sticky-note:hover, .skill-card:nth-child(2n) .sticky-note:focus-visible { transform: rotate(0) translateY(-2px); }
.your-skills { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.your-skills li { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 14px; overflow-wrap: anywhere; }
.your-skills a { font-size: 13px; color: var(--muted); }
.your-skills:empty { display: none; }
#skill-starters { margin-bottom: 12px; }
.owner-skills { margin-top: 24px; }

/* The Community board: speckled cork in a thick wooden frame, with a sign on the frame like the
   category signs on The Shed, and sticky notes pinned on. */
.board-row { margin: 34px 0 26px; }
.cork-board { position: relative; padding: 22px 18px 18px; border: 10px solid var(--wood); border-radius: 6px;
  background-color: var(--cork);
  background-image:
    radial-gradient(circle at 20% 30%, var(--cork-speck) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, var(--cork-speck) 1px, transparent 1.5px),
    radial-gradient(circle at 45% 80%, var(--cork-light) 1.5px, transparent 2px),
    radial-gradient(circle at 85% 15%, var(--cork-speck) 0.8px, transparent 1.2px);
  background-size: 13px 11px, 17px 19px, 23px 21px, 9px 13px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 6px 12px rgba(0, 0, 0, 0.18), 0 3px 0 var(--wood-edge); }
.board-sign { position: absolute; top: -18px; left: 18px; margin: 0; padding: 3px 12px; background: var(--label-bg); color: var(--text);
              font-family: var(--stencil); font-size: 16px; letter-spacing: 1px; text-transform: uppercase; border-radius: 3px;
              box-shadow: 0 2px 0 var(--wood-edge); }
.cork-empty { display: inline-block; margin: 4px 0; padding: 8px 12px; background: var(--label-bg); color: var(--text); border-radius: 3px; }
.board-tabs + .cork-board { margin-top: 28px; }
/* Notes keep their own height and leave cork showing between them. */
.board-notes { list-style: none; margin: 0; padding: 0; display: grid; align-items: start; gap: 22px 18px;
               grid-template-columns: repeat(auto-fill, minmax(180px, 210px)); }
.board-notes.row { display: flex; align-items: flex-start; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity;
                   scrollbar-width: thin; scrollbar-color: var(--wood) transparent; padding: 8px 4px 14px; }
.board-notes.row > li { flex: 0 0 190px; scroll-snap-align: start; }
.board-note { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 12px 12px;
              box-shadow: 1px 3px 5px var(--sticky-shadow); border-radius: 0 0 2px 2px; }
.board-note:nth-child(4n+1) { transform: rotate(-1deg); }
.board-note:nth-child(4n+2) { transform: rotate(0.8deg); }
.board-note:nth-child(4n+3) { transform: rotate(-1.8deg) translateY(6px); }
.board-note:nth-child(4n) { transform: rotate(1.4deg) translateY(-2px); }
.board-note.looking { background: var(--note-looking); color: var(--note-looking-text); }
.board-note.help { background: var(--note-help); color: var(--note-help-text); }
.board-note.want { background: var(--note-want); color: var(--note-want-text); }
/* A push pin at the top of every note: red on Looking for, green on Help with, blue on Want. */
.board-note::after { content: ""; position: absolute; top: 7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
                     background: radial-gradient(circle at 35% 35%, #f3a3a3 0 2px, #c0392b 3px); box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.45); }
.board-note.help::after { background: radial-gradient(circle at 35% 35%, #a9d7a0 0 2px, #2f7d3a 3px); }
.board-note.want::after { background: radial-gradient(circle at 35% 35%, #a8c4ef 0 2px, #2c5aa0 3px); }
.board-note.mine { outline: 2px dashed rgba(0, 0, 0, 0.25); outline-offset: -6px; }
.board-note p, .board-note h3 { margin: 0; overflow-wrap: anywhere; }
.board-note h3 { font-size: 19px; line-height: 1.2; }
.board-note a { color: inherit; font-weight: 600; }
.board-note .kind { font-family: var(--stencil); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; }
.board-note .desc { font-size: 14px; }
.board-note .by { font-size: 13px; opacity: 0.75; }
.board-note .due { font-size: 12px; opacity: 0.75; }
.board-note .answers { font-size: 13px; font-weight: 600; border-top: 1px dashed currentColor; padding-top: 6px; margin-top: 6px; }
.board-note .state { font-size: 13px; font-weight: 600; }
.board-note .state form { display: inline; }
.board-note .link-button { color: inherit; }
/* The notes are bright in both themes, so their buttons keep the same colors in both. */
.board-note .buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.board-note .buttons button { padding: 5px 10px; font-size: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); color: inherit; border: 1px solid currentColor; }
.board-note .buttons button.primary { background: #2f3a33; color: #fdfbf3; border-color: #2f3a33; }
/* After I can help: the offer to add the note's title to your skills, on the note itself. */
.board-note .skill-offer { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px; border-radius: 4px;
                           background: rgba(255, 255, 255, 0.55); font-size: 13px; }
.board-note .skill-offer p { font-weight: 600; }
.board-note .skill-offer input { width: 100%; min-width: 0; font-size: 16px; padding: 6px 8px; color: #1d2420; background: #fff;
                                 border: 1px solid currentColor; border-radius: 6px; }
.board-note .skill-offer button { align-self: flex-start; padding: 5px 12px; font-size: 14px; border-radius: 999px;
                                  background: #2f3a33; color: #fdfbf3; border: 1px solid #2f3a33; }
/* A Done note stays on the board after the open ones, faded, under a green rubber stamp: Done, or
   Bought after We bought it. The line saying where a bought thing went stays readable. */
.board-note.done > :not(.stamp) { opacity: 0.6; }
.board-note.done .state { opacity: 1; }
.board-note.done .stamp { position: absolute; top: 46%; left: 50%; z-index: 1; transform: translate(-50%, -50%) rotate(-14deg);
                          padding: 2px 12px; border: 4px double #1f7a35; border-radius: 6px; color: #1f7a35; background: rgba(255, 255, 255, 0.35);
                          font-family: var(--stencil); font-size: 26px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.1;
                          white-space: nowrap; pointer-events: none; }
/* Under the board: Ask your connections, which opens the form on the board's page, and See all. */
.board-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.board-foot .button { font-weight: 600; }
.board-ask { flex: 1 1 100%; }
.board-ask > summary { list-style: none; display: inline-block; cursor: pointer; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--accent);
                       background: var(--accent); color: var(--accent-text); font-weight: 600; }
.board-ask > summary::-webkit-details-marker { display: none; }
.board-ask[open] > summary { background: transparent; color: var(--accent); }
/* The form: the kind of note as a sentence, then the title after its fixed start. */
.board-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin: 12px 0 20px; max-width: 640px; }
.board-form h2 { font-family: var(--stencil); font-size: 22px; letter-spacing: 0.5px; margin: 0 0 10px; }
.kind-pick { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 12px; }
.kind-pick label { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 4px; cursor: pointer;
                   font-weight: 600; font-size: 15px; box-shadow: 0 1px 3px var(--sticky-shadow); }
.kind-pick input { position: absolute; opacity: 0; pointer-events: none; }
.kind-pick label.looking { background: var(--note-looking); color: var(--note-looking-text); }
.kind-pick label.help { background: var(--note-help); color: var(--note-help-text); }
.kind-pick label.want { background: var(--note-want); color: var(--note-want-text); }
.kind-pick label:not(:has(input:checked)) { opacity: 0.55; }
.kind-pick label:has(input:checked) { outline: 2px solid var(--text); outline-offset: 2px; }
.kind-pick label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.board-fields { display: flex; flex-direction: column; gap: 8px; }
.board-fields textarea { font-size: 16px; }
.board-fields small { color: var(--muted); }
.prefix-row { display: flex; }
.prefix-row .prefix { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-right: 0; border-radius: 8px 0 0 8px;
                      background: var(--label-bg); color: var(--text); font-weight: 600; white-space: nowrap; }
.prefix-row input { flex: 1; min-width: 0; border-radius: 0 8px 8px 0; font-size: 16px; }
/* The same fixed start for I can on SkillShare's add box, beside its Add button. */
.quick-add-row .prefix-row { flex: 1; min-width: 0; }
/* The board's page: filters by kind on top, and Done notes folded at the bottom. */
.board-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.board-tabs a { padding: 6px 12px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); text-decoration: none; font-size: 14px; }
.board-tabs a.current { background: var(--accent); color: var(--accent-text); }
/* A search on The Shed that finds nothing: the Looking for note it could become, beside the words. */
.board-prompt { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; max-width: 640px; margin: 16px 0;
                padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.board-prompt .board-notes { grid-template-columns: 1fr; }
.board-prompt .board-note { min-height: 150px; }
.board-prompt h2 { font-size: 20px; margin: 0 0 6px; }
.board-prompt div > p { margin: 0 0 12px; color: var(--muted); }
/* We bought it: whose shelf it goes on, with who wanted it under each name. */
.shelf-pick small { display: block; font-weight: 400; color: var(--muted); }
/* New answers on one of your notes, in Pokes on My Shelf. */
.board-answers { margin: 4px 0; padding-left: 20px; }
@media (max-width: 560px) {
  .cork-board { padding: 22px 10px 12px; border-width: 8px; }
  .board-notes { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .board-notes.row > li { flex-basis: 165px; }
  .board-note { padding: 20px 10px 10px; }
  .board-note h3 { font-size: 17px; }
  .board-note .buttons button { min-height: 44px; }
  .board-note .skill-offer button { min-height: 44px; }
  .kind-pick label { min-height: 44px; flex: 1 1 100%; }
  .board-prompt { grid-template-columns: 1fr; }
  .board-prompt .board-notes { max-width: 200px; }
  .board-foot .button, .board-prompt .button, .board-ask > summary, .board-tabs a { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
}

/* Contribute, Offer a skill, Plan a trip: index cards under The Shed's heading. On phones they're
   square tiles, icon over label, without the hints. */
.shed-actions { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.action-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; height: 100%; box-sizing: border-box;
  padding: 12px 14px; background: var(--label-bg); color: var(--text); border: 1px solid var(--border); border-radius: 2px;
  box-shadow: 0 2px 0 var(--peg-outline); text-decoration: none; transition: transform 0.1s; }
.action-card:hover, .action-card:focus-visible { transform: translateY(-2px); }
.action-icon { grid-row: span 2; font-size: 28px; line-height: 1; }
.action-label { font-weight: 600; }
.action-hint { color: var(--muted); font-size: 14px; }
@media (max-width: 560px) {
  .shed-actions { gap: 8px; }
  .action-card { aspect-ratio: 1; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
    padding: 8px; text-align: center; overflow-wrap: anywhere; }
  .action-label { font-size: 14px; line-height: 1.2; }
  .action-hint { display: none; }
}

/* Update notes: index cards pinned up at the top of The Shed, piled with the newest on top.
   The ones under it peek out below and to the side, each at its own angle, and match the top
   note's size so the pile is only as tall as the note being read. */
.note-pile { position: relative; max-width: 420px; margin: 0 0 24px; padding: 0 14px 14px 0; }
.update-note { position: relative; background: var(--label-bg); color: var(--text); padding: 20px 14px 12px; border-radius: 2px; box-shadow: 0 2px 0 var(--peg-outline); overflow-wrap: anywhere; }
.update-note::before { content: ""; position: absolute; top: 7px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--out); }
.update-note h2 { font-family: var(--stencil); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 4px; }
.update-note p { margin: 0 0 8px; }
.update-note .note-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.note-count { color: var(--muted); font-size: 13px; }
.update-note .controls { margin-top: 0; }
.update-note:nth-child(1) { z-index: 3; transform: rotate(-0.8deg); }
.update-note:nth-child(2) { z-index: 2; transform: translate(7px, 7px) rotate(1.6deg); }
.update-note:nth-child(3) { z-index: 1; transform: translate(12px, 12px) rotate(-2.2deg); }
.update-note:nth-child(n+4) { display: none; }
.update-note:not(:first-child) { position: absolute; inset: 0 14px 14px 0; }
.update-note:not(:first-child) > *, .update-note:not(:first-child)::before { visibility: hidden; }
.update-note.leaving { transition: transform 0.25s, opacity 0.25s; transform: translate(-30px, -10px) rotate(-8deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .update-note.leaving, .private-switch input, .private-switch input::after { transition: none; } }

/* The lend box: common things to tap onto your shelf, for people whose shelf is empty. */
.lend-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 20px; text-align: left; max-width: 560px; }
.lend-box h2 { font-family: var(--stencil); font-size: 22px; letter-spacing: 0.5px; margin: 0 0 4px; }
.lend-box > p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.lend-box .quick-add { margin: 12px 0 0; }
.lend-box .lend-count { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--in); }
.lend-box .lend-count:empty { display: none; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.starters form { margin: 0; }
.starter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 15px;
           background: var(--surface); color: var(--text); border: 1px solid var(--box-edge); }
.starter.on { background: var(--in-bg); color: var(--in); border-color: var(--in); font-weight: 600; }
.starter.on::after { content: "✓"; }
.starter.saving { opacity: 0.5; }
.message.asked { margin-top: 20px; }
.message.asked h1 { margin-bottom: 18px; }

/* A shed link before connecting: icons of the owner's newest things on a small pegboard. */
.preview-board { background-color: var(--board); background-image: radial-gradient(circle, var(--board-hole) 2px, transparent 2.5px);
                 background-size: 20px 20px; border: 6px solid var(--wood); border-radius: var(--radius); padding: 14px 10px; margin: 16px 0 6px; }
.preview-pegs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.preview-peg { width: 54px; height: 54px; display: grid; place-items: center; font-size: 26px; background: var(--surface);
               border: 2px solid var(--peg-outline); border-radius: 12px; }
.preview-peg.more { font-size: 16px; font-weight: 700; color: var(--muted); }
.preview-caption { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.join-form { margin-top: 16px; }
details.already-here { margin-top: 22px; text-align: left; }
details.already-here summary { color: var(--accent); cursor: pointer; font-size: 14px; width: fit-content; }
details.already-here .paste-link { margin-top: 10px; }

/* Friends: the invite text as a message bubble, and the button that opens the share menu. */
.friends-section .text-preview { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; padding: 10px 12px; font-size: 14px; margin: 0 0 10px; overflow-wrap: anywhere; }
.text-preview .url { color: var(--accent); }
.share-big { width: 100%; padding: 12px; font-size: 17px; font-weight: 600; }
.copy-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 8px; }
.copy-row form { margin: 0; }
.copy-row button { padding: 3px 10px; font-size: 14px; }
.copy-row .link-button { padding: 0; }

/* Phones. Nothing below changes how a computer shows the site. */

/* The tab bar at the bottom of phones, and the Admin link that joins the header there. */
.tab-bar, header .admin-link { display: none; }

/* The Shed's item details and button. Wrappers only on computers, so items lay out as before. */
.peg-meta, .peg-action { display: contents; }

/* The Shed's filters: their own row on computers, a row of chips that scrolls sideways on phones. */
.filter-chips { display: contents; }

@media (max-width: 560px) {
  /* Header: the site name, then Admin for admins, then your name. The pages are in the tab bar. */
  header nav { display: none; }
  header .admin-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto;
                       color: var(--header-text); opacity: 0.85; font-size: 14px; text-decoration: none; }
  header .admin-link.active { opacity: 1; box-shadow: inset 0 -2px 0 #f0c574; }
  header .admin-link + .me-menu { margin-left: 0; }
  header .me-menu summary { min-height: 44px; }

  .tab-bar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
             padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
             background: var(--header-bg); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
  .tab-bar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
               min-height: 58px; color: var(--header-text); opacity: 0.75; text-decoration: none; font-size: 11px;
               line-height: 1.15; text-align: center; }
  .tab-bar a.active { opacity: 1; font-weight: 600; box-shadow: inset 0 3px 0 #f0c574; }
  .tab-bar .tab-icon { font-size: 21px; line-height: 1; }
  .tab-bar .badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 1.5em; padding: 0 5px; border-radius: 999px;
                    background: #f0c574; color: #3b2a1a; font-size: 11px; font-weight: 700; line-height: 1.6; text-align: center; }
  header .badge { display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #f0c574;
                  color: #3b2a1a; font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center; }
  /* Room under the footer so the tab bar never covers it. */
  .tab-bar + .site-footer { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }

  /* The Shed's filters: the search box alone (Enter searches), then one sideways row of chips. */
  .shed-filters .search-row button { display: none; }
  .filter-chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 8px; }
  .filter-chips .filter-row { display: contents; }
  .filter-row select { flex: 0 0 auto; border: 1px solid var(--accent); border-radius: 999px; background-color: transparent;
                       color: var(--accent); font-size: 14px; padding: 0 12px; }
  .filter-row .check, .filter-row .clear-all { flex: 0 0 auto; white-space: nowrap; min-height: 44px; padding: 0 14px;
                       border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 14px; text-decoration: none; }
  .filter-row .check:has(input:checked) { background: var(--in-bg); }
  .filter-row .clear-all { display: inline-flex; align-items: center; }
  /* The People button is a pill like the other filters, and its panel spans the filters' width. */
  .filters { position: relative; }
  .people-pick { position: static; }
  .filter-row .people-pick > summary { min-height: 44px; border: 1px solid var(--accent); border-radius: 999px;
    background: transparent; color: var(--accent); font-size: 14px; padding: 0 14px; white-space: nowrap; }
  .people-panel { left: 0; right: 0; width: auto; top: auto; margin-top: 6px; }
  .people-panel .name-list .check { min-height: 44px; padding: 0 4px; border: none; border-radius: 0; background: none;
    color: var(--text); font-size: inherit; white-space: normal; }
  .set-pick, .save-set > summary { min-height: 44px; }
  .save-set > summary { display: inline-flex; align-items: center; }
  .chip-remove { width: 44px; height: 44px; }

  /* The Shed's items as short rows: the icon, the name with its details underneath, then the button. */
  .pegboard { padding: 12px 8px; border-width: 5px; }
  .peg-group + .peg-group { margin-top: 14px; }
  .peg-label { margin-bottom: 8px; }
  .pegs { grid-template-columns: 1fr; gap: 6px; }
  .peg { display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: "icon name action" "icon meta action";
         align-items: center; column-gap: 10px; row-gap: 1px; padding: 8px 8px 8px 10px; text-align: left; border-radius: 10px; }
  .peg-icon { grid-area: icon; font-size: 26px; text-align: center; }
  .peg h3 { grid-area: name; line-height: 1.25; }
  .peg-meta { grid-area: meta; display: block; color: var(--muted); font-size: 13px; line-height: 1.6; }
  .peg-meta > * { display: inline; margin: 0; }
  .peg-meta > :not(:first-child)::before { content: " · "; }
  .peg-meta .status { font-size: 12px; padding: 0 6px; }
  .peg-meta .owner, .peg-meta .notes { font-size: 13px; }
  .peg-meta .owner a { color: var(--muted); }
  .peg .chips { display: inline; }
  .peg .chips .chip + .chip { margin-left: 4px; }
  .peg-action { grid-area: action; display: flex; flex-direction: column; align-items: flex-end; }
  .peg-action form, .peg-action .poke-state { margin: 0; text-align: right; }
  .poke { padding: 0 14px; font-size: 14px; }

  /* Anything you tap is at least 44px tall. Text-style buttons get the room as invisible padding. */
  button, .button, select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 44px; }
  .button { display: inline-flex; align-items: center; justify-content: center; }
  .site-footer .app-suggestions { display: inline-flex; align-items: center; min-height: 44px; }
  .link-button, .copy-row .link-button { min-height: 0; padding: 12px 4px; margin: -12px -4px; }
}

/* The Shed: one pegboard per category, with its sign, a count and See all above it. */
.category-board, .new-strip { margin-bottom: 22px; }
.board-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.board-head .peg-label { margin: 0; }
.board-head .peg-label a { color: inherit; text-decoration: none; }
.board-count { flex: 1; font-size: 14px; }
.board-count .out-count { color: var(--muted); }
.see-all { margin-left: auto; font-size: 14px; font-weight: 600; white-space: nowrap; }
.category-board .pegboard { padding: 12px; }
.board-grip { position: static; flex: none; align-self: center; }
.combine-note { margin: -4px 0 8px; font-size: 14px; color: var(--muted); }
.combine-note form { display: inline; }
h1 + .combine-note, .flash + .combine-note { margin: -4px 0 14px; }
.combine-form { margin: 0 0 10px; }
.combine-form p { flex-basis: 100%; margin: 0; font-size: 14px; }
.category-board.dragging { opacity: 0.35; }
.category-board.drop-target .pegboard { outline: 3px dashed var(--accent); outline-offset: 4px; }
.board-ghost { background: var(--bg); padding: 6px 10px; border-radius: 6px; }
.drop-hint { position: fixed; top: 0; left: 0; z-index: 1001; margin: 0; pointer-events: none; background: var(--surface);
             border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }

/* A board's things in one row that scrolls sideways, ending in Show all when there are more. */
.pegs.row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 6px; }
.pegs.row > li { flex: 0 0 150px; scroll-snap-align: start; }
/* On computers a full row, six cards and Show all, shares the board's width instead of running past it. */
@media (min-width: 561px) {
  .pegs.row > li { flex: 1 1 0; min-width: 110px; max-width: 150px; }
}
.show-all-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; min-height: 120px;
                 border: 2px dashed var(--peg-outline); border-radius: 12px; background: var(--label-bg); color: var(--text);
                 font-weight: 600; text-align: center; text-decoration: none; }
.show-all-tile b { font-family: var(--stencil); font-size: 28px; line-height: 1; }

/* New this week: the newest things, on a plain strip above the boards. */
.strip-heading { font-family: var(--stencil); font-size: 20px; letter-spacing: 0.5px; text-transform: uppercase; margin: 0; }
.new-strip .pegs.row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.new-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--partial); }

/* A category on its own page: the way back, then what's out on loan folded at the bottom. */
.back-link { display: inline-block; margin-bottom: 8px; font-size: 14px; }
.out-fold { margin-top: 14px; }
.out-fold summary { display: inline-block; padding: 6px 12px; border-radius: 6px; background: var(--label-bg); color: var(--text);
                    font-size: 14px; font-weight: 600; cursor: pointer; }
.out-fold .pegs { margin-top: 10px; }
.board-empty { margin: 0; padding: 6px; color: var(--text); }

@media (max-width: 560px) {
  .board-head { flex-wrap: wrap; }
  .board-count { flex-basis: 100%; order: 3; font-size: 13px; }
  .back-link { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: 0; }
  /* Inside a sideways row, phones keep cards rather than short rows. */
  .pegs.row > li { flex-basis: 140px; }
  .pegs.row .peg { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; text-align: center; }
  .pegs.row .peg-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .pegs.row .peg-meta > * { display: block; }
  .pegs.row .peg-meta > :not(:first-child)::before { content: none; }
  .pegs.row .peg .chips { display: flex; justify-content: center; }
  .pegs.row .peg-action { display: block; }
  .pegs.row .poke { padding: 0 10px; font-size: 13px; }
}

/* Out the Chat: trips as cards, then a trip's page with who's going, its list and Still need. */
.trips-title { text-wrap: balance; } /* even lines on phones, so "chat" isn't alone on the second */
.trips-intro { max-width: 560px; margin: -4px 0 20px; color: var(--muted); }
.trip-cards { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.trip-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: start; padding: 12px 14px; height: 100%;
             background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius);
             color: var(--text); text-decoration: none; }
.trip-card:hover { border-color: var(--accent); }
.trip-card .trip-icon { font-size: 30px; line-height: 1.1; grid-row: span 4; }
.trip-card h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.trip-card p { margin: 0; font-size: 14px; }
.trip-card .when { margin-bottom: 4px; }
.trip-card .status { justify-self: start; margin-top: 6px; }
.past-trips summary { color: var(--accent); cursor: pointer; width: fit-content; margin-bottom: 10px; }
.past-trips .trip-card { border-left-color: var(--border); opacity: 0.8; }

.trip-meta { margin: -8px 0 16px; color: var(--muted); }
.going { margin-bottom: 20px; max-width: 640px; }
.going-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; padding: 0; margin: 0; }
.going-list li { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.going-list li.add { border: none; background: none; padding: 0; }

/* The list: an index card pinned up, with a ruled line between things. */
.packing-list { position: relative; max-width: 640px; margin: 0 0 24px; background: var(--label-bg); color: var(--text);
                padding: 22px 16px 10px; border-radius: 2px; box-shadow: 0 2px 0 var(--peg-outline); }
.packing-list::before { content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--out); }
.packing-list .list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.packing-list h2 { font-family: var(--stencil); font-size: 20px; letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.list-count { font-size: 14px; color: var(--muted); }
.list-rows { list-style: none; padding: 0; margin: 0; }
.list-row { display: grid; grid-template-columns: 32px 1fr auto; grid-template-areas: "icon name status" "icon who status" "icon actions actions";
            column-gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(47, 111, 94, 0.25); }
.list-row .row-icon { grid-area: icon; font-size: 24px; text-align: center; }
.list-row h3 { grid-area: name; margin: 0; font-size: 16px; }
.list-row .need { font-weight: 400; color: var(--muted); font-size: 14px; }
.list-row .who { grid-area: who; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.list-row .nobody { color: var(--muted); }
.list-row .status { grid-area: status; }
.list-row.missing .row-icon { opacity: 0.45; }
.list-row .bringing { color: var(--in); font-weight: 600; }
.packing-list .added-by { font-weight: 400; color: var(--muted); font-size: 13px; }
.status.have { color: var(--muted); background: transparent; border: 1px solid var(--border); }
.packing-list .link-button { background: none; border: none; padding: 0; color: var(--accent); font-size: 13px; text-decoration: underline; cursor: pointer; }

/* A row's buttons, and the panel Someone else…, Change and We already have one open. */
.row-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.row-actions form { margin: 0; }
.row-actions details[open] { flex-basis: 100%; }
.row-actions summary { list-style: none; cursor: pointer; width: fit-content; }
.row-actions summary::-webkit-details-marker { display: none; }
.mark-panel { margin-top: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.mark-panel form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.mark-panel label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; }
.mark-panel input[type=number] { width: 64px; }
.mark-panel .marks { list-style: none; padding: 0; margin: 0 0 8px; font-size: 14px; }
.mark-panel .marks li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.mark-panel .not-needed { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }

/* Not needed, folded under the list, and Add a thing. */
.not-needed-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(47, 111, 94, 0.25); }
.not-needed-list summary { color: var(--accent); cursor: pointer; width: fit-content; font-size: 14px; }
.not-needed-list ul { list-style: none; padding: 0; margin: 6px 0 0; }
.not-needed-list li { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--muted); }
.not-needed-list li form { margin: 0; }
.not-needed-list .thing { flex: 1; }
.packing-list .empty { margin: 8px 0; }
.add-thing { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(47, 111, 94, 0.25); }
.add-thing h3 { margin: 0 0 6px; font-size: 16px; }
.add-thing form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.add-thing label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; }
.add-thing .how-many { display: flex; align-items: center; gap: 6px; border: 0; padding: 0; margin: 0; font-size: 14px; }
.add-thing .how-many legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 2px; }
.add-thing .how-many label { flex-direction: row; align-items: center; gap: 4px; font-weight: 400; font-size: 14px; }
.add-thing .how-many input[type=number] { width: 64px; margin-right: 6px; }

.still-need { max-width: 640px; }
.still-need .poke-card { border-left-color: var(--partial); }
.still-need .borrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.still-need .borrow form, .still-need .borrow .poke-state { margin: 0; }
.still-need .borrow p { font-size: 14px; }

/* Make a trip: the kinds of trip as big choices. Replying to an app suggestion uses them too. */
.trip-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; }
.trip-kinds legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.item-form .trip-kinds label { position: relative; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 600;
                               background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.item-form .trip-kinds label:has(input:checked) { border: 2px solid var(--accent); background: var(--in-bg); }
.item-form .trip-kinds label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.trip-kinds input { position: absolute; opacity: 0; }
.trip-kinds .kind-icon { font-size: 26px; }
.trip-kinds small { display: block; font-weight: 400; }
.pick-list legend { padding: 0; margin-bottom: 4px; }

@media (max-width: 560px) {
  .list-row { grid-template-areas: "icon name status" "icon who who" "icon actions actions"; }
  .row-actions .poke { min-height: 36px; }
  .going-list .add a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Import a list, as moving into the shed. Packing tape is see-through tan in both themes. */
:root { --tape: rgba(214, 190, 140, 0.75); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.import-lede { margin: -8px 0 18px; color: var(--muted); }
p.errors { padding-left: 14px; }

/* The steps: four small boxes on a plank. Done ones are taped shut, the current one is open,
   and the ones ahead are dashed outlines. */
.move-steps { list-style: none; margin: 0; padding: 0 6px; display: flex; gap: 8px; align-items: flex-end; }
.move-steps li { flex: 0 1 120px; min-width: 0; text-align: center; font-family: var(--stencil); text-transform: uppercase; letter-spacing: 1px; font-size: 15px;
                 padding: 8px 4px 6px; border: 1px dashed var(--box-edge); border-top-width: 4px; border-radius: 3px 3px 1px 1px; color: var(--muted); }
.move-steps li.done, .move-steps li.now { background: var(--box); border-style: solid; color: var(--text); }
.move-steps li.done { position: relative; }
.move-steps li.done::after { content: ""; position: absolute; left: 50%; top: -6px; height: 12px; width: 40px; margin-left: -20px; background: var(--tape); }
.move-steps li.done .n::before { content: "✓ "; }
.move-steps li.now { padding-top: 14px; }
.move-steps .n { display: block; font-size: 12px; opacity: 0.7; }
.steps-plank { margin: 0 0 22px; }

/* Pack: an open moving box for the file, with its flaps folded out, and a packing list for writing. */
.move-box { position: relative; background: var(--box); border: 2px solid var(--box-edge); border-radius: 3px; padding: 30px 18px 18px; margin: 52px 0 0;
            text-align: center; box-shadow: inset 0 12px 0 rgba(0, 0, 0, 0.18); }
.move-box .flap { position: absolute; top: -36px; width: 46%; height: 36px; background: var(--box-edge); border: 2px solid var(--box-edge); }
.move-box .flap.left { left: -2px; transform-origin: bottom left; transform: skewX(-32deg); }
.move-box .flap.right { right: -2px; transform-origin: bottom right; transform: skewX(32deg); }
.move-box h2, .import-list h2, .slip h2 { font-family: var(--stencil); text-transform: uppercase; letter-spacing: 1.5px; font-size: 22px; margin: 0 0 6px; }
.move-box p { margin: 0 0 12px; }
.move-box input[type="file"] { max-width: 100%; }
.move-box .side { position: absolute; right: 12px; bottom: 8px; font-family: var(--stencil); font-size: 12px; letter-spacing: 1px; color: var(--box-edge); }
.move-box.dragover { outline: 3px dashed var(--accent); outline-offset: 4px; }
.import-pack .or { text-align: center; color: var(--muted); margin: 18px 0; font-family: var(--stencil); letter-spacing: 1px; text-transform: uppercase; }
.import-list, .slip { position: relative; background: var(--label-bg); border: 1px solid var(--border); border-radius: 2px; padding: 26px 16px 14px; box-shadow: 0 2px 0 var(--box-edge); }
.import-list::before, .slip::before { content: ""; position: absolute; top: -10px; left: 50%; width: 96px; height: 22px; margin-left: -48px; background: var(--tape); transform: rotate(-2deg); }
.import-list p { margin: 0 0 8px; color: var(--muted); }
.import-list textarea { width: 100%; border: 0; border-radius: 0; background: repeating-linear-gradient(transparent 0 27px, var(--border) 27px 28px);
                        line-height: 28px; padding: 0 4px; font-size: 16px; font-family: ui-monospace, monospace; resize: vertical; color: var(--text); }
.import-foot { font-size: 14px; color: var(--muted); margin: 16px 0; }
.next-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 24px; }
.next-row .blocked { flex-basis: 100%; margin: 0; color: var(--out); font-size: 14px; }

/* Tag: each column of the file is a shipping tag with a punched hole. */
.column-tags { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.column-tags li { position: relative; background: var(--label-bg); padding: 26px 12px 12px; display: flex; flex-direction: column; gap: 6px;
                  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); box-shadow: inset 0 0 0 1px var(--box-edge); }
.column-tags li::before { content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
                          background: var(--bg); box-shadow: 0 0 0 2px var(--box-edge); }
.column-tags li.left-behind { opacity: 0.55; }
.column-tags li.left-behind .col-name { text-decoration: line-through; }
.column-tags .col-name { font-weight: 700; overflow-wrap: anywhere; }
.column-tags .sample { font-size: 13px; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.column-tags label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-family: var(--stencil); letter-spacing: 1px; text-transform: uppercase; }
.column-tags select { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: none; letter-spacing: 0; }
.headings-check, .private-check { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; cursor: pointer; }
.headings-check input, .private-check input { width: 18px; height: 18px; margin: 0; }

/* Check: the packing slip, with rubber stamps for the counts. */
.stamps { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 12px; }
.stamp { font-family: var(--stencil); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; border: 2px solid currentColor; border-radius: 3px; padding: 1px 8px; color: var(--in); }
.stamp:nth-child(2) { transform: rotate(-2deg); }
.stamp:nth-child(3) { transform: rotate(1.5deg); }
.stamp.warn { color: var(--out); }
.slip table { background: transparent; border: 0; border-radius: 0; }
.slip th { font-family: var(--stencil); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.slip td input { width: 100%; font-size: 16px; }
.slip td.count input { width: 4.5em; }
.slip td.keep { width: 1%; text-align: center; }
.slip td.keep input { width: 22px; height: 22px; }
.slip tr.skip td:not(.keep) { opacity: 0.45; }
.slip tr.problem { background: var(--out-bg); }
.slip .warn { display: block; font-size: 13px; color: var(--out); margin-top: 4px; }

/* Unpacked: the note on My Shelf, and NEW tape on the boxes that just came in. */
.flash.unpacked { display: flex; gap: 12px; align-items: flex-start; }
.flash.unpacked .icon { font-size: 28px; line-height: 1; }
.flash.unpacked p { margin: 0 0 8px; }
.flash.unpacked form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.flash.unpacked small { color: var(--muted); }
.box.just-added::before { content: "NEW"; position: absolute; top: -12px; left: -6px; z-index: 1; background: var(--tape); color: var(--wood-edge);
                          font-family: var(--stencil); letter-spacing: 1.5px; font-size: 13px; padding: 1px 10px; transform: rotate(-6deg); }

/* Quick add after a list is pasted into it. */
.quick-add textarea { font-size: 16px; resize: vertical; width: 100%; line-height: 1.5; }
.quick-add-row:has(textarea) { flex-direction: column; align-items: stretch; }
.quick-add-row:has(textarea) button { align-self: flex-start; }

@media (max-width: 559px) {
  .move-steps li { font-size: 13px; letter-spacing: 0.5px; }
  .slip table, .slip tbody, .slip tr, .slip td { display: block; }
  .slip thead { display: none; }
  .slip tr { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .slip td { padding: 0; border: 0; }
  .slip td.cats, .slip td.notes { grid-column: 1 / 3; }
  .slip td.keep { grid-row: 1; grid-column: 3; width: auto; align-self: center; }
}

/* The landing page (#154), and the sign-in page in the same look. Everything hangs off
   body.landing, so the pages after sign-in don't change. The phone layout is under
   max-width: 560px, after the computer one. */
body.landing {
  color-scheme: light;
  /* Today's colors, set to the landing look's, so the paste box and its messages match in any theme. */
  --bg: var(--pegboard);
  --surface: var(--paper);
  --text: var(--ink);
  --muted: var(--quiet);
  --border: var(--ink);
  --accent: var(--forest);
  --accent-text: var(--paper);
  --in-bg: #e3f1ec;
  --out: #9b2f2f;
  --out-bg: #f8e3e3;
  background-color: var(--pegboard);
  background-image: radial-gradient(var(--pegboard-dot) 1.6px, transparent 1.7px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--font-body);
  /* The footer sits at the bottom of the window on a short page, such as the sign-in page. The
     column is minmax(0, 1fr) so nothing inside can make the page wider than the screen. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.landing a { color: var(--forest); }
.landing a:hover { color: var(--forest-deep); }
.landing :focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.landing h1, .landing h2, .landing h3 { font-family: var(--font-heading); letter-spacing: normal; }
.landing-wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }

/* Buttons: orange with a hard shadow for the main one, white for the other. */
.landing .btn { display: inline-block; padding: 16px 24px; border: var(--ink-border); border-radius: var(--radius-btn);
  background: var(--paper); color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.landing .btn:hover { color: var(--ink); background: var(--cream); }
.landing .btn-main { background: var(--orange); box-shadow: var(--shadow-sm); }
.landing .btn-main:hover { background: var(--orange); box-shadow: 2px 2px 0 var(--ink); transform: translate(2px, 2px); }

/* Header: the name on the left; section links, Sign in and (on phones) the menu button on the right. */
.landing-header { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1200px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left));
  background: none; color: var(--ink); }
.landing-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.landing a.landing-brand { color: var(--ink); }
.landing-brand svg { width: 32px; height: 32px; flex: none; }
.landing-brand span { font-family: var(--font-heading); font-size: 20px; font-weight: 700; }
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; }
.landing-nav { display: flex; flex-wrap: wrap; gap: 24px; }
.landing-nav a { text-decoration: none; }
.landing a.landing-signin { padding: 12px 18px; border: var(--ink-border); border-radius: var(--radius-btn); color: var(--ink); text-decoration: none; }
.landing a.landing-signin:hover { background: var(--paper); }
.landing-menu { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: var(--ink-border); border-radius: var(--radius-btn); background: var(--paper); }
.landing-menu svg { width: 20px; height: 20px; }
/* The button shows only on phones, and only once app.js has shown it. */
@media (min-width: 561px) { .landing-menu { display: none !important; } }

.landing-main { max-width: none; margin: 0; padding: 0; }

/* Top: headline, the green box, the two buttons, and the made-up week beside them. */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 56px; padding-bottom: 88px; }
.hero-text { flex: 1 1 460px; min-width: 0; }
.hero h1 { margin: 24px 0 20px; font-size: 64px; line-height: 1.02; letter-spacing: -0.02em; }
.green-box { display: flex; flex-direction: column; gap: 10px; max-width: 540px; margin: 0 0 32px; padding: 24px 28px;
  background: var(--forest); color: var(--pegboard); border: var(--ink-border); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.green-box p { margin: 0; }
.green-box .lead { font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--paper); }
.green-box .lead + p { font-size: 18px; line-height: 1.6; color: var(--on-forest); text-align: center; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.week { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: var(--paper); border: var(--ink-border); border-radius: 16px; box-shadow: var(--shadow-lg); }
.week h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.week ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.week li { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--cream);
  border: 1.5px solid var(--cream-line); border-radius: var(--radius-btn); font-weight: 600; }
/* Small uppercase tags, which #157 reuses for status labels. */
.tag { flex: none; min-width: 52px; padding: 6px 10px; border-radius: 6px; background: var(--orange); color: var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; text-align: center; text-transform: uppercase; }
.tag.tag-forest { background: var(--forest); color: var(--pegboard); }

/* What's in the shed: a green band with four cards. */
.in-the-shed { background: var(--forest); color: var(--pegboard); }
.in-the-shed .landing-wrap { padding-top: 88px; padding-bottom: 88px; }
.landing h2.section-title { margin: 0 0 48px; font-size: 44px; line-height: 1.1; }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.features li { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--pegboard); color: var(--ink); border-radius: var(--radius-card); }
.features svg { width: 32px; height: 32px; flex: none; }
.features li > div { display: flex; flex-direction: column; gap: 12px; }
.features h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.features p { margin: 0; line-height: 1.55; color: var(--quiet); }

/* How to join: three numbered steps. */
.how-to-join { padding-top: 88px; padding-bottom: 88px; }
.how-to-join .section-title { margin-bottom: 16px; }
.how-to-join .intro { max-width: 680px; margin: 0 0 48px; font-size: 18px; line-height: 1.6; color: var(--quiet); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.steps li { display: flex; flex-direction: column; gap: 10px; }
.step-n { font-family: var(--font-heading); font-size: 56px; font-weight: 700; line-height: 1; color: var(--forest); }
.landing .steps h3 { margin: 0; font-family: var(--font-body); font-size: 21px; line-height: 1.3; }

/* For gear libraries and co-ops. */
.partners { padding-bottom: 88px; }
.partners-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 48px;
  background: var(--paper); border: var(--ink-border); border-radius: 18px; box-shadow: var(--shadow-lg); }
.partners-text { flex: 1 1 420px; min-width: 0; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest); }
.partners h2 { margin: 12px 0; font-size: 36px; line-height: 1.15; }
.partners p { margin: 0; line-height: 1.6; color: var(--quiet); }

.landing-footer { border-top: var(--ink-border); background: var(--pegboard); }
.landing-footer .landing-wrap { padding-top: 32px; padding-bottom: max(32px, env(safe-area-inset-bottom)); font-size: 14px; color: var(--quiet); }

/* The sign-in page: today's paste box in a white card. */
.landing .message { max-width: 560px; margin: 32px auto 88px; padding: 32px; background: var(--paper);
  border: var(--ink-border); border-radius: 16px; box-shadow: var(--shadow-lg); }
.landing .message h1 { margin: 0 0 12px; font-size: 36px; line-height: 1.1; }
.landing .message p { line-height: 1.6; color: var(--quiet); }
.landing .paste-link input { padding: 12px 14px; border: var(--ink-border); border-radius: var(--radius-btn); background: var(--paper); color: var(--ink); }
.landing .paste-link button { padding: 12px 20px; border: var(--ink-border); border-radius: var(--radius-btn);
  background: var(--orange); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.landing .message-wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

@media (max-width: 560px) {
  body.landing { background-size: 20px 20px; }
  .landing-wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .landing-header { flex-wrap: nowrap; gap: 12px; padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left)); }
  .landing-brand { gap: 8px; min-width: 0; }
  .landing-brand svg { width: 28px; height: 28px; }
  .landing-brand span { font-size: 18px; }
  .landing-actions { flex-wrap: nowrap; gap: 8px; }
  .landing a.landing-signin { order: 1; padding: 10px 14px; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .landing-menu { order: 2; }
  /* Without app.js the links stay on their own row under the name. Once it runs, they open from the
     menu button as a list under the header. */
  .landing-header:not(.has-menu) { flex-wrap: wrap; }
  .landing-header:not(.has-menu) .landing-actions { flex-wrap: wrap; }
  .landing-header.has-menu .landing-nav { display: none; }
  .landing-header.has-menu .landing-nav.open { display: flex; flex-direction: column; gap: 0; position: absolute; z-index: 20;
    top: 100%; left: 20px; right: 20px; padding: 6px; background: var(--paper); border: var(--ink-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow); font-size: 16px; }
  .landing-nav.open a { display: block; min-height: 44px; padding: 12px; border-radius: 8px; }
  .landing-nav.open a:hover { background: var(--cream); }

  .hero { flex-direction: column; align-items: stretch; gap: 28px; padding-top: 24px; padding-bottom: 56px; }
  .hero-text { flex: none; display: flex; flex-direction: column; gap: 20px; }
  .hero h1 { margin: 0; font-size: 42px; line-height: 1.04; }
  .green-box { margin: 0; padding: 20px; box-shadow: 5px 5px 0 var(--ink); }
  .green-box .lead { font-size: 20px; }
  .green-box .lead + p { font-size: 16px; }
  .hero-buttons { flex-direction: column; }
  .landing .btn { padding: 16px 20px; text-align: center; }
  .week { flex: none; gap: 10px; padding: 18px; box-shadow: var(--shadow); }
  .week h2 { font-size: 17px; margin-bottom: 2px; }
  .week ul { gap: 10px; }
  .week li { gap: 12px; padding: 12px; font-size: 15px; line-height: 1.35; }
  .tag { min-width: 48px; padding: 6px 8px; font-size: 11px; }

  .in-the-shed .landing-wrap { padding-top: 56px; padding-bottom: 56px; }
  .landing h2.section-title { margin-bottom: 28px; font-size: 32px; }
  .features { display: flex; flex-direction: column; gap: 14px; }
  .features li { flex-direction: row; align-items: flex-start; gap: 16px; padding: 20px; }
  .features svg { width: 28px; height: 28px; }
  .features li > div { gap: 4px; }
  .features h3 { font-size: 19px; }
  .features p { font-size: 15px; line-height: 1.5; }

  .how-to-join { padding-top: 56px; padding-bottom: 56px; }
  .how-to-join .section-title { margin-bottom: 14px; }
  .how-to-join .intro { margin-bottom: 28px; font-size: 16px; }
  .steps { display: flex; flex-direction: column; gap: 18px; }
  .steps li { flex-direction: row; align-items: center; gap: 16px; }
  .step-n { width: 48px; flex: none; font-size: 36px; }
  .landing .steps h3 { font-size: 18px; }

  .partners { padding-bottom: 56px; }
  .partners-box { flex-direction: column; align-items: stretch; gap: 14px; padding: 24px; border-radius: 16px; box-shadow: var(--shadow); }
  .partners-text { flex: none; display: flex; flex-direction: column; gap: 14px; }
  .eyebrow { font-size: 12px; }
  .partners h2 { margin: 0; font-size: 26px; }
  .partners p { font-size: 15px; }
  .partners .btn { margin-top: 4px; font-size: 16px; padding: 15px 20px; }

  .landing-footer .landing-wrap { padding-top: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .landing .message { margin: 16px 0 56px; padding: 24px; box-shadow: var(--shadow); }
  .landing .message h1 { font-size: 30px; }
}