* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
  background: #fafafa;
}
.site-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 56px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Center the logo when there's no right-side content. The flex parent
     does justify: space-between, so a single child stays at the left
     edge; the empty placeholder div on the other side balances it. */
}
.site-logo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: min(60vw, 220px);
  object-fit: contain;
}
.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Sign-in page. Plain natural-flow layout: SVG logo + form, centered.
   No keyboard handling, no animations — just lets the browser scroll
   the input into view when the soft keyboard opens. */
html:has(body.login-page) { background: #ffffff; }
body.login-page {
  background: #ffffff;
  margin: 0;
}
body.login-page .site-header { display: none; }
body.login-page main {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 1rem;
  gap: 1.5rem;
}

.login-hero {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0;
}

.login-card {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
  padding: 0 1rem;
}
.login-card h1 {
  text-align: center;
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 800;
}
.login-card .login-hint {
  text-align: center;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  color: #4b5563;
}
.login-card form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 100%;
}
.login-code-input {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  padding: 0.9rem 0.5rem;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
}
.login-code-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.login-card button[type="submit"] {
  padding: 0.95rem;
  font-size: 1rem;
  border-radius: 12px;
  background: linear-gradient(90deg, #5de0e6 0%, #004aad 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 74, 173, 0.25);
}
.login-card button[type="submit"]:hover { filter: brightness(0.95); }
.login-card button[type="submit"]:active { filter: brightness(0.88); }
.login-error {
  color: #b91c1c;
  text-align: center;
  font-size: 0.9rem;
  margin: -0.25rem 0 0;
}
@media (min-width: 540px) {
  .site-header { padding: 0.8rem 1.25rem; }
  .site-logo img { height: 48px; }
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 0.75rem 3rem;
}
@media (min-width: 720px) {
  main { padding: 2rem 1.25rem 4rem; }
}
h1 { font-size: 1.5rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 0.6rem; }
section { margin-bottom: 1.5rem; }
@media (min-width: 720px) {
  h1 { font-size: 1.75rem; margin-bottom: 1rem; }
  h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
  section { margin-bottom: 2rem; }
}
p { margin: 0.5rem 0; }
a { color: #2563eb; }
a:hover { text-decoration: none; }

form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 100%; }
@media (min-width: 540px) { form { max-width: 360px; } }
form.row { flex-direction: row; align-items: end; flex-wrap: wrap; }
form.inline { display: inline-block; }

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: #444;
}
input[type="text"], input[type="email"], input[type="password"], input:not([type]) {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
}
input:focus { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }

button {
  font: inherit;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
}
button:hover { background: #333; }
button.secondary { background: #fff; color: #1a1a1a; }
button.secondary:hover { background: #f0f0f0; }

table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid #eee; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #666; }

code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.code-big {
  display: inline-block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 2rem;
  letter-spacing: 0.25em;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border: 2px dashed #1a1a1a;
  border-radius: 8px;
  margin: 1rem 0;
}
.error { color: #b91c1c; }
.muted { color: #666; font-size: 0.9rem; }
.pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #eee;
  color: #333;
}
.pill.used { background: #dcfce7; color: #166534; }
.pill.unused { background: #fef3c7; color: #92400e; }
.pill.pending { background: #fef3c7; color: #92400e; }
.pill.approved { background: #dcfce7; color: #166534; }
.pill.rejected { background: #fee2e2; color: #991b1b; }
.pill.withdrawn { background: #e5e7eb; color: #4b5563; }
.pill.cancelled { background: #fee2e2; color: #991b1b; }
.pill.available { background: #dcfce7; color: #166534; }
.pill.blocked { background: #e5e7eb; color: #4b5563; }
.pill.open { background: #dcfce7; color: #166534; }
.pill.open-window { background: #fef3c7; color: #92400e; }

/* Top navigation */
.adminnav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0 1rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
@media (min-width: 720px) {
  .adminnav { gap: 1rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; font-size: 1rem; }
}
.adminnav a {
  color: #444;
  text-decoration: none;
  font-weight: 500;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.adminnav a.current { color: #1a1a1a; border-bottom-color: #1a1a1a; }
.adminnav form.inline { margin-left: auto; }
.badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.5rem;
  background: #dc2626;
  color: white;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Claim cards */
.claim-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fff;
}
.claim-card.muted { opacity: 0.7; }
.claim-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.claim-list { list-style: none; padding: 0; margin: 0; }
.claim-list > li { margin: 0; }

/* =========================================================== Nanny schedule */

.nanny-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.nanny-header h1 { margin: 0; font-size: 1.35rem; }
.nanny-header form { margin: 0; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.hdr-btn:hover { background: #f9fafb; border-color: #9ca3af; }
@media (min-width: 540px) { .nanny-header h1 { font-size: 1.5rem; } }

/* Hours page */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.85rem 0.5rem;
  text-align: center;
}
.stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.1;
  margin: 0.25rem 0;
}
.stat-unit {
  font-size: 0.7rem;
  color: #6b7280;
}
@media (min-width: 540px) {
  .stat-cards { gap: 0.85rem; }
  .stat-card { padding: 1rem; }
  .stat-label { font-size: 0.72rem; }
  .stat-value { font-size: 1.85rem; }
}

.hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.7rem 0.9rem;
}
.hours-date { font-weight: 600; font-size: 0.95rem; }
.hours-time { color: #6b7280; font-size: 0.82rem; }
.hours-amount {
  font-weight: 700;
  font-size: 1rem;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  font-variant-numeric: tabular-nums;
}

/* Admin assign picker */
.assign-picker {
  max-width: 360px;
  margin-bottom: 0.5rem;
}
.assign-picker select {
  width: 100%;
}

/* Page-intro block: the greeting + descriptive paragraph that sits
   between the global site header and the page body on the nanny
   /schedule view. */
.page-intro {
  margin: 0.5rem 0 1.25rem;
}
.page-intro h1 {
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
}
.page-intro p {
  margin: 0;
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.45;
}
@media (min-width: 540px) {
  .page-intro h1 { font-size: 1.85rem; }
}

/* Profile icon in nanny header */
.profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #6b7280;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border: 2px solid #fff;
}
.profile-icon:hover { filter: brightness(0.95); }

/* Settings — identity strip (name card) */
.identity-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 0.5rem 0.6rem 0.5rem 0.55rem;
  margin-bottom: 0.5rem;
}
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #6b7280;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
  border: none;
  padding: 0;
  font-family: inherit;
}
.avatar-btn { cursor: pointer; transition: transform 0.1s ease; }
.avatar-btn:hover { transform: scale(1.05); }
.avatar-btn:active { transform: scale(0.97); }
.identity-middle {
  flex: 1;
  min-width: 0;
}
.profile-name {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  color: #1f2937;
  padding: 0.1rem 0;
}
.identity-edit-form {
  display: none;
  margin: 0;
}
.identity-strip.editing .profile-name { display: none; }
.identity-strip.editing .identity-edit-form { display: block; }
.identity-input {
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  color: #1f2937;
  border: none;
  border-bottom: 1px solid #1f2937;
  background: transparent;
  padding: 0.1rem 0;
  width: 100%;
  border-radius: 0;
}
.identity-input:focus {
  outline: none;
  border-bottom-color: #3b82f6;
}

/* Right-side round action buttons (pencil / check). Only one is visible
   at a time depending on .editing state. */
.round-action {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: #3b82f6;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.round-action:hover { background: #2563eb; }
.round-action:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.round-action svg { display: block; }
.check-btn { display: none; }
.identity-strip.editing .pencil-btn { display: none; }
.identity-strip.editing .check-btn { display: inline-flex; }

/* Color picker — inline expansion below the identity strip */
.color-picker-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.75rem 0.95rem;
  margin-bottom: 0.85rem;
}
.color-picker-label { margin: 0 0 0.5rem; }
.color-palette {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  max-width: 100%;
}
.color-swatch-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.color-swatch-btn:hover { transform: scale(1.1); }
.color-swatch-btn:active { transform: scale(0.95); }
.color-swatch-btn.current { border-color: #1f2937; }

.settings-section {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem 1.1rem;
  margin-bottom: 0.85rem;
}
.settings-section > h2 {
  margin: 0 0 0.85rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  font-weight: 700;
}
.settings-section .stat-cards { margin-bottom: 0.75rem; }
.settings-section .section-link { margin: 0; font-size: 0.9rem; }
.settings-section .section-link a { font-weight: 600; text-decoration: none; }
.settings-section .section-link a:hover { text-decoration: underline; }

/* Compact inline form: input flex-grows, button fixed */
.row-form {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  max-width: 100%;
}
.row-form input {
  flex: 1;
  min-width: 0;
}
.row-form button {
  flex-shrink: 0;
}
.below-form {
  margin-top: 0.5rem;
  max-width: 100%;
}
.below-form button {
  width: 100%;
}

.logout-form {
  margin-top: 1.25rem;
}
.logout-btn {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #b91c1c;
  border-radius: 12px;
  padding: 0.85rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.logout-btn:hover { background: #fef2f2; }

.flash {
  background: #ecfdf5;
  border-left: 4px solid #10b981;
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  color: #065f46;
  margin-bottom: 1rem;
}
.flash-error {
  background: #fef2f2;
  border-left-color: #ef4444;
  color: #991b1b;
}

/* Code change form */
.code-form input {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 600;
}

/* Admin nanny list */
.nanny-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nanny-list > li { list-style: none; }
.nanny-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.85rem 1rem;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s ease, box-shadow 0.1s ease;
}
.nanny-card:hover {
  background: #f9fafb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.nanny-card:active { background: #f3f4f6; }
.nanny-card-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}
.nanny-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: #1f2937;
}
.nanny-card-hours {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  flex-shrink: 0;
}
.nanny-card-hours strong {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Admin nanny detail period filter */
.period-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}
.period-filter label {
  font-size: 0.78rem;
}
.period-filter button {
  padding: 0.5rem 1rem;
}

/* =========================================================================
   Nanny /schedule landing — tabs, date strip, shift card, log cards.
   Mobile-first; everything below the global site header.

   The whole page is wrapped in <div class="nanny-scope"> with a
   --nanny-color CSS variable set inline from the session's nanny.color.
   Every primary accent below references var(--nanny-color), so the
   active tab, active date card, shift-card buttons, save buttons,
   confirm-on-add buttons, etc. all paint in the nanny's colour. */

/* Tabs (Claimed / Available) — pill-shaped segmented control. */
.tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: #f3f4f6;
  border-radius: 999px;
  margin: 0.25rem 0 1.25rem;
}
.tabs .tab {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #374151;
  text-decoration: none;
  user-select: none;
}
.tabs .tab.active {
  background: var(--nanny-color, #2563eb);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.empty-state {
  padding: 2rem 1rem;
  text-align: center;
}

/* Available list (Available tab): cards with date + per-row state.
   Each card has two "modes" controlled by the .editing class:
     - default: <div class="ac-display"> visible with up to two lines
       (claimed-by-me / available-remaining), claim/edit button on the
       right
     - editing: <div class="ac-edit"> visible with two time inputs;
       the button label flips to "Lock it in". Second tap fetches POST
       and swaps the card HTML in place.
   When a day is fully booked by other nannies the card gets .booked
   (subtle gray, button disabled). */
.available-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.available-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.85rem 1rem;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
/* All-hours-claimed state: subtle yellow ring + light gray bg. The
   button is independently styled (still nanny-coloured "Edit" when
   the signed-in nanny has a claim on the day; otherwise it goes to
   the disabled gray "Claimed" state via :disabled below). */
.available-card.booked {
  background: #e5e7eb;
  box-shadow: 0 0 0 1.5px #fde68a, 0 1px 4px rgba(0, 0, 0, 0.06);
}
.available-card.submitting { opacity: 0.6; pointer-events: none; }
.available-card .ac-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.available-card .ac-date {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.available-card .ac-dow {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
}
.available-card .ac-month-day {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}
.available-card .ac-claim-btn {
  background: var(--nanny-color, #2563eb);
  color: #fff;
  border: none;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 84px;
}
.available-card .ac-claim-btn:hover { filter: brightness(0.96); }
.available-card .ac-claim-btn:disabled {
  background: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}
.available-card .ac-claim-confirm { display: none; }
.available-card.editing .ac-claim-default { display: none; }
.available-card.editing .ac-claim-confirm { display: inline; }

.available-card .ac-display {
  margin-top: 0.55rem;
  font-size: 0.92rem;
  color: #4b5563;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.available-card .ac-line { line-height: 1.4; }
.available-card .ac-time-text {
  font-weight: 700;
  color: #111827;
}
.available-card .ac-line-label {
  font-weight: 500;
  color: #6b7280;
}
.available-card .ac-line-booked {
  font-weight: 600;
  color: #6b7280;
}

/* Editing area — same vertical slot as ac-display, swapped via
   classes. Now contains up to two .ac-edit-rows (shift 1 / shift 2)
   plus a split toggle below them. */
.available-card .ac-edit {
  display: none;
  margin-top: 0.55rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: #111827;
}
.available-card.editing .ac-display { display: none; }
.available-card.editing .ac-edit { display: flex; }
.available-card .ac-edit-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.available-card .ac-edit-row-2 { display: none; }
.available-card.has-split .ac-edit-row-2 { display: flex; }
.available-card .ac-edit-sep { color: #6b7280; font-weight: 600; }
.available-card .ac-split-toggle {
  align-self: flex-start;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  background: transparent;
  border: 1px dashed #d1d5db;
  color: #4b5563;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  margin-top: 0.15rem;
}
.available-card .ac-split-toggle:hover { background: #f9fafb; }
.available-card .ac-split-toggle .ac-split-remove-label { display: none; }
.available-card.has-split .ac-split-toggle .ac-split-add-label { display: none; }
.available-card.has-split .ac-split-toggle .ac-split-remove-label { display: inline; }
.available-card .ac-time-input {
  font: inherit;
  font-weight: 700;
  color: #111827;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  /* Give iOS something to size against even when the value is empty.
     Without this the empty shift-2 picker collapses to a tiny pill. */
  min-width: 6.5rem;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}
.available-card .ac-time-input:focus {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
/* Inline error inside an available card — shown on AJAX overlap
   response or via ?errClaim=overlap on a direct redirect. */
.available-card .ac-error {
  margin-top: 0.55rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Hidden form element — inputs above are associated via form= attr. */
.available-card .ac-form { display: none; }

/* Tab badge — appears on the Claimed tab via .has-update class after
   a fetch-based claim. Hard-coded dark dot since the tabs container
   always has a light bg; visible on either tab state. */
.tabs .tab .tab-badge {
  display: none;
  width: 7px;
  height: 7px;
  background: #111827;
  border-radius: 999px;
  margin-left: 0.45rem;
  vertical-align: middle;
}
.tabs .tab.active .tab-badge { background: #fff; }
.tabs .tab.has-update .tab-badge { display: inline-block; }

/* Horizontal date strip — claimed days, swipeable. */
.date-strip {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 0.25rem 0.1rem 1rem;
  margin: 0 -0.75rem 1.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.date-strip::-webkit-scrollbar { display: none; }

.date-card {
  flex: 0 0 auto;
  min-width: 110px;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  color: #111827;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  scroll-snap-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.date-card .dc-dow {
  font-size: 0.85rem;
  font-weight: 700;
}
.date-card .dc-month-day {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}
.date-card.active {
  background: var(--nanny-color, #2563eb);
  border-color: var(--nanny-color, #2563eb);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.date-card.active .dc-month-day { color: rgba(255, 255, 255, 0.85); }

/* =========================================================================
   Shift card */
.shift-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.shift-card .sc-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shift-card .sc-title {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
}
/* Shift-card title now contains one or two .sc-shift-line rows. Show
   the second only when the card has .has-split. The "Shift:" label is
   used for single mode; "Shift 1:" only appears in split mode. */
.shift-card .sc-shift-line {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  width: 100%;
}
.shift-card .sc-shift-label {
  font-weight: 700;
  color: #111827;
  margin-right: 0.2rem;
}
.shift-card .sc-shift-label-1 { display: none; }
.shift-card.has-split .sc-shift-label-1 { display: inline; }
.shift-card.has-split .sc-shift-label-single { display: none; }
.shift-card .sc-shift-line.is-second { display: none; }
.shift-card.has-split .sc-shift-line.is-second { display: flex; }
.shift-card .sc-sep { color: #6b7280; font-weight: 600; }

/* Split toggle row inside the shift card edit panel. */
.sc-split-row { margin-bottom: 0.55rem; }
.sc-split-toggle {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  background: transparent;
  border: 1px dashed #d1d5db;
  color: #4b5563;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
}
.sc-split-toggle:hover { background: #f9fafb; }
.sc-split-toggle .sc-split-remove-label { display: none; }
.shift-card.has-split .sc-split-toggle .sc-split-add-label { display: none; }
.shift-card.has-split .sc-split-toggle .sc-split-remove-label { display: inline; }

.shift-card .sc-time { position: relative; display: inline-block; }
.shift-card .sc-time-text { display: inline-block; }
.shift-card .sc-time-input {
  display: none;
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  color: #111827;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  padding: 0.2rem 0.5rem;
  min-width: 5.5rem;
  text-align: center;
  /* Strip iOS's native chrome around time inputs. */
  appearance: none;
  -webkit-appearance: none;
}
.shift-card .sc-time-input:focus {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
/* Edit mode: swap display text → time input, hide Notes so the
   inputs and "Shift:" line have room to breathe. */
.shift-card.edit-open .sc-time-text { display: none; }
.shift-card.edit-open .sc-time-input { display: inline-block; }
.shift-card.edit-open .sc-notes-btn { display: none; }
.shift-card.edit-open .sc-title { font-size: 0.95rem; }

.shift-card .sc-notes-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--nanny-color, #2563eb);
  color: #fff;
  border: none;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.shift-card .sc-notes-btn:hover { filter: brightness(0.96); }
.shift-card .sc-notes-btn .notes-badge {
  width: 9px;
  height: 9px;
  background: #fff; /* fallback — inline style="background:..." wins */
  border-radius: 999px;
  flex-shrink: 0;
}

.shift-card .sc-edit-btn {
  background: var(--nanny-color, #6b7280);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.shift-card .sc-edit-btn:hover { filter: brightness(0.96); }
.shift-card .sc-edit-btn .sc-close { display: none; }
.shift-card.edit-open .sc-edit-btn .sc-pencil { display: none; }
.shift-card.edit-open .sc-edit-btn .sc-close { display: inline-block; }

/* Animated expand for the shift-card panels. The grid 0fr → 1fr
   trick requires min-height:0 on the inner element so it can actually
   collapse below content size. */
.shift-card .sc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease, margin 0.25s ease;
}
.shift-card .sc-panel > .sc-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.shift-card.notes-open .sc-notes-panel,
.shift-card.edit-open .sc-edit-panel {
  grid-template-rows: 1fr;
  margin-top: 0.85rem;
}

.sc-notes-thread {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sc-notes-thread .note {
  position: relative;
  background: #f9fafb;
  border-radius: 10px;
  padding: 0.55rem 2.1rem 0.55rem 0.75rem; /* extra right padding for trash btn */
  font-size: 0.9rem;
  line-height: 1.35;
}
.sc-notes-thread .note.admin { background: #eff6ff; }
.sc-notes-thread .note-author {
  font-weight: 700;
  font-size: 0.78rem;
  color: #4b5563;
  margin-bottom: 0.15rem;
}
/* Trash button per note. Subtle gray by default; turns red on hover. */
.sc-notes-thread .note-delete-form {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  margin: 0;
}
.sc-notes-thread .note-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: transparent;
  color: #9ca3af;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.sc-notes-thread .note-delete-btn:hover {
  background: #fee2e2;
  color: #b91c1c;
}
.sc-notes-thread .note-delete-btn:active { transform: scale(0.92); }
.sc-note-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: none; }
.sc-note-form textarea {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  resize: vertical;
  min-height: 60px;
}
.sc-note-form button {
  align-self: flex-end;
  background: var(--nanny-color, #111827);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 10px;
  cursor: pointer;
}

/* Edit panel: just the Save and Drop buttons. The time inputs live in
   the title above and submit via form="shift-edit-form". */
.sc-edit-form { max-width: none; }
.sc-save-btn {
  display: block;
  width: 100%;
  background: var(--nanny-color, #111827);
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.sc-save-btn:hover { filter: brightness(0.96); }
/* Inline error banner inside the shift-card edit panel — shown when
   /schedule/shift/edit rejects a new range because it overlaps another
   nanny's claim. */
.sc-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.sc-drop-form { margin-top: 0.55rem; max-width: none; }
.sc-drop-form button.danger {
  width: 100%;
  background: #fff;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.sc-drop-form button.danger:hover { background: #fef2f2; }

/* =========================================================================
   Log cards (Bottles / Naps / Activities) */
.log-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.85rem 1rem 0.4rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.log-card .lc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 0.55rem;
  margin-bottom: 0.5rem;
}
.log-card .lc-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}
.log-card .lc-toggle {
  background: #111827;
  color: #fff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.log-card .lc-toggle:hover { filter: brightness(1.05); }
.log-card .lc-toggle .lc-check { display: none; }
/* On confirm-state (.adding), the toggle flips to the nanny color so
   "tap again to lock it in" reads as a primary action. */
.log-card.adding .lc-toggle { background: var(--nanny-color, #10b981); }
.log-card.adding .lc-toggle .lc-plus { display: none; }
.log-card.adding .lc-toggle .lc-check { display: inline-block; }

/* Form area: grid-template-rows 0→1fr trick for smooth height anim.
   min-height:0 + overflow:hidden on the inner element so it actually
   collapses below content size. */
.log-card .lc-form-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease, margin 0.25s ease;
}
.log-card .lc-form-wrap > * { overflow: hidden; min-height: 0; }
.log-card .lc-form { display: block; }
.log-card.adding .lc-form-wrap {
  grid-template-rows: 1fr;
  margin-bottom: 0.4rem;
}
.log-card .lc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  padding: 0.35rem 0 0.55rem;
}
.log-card .lc-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: #4b5563;
}
.log-card .lc-field input,
.log-card .lc-field output {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #111827;
}
.log-card .lc-field-wide { grid-column: 1 / -1; }
.log-card .lc-total-output {
  background: #f9fafb;
  font-weight: 600;
  color: #111827;
}

/* Entries list */
.log-card .lc-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.log-card .lc-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  color: #4b5563;
  border-bottom: 1px solid #f3f4f6;
}
.log-card .lc-entry:last-child { border-bottom: none; }
.log-card .lc-entry-primary { font-weight: 600; color: #111827; white-space: nowrap; }
.log-card .lc-entry-secondary { color: #4b5563; word-break: break-word; }
.log-card .lc-entry-more { display: none; }
.log-card.expanded .lc-entry-more { display: grid; }

/* Show-all chevron */
.log-card .lc-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  border: none;
  color: #9ca3af;
  padding: 0.4rem 0 0.5rem;
  cursor: pointer;
}
.log-card .lc-more:hover { color: #4b5563; }
.log-card.expanded .lc-more svg { transform: rotate(180deg); }
.log-card .lc-more svg { transition: transform 0.2s ease; }

.legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
  font-size: 0.78rem;
}
.legend-label { color: #6b7280; font-weight: 600; }
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-swatch {
  display: inline-block;
  width: 22px;
  height: 14px;
  border-radius: 999px;
}
.legend-swatch.approved { background: #10b981; }
.legend-swatch.pending  { background: #f59e0b; }
.legend-swatch.other    { background: #ef4444; }

/* Day cards: each day is one outer white card with two nested elements —
   a tinted left rectangle for date + button, and a grid of hour tiles. */
.day-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.day-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.7rem;
}
.day-card-form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.7rem;
  margin: 0;
  max-width: 100%;
}
.day-card-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0.6rem;
  flex: 0 0 104px;                 /* fixed width so every card lines up */
  background: #f3f4f6;             /* tinted inset to distinguish from outer white */
  border-radius: 14px;
  padding: 0.85rem 0.55rem;
}
.day-card-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  text-align: center;
}
.dd-day {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
}
.dd-month {
  font-size: 0.68rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}
@media (min-width: 540px) {
  .day-card-head { flex: 0 0 128px; padding: 0.95rem 0.7rem; }
  .dd-day { font-size: 1.05rem; }
  .dd-month { font-size: 0.72rem; }
  .day-card { padding: 0.85rem; }
}

/* The view-action and confirm-action buttons share the same slot. The
   confirm one is hidden by default and revealed in edit mode. */
.day-action {
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
}
.view-action { background: #2563eb; }
.view-action:hover { background: #1d4ed8; }
.confirm-action { background: #10b981; display: none; }
.confirm-action:hover { background: #059669; }
.day-card.editing .view-action { display: none; }
.day-card.editing .confirm-action { display: inline-block; }

/* Hour grid: 5 cols × 2 rows always, fills the right side */
.day-card .hour-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.day-card .hour-slot {
  display: block;
  position: relative;
  cursor: default;
}
.day-card .hour-slot input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.day-card .hour-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
  user-select: none;
  transition: background 0.1s ease, border-color 0.1s ease;
}

/* State colors. */
.day-card .hour-slot.mine-approved .hour-box {
  background: #22c55e; color: #fff; border-color: #22c55e;
}
.day-card .hour-slot.mine-pending .hour-box {
  background: #f59e0b; color: #fff; border-color: #f59e0b;
}
.day-card .hour-slot.other .hour-box {
  background: #ef4444; color: #fff; border-color: #ef4444;
}
/* open = default white tile */

/* In edit mode, an unlocked slot reflects checkbox state */
.day-card.editing .hour-slot.open,
.day-card.editing .hour-slot.mine-pending {
  cursor: pointer;
}
.day-card.editing .hour-slot.open input:checked + .hour-box {
  background: #f59e0b; color: #fff; border-color: #f59e0b;
}
.day-card.editing .hour-slot.mine-pending input:not(:checked) + .hour-box {
  background: #fff; color: #1f2937; border-color: #e5e7eb;
}
/* Unticking an approved (green) box in edit mode previews the cancellation. */
.day-card.editing .hour-slot.mine-approved input:not(:checked) + .hour-box {
  background: #fff; color: #1f2937; border-color: #e5e7eb;
}

/* Outside edit mode, the grid is read-only */
.day-card:not(.editing) .hour-grid { pointer-events: none; }

@media (min-width: 540px) {
  .day-card .hour-grid { grid-template-columns: repeat(10, 1fr); }
  .day-card .hour-box { height: 44px; font-size: 0.85rem; }
}

/* Floating Today button */
.scroll-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;
  background: #1f2937;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transform: translateY(8px);
}
.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-to-top:hover { background: #111827; }
.scroll-arrow { font-size: 1.05rem; line-height: 1; }
@media (min-width: 540px) {
  .scroll-to-top { bottom: 1.5rem; right: 1.5rem; padding: 0.65rem 1.25rem; font-size: 0.95rem; }
}

/* Card-style row: view mode is a 2-row grid (info + button on top, timeline
   underneath). Edit mode hides the grid and shows the hour-picker form. */

/* Hour grid: 5 cols on mobile, 10 on wider screens */
.hour-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
@media (min-width: 540px) {
  .hour-grid { grid-template-columns: repeat(10, 1fr); }
}
.hour-slot {
  display: block;
  position: relative;
  cursor: pointer;
}
.hour-slot input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.hour-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  color: #1a1a1a;
  user-select: none;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.hour-slot:hover .hour-box {
  border-color: #6b7280;
}
.hour-slot input:checked + .hour-box {
  background: var(--my-color, #3b82f6);
  border-color: var(--my-color, #3b82f6);
  color: #fff;
}
.hour-slot.disabled { cursor: not-allowed; }
.hour-slot.disabled:hover .hour-box { border-color: #d1d5db; }
.hour-slot.disabled .hour-box {
  color: #fff;
  opacity: 0.9;
  border-color: transparent;
}
.hour-box.pending {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.45) 0,
    rgba(255, 255, 255, 0.45) 4px,
    transparent 4px,
    transparent 8px
  );
}
.hour-box.mine.claimed {
  outline: 2px solid rgba(0, 0, 0, 0.45);
  outline-offset: -2px;
}

.actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.actions form { display: inline; }

.btnlink {
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.btnlink:hover { background: #f3f4f6; }
.btnlink.small, button.small { padding: 0.3rem 0.6rem; font-size: 0.85rem; }

/* Activity feed */
.feed { list-style: none; padding: 0; margin: 0; }
.feed > li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid transparent;
  margin-bottom: 0.25rem;
}
.feed > li.unread {
  background: #fefce8;
  border-left-color: #ca8a04;
}
.feed > li .when {
  font-size: 0.8rem;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.warn {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: #92400e;
  font-size: 0.9rem;
}

.small { font-size: 0.85rem; }

select {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
}

input[type="time"] {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
}

/* Month calendar */
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}
.cal-header h1 { margin: 0; }
.cal-nav { display: flex; gap: 0.5rem; }

.monthgrid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  margin: 1rem 0;
}
.monthgrid-headrow,
.monthgrid-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.monthgrid-headrow {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.monthgrid-headcell {
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4b5563;
  text-align: center;
}
.monthgrid-row {
  border-bottom: 1px solid #e5e7eb;
}
.monthgrid-row:last-child { border-bottom: none; }

/* Form wrapping each cell — transparent to grid layout */
.cell-form { display: contents; }

/* Each cell IS a button — whole-cell tap target for the toggle */
.monthgrid-cell {
  position: relative;
  height: 3.75rem;
  overflow: hidden;
  border: none;
  border-right: 1px solid #e5e7eb;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0.4rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  font-size: 0.8rem;
  transition: background 0.15s ease, filter 0.1s ease;
  -webkit-tap-highlight-color: rgba(16, 185, 129, 0.15);
}
.monthgrid-cell:last-child { border-right: none; }
.monthgrid-cell:hover { filter: brightness(0.97); }
.monthgrid-cell:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  z-index: 1;
}
.monthgrid-cell:disabled { opacity: 0.6; cursor: wait; }

/* State backgrounds */
.monthgrid-cell.open { background: #f0fdf4; }      /* soft green */
.monthgrid-cell.blocked { background: #f3f4f6; }    /* soft grey */
.monthgrid-cell.blocked .daynum { color: #9ca3af; }
.monthgrid-cell.outmonth { opacity: 0.55; }
.monthgrid-cell.outmonth.open { background: #f0fdf4; }
.monthgrid-cell.outmonth.blocked { background: #f3f4f6; }

.daynum {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4rem;
}

.monthgrid-cell.today .daynum {
  background: #1a1a1a;
  color: #fff;
  border-radius: 999px;
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.shifts-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: auto;
}
.shift-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}
.shift-dot.approved { background: #10b981; }
.shift-dot.pending { background: #f59e0b; }
.shift-dot.inline { vertical-align: middle; margin-right: 0.2rem; }
.shift-count {
  font-size: 0.65rem;
  color: #6b7280;
  font-weight: 500;
  margin-left: 2px;
}

.cal-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.6rem;
  font-size: 0.78rem;
  white-space: nowrap;
}
.swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid #e5e7eb;
}
.swatch.open { background: #f0fdf4; }
.swatch.blocked { background: #f3f4f6; }

.color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  vertical-align: middle;
}

@media (min-width: 720px) {
  .monthgrid-cell { height: 5rem; font-size: 0.85rem; padding: 0.45rem 0.55rem; }
  .daynum { font-size: 0.9rem; }
  .shift-dot { width: 8px; height: 8px; }
  .shift-count { font-size: 0.75rem; }
}

@media (max-width: 720px) {
  main { padding: 1rem 0.75rem 3rem; }
  .monthgrid-headcell { padding: 0.3rem 0.2rem; font-size: 0.62rem; }
}

/* Per-day edit */
.day-edit fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.day-edit legend {
  font-weight: 600;
  padding: 0 0.4rem;
}
.day-edit label.radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #1a1a1a;
  padding: 0.25rem 0;
  cursor: pointer;
}
.day-edit label.radio input { margin: 0; }
.day-edit .radio-extra {
  margin: 0.25rem 0 0.5rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #4b5563;
}
.day-edit .radio-extra input[type="time"] {
  padding: 0.35rem 0.5rem;
}

/* =========================================================================
   Admin (re-uses nanny-side primitives — .available-card, .shift-card,
   .tabs, .date-strip — with a slate "--nanny-color" set on the scope.
   Below: admin-only chrome (nanny chip, claim attribution, hours editor,
   assign-nanny panel, settings page list). */

/* Nanny chip — small avatar + name. Used in shift card titles + in
   available-card claim attribution lines. */
.admin-nanny-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 0.15rem 0.55rem 0.15rem 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #111827;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.admin-nanny-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #6b7280;
  flex-shrink: 0;
}
.admin-claim-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5563;
}

/* Admin shift card on the Claimed tab: stack the nanny chip + shift
   lines vertically in the title (it's narrower than the nanny version
   so the chip on the right of the time would crowd everything). */
.admin-shift-card .sc-title {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.admin-shift-card { margin-bottom: 1rem; }

/* Admin Available card layout */
.admin-available-list .available-card { padding: 0.85rem 1rem; }
.admin-available-card .ac-line-window .ac-time-text { color: #111827; }
.admin-available-card.closed-day .ac-display { color: #6b7280; }
.admin-available-card.closed-day .ac-line-window .ac-time-text { color: #6b7280; }

.aac-actions {
  display: flex;
  gap: 0.45rem;
  flex-shrink: 0;
}
.aac-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  background: #fff;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
}
.aac-btn:hover { background: #f9fafb; }
.aac-btn.aac-assign-btn {
  background: var(--nanny-color, #1f2937);
  color: #fff;
  border-color: transparent;
}
.aac-btn.aac-assign-btn:disabled {
  background: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}

/* Inline panels (hours / assign) on the admin Available card —
   collapsed by default, expanded when the parent card has
   .hours-open / .assign-open. */
.aac-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease, margin 0.25s ease;
}
.aac-panel > * { overflow: hidden; min-height: 0; }
.admin-available-card.hours-open .aac-hours-panel,
.admin-available-card.assign-open .aac-assign-panel {
  grid-template-rows: 1fr;
  margin-top: 0.7rem;
}

/* Hours editor — option cards. Each radio is wrapped by a label that
   shows as a tappable card. Selected card highlights in nanny-color
   (admin slate). Custom window's time inputs nest inside that card
   and reveal via :has() when its radio is checked. */
.aac-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}
.aac-option {
  display: flex;
  /* Explicit row — without this the global "label { flex-direction:
     column }" rule wins and stacks the radio above the text. */
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  background: #f3f4f6;
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  color: #111827;
  font-size: 0.95rem;
  transition: background 0.12s ease, border-color 0.12s ease;
  user-select: none;
}
.aac-option:hover { background: #ebedf0; }
.aac-option:has(input:checked) {
  background: #fff;
  border-color: var(--nanny-color, #1f2937);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.aac-option input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--nanny-color, #1f2937);
  cursor: pointer;
  margin: 0;
}
.aac-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}
.aac-option-text strong { font-weight: 700; }
.aac-option-hint {
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b7280;
}

/* Custom-window card: stacks the row + the time inputs vertically;
   inputs only appear when the radio inside is checked. */
.aac-option-window {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}
.aac-option-window > .aac-option-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}
.aac-option-window-inputs {
  display: none;
  margin-left: calc(18px + 0.7rem);
  align-items: center;
  gap: 0.45rem;
}
.aac-option-window:has(input:checked) .aac-option-window-inputs { display: flex; }
.aac-option-window-inputs input[type="time"] {
  font: inherit;
  font-weight: 700;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  min-width: 6rem;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
.aac-option-dash { color: #6b7280; font-weight: 600; }
.aac-save {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  background: #1f2937;
}
.aac-save:hover { filter: brightness(0.96); }

/* Assign-nanny editor */
.aac-assign-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: none;
}
.aac-assign-form .aac-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: #4b5563;
}
.aac-assign-form select {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  font-weight: 500;
  color: #111827;
}
.aac-ranges {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.aac-range-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.aac-range-row input[type="time"] {
  font: inherit;
  font-weight: 700;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  min-width: 6rem;
  text-align: center;
}
.aac-range-row-2 { display: none; }
.aac-ranges.has-split .aac-range-row-2 { display: flex; }
.aac-ranges .ac-split-toggle {
  align-self: flex-start;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  background: transparent;
  border: 1px dashed #d1d5db;
  color: #4b5563;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
}
.aac-ranges .ac-split-toggle .ac-split-remove-label { display: none; }
.aac-ranges.has-split .ac-split-toggle .ac-split-add-label { display: none; }
.aac-ranges.has-split .ac-split-toggle .ac-split-remove-label { display: inline; }

/* Settings page */
.settings-section {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.85rem 1rem 1rem;
  margin-bottom: 1rem;
}
.settings-section h2 {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  font-weight: 700;
}
.settings-inline-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: none;
}
.settings-inline-form label {
  flex: 1;
  min-width: 0;
}
.settings-inline-form button {
  background: #111827;
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.settings-nanny-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.settings-nanny-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: #f9fafb;
  border-radius: 10px;
  color: #111827;
  text-decoration: none;
  font-weight: 600;
}
.settings-nanny-card:hover { background: #f3f4f6; }
.settings-nanny-name { flex: 1; }

/* Flash message — also used by nanny pages */
.flash {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.flash-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}