/* Automatisch (2026-10-19): segments Automatisch · Scènes · Huisregels; rules grouped by what they're about, one line
   each, families folded; scenes as pastel tiles. Zondag tokens only (app.css). Off = a dashed outline, like "empty". */
.routines .segments { margin-top: var(--s-2); }

/* category header: a small pastel icon, the name, the count */
.cat-head { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 var(--s-2); }
.cat-head i { width: 1.75rem; height: 1.75rem; flex: none; border-radius: 0.6rem; display: grid; place-items: center; background: var(--c); color: var(--room-ink); }
.cat-head i svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cat-head h2 { margin: 0; }
.cat-head .count { margin-left: auto; font-size: var(--t-xs); color: var(--muted); }

/* a rule (or a family): line + last run, switch on the right; the text is a button that opens the details */
.autos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.auto { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1); background: var(--surface); border-radius: var(--r-m); }
.auto-open { flex: 1; min-width: 0; display: grid; gap: 0.15rem; min-height: var(--tap); padding: var(--s-2) var(--s-1) var(--s-2) var(--s-3); border: 0;
    border-radius: var(--r-m); background: none; color: var(--text); text-align: left; }
.auto-open strong { font-weight: 700; overflow-wrap: anywhere; }
.auto-open .line { font-size: 0.9375rem; overflow-wrap: anywhere; }
.auto-open .last { font-size: var(--t-xs); color: var(--muted); }
.auto-open .last.ok::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.auto-open .last.skip::before { content: "– "; }
.auto.off { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.auto.off .auto-open strong, .auto.off .auto-open .line { color: var(--muted); }
.family-count { display: inline-flex; align-items: center; min-height: 1.4rem; margin-left: var(--s-1); padding: 0 var(--s-2); border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--text); font-size: var(--t-xs); font-weight: 700; vertical-align: 0.1em; }
.auto .chev { flex: none; color: var(--muted); font-size: 0.875rem; }
.members-wrap { margin-top: calc(-1 * var(--s-1)); }
.autos.members { padding-left: var(--s-4); }
.autos.members .auto-open strong { display: none; } /* the family's title already says it; the line says what this one does */
.autos.members .auto-open .line { font-weight: 600; }
.auto-more { padding: var(--s-1) var(--s-1) var(--s-2); }
.autos.rules .auto { background: var(--accent-soft); }
.autos.rules .auto.off { background: transparent; }

/* the details behind a tap (RoutineDetails) */
.routine-details { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-m); }
.sheet .routine-details { padding: var(--s-3) 0 0; background: none; }
.routine-details p { margin: 0; }
.routine-details dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-3); margin: 0; font-size: 0.9375rem; }
.routine-details dt { color: var(--muted); }
.routine-details dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.routine-details .action { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--accent-soft);
    color: var(--text); font-size: var(--t-s); }
.routine-foot { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.routine-foot .meta { flex: 1; min-width: 10rem; }
.routine-details .report { margin: 0; white-space: pre-wrap; font-family: var(--font); font-size: var(--t-s); background: var(--bg); padding: var(--s-3); border-radius: var(--r-m); }

/* Gereedschap: small, at the bottom, behind a dashed line */
.routines .tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 2px dashed var(--line); }
.routines .tools .label { margin: 0 var(--s-2) 0 0; }
.routines .tools .secondary { min-height: 2.5rem; margin: 0; font-size: var(--t-s); }

/* Scènes: pastel tiles; the active one keeps an ink ring and says how to undo it */
.scene-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.scene-tile { position: relative; border-radius: var(--r-xl); background: var(--c); color: var(--room-ink); }
.scene-tile.active { box-shadow: inset 0 0 0 3px var(--room-ink); }
.scene-start { width: 100%; min-height: 6.75rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4);
    border: 0; border-radius: var(--r-xl); background: none; color: inherit; text-align: left; }
.scene-start strong { font-family: var(--display); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; }
.scene-start span { padding-right: var(--s-6); font-size: var(--t-s); }
.scene-more { position: absolute; bottom: var(--s-1); right: var(--s-1); width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: none; color: inherit;
    font-size: 1.25rem; font-weight: 800; }
/* at night the tiles stay dark with a pastel dot; the active one keeps its colour (it's on) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="licht"]) .scene-tile:not(.active) { background: var(--surface); color: var(--text); }
    :root:not([data-theme="licht"]) .scene-tile:not(.active) .scene-start strong::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: var(--s-2);
        border-radius: 50%; background: var(--c); }
}
:root[data-theme="nacht"] .scene-tile:not(.active) { background: var(--surface); color: var(--text); }
:root[data-theme="nacht"] .scene-tile:not(.active) .scene-start strong::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: var(--s-2);
    border-radius: 50%; background: var(--c); }