/* Wear & Share — shared design tokens (from the Claude Design draft) */
:root {
  --bg: #F7F2EA; --bg-2: #FDFAF4; --bg-3: #F2EADD; --bg-4: #EFE7DA;
  --line: #E3D8C8; --line-2: #DCCEBB; --line-3: #C8B9A6;
  --ink: #3E322A; --ink-2: #57483D; --ink-3: #6B5A4D; --muted: #9C8B7A; --muted-2: #B6A899; --muted-3: #A99781; --faint: #CFC3B4;
  --accent: #B4643C; --accent-2: #8C4A2B;
  --mono: 'IBM Plex Mono', 'Heebo', ui-monospace, monospace;
  --serif: 'Cinzel', 'Frank Ruhl Libre', serif;
  --serif-2: 'Spectral', 'Frank Ruhl Libre', serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 11px; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
input, select, textarea, button { font-family: var(--mono); font-size: 11px; color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input, select, textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line-2); background: var(--bg-2); outline: none; border-radius: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 70px; line-height: 1.6; }
label.f { display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
label.f > span { display: block; margin-bottom: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 12px 20px; border: 1px solid var(--accent); background: var(--accent); color: var(--bg); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; white-space: nowrap; }
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--bg-3); color: var(--accent-2); }
.btn.quiet { background: transparent; border-color: var(--line-2); color: var(--ink-3); }
.btn.quiet:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn.small { padding: 8px 14px; font-size: 9px; }
.btn[disabled], .btn.disabled { background: var(--line); border-color: var(--line); color: var(--muted-3); cursor: not-allowed; }
.kicker { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.pill { cursor: pointer; padding: 7px 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-3); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; white-space: nowrap; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.err { margin-top: 10px; padding: 10px 12px; border: 1px solid #D9A68E; background: #F6E3DA; color: #8C4A2B; font-size: 11px; line-height: 1.6; }
.ok-box { margin-top: 10px; padding: 10px 12px; border: 1px solid #CFD9BE; background: #EDF1E3; color: #556347; font-size: 11px; line-height: 1.6; }
.err:empty, .ok-box:empty { display: none; }
@keyframes wsRise { from { opacity: 0; transform: translateY(64px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wsDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wsCard { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wsSpin { to { transform: rotate(360deg); } }
.spin { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--line-3); border-top-color: var(--accent); border-radius: 50%; animation: wsSpin .8s linear infinite; }

/* iOS Safari zooms into any field with text under 16px and never zooms back out */
@media (max-width: 768px) { input, select, textarea { font-size: 16px; } }

/* calendar (shared by public + admin) */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-head .nav { cursor: pointer; font-size: 13px; color: var(--accent); padding: 0 6px; user-select: none; }
.cal-head .nav.off { color: var(--faint); cursor: default; }
.cal-head .m { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 14px; }
.cal-grid .dow { text-align: center; font-size: 8px; letter-spacing: .1em; color: var(--muted-2); padding-bottom: 4px; }
.cal-grid .d { display: flex; align-items: center; justify-content: center; height: 34px; font-size: 10px; letter-spacing: .02em; border-radius: 2px; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.cal-grid .d.free { background: var(--bg-4); border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; }
.cal-grid .d.free:hover { border-color: var(--accent); }
.cal-grid .d.past { color: var(--faint); cursor: default; }
.cal-grid .d.taken { background: var(--line); color: var(--muted-3); text-decoration: line-through; cursor: not-allowed; }
.cal-grid .d.taken.loan { background: #E2CFC2; color: #8C4A2B; text-decoration: none; }
.cal-grid .d.taken.block { background: #D9D4CB; color: #6B6259; text-decoration: none; }
.cal-grid .d.taken.reservation { background: #EBDCC6; color: #9C6A3A; text-decoration: none; }
.cal-grid .d.picked { background: var(--accent); color: var(--bg); cursor: pointer; border: 1px solid var(--accent); }
.cal-grid .d.today { box-shadow: inset 0 0 0 1px var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.legend i { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; vertical-align: 0; border: 1px solid var(--line-2); }