/* Seder.
   The look is a printed programme, not a dashboard: hairlines instead of nested
   boxes, one accent used sparingly, and the time set large because in a
   scheduling app the time is the content. Small radii on purpose — big rounded
   cards everywhere is the house style of software nobody chose. */

:root {
  --paper: #fbf8f1;
  --paper-2: #fffefb;
  --paper-3: #f3eee2;
  --ink: #17140f;
  --ink-2: #5c554a;
  --ink-3: #948c7e;
  --rule: #ddd4c2;
  --rule-2: #ebe4d6;
  --accent: #7b2d26;
  --accent-2: #a67c2e;
  --accent-wash: #f4e9e3;
  --ok-bg: #e6efdf;
  --ok-ink: #33512a;
  --err-bg: #f8e3df;
  --err-ink: #7b2d26;

  --sat: 34%;
  --tint-l: 90%;
  --edge-l: 42%;
  --h-indigo: 232;
  --h-teal: 184;
  --h-amber: 34;
  --h-rose: 344;
  --h-green: 138;
  --h-slate: 214;

  --r: 3px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120f;
    --paper-2: #1b1814;
    --paper-3: #221e19;
    --ink: #f2ece0;
    --ink-2: #b0a897;
    --ink-3: #7c7466;
    --rule: #332e26;
    --rule-2: #262119;
    --accent: #d9b978;
    --accent-2: #d9b978;
    --accent-wash: #2a231a;
    --ok-bg: #1f2b1b;
    --ok-ink: #b9d6a8;
    --err-bg: #331d1a;
    --err-ink: #edaa9d;
    --tint-l: 26%;
    --edge-l: 58%;
    --sat: 28%;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "kern" 1;
}

/* ============================================================== chrome ==== */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem max(1.25rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 30;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}
.wordmark-he {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent-2);
}
.wordmark-en {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.topbar nav {
  display: flex;
  gap: 0.15rem;
  flex-wrap: wrap;
  align-items: center;
}
.topbar nav a,
.topbar nav button {
  font-family: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.6rem;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink-2);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
}
.topbar nav a:hover,
.topbar nav button:hover {
  color: var(--ink);
  background: var(--paper-3);
}
.topbar nav a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--rule);
  background: var(--paper-3);
}

.shell {
  margin: 0 auto;
  padding: 2.25rem max(1.25rem, env(safe-area-inset-left)) 5rem;
}
.w-narrow .shell {
  max-width: 44rem;
}
.w-wide .shell {
  max-width: 84rem;
}

.footer {
  padding: 2rem 1.25rem 3rem;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ========================================================== typography ==== */

.page-head {
  margin-bottom: 2rem;
}
.page-head h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.page-head .sub {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.0625rem;
  max-width: 34em;
}

h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
}

/* Letterspaced caps — used for table headers and section eyebrows. */
.eyebrow,
th,
label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hint {
  color: var(--ink-3);
  font-size: 0.8125rem;
  margin: 0.4rem 0 0;
  max-width: 42em;
}
.empty {
  color: var(--ink-3);
  font-style: italic;
}

/* ============================================================ sections ==== */

/* The default container is a ruled section, not a floating card. */
.section {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-bottom: 2.5rem;
}

/* A real card, kept for things that genuinely are one object. */
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.card > :last-child {
  margin-bottom: 0;
}

