/* Transition de page native (MPA) : glissement doux entre deux navigations complètes,
   sans JavaScript. Ignoré sans casse par les navigateurs qui ne la supportent pas encore. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: page-slide-out .38s ease-in both;
}
::view-transition-new(root) {
  animation: page-slide-in .42s ease-out both;
}
@keyframes page-slide-out {
  to { transform: translateX(-6%); opacity: 0; }
}
@keyframes page-slide-in {
  from { transform: translateX(6%); opacity: 0; }
}
/* Le contenu encadré d'une sous-page (ex. Planning) peut changer sans changer d'URL
   de base (juste la query string : mode, vue, semaine, mois...). On lui donne son
   propre groupe de transition nommé plutôt que de compter implicitement sur "root",
   pour que le glissement se déclenche de façon fiable même quand seule la query
   string change. */
.tab-panel { view-transition-name: page-content; }
::view-transition-old(page-content) {
  animation: page-slide-out .38s ease-in both;
}
::view-transition-new(page-content) {
  animation: page-slide-in .42s ease-out both;
}
/* Le menu principal, le titre de page et les onglets d'un contrat sont capturés
   séparément et exclus du glissement : eux seuls doivent rester fixes pendant que le
   contenu encadré en dessous glisse. */
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-group(page-heading),
::view-transition-old(page-heading),
::view-transition-new(page-heading),
::view-transition-group(page-tabs),
::view-transition-old(page-tabs),
::view-transition-new(page-tabs) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

