/* Cards laid over a watercolour of blush and peach blossoms: month grid on the
   left, the selected day's card on the right; stacks on phones. Colours are
   sampled from the painting — paper from its blush wash, accent from the
   flower centres, sage from the leaves. Light is the default; dark is opt-in. */
:root {
  --paper: #fdf1ec;
  --card: #fffaf8;
  --card-glass: rgba(255, 250, 248, .9);
  --ink: #4a2e34;
  --muted: #7a5a5f;
  --line: #f0d9d3;
  --accent: #a8405a;
  --accent-ink: #ffffff;
  --today: #fde3df;
  --sage: #5f7354;
  --danger: #b42318;
  --shadow: 0 1px 2px rgba(150, 70, 80, .08), 0 10px 28px rgba(150, 70, 80, .10);
  --display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --body: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wash-opacity: 1;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #221a1d; --card: #2c2226; --ink: #f6ecee; --muted: #c9b5bb; --line: #47363c;
  --accent: #f29bb8; --accent-ink: #221a1d; --today: #4a2c37; --sage: #a9c3a3; --danger: #f97066;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --card-glass: rgba(44, 34, 38, .92);
  --wash-opacity: .14;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: var(--space-5) 40px;
  position: relative;
  min-height: 100vh;
}
/* The watercolour sits on its own fixed layer so it stays put while the
   calendar scrolls, and dark mode can fade it without touching the page colour.
   The blossoms are on the right of the painting, which is where the side
   panel sits, so anchor it there. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/background.jpg") right center / cover no-repeat;
  opacity: var(--wash-opacity);
}
h1 { color: var(--accent); text-shadow: 0 0 12px var(--paper), 0 0 2px var(--paper); }
.hello { text-shadow: 0 0 8px var(--paper); }
h1::before {
  content: "\2740"; color: var(--sage); font-size: .65em; margin-right: .3em; vertical-align: .15em;
}
h3 { color: var(--sage); }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); background: var(--card); padding: var(--space-2) var(--space-3); z-index: 10; }
.wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
header.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); }
h1 { font-family: var(--display); font-weight: 700; font-size: 34px; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.hello { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
h2 { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0; }
h4 { font-size: 14px; margin: 0; }
.muted { color: var(--muted); margin: 0; }
.small { font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: var(--card); padding: var(--space-2) var(--space-3); min-height: 40px; }
button:hover { border-color: var(--muted); }
button:disabled { opacity: .6; cursor: progress; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
button.ghost { background: transparent; border-color: transparent; }
button.danger { color: var(--danger); }
button.small-btn { min-height: 32px; padding: 2px var(--space-2); font-size: 14px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.notice { background: var(--today); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 15px; }

.login { min-height: 80vh; display: grid; place-items: center; }
.login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.login-card .pin { letter-spacing: .5em; font-size: 22px; }
.login-card { border-top: 4px solid var(--accent); }
.setup { display: flex; flex-direction: column; gap: var(--space-3); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-5); align-items: start; }
@media (max-width: 880px) { .layout { grid-template-columns: minmax(0, 1fr); } }

.month { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px; min-width: 0; }
.monthbar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 10px; flex-wrap: wrap; }
.monthbar h2 { flex: 1; min-width: 140px; }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.grid.days { margin-top: var(--space-1); }
.dow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 2px 6px; }
.day {
  min-height: 96px; border: 1px solid var(--line); border-radius: 8px; padding: var(--space-1) 5px;
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; background: var(--card); min-width: 0; text-align: left;
}
.day.out { opacity: .5; }
.day.today { background: var(--today); }
.day.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.day .num { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip { font-size: 12px; line-height: 1.25; border-radius: 4px; padding: 1px 5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more { font-size: 12px; color: var(--muted); }
.dots { display: none; gap: 3px; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
@media (max-width: 560px) {
  .day { min-height: 54px; }
  .chip, .more { display: none; }
  .dots { display: flex; }
}

aside.side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.evlist { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.ev-item { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 10px; }
.ev-item .bar { border-radius: 4px; }
.ev-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ev { display: block; padding: var(--space-1) var(--space-2); margin-left: calc(-1 * var(--space-2)); border-radius: 8px; cursor: pointer; background: transparent; border: 0; text-align: left; width: calc(100% + var(--space-2)); min-height: 0; }
.ev:hover { background: var(--today); }
.ev > span { display: flex; flex-direction: column; }
.ev .t { font-weight: 700; overflow-wrap: anywhere; }
.ev .m { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.claim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--sage); font-weight: 700; }
.claim.needs { color: var(--accent); }
.claim.needs .claim-text::before { content: "\25CF"; margin-right: var(--space-1); font-size: .8em; }
select { border: 1px solid var(--line); border-radius: 8px; padding: var(--space-2) 10px; background: var(--paper); font-weight: 400; width: 100%; }
.empty { color: var(--muted); font-size: 15px; }

form { display: flex; flex-direction: column; gap: 10px; }
label { display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; font-weight: 700; }
input[type=text], input[type=password], input[type=date], input[type=time], textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: var(--space-2) 10px; background: var(--paper); font-weight: 400; width: 100%;
}
.row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.row > * { flex: 1; min-width: 120px; }
.check { flex-direction: row; align-items: center; gap: var(--space-2); font-weight: 400; }
.swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.err { color: var(--danger); font-size: 14px; margin: 0; }

.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.person { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.person .who-name { font-weight: 700; }
.badge { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 0 var(--space-2); color: var(--muted); }
.badge.warn { color: var(--danger); border-color: var(--danger); }
.person .spacer { flex: 1; }
.pin-reset { display: flex; gap: var(--space-2); width: 100%; }
.pin-reset input { max-width: 120px; }
.colors { display: flex; gap: 6px; flex-wrap: wrap; }
.colors input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.colors label { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.colors input:checked + label { border-color: var(--ink); }
.colors input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .day, .ev, button { transition: background .15s, border-color .15s; } }

/* Cards are frosted rather than solid so the painting reads through at the edges. */
.month, .panel, .login-card { background: var(--card-glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (prefers-reduced-transparency: reduce) {
  .month, .panel, .login-card { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Coming up: details fold away under a small pill with the chevron inside it. */
.details-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted); font-size: 13px; font-weight: 400;
}
.details-toggle:hover { border-color: var(--muted); color: var(--ink); }
.details-toggle::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.details-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) { .details-toggle::after { transition: transform .15s; } }
.ev-details { display: flex; flex-direction: column; padding-left: var(--space-1); }
.ev-details .m { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }

/* One-time iPhone tip for adding the app to the home screen. */
.install-tip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.install-tip p { margin: 0; flex: 1 1 260px; }
.share-glyph { display: inline-block; border: 1px solid var(--muted); border-radius: 4px; padding: 0 4px; font-size: 13px; line-height: 1.3; }

/* Title row: the admin button sits beside the name, admins only. */
.title-row { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0;
  border-radius: 50%; color: var(--accent); background: var(--card-glass); font-size: 22px; line-height: 1;
}
.icon-btn:hover { border-color: var(--accent); }

/* Admin window. */
.admin-dialog {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  border: 1px solid var(--line); border-radius: 14px; padding: var(--space-5);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
.admin-dialog::backdrop { background: rgba(74, 46, 52, .35); }
.admin-dialog[open] { display: flex; flex-direction: column; gap: var(--space-4); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.admin-people { border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); }
.admin-people .person { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.admin-people .person:first-child { border-top: 0; }
.row-picker { width: 100%; padding-top: var(--space-1); }

/* A colour someone else has: full strength, marked with their initial, not choosable. */
.colors label { display: inline-grid; place-items: center; }
.colors label.taken { cursor: not-allowed; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.my-color { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-3); }