.flash {
  padding: 0.8rem 1rem;
  border-radius: var(--r);
  margin-bottom: 1.75rem;
  font-size: 0.9375rem;
  border-left: 3px solid currentcolor;
}
.flash-ok {
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.flash-error {
  background: var(--err-bg);
  color: var(--err-ink);
}

/* ================================================= the day / time spine ==== */

.day {
  margin-bottom: 2.75rem;
}

.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
}
.day-head h2 {
  margin: 0;
  font-size: 1.4rem;
}
.day-head .count {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.slots {
  display: block;
}

/*
  One bookable slot. A three-column line: time gutter, a teacher-coloured
  hairline, then the detail. Reads down the page like an order of service.
*/
.slot {
  display: grid;
  /* time · teacher hairline · face · detail · meta */
  grid-template-columns: 5.25rem 1px auto 1fr auto;
  gap: 0 1rem;
  align-items: center;
  padding: 0.85rem 0.5rem 0.85rem 0.25rem;
  border-bottom: 1px solid var(--rule-2);
  color: inherit;
  text-decoration: none;
  position: relative;
}

.slot-time {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}
.slot-until {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin-top: 0.1rem;
}

/* The hairline is the teacher's colour — the only place colour is load-bearing. */
.slot-spine {
  align-self: stretch;
  width: 1px;
  background: hsl(var(--hue) calc(var(--sat) + 22%) var(--edge-l));
}

.slot-main {
  min-width: 0;
}
.slot-teacher {
  font-weight: 550;
  font-size: 1rem;
}
.slot-sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin-top: 0.1rem;
}
.slot-names {
  font-size: 0.8125rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.slot-meta {
  text-align: right;
  white-space: nowrap;
}
.slot-len {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.slot-go {
  display: block;
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 550;
  margin-top: 0.15rem;
}

a.slot:hover {
  background: var(--paper-3);
}
a.slot:hover .slot-go {
  text-decoration: underline;
}
a.slot:hover .slot-spine {
  width: 3px;
}

.slot.is-past,
.slot.is-full {
  opacity: 0.5;
}

@media (max-width: 30rem) {
  .slot {
    grid-template-columns: 4.25rem 1px 1fr;
    row-gap: 0.35rem;
  }
  .slot-time {
    font-size: 1.15rem;
  }
  .slot-meta {
    grid-column: 3;
    text-align: left;
  }
  .slot-go {
    margin-top: 0;
  }
}

/* Availability pill, used only where a count matters (shiurim). */
.tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  background: var(--paper-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag-free {
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.tag-full {
  background: var(--err-bg);
  color: var(--err-ink);
}

/* A dot in the teacher's colour, for legends and dense views. */
.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
  background: hsl(var(--hue) calc(var(--sat) + 22%) var(--edge-l));
  flex: none;
}

.c-indigo { --hue: var(--h-indigo); }
.c-teal   { --hue: var(--h-teal); }
.c-amber  { --hue: var(--h-amber); }
.c-rose   { --hue: var(--h-rose); }
.c-green  { --hue: var(--h-green); }
.c-slate  { --hue: var(--h-slate); }

/* ========================================================== the ticket ==== */

/* The confirmation panel. Deliberately the one object in the app that looks
   like a physical thing you were handed. */
.ticket {
  border: 1px solid var(--rule);
  border-left: 4px solid hsl(var(--hue) calc(var(--sat) + 22%) var(--edge-l));
  border-radius: var(--r);
  background: var(--paper-2);
  padding: 1.5rem 1.5rem 1.35rem;
  margin-bottom: 1.75rem;
}
.ticket-when {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.15rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.ticket-day {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin: 0 0 1rem;
}
.ticket-who {
  border-top: 1px solid var(--rule-2);
  padding-top: 0.9rem;
  margin: 0;
}
.ticket-who strong {
  font-weight: 550;
}

/* ============================================================== forms ===== */

label {
  display: block;
  margin-bottom: 0.35rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.6rem 0.7rem;
  min-height: 2.85rem;
}
textarea {
  min-height: 5.5rem;
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field {
  margin-bottom: 1rem;
}
.row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.row > * {
  flex: 1 1 8rem;
  min-width: 0;
}
.row-tight > * {
  flex: 0 1 auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 550;
  min-height: 2.85rem;
  padding: 0.6rem 1.35rem;
  border-radius: var(--r);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  filter: brightness(1.12);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-quiet:hover {
  background: var(--paper-3);
  filter: none;
}
.btn-danger {
  background: transparent;
  color: var(--err-ink);
  border-color: color-mix(in srgb, var(--err-ink) 30%, transparent);
}
.btn-danger:hover {
  background: var(--err-bg);
  filter: none;
}
.btn-small {
  min-height: 2.15rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8125rem;
}

.inline-form {
  display: inline;
}

/* ======================================================== admin: week ===== */

.weeknav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.75rem;
}
.weeknav .when {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.weeknav .when .count {
  display: block;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.25rem;
}

.grid-scroll {
  overflow: auto;
  max-height: 74vh;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
}
.weekgrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(10.5rem, 1fr));
  min-width: 60rem;
}
.weekgrid > .col {
  border-right: 1px solid var(--rule-2);
  padding: 0 0.5rem 0.75rem;
}
.weekgrid > .col:last-child {
  border-right: none;
}
.col-head {
  position: sticky;
  top: 0;
  background: var(--paper-2);
  padding: 0.6rem 0 0.4rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 5;
}
.col-head.is-today {
  color: var(--accent);
}
.col-head .num {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.chip {
  display: block;
  padding: 0.4rem 0.5rem 0.45rem;
  border-radius: 2px;
  border-left: 3px solid hsl(var(--hue) calc(var(--sat) + 22%) var(--edge-l));
  background: hsl(var(--hue) var(--sat) var(--tint-l));
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  color: inherit;
}
.chip .t {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.chip .who {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 550;
}
.chip .whom {
  display: block;
  color: var(--ink-3);
  font-size: 0.75rem;
}
.chip.vacant {
  background: none;
  border-left: 3px solid var(--rule);
  color: var(--ink-3);
  font-weight: 400;
}
.chip.vacant .who {
  font-weight: 400;
}

/* ============================================================== tables ==== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
th,
td {
  text-align: left;
  padding: 0.6rem 0.7rem 0.6rem 0;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: top;
}
th {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}
tr:last-child td {
  border-bottom: none;
}
.table-scroll {
  overflow-x: auto;
}
td .mono,
td.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

code,
.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/*
  An address to copy, not a box to type in.

  It used to be styled exactly like the editable fields above it, which read as
  an invitation: "on the settings page it says I can change the link… afraid to
  mess with it." It is readonly and now it looks readonly.
*/
.copyfield {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding-right: 0.6rem;
}
.copyfield input {
  font-family: var(--mono);
  font-size: 0.78rem;
  min-height: 2.4rem;
  padding: 0.4rem 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
}
.copyfield input:focus {
  outline: none;
  color: var(--ink);
}
.copyfield-tag {
  flex: none;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

details.disclose {
  border-top: 1px solid var(--rule);
  padding: 0.85rem 0 0;
  margin-top: 1.25rem;
}
details.disclose > summary {
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  list-style: none;
}
details.disclose > summary::-webkit-details-marker {
  display: none;
}
details.disclose > summary::before {
  content: "+ ";
  color: var(--accent-2);
}
details.disclose[open] > summary::before {
  content: "– ";
}
details.disclose[open] > summary {
  margin-bottom: 1.1rem;
}

/* ======================================================== teacher rows ==== */

.teacher-row {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 0;
}
.teacher-row:last-of-type {
  border-bottom: 1px solid var(--rule);
}
.teacher-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.15rem;
}
.teacher-meta {
  color: var(--ink-3);
  font-size: 0.8125rem;
  margin: 0 0 0.9rem;
}

/* ============================================================ faces ======= */
/*
  Photographs, because a student who does not know "R' Dovid Cohen" knows the
  face. Square and small: this is identification, not portraiture, and a row of
  large photos would turn a timetable into a staff directory.
*/
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: hsl(var(--hue) var(--sat) var(--tint-l));
  color: hsl(var(--hue) calc(var(--sat) + 18%) calc(var(--edge-l) - 12%));
  border: 1px solid hsl(var(--hue) var(--sat) calc(var(--edge-l) + 22%));
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow: hidden;
}
.avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.6875rem;
}
.avatar-md {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 0.9375rem;
}
.avatar-lg {
  width: 3.75rem;
  height: 3.75rem;
  font-size: 1.0625rem;
}
.avatar-all {
  --hue: var(--h-slate);
  font-size: 0.75rem;
  text-transform: none;
}

/* The rabbi picker: choose by face, in one horizontal scroll on a phone. */
/*
  Every rabbi visible at once — no scrolling.

  A horizontal scroller was fine at five and wrong at seven: a student cannot
  choose from a list he does not know continues, and one who never swipes never
  learns the last rabbi exists. Nobody finds out that happened. So it wraps, and
  the tiles size themselves to however many rabbeim there are.
*/
.faces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.4rem, 1fr));
  gap: 0.15rem;
  align-items: start;
  padding: 0.25rem 0 1rem;
  margin: 0 0 1.75rem;
  border-bottom: 1px solid var(--rule-2);
}
/*
  Visually hidden, but still focusable and still announced. The radios are the
  filter's actual state — hiding them with `display:none` would take them out of
  the tab order and off the accessibility tree, which is not the same thing.
*/
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.5rem 0.15rem;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink-2);
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  /* The selected state is set by a generated rule keyed to the checked radio. */
  transition: background-color 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.face:hover {
  background: var(--paper-3);
}
.face .avatar {
  transition: box-shadow 0.12s ease;
}
/* A rabbi with nothing open still shows, so the reason is visible. */
.face.is-empty .avatar {
  opacity: 0.55;
}
.face.is-empty .face-sub {
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .face,
  .face .avatar {
    transition: none;
  }
}
.face-name {
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 550;
  /* "Rabbi Moshe Chaim Eade" in a 70px column has to break somewhere. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.face-sub {
  font-size: 0.625rem;
  color: var(--ink-3);
  line-height: 1.2;
}
/* Below about 360px the tiles would get too narrow to read a name in. */
@media (max-width: 22.5rem) {
  .faces {
    grid-template-columns: repeat(auto-fit, minmax(3.9rem, 1fr));
  }
  .avatar-md {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 0.8125rem;
  }
}

.ticket-who {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.ticket-who p {
  margin: 0;
}

.teacher-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}
.teacher-head .teacher-meta,
.teacher-head .teacher-name {
  margin-bottom: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  max-height: 2.1rem;
  max-width: 13rem;
  width: auto;
  display: block;
}

/* ====================================================== the master switch = */
/*
  Open or shut, said in words as well as in colour. The office needs to be able
  to tell at a glance which way it is set, from across a desk.
*/
.switchbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--r);
  background: var(--paper-2);
}
.switchbar.is-open {
  border-left-color: var(--ok-ink);
}
.switchbar.is-shut {
  border-left-color: var(--err-ink);
}
.switchbar-state {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  min-width: 14rem;
  flex: 1 1 20rem;
}
.switchbar-state strong {
  font-weight: 600;
}
.switchbar-state .hint {
  margin: 0;
  flex: 1 1 100%;
}
.switchbar-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  align-self: center;
  background: var(--ink-3);
}
.switchbar.is-open .switchbar-dot {
  background: var(--ok-ink);
}
.switchbar.is-shut .switchbar-dot {
  background: var(--err-ink);
}
.btn-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ========================================================== days off ====== */
.col.is-blackout {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    var(--rule-2) 5px,
    var(--rule-2) 6px
  );
}
.blackout-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--err-ink);
  background: var(--err-bg);
  border-radius: var(--r);
  padding: 0.3rem 0.4rem;
  margin: 0.25rem 0;
}
.blackout-tag span {
  display: block;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}
.chipwrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chipwrap .hint {
  display: inline;
  margin: 0;
}
.warn {
  color: var(--err-ink);
}
.plainlist {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.plainlist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
}

/* Numbered instructions, for the one part of this that is a fiddle: finding
   the secret iCal address inside Google Calendar's settings. */
.steps {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.15rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.steps li {
  margin-bottom: 0.35rem;
}
.synced {
  border-left: 2px solid var(--rule);
  padding-left: 0.7rem;
}

/* =================================================== google calendar ====== */
/*
  Deliberately louder than the feed below it. The two sound the same to anyone
  reading quickly, and only this one puts a booking in a rabbi's calendar while
  the student is still on the confirmation page.
*/
.gconnect {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--r);
  background: var(--paper-2);
}
.gconnect.is-on {
  border-left-color: var(--ok-ink);
}
.gconnect-main {
  flex: 1 1 18rem;
  min-width: 0;
}
.gconnect-main .hint {
  margin: 0;
}

/* ========================================================= how to run it == */
/*
  The office's own instructions. Controls are set in a chip so a step reads as
  "press this thing on the screen" rather than as prose about it — the eye can
  follow the chips down the page and find the buttons without reading.
*/
.steps-numbered {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.steps-numbered > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0;
}
.steps-numbered > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

