/* Jose en Cochabamba.
   The page is the timetable: flat blocks of six palette colors, each color
   with one job, and one typeface whose width axis does the work (condensed in
   the cells and the title, regular for reading). Light and dark follow the OS. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --alabaster: #eeece9;
  --pewter: #99b3b7;
  --bronze: #9d7960;
  --mahogany: #6e3d23;
  --slate: #304e4d;
  --obsidian: #1b2824;

  --paper: var(--alabaster);
  --ink: var(--obsidian);
  --plan: var(--mahogany);   /* a confirmed plan */
  --own: var(--slate);       /* Jose's own time */
  --off: var(--pewter);      /* not available */
  --wait: var(--bronze);     /* proposed, not confirmed yet */
  --soft: color-mix(in srgb, var(--ink) 66%, var(--paper));
  --rule: color-mix(in srgb, var(--ink) 24%, var(--paper));
  --field: color-mix(in srgb, var(--ink) 50%, var(--paper));
  --sheet: var(--paper);
  --scrim: rgba(27, 40, 36, .62);
  --font: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: var(--obsidian);
    --ink: var(--alabaster);
    --sheet: #22322e;
    --scrim: rgba(0, 0, 0, .66);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font);
}

.top, main, .foot {
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: 1rem;
}

/* ---- Type ---- */