:root {
  color-scheme: light;
  /* Palette dérivée du logo AssMat (silhouette et checklist turquoise, empreintes
     de mains colorées : magenta, or, violet, bleu, vert anis). */
  --ink: #223438;
  --muted: #667577;
  --primary: #128f88;
  --primary-dark: #0c716b;
  --primary-bg: #e2f4f2;
  --accent: #f0487f;
  --accent-dark: #cf2d63;
  --accent-bg: #fde6ee;
  --mint: #6f9a2e;
  --mint-bg: #eef6da;
  --sun: #a9820a;
  --sun-bg: #fdf3d4;
  --violet: #8858c0;
  --violet-bg: #f1e9fb;
  --surface: #ffffff;
  --background: #f6faf9;
  --border: #dbeae7;
  --danger: #d1495b;
  --danger-bg: #fdeaec;
  /* Teintes vives non désaturées, réservées à la décoration (bandeaux, bordures,
     halos) — jamais utilisées comme couleur de texte, pour garder un rendu lisible. */
  --deco-1: #f0487f;
  --deco-2: #f0c000;
  --deco-3: #128f88;
  --deco-4: #1a8fd1;
  --deco-5: #8858c0;
  --deco-6: #9fc93d;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.6 system-ui, sans-serif;
  background:
    radial-gradient(640px circle at 6% -4%, rgb(240 72 127 / .08), transparent 55%),
    radial-gradient(640px circle at 100% 6%, rgb(26 143 209 / .08), transparent 55%),
    radial-gradient(760px circle at 46% 108%, rgb(159 201 61 / .09), transparent 55%),
    radial-gradient(520px circle at 96% 96%, rgb(136 88 192 / .07), transparent 55%),
    var(--background);
  background-attachment: fixed;
}
.site-background {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--background);
}
.site-background__image,
.site-background__veil {
  position: absolute; inset: 0;
}
.site-background__image {
  opacity: 0; background-position: center; background-size: cover; background-repeat: no-repeat;
  transform: scale(1.015); transition: opacity 1.1s ease-in-out;
  will-change: opacity;
}
.site-background__image.is-visible { opacity: .74; }
.site-background__veil {
  background:
    linear-gradient(180deg, rgb(246 250 249 / .18), rgb(246 250 249 / .28)),
    radial-gradient(640px circle at 6% -4%, rgb(240 72 127 / .04), transparent 55%),
    radial-gradient(640px circle at 100% 6%, rgb(26 143 209 / .04), transparent 55%);
}
.site-header,
main.container,
body > footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .site-background__image { transition: none; }
}
a { color: var(--primary-dark); }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  view-transition-name: site-header;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1rem max(1rem, calc((100% - 1120px) / 2));
  background: linear-gradient(
    120deg,
    var(--primary) 0%, var(--accent-dark) 22%, var(--sun) 42%,
    var(--deco-6) 58%, var(--deco-4) 76%, var(--violet) 100%
  );
  background-size: 260% 260%;
  animation: header-flow 16s ease infinite;
  box-shadow: 0 3px 16px rgba(18, 143, 136, .25);
}
@keyframes header-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { animation: none; }
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem; color: white; font-size: 1.35rem;
  font-weight: 800; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.brand-mark {
  width: 2.1rem; height: 2.1rem; border-radius: .65rem; object-fit: cover;
  box-shadow: 0 0 0 3px rgb(255 255 255 / .55), 0 2px 8px rgba(0, 0, 0, .2);
  animation: brand-pulse 3.6s ease-in-out infinite;
}
@keyframes brand-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark { animation: none; }
}
nav { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
nav a, .link-button {
  color: white; text-decoration: none; font-weight: 700; font-size: .95rem;
  padding: .5rem .9rem; border-radius: 999px; text-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: background-color .15s ease, transform .15s ease;
}
nav a:hover, .link-button:hover { background: rgb(255 255 255 / .24); transform: translateY(-1px); }
nav a.active, nav a.active:hover {
  color: var(--primary-dark); background: white; text-shadow: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.inline-form { display: inline; }
.link-button { padding: .5rem .9rem; border: 0; background: none; font: inherit; cursor: pointer; }
.container { width: min(1120px, calc(100% - 2rem)); margin: 2rem auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
/* Sur les pages contrat (titre immédiatement suivi des onglets), le titre reste fixe
   comme les onglets. Ailleurs, il n'a pas de nom : il glisse avec le reste du contenu
   quand on navigue depuis le menu principal. */
.page-heading:has(+ .tabs) { view-transition-name: page-heading; }
.eyebrow { margin-bottom: .3rem; color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; }
.back-link { display: inline-block; margin-bottom: .4rem; color: var(--primary-dark); font-weight: 600; font-size: .9rem; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

.button, button, .secondary-button {
  display: inline-block; padding: .7rem 1.1rem; border: 1px solid transparent; border-radius: .8rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease;
}
.button, button { color: white; background: var(--primary); box-shadow: 0 2px 10px rgba(18, 143, 136, .28); }
.button:hover, button:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(12, 113, 107, .35); transform: translateY(-1px); }
.secondary-button { color: var(--primary-dark); background: var(--surface); border-color: var(--border); }
.secondary-button:hover { background: var(--primary-bg); transform: translateY(-1px); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stat-card, .quick-start, .form-card, .auth-card, .empty-state {
  padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem;
  box-shadow: 0 2px 14px rgba(18, 143, 136, .08);
}
.stat-card {
  color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
  border-top: 4px solid var(--deco-3);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18, 143, 136, .18); }
.cards .stat-card:nth-child(2) { border-top-color: var(--deco-1); }
.cards .stat-card:nth-child(3) { border-top-color: var(--deco-2); }
.stat-card strong { display: block; font-size: 2.1rem; color: var(--primary-dark); }
.stat-card span { color: var(--muted); }
.quick-start { margin-top: 1rem; }
.auth-card { width: min(480px, 100%); margin: 4rem auto; text-align: left; }
.auth-illustration {
  display: block; width: 6.5rem; height: 6.5rem; margin: 0 auto 1.2rem; border-radius: 1.4rem;
  box-shadow: 0 0 0 4px var(--primary-bg), 0 10px 26px rgba(136, 88, 192, .22);
}
.stacked-form { display: grid; gap: 1rem; }
.field, .stacked-form > div { display: grid; gap: .35rem; }
label { font-weight: 600; font-size: .92rem; }
input, select, textarea {
  width: 100%; padding: .65rem .8rem; color: var(--ink); background: white;
  border: 1px solid var(--border); border-radius: .6rem; font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
input[type="checkbox"] { width: auto; }
textarea { min-height: 7rem; resize: vertical; }
.help-text { color: var(--muted); font-size: .9rem; }
.error, .errorlist { color: var(--danger); }
.errorlist { margin: 0; padding-left: 1.2rem; }
.field-error input:not([type="checkbox"]),
.field-error select,
.field-error textarea,
.input-error {
  border: 2px solid var(--danger);
  background: var(--danger-bg);
  box-shadow: 0 0 0 3px rgb(209 73 91 / 12%);
}
.field-error label { color: var(--danger); }
.meal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.meal-cycle {
  display: grid; gap: .55rem; padding: .85rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: .8rem;
}
.meal-cycle__label { font-weight: 700; }
.meal-cycle__button {
  display: flex; align-items: center; gap: .55rem; min-height: 3.2rem; padding: .55rem .7rem;
  color: var(--ink); background: #eef1f1; border-color: #d9dfdf; box-shadow: none;
  text-align: left;
}
.meal-cycle__button:hover { color: var(--ink); background: #e5e9e9; box-shadow: none; }
.meal-cycle__icon { font-size: 1.65rem; }
.meal-cycle[data-state="employer"] .meal-cycle__button {
  background: var(--sun-bg); border-color: #e5ca68;
}
.meal-cycle[data-state="assistant"] .meal-cycle__button {
  background: var(--primary-bg); border-color: var(--primary);
}
.rhythm-calendar { margin: 1rem 0 1.5rem; }
.rhythm-calendar__viewport {
  max-height: 34rem; overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: .9rem;
}
.rhythm-calendar__grid {
  display: grid; grid-template-columns: 4.5rem repeat(7, minmax(6.5rem, 1fr));
  min-width: 52rem; position: relative;
}
.rhythm-calendar__corner, .rhythm-calendar__header {
  position: sticky; top: 0; z-index: 5; min-height: 2.7rem; padding: .55rem .35rem;
  background: var(--primary-bg); border-bottom: 1px solid var(--border);
  color: var(--primary-dark); text-align: center; font-weight: 700;
}
.rhythm-calendar__corner { left: 0; z-index: 7; }
.rhythm-calendar__hours {
  position: sticky; left: 0; z-index: 4; background: var(--surface);
  border-right: 1px solid var(--border);
}
.rhythm-calendar__hours span {
  position: absolute; right: .4rem; color: var(--muted); font-size: .72rem;
  transform: translateY(-50%);
}
.rhythm-calendar__day {
  position: relative; touch-action: none; user-select: none; border-right: 1px solid var(--border);
  background-image:
    repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 11px, rgb(219 234 231 / .5) 11px, rgb(219 234 231 / .5) 12px);
}
.rhythm-calendar__block {
  position: absolute; left: .25rem; right: .25rem; z-index: 2; min-height: 20px;
  padding: .25rem .35rem; overflow: hidden; color: white;
  background: linear-gradient(150deg, var(--primary), var(--primary-dark));
  border: 1px solid rgb(255 255 255 / .55); border-radius: .45rem;
  box-shadow: 0 2px 8px rgb(12 113 107 / .28); cursor: grab; touch-action: none;
  font-size: .72rem; text-align: center;
}
.rhythm-calendar__block.is-dragging { z-index: 8; opacity: .78; cursor: grabbing; }
.rhythm-calendar__block.is-preview { opacity: .58; pointer-events: none; }
.rhythm-calendar__handle {
  position: absolute; left: 0; right: 0; height: .55rem; cursor: ns-resize;
}
.rhythm-calendar__handle.is-start { top: 0; }
.rhythm-calendar__handle.is-end { bottom: 0; }
.rhythm-calendar__delete {
  position: absolute; top: .2rem; right: .2rem; z-index: 3;
  width: 1.15rem; height: 1.15rem; padding: 0; border: none; border-radius: 999px;
  background: rgb(255 255 255 / .3); color: white; font-size: .8rem; line-height: 1;
  cursor: pointer; box-shadow: none;
}
.rhythm-calendar__delete:hover { background: var(--danger); }
.time-slot-editor { padding: 1rem; background: var(--primary-bg); border-radius: .8rem; }
.time-slot-editor h3 { margin-top: 0; }
.time-slot-list { display: grid; gap: .65rem; margin-bottom: .75rem; }
.time-slot-row {
  display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: end; gap: .65rem;
  padding: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: .7rem;
}
.time-slot-row label { display: grid; gap: .3rem; }
.time-slot-row .checkbox-label { display: flex; align-items: center; align-self: center; }
.weekday-choice ul { display: flex; flex-wrap: wrap; gap: .65rem 1rem; padding: 0; list-style: none; }
.weekday-choice label {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .45rem;
  border-radius: .45rem; font-weight: 500;
}
.weekday-choice label.is-unavailable {
  color: #929b9d !important; background: #dfe3e3; opacity: .72; cursor: not-allowed;
  text-decoration: line-through; text-decoration-color: #929b9d;
}
.weekday-choice label.is-unavailable input {
  accent-color: #a8b0b1; filter: grayscale(1); cursor: not-allowed;
}
.regime-card { border-left: .35rem solid var(--deco-3); }
.regime-list .regime-card:nth-of-type(6n+2) { border-left-color: var(--deco-1); }
.regime-list .regime-card:nth-of-type(6n+3) { border-left-color: var(--deco-2); }
.regime-list .regime-card:nth-of-type(6n+4) { border-left-color: var(--deco-6); }
.regime-list .regime-card:nth-of-type(6n+5) { border-left-color: var(--deco-4); }
.regime-list .regime-card:nth-of-type(6n+6) { border-left-color: var(--deco-5); }
.regime-card.is-deleted { opacity: .48; filter: grayscale(.55); border-left-color: var(--danger); }
.delete-regime { margin-top: .75rem; }
[data-delete-regime-toggle][aria-pressed="true"] { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.period-calendar { display: grid; gap: .75rem; margin-top: 1rem; }
.period-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; border-radius: .8rem; }
.trial-period { background: var(--primary-bg); border-left: .4rem solid var(--primary); }
.adaptation-period { background: var(--accent-bg); border-left: .4rem solid var(--accent-dark); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.message { padding: .8rem 1.1rem; color: #1f7a56; background: var(--mint-bg); border: 1px solid #b9ebd7; border-radius: .7rem; }
.message.error { color: var(--danger); background: var(--danger-bg); border-color: #f3c3ca; }
.notice { padding: 1rem 1.1rem; background: var(--sun-bg); border: 1px solid #f0e0a4; border-radius: .7rem; }
.notice.error { background: var(--danger-bg); border-color: #f3c3ca; color: var(--danger); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid legend { grid-column: 1 / -1; padding: 0 .35rem; font-size: 1.15rem; font-weight: 700; }
.full-width { grid-column: 1 / -1; }

.field-with-action { display: flex; align-items: flex-end; gap: .6rem; }
.field-with-action .field { flex: 1; min-width: 0; }
.inline-add-button { white-space: nowrap; }

dialog.modal {
  border: none; border-radius: 1rem; padding: 1.5rem; width: min(32rem, 92vw);
  background: var(--surface); box-shadow: 0 20px 50px rgb(0 0 0 / 25%);
}
dialog.modal::backdrop { background: rgb(0 0 0 / 45%); }
dialog.modal h2 { margin-top: 0; }
dialog.modal .form-grid { margin-bottom: 1rem; }
.modal-errors { color: var(--danger); min-height: 1.2rem; margin-bottom: .5rem; }

/* Sections repliables (identification, conditions, rythmes hebdomadaires...) */
details.form-card { padding: 0; }
details.form-card > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem; cursor: pointer; list-style: none; border-radius: 1rem;
  transition: background-color .15s ease;
}
details.form-card > summary::-webkit-details-marker { display: none; }
details.form-card > summary::after {
  content: "⌄"; flex-shrink: 0; font-size: 1.1rem; font-weight: 700; color: var(--primary);
  transition: transform .2s ease;
}
details.form-card[open] > summary::after { transform: rotate(180deg); }
details.form-card > summary:hover { background: var(--primary-bg); }
details.form-card > summary h2 { margin: 0; }
.details-body { padding: 0 1.5rem 1.5rem; }
.week-section-actions { justify-content: flex-end; margin-bottom: 1rem; }
.amendment-list { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.amendment-card .details-body h4 { margin-top: 0; }
.amendment-card .details-body .actions { margin-top: 1rem; }
.planning-toolbar {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 1rem;
}
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.planning-toolbar .view-toggle { margin-bottom: 0; }
.toolbar-divider { width: 1px; align-self: stretch; min-height: 1.6rem; background: var(--border); }
.month-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.month-nav input[type="date"],
.month-nav input[type="month"] {
  width: auto; flex: 0 0 auto; padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); color: var(--ink);
}
.step-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; padding: 0; flex: 0 0 auto;
  color: var(--primary-dark); background: var(--surface); border: 1px solid var(--border); border-radius: .7rem;
  font-weight: 700; text-decoration: none; transition: background-color .15s ease, transform .1s ease;
}
.step-button:hover { background: var(--primary-bg); transform: translateY(-1px); }
.schedule-list { display: grid; gap: .75rem; }
.schedule-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr .8fr .6fr; gap: .75rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; }
.meal-list { display: grid; gap: .75rem; }
.meal-row { display: grid; grid-template-columns: 1.1fr 1.1fr 1.1fr .8fr .9fr 1.4fr .6fr; gap: .75rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
.detail-grid dl { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 600; }
.plain-list { padding-left: 1.2rem; }
.table-wrapper { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--primary-bg); }
tbody tr.current-account td { background: var(--primary-bg); font-weight: 600; }

.pagination { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--muted); }

.badge { display: inline-block; padding: .25rem .65rem; border-radius: 999px; color: #1f7a56; background: var(--mint-bg); font-size: .82rem; font-weight: 600; }
.badge.muted { color: var(--violet); background: var(--violet-bg); }
.status { display: inline-block; padding: .25rem .65rem; border-radius: 999px; color: var(--sun); background: var(--sun-bg); font-size: .82rem; font-weight: 600; }
.rule-group .page-heading { margin-bottom: 1rem; }
.rule-version { border-top: 1px solid var(--border); padding: .85rem 0; }
.rule-version summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.rule-content { padding: 1rem 0 0 1rem; }
.current-status { background: var(--mint-bg); color: #1f7a56; }

.tabs { view-transition-name: page-tabs; display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.tabs a { padding: .55rem 1rem; color: var(--muted); text-decoration: none; font-weight: 600; border-radius: 999px; transition: background-color .15s ease, color .15s ease; }
.tabs a.active, .tabs a.active:hover { color: white; background: var(--primary); box-shadow: 0 2px 8px rgba(18, 143, 136, .3); }
.tabs a:hover { color: var(--primary-dark); background: var(--primary-bg); }

.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.section-heading h2 { margin: 0; }
.section-heading .view-toggle { margin-bottom: 0; }
.view-toggle { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.view-toggle a { padding: .5rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: .7rem; color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none; }
.view-toggle a.active { color: white; background: var(--primary); border-color: var(--primary); }

.planning-scroll { max-height: 26rem; overflow-y: auto; }
.planning-grid { display: grid; grid-template-columns: 3.5rem repeat(7, 1fr); min-width: 42rem; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; }
.planning-grid-header { display: contents; }
.planning-grid-header span {
  position: sticky; top: 0; z-index: 2;
  padding: .6rem .4rem; background: var(--primary-bg); border-bottom: 1px solid var(--border);
  text-align: center; font-weight: 700; color: var(--primary-dark);
}
.planning-grid-header span:first-child { left: 0; z-index: 3; }
.planning-hours { position: sticky; left: 0; z-index: 1; background: var(--surface); border-right: 1px solid var(--border); }
.planning-hour-label { position: absolute; left: 0; right: .3rem; text-align: right; color: var(--muted); font-size: .75rem; transform: translateY(-50%); }
.planning-day-column { position: relative; border-right: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent 40px); }
.planning-day-column:last-child { border-right: none; }
.planning-block { position: absolute; left: .25rem; right: .25rem; padding: .3rem .5rem; color: white; background: linear-gradient(160deg, var(--primary), var(--primary-dark)); border-radius: .55rem; font-size: .75rem; line-height: 1.25; box-shadow: 0 2px 8px rgba(12, 113, 107, .3); }
.planning-block .meal-tags {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: .15rem;
  max-width: 100%; margin-top: .35rem;
}

.month-calendar { min-width: 50rem; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
.month-calendar-header, .month-calendar-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-calendar-header span {
  padding: .6rem .5rem; background: var(--primary-bg); border-bottom: 1px solid var(--border);
  text-align: center; font-weight: 700; color: var(--primary-dark); font-size: .85rem;
}
.month-calendar-row + .month-calendar-row { border-top: 1px solid var(--border); }
.month-calendar-cell { min-height: 6rem; padding: .5rem; border-right: 1px solid var(--border); }
.month-calendar-cell:last-child { border-right: none; }
.month-calendar-cell.is-outside { background: var(--background); color: var(--muted); }
.month-calendar-cell.is-outside .month-calendar-date { color: var(--muted); }
.month-calendar-cell.is-today { background: var(--accent-bg); }
.month-calendar-date { display: block; margin-bottom: .35rem; font-weight: 700; color: var(--ink); font-size: .85rem; }
.month-calendar-block {
  padding: .3rem .5rem; margin-bottom: .3rem; color: white;
  background: linear-gradient(160deg, var(--primary), var(--primary-dark));
  border-radius: .55rem; font-size: .72rem; line-height: 1.25;
}
.month-calendar-block .meal-tags { display: flex; gap: .15rem; margin-top: .25rem; }

.day-event {
  display: block; padding: .3rem .5rem; margin-bottom: .3rem; color: white;
  border-radius: .55rem; font-size: .72rem; font-weight: 600; line-height: 1.3;
  text-decoration: none; box-shadow: 0 2px 8px rgba(18, 143, 136, .18);
}
a.day-event:hover { filter: brightness(1.06); transform: translateY(-1px); }
.day-event-hours { display: block; opacity: .9; font-weight: 500; }
.day-event--reception { background: linear-gradient(160deg, var(--primary), var(--primary-dark)); }
.day-event--child_absence { background: linear-gradient(160deg, var(--sun), #b98a12); color: var(--ink); }
.day-event--assistant_absence { background: linear-gradient(160deg, var(--danger), #a83347); }
.day-event--paid_leave { background: linear-gradient(160deg, var(--violet), #6d43a0); }
.day-event--public_holiday { background: linear-gradient(160deg, var(--mint), #4f7a1f); }
.day-event--other { background: linear-gradient(160deg, var(--muted), #4d525f); }
.day-add {
  display: flex; align-items: center; justify-content: center; padding: .4rem;
  border: 1px dashed var(--border); border-radius: .55rem; color: var(--muted);
  text-decoration: none; font-size: .8rem; font-weight: 700;
}
.day-add:hover { background: var(--primary-bg); color: var(--primary-dark); border-color: var(--primary); }

.meal-icon {
  position: relative; display: inline-block; flex: 0 0 auto;
  font-size: 1.3rem; line-height: 1; cursor: default;
}
.meal-icon.not-am { filter: grayscale(1); opacity: .45; }
.meal-icon::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: white; padding: .35rem .6rem; border-radius: .5rem;
  font-size: .72rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 6;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.meal-icon::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent; border-top-color: var(--ink);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 6;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.meal-icon:hover::after, .meal-icon:focus-visible::after,
.meal-icon:hover::before, .meal-icon:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.leave-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.leave-range-list { display: grid; gap: .6rem; padding: 0; list-style: none; }
.leave-range-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .8rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; }

.week-count-form { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.week-count-form select, .week-count-form input {
  width: 6rem; display: inline-block; margin-left: .5rem;
}
.week-section + .week-section { margin-top: 1.5rem; }
.rhythm-assignment-form {
  display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(10rem, .6fr) minmax(12rem, .8fr) auto;
  align-items: end; gap: 1rem; margin-bottom: 1rem;
}
.rhythm-assignment-form h2, .rhythm-assignment-form p { margin: 0; }

.card-list { display: grid; gap: .75rem; }
.list-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--deco-3); border-radius: 1rem; box-shadow: 0 2px 10px rgba(18, 143, 136, .06);
}
.card-list .list-card:nth-of-type(6n+2) { border-left-color: var(--deco-1); }
.card-list .list-card:nth-of-type(6n+3) { border-left-color: var(--deco-2); }
.card-list .list-card:nth-of-type(6n+4) { border-left-color: var(--deco-6); }
.card-list .list-card:nth-of-type(6n+5) { border-left-color: var(--deco-4); }
.card-list .list-card:nth-of-type(6n+6) { border-left-color: var(--deco-5); }
.list-card h2, .list-card h3 { margin: 0; }
.list-card p { margin: .2rem 0 0; color: var(--muted); }

@media (max-width: 760px) {
  .site-header, .page-heading { align-items: flex-start; flex-direction: column; }
  .cards { grid-template-columns: 1fr; }
  .form-grid, .detail-grid, .schedule-row, .meal-row { grid-template-columns: 1fr; }
  .field-with-action { flex-direction: column; align-items: stretch; }
  .time-slot-row { grid-template-columns: 1fr 1fr; }
  .rhythm-assignment-form { grid-template-columns: 1fr; }
  .rhythm-calendar__viewport { max-height: 28rem; }
  .rhythm-calendar__grid { grid-template-columns: 4rem repeat(7, minmax(5.5rem, 1fr)); }
  .meal-cycle__button { min-height: 3.6rem; }
  .full-width { grid-column: auto; }
  nav { gap: .3rem; }
  .planning-block { padding-inline: .3rem; }
  .planning-block .meal-tags {
    flex-wrap: wrap; justify-content: flex-start; gap: .2rem .25rem; margin-top: .25rem;
  }
  .meal-icon { font-size: 1.05rem; }
}