b.ui {
  font-weight: 550;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.02rem 0.32rem;
  white-space: nowrap;
}

.caution {
  background: var(--err-bg);
  color: var(--err-ink);
  border: 1px solid currentColor;
  border-radius: var(--r);
  padding: 0.8rem 0.95rem;
  font-size: 0.9375rem;
  margin-top: 1rem;
}
.caution strong {
  font-weight: 650;
}

.plainlist-loose li {
  display: list-item;
  padding: 0 0 0 1.05rem;
  margin-bottom: 0.8rem;
  position: relative;
  line-height: 1.55;
}
.plainlist-loose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--accent-2);
}
.plainlist-loose strong {
  color: var(--ink);
  font-weight: 600;
}

input[type="file"] {
  font-size: 0.8125rem;
  color: var(--ink-2);
  padding: 0.4rem 0;
}

@media (max-width: 34rem) {
  .slot {
    grid-template-columns: 4.25rem 1px auto 1fr;
    row-gap: 0.35rem;
  }
  .slot-meta {
    grid-column: 3 / -1;
  }
}

@media print {
  .topbar,
  .footer,
  .weeknav .row,
  .switchbar form,
  .faces,
  .btn,
  details.disclose {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .grid-scroll {
    max-height: none;
    overflow: visible;
  }
}