.top { padding-top: 2.25rem; }
h1 {
  margin: 0;
  font-size: clamp(3.25rem, 17vw, 6rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: .86;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.lede { margin: 1rem 0 0; font-size: 1.25rem; font-weight: 500; line-height: 1.3; max-width: 28ch; }

h2 { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
p { margin: 0 0 .75rem; max-width: 62ch; }

.intro, #panel > .summary { margin-top: 1.5rem; }
.summary { font-weight: 700; }
.status, .empty, .hint, .foot { color: var(--soft); }
.hint { display: block; font-size: .875rem; font-weight: 400; }
.note { font-style: italic; overflow-wrap: anywhere; }
.error { font-weight: 600; }
.done { font-weight: 700; }
.foot { padding-block: 2.5rem 2rem; font-size: .875rem; }

main > section, #panel > section { margin-top: 3rem; }
#calendar { margin-top: 0; }

/* ---- Loader: a lobster, a frog or an owl, picked at random ---- */

.loader { display: grid; justify-items: start; gap: .25rem; margin-top: 2.5rem; color: var(--soft); }
.critter { display: none; width: 7.5rem; height: 7.5rem; overflow: visible; }
.critter.on { display: block; }
.critter * { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Only the animated parts: a transform attribute (the mirrored claw) must keep the SVG origin. */
:is(.wiggle, .sway, .snap, .hop, .shadow, .blink, .tilt, .bob) { transform-box: fill-box; }
.k-pewter { fill: var(--pewter); }
.k-slate { fill: var(--slate); }
.k-bronze { fill: var(--bronze); }
.k-mahogany { fill: var(--mahogany); }
.k-paper { fill: var(--alabaster); }
.k-ink { fill: var(--ink); stroke: none; }
.k-none { fill: none; }

.wiggle { transform-origin: 50% 60%; animation: wiggle 1.3s ease-in-out infinite alternate; }
.sway { transform-origin: 50% 100%; animation: sway 1.1s ease-in-out infinite alternate; }
.sway.alt { animation-direction: alternate-reverse; }
.snap { transform-origin: 20% 100%; animation: snap .9s ease-in-out infinite; }
.snap.alt { animation-delay: .45s; }
.hop { transform-origin: 50% 100%; animation: hop 1.15s cubic-bezier(.3, 0, .4, 1) infinite; }
.shadow { opacity: .16; transform-origin: 50% 50%; animation: shadow 1.15s cubic-bezier(.3, 0, .4, 1) infinite; }
.blink { transform-origin: 50% 50%; animation: blink 3.2s infinite; }
.tilt { transform-origin: 50% 85%; animation: tilt 4.2s ease-in-out infinite; }
.bob { animation: bob 2.1s ease-in-out infinite alternate; }

@keyframes wiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes snap { 0%, 55%, 100% { transform: rotate(0); } 75% { transform: rotate(26deg); } }
@keyframes hop {
  0%, 62%, 100% { transform: translateY(0) scale(1.07, .9); }
  12% { transform: translateY(0) scale(1.12, .84); }
  38% { transform: translateY(-20px) scale(.95, 1.08); }
}
@keyframes shadow { 0%, 62%, 100% { transform: scaleX(1); } 38% { transform: scaleX(.6); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
@keyframes tilt {
  0%, 28%, 100% { transform: rotate(0); }
  34%, 60% { transform: rotate(-14deg); }
  66%, 94% { transform: rotate(12deg); }
}
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }

/* ---- Timetable ---- */

/* One week (at most 7 days) is on screen; the other weeks sit beside it. */
.tt { margin-top: 1rem; }
.tt-tabs { display: flex; gap: .4rem; }
.tt-tab {
  flex: 1 1 0;
  min-height: 2.5rem;
  padding: .3rem .4rem;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font: 650 .875rem/1.1 var(--font);
  font-stretch: 75%;
  white-space: nowrap;
  cursor: pointer;
}
.tt-tab[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.tt-scroll {
  display: flex;
  margin-inline: -3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tt-scroll::-webkit-scrollbar { display: none; }
.tt-week {
  flex: 0 0 100%;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 3px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.tt-row { display: grid; grid-template-columns: 2.5rem repeat(4, minmax(0, 1fr)); gap: 3px; }

.tt-head {
  padding: .5rem 0 .3rem;
  font-size: .8125rem;
  font-weight: 700;
  font-stretch: 75%;
  line-height: 1.15;
}
.tt-col small { display: block; font-size: .75rem; font-weight: 400; color: var(--soft); }

.tt-day {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: .3rem;
  border-radius: 3px;
  font-size: 1.375rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
}
.tt-day small { font-size: .75rem; font-weight: 500; color: var(--soft); }
.is-today .tt-day { background: var(--ink); color: var(--paper); }
.is-today .tt-day small { color: inherit; }
.is-past { opacity: .4; }

.tt-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  min-height: 3.75rem;
  padding: .3rem .4rem;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: none;
  color: inherit;
  font: 650 .8125rem/1.12 var(--font);
  font-stretch: 75%;
  text-align: left;
  cursor: pointer;
}
.tt-t, .tt-s { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tt-t { -webkit-line-clamp: 2; line-clamp: 2; }
.tt-s { -webkit-line-clamp: 1; line-clamp: 1; font-size: .75rem; font-weight: 400; opacity: .88; }
.tt-more { position: absolute; right: .3rem; bottom: .2rem; font-size: .6875rem; font-weight: 700; }
.tt-plus { margin: auto; font-size: 1.25rem; font-weight: 300; color: var(--soft); }

.tt-cell.is-free { box-shadow: inset 0 0 0 1px var(--rule); }
.tt-cell.is-free:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.tt-cell.is-free:hover .tt-plus { color: var(--ink); }
.tt-cell.is-gone { box-shadow: inset 0 0 0 1px var(--rule); cursor: default; }
.is-plan { background: var(--plan); color: var(--alabaster); }
.is-own { background: var(--own); color: var(--alabaster); }
.is-off { background: var(--off); color: var(--obsidian); }
.is-wait {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--wait) 34%, transparent) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 1.5px var(--wait);
}
/* Admin only: a dot marks what friends can see (open). */
.is-open::after {
  content: "";
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
}
.swatch.is-open { position: relative; }
.swatch.is-open::after { top: .2rem; right: .2rem; width: .3rem; height: .3rem; }
.tt-cell.is-open .tt-t { padding-right: .6rem; }
/* A clash (two plans, or a plan on reserved time) gets a heavy frame. */
.is-alert { outline: 3px solid var(--ink); outline-offset: -3px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  color: var(--soft);
}
.legend li { display: flex; align-items: center; gap: .4rem; }
.swatch { display: inline-block; flex: none; width: .875rem; height: .875rem; border-radius: 2px; vertical-align: -.1em; }
.swatch.is-free { box-shadow: inset 0 0 0 1px var(--field); }

/* ---- Buttons ---- */

.btn {
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: 600 1rem/1.2 var(--font);
  cursor: pointer;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.text { padding-inline: .25rem; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn.small { min-height: 2.25rem; padding: .25rem .7rem; font-size: .875rem; }
.btn:disabled { opacity: .5; cursor: default; }
:is(.btn, .tt-cell, .tt-tab, input, textarea, select, summary, .chips button):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.actions, .tools, .presets { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.actions { margin-top: .75rem; }
.tools { margin-top: 2rem; }
.tools p { margin: 0; color: var(--soft); }
.presets { margin: -.35rem 0 .85rem; }

/* ---- Sheet: one slot, opened from the timetable ---- */

.sheet {
  width: 100%;
  max-width: 32rem;
  max-height: 88dvh;
  margin: auto auto 0;
  padding: 1.25rem 1rem 1.5rem;
  overflow: auto;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: var(--sheet);
  color: var(--ink);
}
.sheet::backdrop { background: var(--scrim); }
.sheet[open] { animation: sheet-up .2s ease-out; }
@keyframes sheet-up { from { transform: translateY(1.5rem); opacity: 0; } }

.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sheet-head h2 { margin: 0; }
.sheet-head h2::first-letter { text-transform: uppercase; }
.sheet-head p { margin: 0; color: var(--soft); }
.sheet-head .btn { margin-top: -.6rem; }

/* An item inside a slot. The bar repeats the color it has in the timetable. */
.entry {
  margin: 0 0 1.5rem;
  padding: .1rem 0 .1rem .85rem;
  border-left: 6px solid var(--rule);
  background: none;
  color: inherit;
}
.entry.is-plan { border-left-color: var(--plan); }
.entry.is-own { border-left-color: var(--own); }
.entry.is-off { border-left-color: var(--off); }
.entry.is-wait { border-left-color: var(--wait); box-shadow: none; }
.entry p { margin-bottom: .35rem; overflow-wrap: anywhere; }

.warn {
  padding: .5rem .7rem;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 600;
}

/* ---- Forms ---- */

label { display: block; margin-bottom: .85rem; font-size: .875rem; font-weight: 600; }
input, textarea, select {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .6rem .7rem;
  border: 1.5px solid var(--field);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: 400 1rem/1.3 var(--font); /* 16px keeps iOS from zooming in on focus */
}
select option { background: var(--sheet); color: var(--ink); }
textarea { resize: vertical; }
label .hint { margin-top: .3rem; }
label.check { display: flex; align-items: center; gap: .5rem; flex-basis: 100%; margin: 0; font-weight: 400; }
label.check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; accent-color: var(--ink); }

.join { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin-top: .6rem; }
.join label { flex: 1 1 10rem; margin: 0; }
.propose h3, .reserve h3 { margin-bottom: .75rem; }

/* Honeypot: off-screen, not display:none, so simple bots still fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#toast {
  position: fixed;
  inset: auto 1rem 1rem;
  max-width: 28rem;
  margin-inline: auto;
  padding: .75rem 1rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 10;
}
#toast.show { opacity: 1; }

/* ---- Admin ---- */

code { font: inherit; font-weight: 600; }
code.block {
  display: block;
  padding: .6rem .7rem;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  overflow-wrap: anywhere;
  user-select: all;
}

summary { cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  padding-left: .6rem;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 600;
}
.chips button {
  min-width: 2rem;
  min-height: 2rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 1.1rem/1 var(--font);
  cursor: pointer;
}
.chips li.add { padding: 0; border-style: dashed; }
.chips li.add button { padding: 0 .6rem; font-size: .875rem; }

.people, .groups { margin: 0; padding: 0; list-style: none; }
.people > li, .groups > li { border-top: 1px solid var(--rule); }
.people summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem 1rem;
  align-items: baseline;
  padding: .65rem 0;
  list-style: none;
}
.people summary::-webkit-details-marker { display: none; }
.person-name { font-weight: 700; overflow-wrap: anywhere; }
.person-count { color: var(--soft); font-size: .875rem; font-variant-numeric: tabular-nums; }
.tiles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; }
.tiles i { width: 1.1rem; height: 1.1rem; border-radius: 2px; background: var(--plan); }
.people details ul { margin: 0 0 .75rem; padding-left: 1.1rem; color: var(--soft); font-size: .875rem; }

.groups > li { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.groups details { flex: 1; min-width: 0; }
.groups summary { padding: .65rem 0; overflow-wrap: anywhere; }
.groups .swatch { margin-right: .5rem; }
.groups .where { display: block; padding-left: 2.4rem; color: var(--soft); font-size: .875rem; }
.groups details ul { margin: 0 0 .5rem; padding: 0 0 0 1.4rem; list-style: none; font-size: .875rem; }
.groups details li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

@media (min-width: 40rem) {
  .sheet { margin: auto; border-radius: 12px; }
  .tt-row { grid-template-columns: 3.25rem repeat(4, minmax(0, 1fr)); }
  .tt-cell { min-height: 4.25rem; padding: .45rem .6rem; font-size: .9375rem; }
  .tt-s { font-size: .8125rem; }
  .tt-day { font-size: 1.625rem; }
  .tt-head { font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}