/* I Know · css/components.css — THE component library: every screen is built from these pieces (page header, buttons, status chips,
   tabs, forms, panels, lists, KPI numbers, tables, the action list, the timeline, menus, dialogs, drawers, toasts, empty and loading states).
   Only design tokens (css/main.css): (11.6) the theme (its shapes, type, icons, chips, navigation) and the display mode (its sizes and
   density) change every piece at once. */

/* ---------- The page header: breadcrumbs, title, context, actions ---------- */
.pg-head{display:flex;flex-direction:column;gap:var(--sp-1);margin:0 0 var(--sp-5)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:var(--fs-small);color:var(--text-muted)}
.crumbs a{text-decoration:none;color:inherit}
.crumbs a:hover{color:var(--text);text-decoration:underline}
.crumbs .ico{width:.9em;height:.9em;opacity:.6}
.crumbs [aria-current]{color:var(--text-2)}
.pg-head-row{display:flex;align-items:flex-end;gap:var(--sp-3) var(--sp-4);flex-wrap:wrap}
.pg-head-main{flex:1 1 16rem;min-width:0}
.pg-title{margin:0;overflow-wrap:anywhere}
/* (11.6) the theme's decoration under a page title: a short golden rule, a bronze hairline, a sage line – or nothing */
.pg-head-main::after{content:"";display:block;width:var(--rule-w,0);height:var(--rule-h,0);background:var(--rule-bg);margin-top:calc(var(--rule-h,0px) * 4);border-radius:1px}
.pg-sub{margin:.2rem 0 0;color:var(--text-muted);font-size:var(--fs-small)}
.pg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.pg-actions:empty{display:none}

/* ---------- Buttons: ONE button – Primary, Secondary, Ghost, Success, Warning, Danger, Icon; small, normal, large ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:var(--control-h);padding:0 1.1rem;border:1px solid var(--primary);border-radius:var(--r-btn,var(--r-ctl));background:var(--primary);color:var(--on-primary);font:var(--btn-fw,500) var(--fs-btn)/1.15 var(--font-ui);text-transform:var(--btn-tt,none);letter-spacing:var(--btn-ls,0);text-decoration:none;cursor:pointer;white-space:normal;text-align:center;overflow-wrap:break-word;transition:background-color var(--dur-1),border-color var(--dur-1),color var(--dur-1),box-shadow var(--dur-1)}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn:active{transform:translateY(1px)}
.btn .ico{width:1.1rem;height:1.1rem}
.btn:disabled,.btn[aria-disabled=true]{opacity:var(--disabled);cursor:not-allowed;transform:none}
.btn.secondary{background:var(--bg-surface);color:var(--text);border-color:var(--border-strong)}
.btn.secondary:hover{background:var(--bg-muted);border-color:color-mix(in srgb,var(--border-strong) 60%,var(--text))}
.btn.ghost{background:transparent;color:var(--text-2);border-color:transparent}
/* (12.1) a third way – clearly a button, quieter than primary and secondary (never the look of something switched off) */
.btn.tertiary{background:color-mix(in srgb,var(--primary) 8%,transparent);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 22%,transparent)}
.btn.tertiary:hover{background:color-mix(in srgb,var(--primary) 14%,transparent);border-color:color-mix(in srgb,var(--primary) 40%,transparent)}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn.success{background:var(--success);border-color:var(--success);color:var(--text-inverse)}
.btn.warning{background:var(--warning);border-color:var(--warning);color:var(--text-inverse)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--text-inverse)}
.btn.success:hover,.btn.warning:hover,.btn.danger:hover{filter:brightness(.93)}
.btn.secondary.danger{background:var(--bg-surface);color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}
.btn.ghost.danger{background:transparent;color:var(--danger-text);border-color:transparent}
.btn.secondary.danger:hover,.btn.ghost.danger:hover{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 55%,transparent);filter:none}
.btn.small{min-height:var(--control-h-sm);padding:0 .7rem;font-size:var(--fs-small)}
.btn.lg{min-height:calc(var(--control-h) + 8px);padding:0 1.35rem;font-size:var(--fs-body)}
.btn.wide{width:100%}
.btn.on{box-shadow:inset 0 0 0 2px var(--primary)}
.icon-btn{display:inline-grid;place-items:center;text-decoration:none;width:var(--control-h);height:var(--control-h);min-width:var(--control-h);border-radius:var(--r-ctl);border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;position:relative;font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.icon-btn[disabled]{opacity:.35;cursor:not-allowed}
.icon-btn .ico{width:1.25rem;height:1.25rem}
.link{background:none;border:0;padding:0;color:var(--primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font:inherit}
/* ---------- Badges (counts) ---------- */
.badge{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:var(--r-pill);background:var(--danger);color:var(--text-inverse);font:var(--fw-semibold) .6875rem/1 var(--font-ui);font-style:normal;font-variant-numeric:tabular-nums}
.dot{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;margin-inline-start:.35rem;border-radius:var(--r-pill);background:var(--danger);color:var(--text-inverse);font:var(--fw-semibold) .6875rem/1 var(--font-ui);font-style:normal}
.bell i{position:absolute;top:3px;inset-inline-end:3px;display:grid;place-items:center;min-width:1.05rem;height:1.05rem;padding:0 .25rem;border-radius:var(--r-pill);background:var(--danger);color:var(--text-inverse);font:var(--fw-semibold) .625rem/1 var(--font-ui);font-style:normal;box-shadow:0 0 0 2px var(--bg-header)}
.bell.urgent i{animation:ring 2s var(--ease) 2}
@keyframes ring{0%,40%,100%{transform:none}10%,30%{transform:scale(1.18)}}

/* ---------- Rows and columns ---------- */
.row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.row-mini{display:flex;gap:var(--sp-2);align-items:center;justify-content:space-between;padding:.25rem 0}
.row-mini span{min-width:8rem}
.row-mini input,.row-mini select{max-width:60%}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--gap);align-items:start}
.cols .card+.card{margin-top:0}
.row>input[type=date],.row>input[type=month]{width:auto;flex:1;min-width:9rem}
.narrow{max-width:440px;margin:0 auto}
.prose{max-width:68ch;line-height:1.6}
.links{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.hint{color:var(--text-muted)}

/* ---------- Status chips: ONE status component (colour + icon + text, never colour alone) ---------- */
.chip{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--fs-helper);font-weight:var(--fw-medium);line-height:1.35;padding:.1rem .5rem;border-radius:var(--r-chip,var(--r-pill));white-space:nowrap;vertical-align:middle;background:var(--neutral-soft);color:var(--neutral-text);border:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.chip .ico{width:.95em;height:.95em;stroke-width:calc(var(--icon-stroke,1.6) * 1.2)}
.chip.ok{background:var(--success-soft);color:var(--success-text);border-color:color-mix(in srgb,var(--success) 25%,transparent)}
.chip.warn{background:var(--warning-soft);color:var(--warning-text);border-color:color-mix(in srgb,var(--warning) 28%,transparent)}
.chip.bad{background:var(--danger-soft);color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 25%,transparent)}
.chip.info{background:var(--info-soft);color:var(--info-text);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.chip.cat{background:color-mix(in srgb,var(--cc) 14%,var(--bg-surface));color:color-mix(in srgb,var(--cc) 75%,var(--text));border-color:color-mix(in srgb,var(--cc) 30%,transparent)}
/* the programme's types: ONE colour per type for every element that shows a type (chip, item, week card) */
.ty-activity,.t-activity{--tc:var(--t-activity)}
.ty-event,.t-event{--tc:var(--t-event)}
.ty-show,.t-show{--tc:var(--t-show)}
.ty-live_music,.t-live_music{--tc:var(--t-live_music)}
.ty-special_event,.t-special_event{--tc:var(--t-special_event)}
.chip[class*=" ty-"]{background:color-mix(in srgb,var(--tc) 13%,var(--bg-surface));color:color-mix(in srgb,var(--tc) 80%,var(--text));border-color:color-mix(in srgb,var(--tc) 25%,transparent)}
.st-working{background:var(--success-soft);color:var(--success-text)}
.st-day_off{background:var(--neutral-soft);color:var(--neutral-text)}
.st-vacation{background:var(--info-soft);color:var(--info-text)}
.st-absent,.st-sick{background:var(--danger-soft);color:var(--danger-text)}
.st-entrance{background:var(--warning-soft);color:var(--warning-text)}
.st-practice{background:var(--special-soft);color:var(--special-text)}
.pill{align-self:center;flex:none;display:inline-flex;align-items:center;gap:.25rem;font-size:var(--fs-helper);font-weight:var(--fw-semibold);padding:.2rem .6rem;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-2)}
.pill.go{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.pill.ok{background:var(--success-soft);color:var(--success-text);border-color:transparent}
.pill.bad{background:var(--danger-soft);color:var(--danger-text);border-color:transparent}
.ty-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--fs-helper);font-weight:var(--fw-semibold);color:var(--tc,var(--text-muted));margin-inline-end:.3rem}
.ty-badge .ico{width:1.05em;height:1.05em}
/* attendance and supplier marks: one letter, its colour and its name on hover (P / M / A, present / off / late …) */
.mark{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .3rem;border-radius:var(--r-sm);font:var(--fw-bold) var(--fs-helper)/1 var(--font-ui);background:var(--neutral-soft);color:var(--neutral-text)}

/* ---------- Filter chips, tabs, segmented choice, the day strip ---------- */
.chips{display:flex;gap:var(--sp-2);overflow-x:auto;padding:.15rem 0 var(--sp-3);scrollbar-width:none;align-items:center}
.chip-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border-strong);background:var(--bg-surface);color:var(--text-2);border-radius:var(--r-pill);padding:0 .85rem;min-height:var(--control-h-sm);white-space:nowrap;cursor:pointer;font-size:var(--fs-small);font-weight:var(--fw-medium)}
.chip-btn:hover{border-color:var(--text-muted);color:var(--text)}
.chip-btn.on{background:var(--secondary);color:var(--on-secondary);border-color:var(--secondary)}
.chip-btn .badge{background:var(--bg-muted);color:var(--text-2)}
.chip-btn.on .badge{background:color-mix(in srgb,var(--on-secondary) 22%,transparent);color:inherit}
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border);margin:0 0 var(--sp-5);overflow-x:auto;scrollbar-width:none}
.tabs a{position:relative;padding:.6rem .8rem;text-decoration:none;white-space:nowrap;color:var(--text-muted);font-size:var(--fs-small);font-weight:var(--fw-medium);border-radius:var(--r-md) var(--r-md) 0 0}
.tabs a:hover{color:var(--text);background:var(--hover)}
.tabs a.on{color:var(--tab-on-fg,var(--text));background:var(--tab-on-bg,transparent);border-radius:var(--tab-r,var(--r-md))}
.tabs a.on::after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:-1px;height:var(--tab-ind-h,2px);border-radius:2px;background:var(--primary)}
.seg{display:inline-flex;max-width:100%;padding:2px;gap:2px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--bg-muted)}
.seg button{min-width:0;min-height:calc(var(--control-h-sm) - 2px);border:0;border-radius:calc(var(--r-ctl) - 2px);background:transparent;padding:0 .75rem;font:var(--fw-medium) var(--fs-small)/1.1 var(--font-ui);color:var(--text-2);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--bg-surface);color:var(--text);box-shadow:var(--shadow-1),0 0 0 1px var(--border)}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.daystrip{display:flex;gap:var(--sp-1);overflow-x:auto;padding:.15rem 0 var(--sp-3);scrollbar-width:none;scroll-snap-type:x proximity}
.daystrip button{flex:none;width:3.9rem;border:1px solid var(--border);background:var(--bg-surface);border-radius:var(--r-ctl);padding:.35rem .2rem .4rem;display:flex;flex-direction:column;align-items:center;gap:.05rem;cursor:pointer;scroll-snap-align:start;color:var(--text)}
.daystrip button:hover{border-color:var(--border-strong)}
.daystrip span{font-size:var(--fs-helper);color:var(--text-muted);text-transform:capitalize}
.daystrip b{font:var(--fw-semibold) 1.35rem/1.1 var(--font-ui);font-variant-numeric:tabular-nums}
.daystrip small{font-size:.6875rem;color:var(--text-muted)}
.daystrip button.on{background:var(--secondary);border-color:var(--secondary);color:var(--on-secondary)}
.daystrip button.on span,.daystrip button.on small{color:inherit;opacity:.8}
/* today is marked with the accent (the ONE meaning of the accent: now / today) */
.daystrip button.today:not(.on){box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- Panels and lists ---------- */
.card{background:var(--bg-surface);padding:var(--card-p);border:var(--card-bw,1px) solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.card+.card{margin-top:var(--gap)}
.card>h2:first-child,.card>h3:first-child,.card>.sec-head:first-child{margin-top:0}
.card>:last-child{margin-bottom:0}
.card-head{display:flex;align-items:center;gap:var(--sp-2);margin:calc(var(--card-p) * -1) calc(var(--card-p) * -1) var(--card-p);padding:.7rem var(--card-p);border-bottom:1px solid var(--border-subtle)}
.card-head h2,.card-head h3{margin:0;font-size:var(--fs-card-title);font-family:var(--font-ui);flex:1;min-width:0;display:flex;align-items:center;gap:.45rem}
.card-head h2 .ico,.card-head h3 .ico{color:var(--text-muted)}
.sec-head{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-6) 0 var(--sp-3)}
.sec-head h2{margin:0;flex:1;min-width:0;display:flex;align-items:center;gap:.45rem}
.sec-head h2 .ico{color:var(--text-muted)}
.count{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .4rem;border-radius:var(--r-pill);background:var(--bg-muted);color:var(--text-2);font:var(--fw-semibold) var(--fs-helper)/1 var(--font-ui);font-variant-numeric:tabular-nums}
.list{display:flex;flex-direction:column;gap:var(--sp-2)}
.li{display:block;background:var(--bg-surface);padding:var(--row-py) var(--row-px);text-decoration:none;text-align:start;width:100%;font:inherit;color:inherit;cursor:default;border:var(--card-bw,1px) solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.li.row{display:flex}
.li.row>.grow:not(:empty){flex:1 1 12rem}
button.li,a.li{cursor:pointer;transition:border-color var(--dur-1),background-color var(--dur-1)}
button.li:hover,a.li:hover{border-color:var(--border-strong);background:color-mix(in srgb,var(--bg-muted) 50%,var(--bg-surface))}
.li p{margin:.25rem 0}
.li.dim,.dim{opacity:.55}
.li.new{border-inline-start:3px solid var(--primary)}
.li.complaint{border-inline-start:3px solid var(--danger)}
/* a list as one panel: rows divided by hairlines (lists of many short rows) */
.list.flat{gap:0;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--bg-surface)}
.list.flat>.li{border:0;border-radius:0;border-bottom:1px solid var(--border-subtle)}
.list.flat>.li:last-child{border-bottom:0}
.reply{background:var(--bg-muted);border-radius:var(--r-md);padding:.35rem .6rem;font-size:var(--fs-small)}
.hint-box{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .85rem;border-radius:var(--r-card);background:var(--info-soft);border:1px solid color-mix(in srgb,var(--info) 22%,transparent);color:var(--text);font-size:var(--fs-small);margin:0 0 var(--sp-3)}
.hint-box>.ico{color:var(--info-text);margin-top:.05rem}
.hint-box.warn{background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 30%,transparent)}
.hint-box.warn>.ico{color:var(--warning-text)}
.hint-box.bad{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
.hint-box.bad>.ico{color:var(--danger-text)}
.crud-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:.2rem .4rem .2rem .2rem}
.li-main{flex:1;text-align:start;background:none;border:0;padding:.55rem .65rem;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);border-radius:var(--r-md)}
.li-main:hover{background:var(--hover)}
.move{display:inline-flex;gap:var(--sp-1);flex:none}
/* a list row with its own actions: the actions wrap below the row on a phone, never off the screen */
.crud-row>.li-main{flex:1 1 14rem;min-width:0;flex-wrap:wrap}
.crud-row>.btn{margin-inline-start:auto}

/* ---------- Programme items (guests and staff) ---------- */
.items{display:flex;flex-direction:column;gap:var(--sp-2)}
.item{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--row-py) var(--row-px);background:var(--bg-surface);text-decoration:none;text-align:start;width:100%;cursor:pointer;border:var(--card-bw,1px) solid var(--border);border-radius:var(--r-card);position:relative;color:inherit;font:inherit;border-inline-start:3px solid var(--tc,var(--border-strong));transition:border-color var(--dur-1);box-shadow:var(--shadow-card)}
.item:hover{border-color:var(--border-strong);border-inline-start-color:var(--tc,var(--border-strong))}
.item time{min-width:3.2rem;line-height:1.1;display:flex;flex-direction:column;font:var(--fw-semibold) 1.125rem/1.1 var(--font-ui);font-variant-numeric:tabular-nums}
.item time small{font-size:var(--fs-helper);color:var(--text-muted);font-weight:var(--fw-regular);margin-top:.2rem}
.item b{display:block;font-weight:var(--fw-semibold)}
.item .meta{display:block;font-size:var(--fs-small);color:var(--text-muted);margin:.15rem 0}
.item.off{cursor:default;opacity:.7}
.item.hl{border-color:color-mix(in srgb,var(--accent) 60%,var(--border));background:color-mix(in srgb,var(--accent) 6%,var(--bg-surface))}
.item.cancelled{opacity:.55}
.item.cancelled b{text-decoration:line-through}
.item.short{border-color:color-mix(in srgb,var(--warning) 45%,var(--border))}
.item .names{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem}
.item>div{min-width:0}
.item.t-show time,.item.t-special_event time{color:color-mix(in srgb,var(--tc) 85%,var(--text))}
.fav{color:var(--text-muted);margin-inline-start:.3rem}
.fav.on{color:var(--danger)}
.name-tag{display:inline-flex;align-items:center;padding:.05rem .45rem;border-radius:var(--r-sm);background:var(--bg-muted);border:1px solid var(--border-subtle);font-size:var(--fs-helper);font-weight:var(--fw-medium)}
.name-tag.planner{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 20%,transparent)}
.name-tag.busy{box-shadow:0 0 0 2px var(--warning)}

/* ---------- KPI numbers: the number, its name, the detail ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,7.75rem),1fr));gap:var(--gap);margin:0 0 var(--sp-4)}
.stats>span,.stats>a,.stats>button{display:flex;flex-direction:column;gap:.1rem;min-width:0;padding:.8rem var(--row-px);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-card);font-size:var(--fs-small);color:var(--text-muted);text-decoration:none;text-align:start;font-family:inherit}
.stats>a:hover,.stats>button:hover{border-color:var(--border-strong);cursor:pointer}
.stats b{order:-1;font:var(--fw-semibold) var(--fs-kpi)/1.1 var(--font-ui);color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow-wrap:anywhere}
.stats small{font-size:var(--fs-helper);color:var(--text-muted)}
.stats>.ok b{color:var(--success-text)}
.stats>.warn b{color:var(--warning-text)}
.stats>.bad b{color:var(--danger-text)}
.stats.small b{font-size:1.25rem}
/* a money figure in several currencies: two places wide, a smaller figure */
.stats>.wide{grid-column:span 2}
.stats>.wide b{font-size:var(--fs-section)}
.loadbar{display:flex;flex-wrap:wrap;gap:.3rem;margin:var(--sp-2) 0}
.loadbar span{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:.1rem .5rem;font-size:var(--fs-small)}
.bars div{display:grid;grid-template-columns:7rem 1fr 2.5rem;gap:var(--sp-2);align-items:center;font-size:var(--fs-small);margin:.25rem 0}
.bars span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars i{height:.5rem;background:var(--primary);border-radius:var(--r-pill)}
/* ---------- (11.1) THE analytics period: one bar above what it scopes – the period shown (and the hotel, the team), the choice, Reset ---------- */
.period{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-3) var(--sp-5);margin:0 0 var(--sp-4);padding:var(--sp-3) var(--card-p);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-card)}
.period-now{display:flex;align-items:center;gap:.6rem;min-width:0;flex:1 1 15rem}
.period-now>.ico{width:1.4rem;height:1.4rem;color:var(--primary);flex:none}
.period-now b{display:block;font-size:var(--fs-section);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.period-now small{display:block;color:var(--text-muted);font-size:var(--fs-small)}
.period-pick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2)}
.period-pick .field{flex:0 1 11rem;min-width:9rem}
.period-pick .field:first-child{flex-basis:15rem}
.period-pick .field>span{font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-2)}
.period>.field-err{flex:1 1 100%;margin:0}
/* ---------- (11.1) THE trend: columns on one baseline (≤ 24 px, rounded at the top), hairline guides, the highest value written, a
   tooltip per column (the whole column is its target), the numbers again as a table ---------- */
.trend{--n:1;margin:0;min-width:0}            /* (--n: the columns of a trend, set by each chart) */
.trend figcaption{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--text-2);margin:0 0 var(--sp-3)}
.trend-plot{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:end;height:150px;margin-inline-start:2rem;
  border-bottom:1px solid var(--border-strong);background:linear-gradient(to top,transparent calc(50% - .5px),var(--border-subtle) calc(50% - .5px),var(--border-subtle) calc(50% + .5px),transparent calc(50% + .5px)),
  linear-gradient(var(--border-subtle) 1px,transparent 1px)}
.trend-tick{position:absolute;inset-inline-start:-2rem;width:1.7rem;transform:translateY(50%);text-align:end;font-size:var(--fs-helper);color:var(--text-muted);font-variant-numeric:tabular-nums}
.trend-col{position:relative;display:flex;justify-content:center;align-items:flex-end;height:100%;padding:0 1px}
.trend-col>i{position:relative;display:block;width:min(24px,72%);background:var(--primary);border-radius:4px 4px 0 0}
.trend-col>i>em{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);font:var(--fw-semibold) var(--fs-helper)/1 var(--font-ui);font-style:normal;color:var(--text);white-space:nowrap}
.trend-col:hover>i{background:var(--primary-hover)}
.trend-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);display:none;z-index:5;white-space:nowrap;padding:.3rem .5rem;border-radius:var(--r-sm);background:var(--secondary);color:var(--on-secondary);font-size:var(--fs-helper);box-shadow:var(--shadow-2)}
.trend-tip b{display:block;font-size:var(--fs-small)}
.trend-col:hover .trend-tip{display:block}
.trend-x{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:.3rem 0 0 2rem;font-size:var(--fs-helper);color:var(--text-muted)}
.trend-x span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-table{margin-top:var(--sp-2);font-size:var(--fs-small)}
.trend-table summary{cursor:pointer;color:var(--text-2);min-height:32px;display:flex;align-items:center}
.rank{padding-inline-start:1.2rem}
.rank li{display:flex;justify-content:space-between;max-width:320px}

/* ---------- Action required: ONE list (Information / Attention / Urgent), each line opens where it is fixed ---------- */
.attn{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-surface);overflow:hidden}
.attn .li{border:0;border-radius:0;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.attn>.li:last-child{border-bottom:0}
.attn .li>.lvl{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:var(--r-md);background:var(--info-soft);color:var(--info-text)}
.attn .li.warn>.lvl{background:var(--warning-soft);color:var(--warning-text)}
.attn .li.bad>.lvl{background:var(--danger-soft);color:var(--danger-text)}
.attn .li>a{flex:1 1 12rem;min-width:0;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.attn .li>a:hover{text-decoration:underline}
.attn-more>summary{list-style:none;color:var(--primary);font-weight:var(--fw-medium);font-size:var(--fs-small);cursor:pointer}
.attn-more>summary::-webkit-details-marker{display:none}
.attn-more[open]>summary{display:none}
.attn-more>.li:last-child{border-bottom:0}

/* ---------- Timeline: ONE look for a day (my day, the dashboard, a guest's stay) ---------- */
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline>li{display:grid;grid-template-columns:3.4rem 1rem minmax(0,1fr);gap:var(--sp-2);align-items:start;padding:.45rem 0;position:relative}
.timeline>li::before{content:"";position:absolute;inset-inline-start:calc(3.4rem + var(--sp-2) + .5rem - 1px);top:0;bottom:0;width:2px;background:var(--border-subtle)}
.timeline>li:first-child::before{top:1rem}
.timeline>li:last-child::before{bottom:calc(100% - 1rem)}
.timeline time{font-weight:var(--fw-semibold);font-size:var(--fs-small);padding-top:.1rem;color:var(--text-2)}
.timeline .tl-dot{position:relative;z-index:1;width:.75rem;height:.75rem;margin:.3rem auto 0;border-radius:50%;background:var(--bg-surface);border:2px solid var(--tc,var(--border-strong))}
.timeline .tl-body{min-width:0;overflow-wrap:anywhere}
.timeline .tl-body a{color:inherit;text-decoration:none}
.timeline .tl-body a:hover{text-decoration:underline}
.timeline .tl-body small{display:block;color:var(--text-muted)}
.timeline>li.past{opacity:.6}
.timeline>li.late .tl-dot{border-color:var(--danger);background:var(--danger)}
/* now: the accent needle */
.timeline>li.now .tl-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.timeline>li.now time{color:var(--text)}

/* ---------- Forms ---------- */
.form{display:flex;flex-direction:column;gap:var(--sp-4)}
fieldset.plain{border:0;padding:0;margin:0;min-width:0}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field label,.field>legend{font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-2)}
.field.req>label::after,.field.req>legend::after{content:" *";color:var(--danger-text)}
.field>small,.field .hint{font-size:var(--fs-helper);color:var(--text-muted)}
.field.check label{display:flex;gap:.55rem;align-items:center;font-weight:var(--fw-regular);font-size:var(--fs-body);color:var(--text)}
.field-err{display:flex;align-items:center;gap:.3rem;font-size:var(--fs-helper);color:var(--danger-text);font-weight:var(--fw-medium)}
/* a colour not set (no value): faded; in the theme editor it is the base theme's colour, shown whole with a dashed edge */
input[type=color][data-empty]{opacity:.3}
.field-err .ico{width:1em;height:1em}
.field.err input,.field.err select,.field.err textarea{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 14%,transparent)}
details summary{cursor:pointer;font-weight:var(--fw-medium);padding:.3rem 0}
.form-sec{margin:var(--sp-4) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--border-subtle)}
.form-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.form-sec h3{font:var(--fw-semibold) var(--fs-card-title)/1.3 var(--font-ui);margin:0}
.form-sec .hint{margin:.15rem 0 0;font-size:var(--fs-small)}
/* the ONE toolbar of filters: controls side by side, wrapping; a search or a chip row takes the whole line; .grow pushes the rest to the end */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin:0 0 var(--sp-4)}
.filters>input,.filters>select{width:auto;flex:0 1 12rem;min-width:9rem}
.filters>input[type=search]{flex:1 1 100%}
.filters>.chips{flex:1 1 100%;min-width:0}
/* the ONE stepper: a value stepped back and forth – ‹ the day › of a sheet, − the seats + of a booking (a label may come first) */
.stepper{display:inline-flex;align-items:center;gap:.35rem}
.stepper>span{flex:1;font-weight:var(--fw-medium)}
.stepper input{width:auto;min-width:0}
.stepper input[type=number]{width:3.2rem;text-align:center;font-size:1.25rem;font-weight:var(--fw-semibold);border:0;background:transparent;padding:0;font-variant-numeric:tabular-nums}
.search-in{display:flex;align-items:center;gap:var(--sp-2);padding:0 .3rem 0 .7rem;border:1px solid var(--border-strong);border-radius:var(--r-ctl);background:var(--bg-input)}
.search-in:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.search-in input{border:0;background:transparent;box-shadow:none;padding-inline:0;flex:1}
.search-in input:focus{box-shadow:none}
.search-in .ico{color:var(--text-muted)}
.img-pick{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.img-pick img{width:64px;height:64px;object-fit:contain;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-muted)}
.stars-in{display:flex;gap:.2rem}
.stars-in button{background:none;border:0;color:var(--border-strong);cursor:pointer;padding:0 .1rem;min-height:44px}
.stars-in button.on{color:var(--accent)}
.stars{display:inline-flex;gap:1px;color:var(--accent);vertical-align:-.15em}
.stars i{color:var(--border-strong);font-style:normal}
.stars .ico{width:1em;height:1em}
[data-stars] button .ico{width:1.7rem;height:1.7rem}
[data-stars] button.on .ico{fill:currentColor;color:var(--accent)}
fieldset.perm-group{border:1px solid var(--border);border-radius:var(--r-card);margin:var(--sp-3) 0;padding:var(--sp-2) var(--sp-4)}
fieldset.perm-group legend{font-weight:var(--fw-semibold);padding:0 .3rem}
.perm-group .row-mini{justify-content:flex-start}
fieldset.days{border:1px solid var(--border);border-radius:var(--r-ctl);padding:var(--sp-2) var(--sp-3);display:flex;flex-wrap:wrap;gap:.4rem .45rem;align-items:center;justify-content:flex-start}
fieldset.days legend{font-size:var(--fs-label);font-weight:var(--fw-medium);padding:0 .3rem}
fieldset.days label{display:flex;gap:.3rem;align-items:center}
fieldset.days>label,.field .pickchip{display:inline-flex;width:auto;margin:0;align-items:center;gap:.35rem}
fieldset.days>small{flex-basis:100%}
fieldset.field.days{flex-direction:row}
.pickchip{display:inline-flex;align-items:center;gap:.35rem;min-height:var(--control-h-sm);padding:0 .7rem;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--bg-surface);cursor:pointer;font-size:var(--fs-small)}
.pickchip:has(input:checked){border-color:var(--primary);background:var(--primary-soft);color:var(--text)}
.phone-in{display:flex;gap:var(--sp-2)}
.phone-in select{flex:0 0 6.4rem}
.phone-in input{flex:1}
[data-country] input{margin-top:.4rem}
.icon-pick{display:flex;flex-wrap:wrap;gap:.35rem}
.icon-pick label{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid var(--border);border-radius:var(--r-ctl);cursor:pointer}
.icon-pick input{position:absolute;opacity:0}
.icon-pick label:has(input:checked){border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
/* iPhone: date / time / month boxes stay inside the screen and read left-aligned */
input[type=date],input[type=time],input[type=month],input[type=datetime-local]{-webkit-appearance:none;appearance:none;display:block;max-width:100%;min-width:0;text-align:start}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value,input[type=month]::-webkit-date-and-time-value{text-align:start}
.switch{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-small);cursor:pointer}
.switch.small{font-size:var(--fs-helper)}
.switch input[type=checkbox],.sel-bar input[type=checkbox],.fb-head input[type=checkbox]{width:1.15rem;height:1.15rem;flex:none;padding:0;margin:0}
.tc-sw{display:flex;gap:3px;height:2.4rem;padding:4px;border-radius:var(--r-md);border:1px solid var(--border-subtle);overflow:hidden}
.tc-sw i{flex:1;border-radius:3px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--shadow-ink) 10%,transparent)}
.tc-sw i:first-child{flex:.6}
/* the TV display's themes in a gallery (Games → Themes); a colour strip (.tc-sw) also shows an app theme's palette (Settings → Appearance) */
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--gap)}
.th-card{display:flex;align-items:center;gap:var(--sp-3);margin:0}
.th-card .grow{display:flex;flex-direction:column;min-width:0}
.th-card small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.th-card .tc-sw{width:4.6rem;height:2.8rem;flex:none}
.th-card.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.tc-sw.dm{align-items:flex-end}
.tc-sw.dm i{flex:1;height:40%}

/* ---------- Empty, loading (skeletons) ---------- */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--text-muted);border:1px dashed var(--border-strong);border-radius:var(--r-card);background:color-mix(in srgb,var(--bg-surface) 50%,transparent)}
.empty>.ico{width:1.75rem;height:1.75rem;color:var(--text-muted);opacity:.8}
.empty p{margin:0;max-width:44ch}
.empty .actions{justify-content:center;margin-top:var(--sp-1)}
.loading{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-2) 0}
.skel{display:block;border-radius:var(--r-md);background:linear-gradient(90deg,var(--bg-muted) 0,color-mix(in srgb,var(--bg-muted) 40%,var(--bg-surface)) 50%,var(--bg-muted) 100%);background-size:200% 100%;animation:skel 1.3s linear infinite}
.skel.title{height:1.75rem;width:38%}
.skel.line{height:.9rem;width:70%}
.skel.line.short{width:52%}
.skel.block{height:4.5rem;width:100%;border-radius:var(--r-card)}
.skel-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--gap)}
@keyframes skel{to{background-position:-200% 0}}
@keyframes pulse{50%{opacity:.25}}

/* ---------- Toasts: ONE message system (success, warning, error; human words only) ---------- */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5rem + var(--safe-b));z-index:60;display:flex;flex-direction:column;gap:var(--sp-2);width:min(92vw,420px);pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .85rem;border-radius:var(--r-card);background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-2);font-size:var(--fs-small);font-weight:var(--fw-medium);transition:opacity var(--dur-3),transform var(--dur-3) var(--ease);animation:toast-in var(--dur-2) var(--ease)}
.toast>.ico{flex:none;width:1.15rem;height:1.15rem;margin-top:.05rem}
.toast span{flex:1;min-width:0}
.toast.ok>.ico{color:var(--success)}
.toast.warn{border-color:color-mix(in srgb,var(--warning) 40%,var(--border))}
.toast.warn>.ico{color:var(--warning)}
.toast.bad{border-color:color-mix(in srgb,var(--danger) 45%,var(--border));background:color-mix(in srgb,var(--danger) 6%,var(--bg-elevated))}
.toast.bad>.ico{color:var(--danger)}
.toast.out{opacity:0;transform:translateY(6px)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- Dialogs: ONE modal (a bottom sheet on a phone) and its drawer form (detail on the side) ---------- */
.modal-wrap{position:fixed;inset:0;z-index:50;background:color-mix(in srgb,var(--shadow-ink) 45%,transparent);display:flex;align-items:flex-end;justify-content:center;animation:fade var(--dur-2) var(--ease)}
.modal{width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;border-radius:var(--r-modal) var(--r-modal) 0 0;background:var(--bg-elevated);color:var(--text);box-shadow:var(--shadow-3);animation:up var(--dur-3) var(--ease)}
.modal::before{content:"";align-self:center;width:2.4rem;height:4px;border-radius:2px;background:var(--border-strong);margin:.5rem 0 -.2rem}
.modal.wide{max-width:880px}
@keyframes up{from{transform:translateY(32px);opacity:.4}}
@keyframes fade{from{opacity:0}}
@keyframes side-in{from{transform:translateX(24px);opacity:.4}}
@media (min-width:700px){
  .modal-wrap{align-items:center;padding:var(--sp-4)}
  .modal{border-radius:var(--r-modal)}
  .modal::before{display:none}
  .modal-wrap.drawer{justify-content:flex-end;align-items:stretch;padding:0}
  .modal-wrap.drawer .modal{max-width:min(560px,92vw);max-height:none;height:100%;border-radius:0;animation:side-in var(--dur-3) var(--ease)}
  [dir=rtl] .modal-wrap.drawer{justify-content:flex-start}
}
.modal header{display:flex;align-items:center;gap:var(--sp-2);padding:.85rem var(--sp-4) .75rem var(--sp-5);border-bottom:1px solid var(--border-subtle)}
.modal header h2{flex:1;margin:0;font-size:var(--fs-section);overflow-wrap:anywhere}
.modal-body{padding:var(--sp-5);overflow:auto;overscroll-behavior:contain}
.modal footer{display:flex;gap:var(--sp-2);align-items:center;padding:.75rem var(--sp-5) calc(.75rem + var(--safe-b));border-top:1px solid var(--border-subtle);flex-wrap:wrap;background:color-mix(in srgb,var(--bg-muted) 45%,var(--bg-elevated));border-radius:0 0 var(--r-modal) var(--r-modal)}
.lightbox{text-align:center}
.lightbox img{max-height:72vh;border-radius:var(--r-md)}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-2)}
.lang-grid button{border:1px solid var(--border);background:var(--bg-surface);border-radius:var(--r-ctl);padding:.7rem;cursor:pointer;min-height:44px;text-align:start}
.lang-grid button:hover{border-color:var(--border-strong)}
.lang-grid button.on{border-color:var(--primary);background:var(--primary-soft);color:var(--text);font-weight:var(--fw-semibold)}
.sheet-actions{display:flex;flex-direction:column;gap:var(--sp-2)}

/* ---------- The ⋯ menu: the other actions behind the main one ---------- */
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu:not([open])>.menu-pop{display:none}
.menu-pop{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:30;min-width:13rem;max-width:min(20rem,86vw);padding:.3rem;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-elevated);box-shadow:var(--shadow-2);display:flex;flex-direction:column;animation:fade var(--dur-1)}
.menu-pop>a,.menu-pop>button{display:flex;align-items:center;gap:.6rem;width:100%;min-height:36px;padding:.4rem .6rem;border:0;border-radius:var(--r-md);background:none;text-align:start;text-decoration:none;color:var(--text);font-size:var(--fs-small);cursor:pointer}
.menu-pop>a:hover,.menu-pop>button:hover{background:var(--hover)}
.menu-pop>.danger{color:var(--danger-text)}
.menu-pop>hr{margin:.3rem 0}
.menu-pop .ico{width:1.05rem;height:1.05rem;color:var(--text-muted)}

/* ---------- Command search (Ctrl/⌘ K): pages and records in one box ---------- */
.cmdk .modal-body{padding:0}
.cmdk-in{display:flex;align-items:center;gap:var(--sp-2);padding:.4rem var(--sp-4);border-bottom:1px solid var(--border-subtle)}
.cmdk-in input{border:0;box-shadow:none;font-size:1.0625rem;padding-inline:0;background:transparent}
.cmdk-in input:focus{box-shadow:none}
.cmdk-in input::-webkit-search-cancel-button{display:none}
.cmdk-res{max-height:60vh;overflow:auto;padding:.4rem}
.cmdk-res h3{font:var(--fw-medium) var(--fs-helper)/1.2 var(--font-ui);color:var(--text-muted);margin:.6rem .6rem .3rem}
.cmdk-res a{display:flex;align-items:center;gap:.65rem;padding:.5rem .6rem;border-radius:var(--r-md);text-decoration:none;color:var(--text)}
.cmdk-res a small{color:var(--text-muted);margin-inline-start:auto;font-size:var(--fs-helper);white-space:nowrap}
.cmdk-res a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-res a.sel,.cmdk-res a:hover{background:var(--selected)}
.cmdk-res .ico{color:var(--text-muted)}

/* ---------- Selection and the ONE delete confirmation ---------- */
.sel-bar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:.45rem .7rem;margin:var(--sp-2) 0;border-radius:var(--r-card);background:var(--bg-muted);border:1px solid var(--border)}
.sel-bar label{display:inline-flex;align-items:center;gap:.4rem;font-weight:var(--fw-medium);font-size:var(--fs-small)}
.del-facts{margin:.2rem 0 .7rem;padding-inline-start:1.1rem}
.del-facts li{margin:.15rem 0}
.del-opts{display:grid;gap:var(--sp-2);border:0;padding:0;margin:var(--sp-3) 0}
.del-opts legend{font-weight:var(--fw-semibold);margin-bottom:.35rem}
.del-opt{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .75rem;border:1px solid var(--border);border-radius:var(--r-ctl);cursor:pointer;background:var(--bg-surface)}
.del-opt:has(input:checked){border-color:color-mix(in srgb,var(--danger) 55%,transparent);background:var(--danger-soft)}
.del-opt input{margin-top:.2rem;flex:none;accent-color:var(--danger)}
.del-opt span{display:grid;gap:.15rem}
.del-opt.dim{opacity:.55;cursor:default}
/* the same option cards for a choice that deletes nothing (where a setting applies …) */
.pick-opts .del-opt:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.pick-opts .del-opt input{accent-color:var(--primary)}
.del-warn p{margin:.1rem 0}
.del-strong input{font-size:1.05rem;letter-spacing:.08em;max-width:11rem}
.sel-li,.tk-li{display:flex;align-items:center;gap:.55rem}
.sel-li>.li,.tk-li>.li,.sel-li>span{flex:1;min-width:0}
.sel-box{width:1.15rem;height:1.15rem;flex:none;margin:0;accent-color:var(--primary)}

/* ---------- People ---------- */
.ava{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--bg-muted)}
.ava.xs{width:28px;height:28px}
.ava.lg{width:84px;height:84px}
.ava.md{width:56px;height:56px}
.ava.md.ini{font-size:1.35rem}
.ava.ini{display:inline-grid;place-items:center;font:var(--fw-semibold) 1rem/1 var(--font-ui);color:var(--primary);background:var(--primary-soft)}
.ava.xs.ini{font-size:.75rem}
.ava.lg.ini{font-size:2rem}
.ava.md>.ico{width:1.6rem;height:1.6rem}
.link-btn{border:0;background:none;padding:0;color:var(--primary);font:inherit;text-align:start;cursor:pointer}
.link-btn:hover{text-decoration:underline}
.tb-sel select{min-height:var(--control-h);width:auto;max-width:14rem}
/* photos (Explore): in order, each with a caption – add, move up, remove */
.imgs-list{display:flex;flex-direction:column;gap:.4rem;margin:.3rem 0 .5rem}
.imgs-it{display:flex;align-items:center;gap:.5rem;padding:.35rem;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--bg-surface)}
.imgs-it img{width:64px;height:48px;object-fit:cover;border-radius:var(--r-xs);flex:none;background:var(--media-bg)}
.imgs-it input{flex:1;min-width:0}
/* opening hours: one row per day – unknown / open (one or two times) / closed / 24 hours */
.hours-in{display:flex;flex-direction:column;gap:.35rem}
.hours-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding:.35rem 0;border-bottom:1px solid var(--border-subtle)}
.hours-row>b{min-width:6.5rem;font-weight:var(--fw-medium)}
.hours-row select{width:auto;flex:none}
.hr-pair{display:inline-flex;align-items:center;gap:.3rem}
.hr-pair input{width:auto}
.hours-in>.btn{align-self:flex-start;margin-top:.3rem}
.faces{display:flex;gap:var(--sp-4);overflow-x:auto;padding-bottom:.4rem}
.faces a,.faces>span{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-decoration:none;font-size:var(--fs-helper);min-width:62px;text-align:center}
.faces.small{margin:var(--sp-3) 0}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--gap)}
.person{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-4) .7rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem}
.person p{font-size:var(--fs-small);margin:.2rem 0}
.profile-head{display:flex;gap:var(--sp-4);align-items:center}
.profile-head b{font:var(--fw-semibold) var(--fs-section)/1.2 var(--font-display);display:block}

/* ---------- Tables: ONE table (sticky header, density, numbers aligned) and the data table around it ---------- */
.tablewrap{overflow:auto;-webkit-overflow-scrolling:touch;margin:var(--sp-2) 0;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-surface);max-width:100%}
table{border-collapse:separate;border-spacing:0;width:100%;background:var(--bg-surface);font-size:var(--fs-small)}
th,td{border-bottom:1px solid var(--border-subtle);padding:var(--cell-py) var(--cell-px);text-align:start;vertical-align:middle;font-variant-numeric:tabular-nums}
thead th{position:sticky;top:0;z-index:1;background:var(--bg-muted);color:var(--text-2);font-size:var(--fs-th);font-weight:var(--fw-semibold);white-space:nowrap;border-bottom:1px solid var(--border)}
tbody tr:hover>td{background:color-mix(in srgb,var(--hover) 60%,transparent)}
tbody tr:last-child>td,tbody tr:last-child>th{border-bottom:0}
td.num,th.num{text-align:end}
table.grid select,table.grid input{min-height:var(--control-h-sm);padding:.15rem .35rem;font-size:var(--fs-small);min-width:5.5rem}
tfoot tr.tot th,tfoot tr.tot td{background:var(--bg-muted);font-weight:var(--fw-semibold);border-top:1px solid var(--border-strong)}
.dt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-2)}
.dt-bar .search-in{flex:1 1 14rem;max-width:26rem}
.dt-sort{display:inline-flex;align-items:center;gap:.25rem;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.dt-sort .ico{width:.95em;height:.95em;opacity:.35}
th[aria-sort] .dt-sort .ico{opacity:1;color:var(--primary)}
.dt-sel{width:2.4rem}
.dt-pager{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);margin:var(--sp-2) 0;font-size:var(--fs-small);color:var(--text-muted)}
.dt-cols{display:grid;gap:.35rem}
/* a phone: each row becomes a card, every value with its column's name */
@media (max-width:640px){
  .dt-wrap.cards table,.dt-wrap.cards tbody{display:block}
  .dt-wrap.cards thead{display:none}
  .dt-wrap.cards{border:0;background:none}
  .dt-wrap.cards tr{display:block;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-surface);padding:.45rem .2rem;margin:0 0 var(--sp-2)}
  .dt-wrap.cards td{display:flex;justify-content:space-between;gap:var(--sp-3);border:0;padding:.25rem .65rem;text-align:end}
  .dt-wrap.cards td::before{content:attr(data-label);color:var(--text-muted);font-size:var(--fs-helper);text-align:start;flex:none;max-width:45%}
  .dt-wrap.cards td.dt-sel{justify-content:flex-start}
  .dt-wrap.cards td.dt-sel::before{content:none}
  .dt-wrap.cards td:empty{display:none}
}
.numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:.3rem;margin:var(--sp-3) 0}
.numgrid button,.numgrid span{border:1px solid var(--border);background:var(--bg-surface);border-radius:var(--r-ctl);min-height:44px;cursor:pointer;font-variant-numeric:tabular-nums;color:var(--text)}
.numgrid button:hover{border-color:var(--border-strong)}
.numgrid button.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.numgrid button:disabled{opacity:.3;text-decoration:line-through;cursor:default}
.numgrid.big{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
.numgrid.big span{display:flex;flex-direction:column;align-items:center;padding:.3rem;cursor:default}
.numgrid.big span.used{background:var(--bg-muted)}
.numgrid.big small{font-size:.6875rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sticky-act{position:sticky;bottom:calc(4.4rem + var(--safe-b));z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:.5rem .8rem;box-shadow:var(--shadow-2)}

/* ---------- Icons: ONE icon family (icons/icons.js) ---------- */
/* (11.6) one family, the theme's style: its stroke (thin … bold), its ends and corners (round, crisp, sleek), a soft tint inside */
.ico{width:calc(1.25em * var(--icon-k,1));height:calc(1.25em * var(--icon-k,1));flex:none;fill:var(--icon-fill,none);stroke:currentColor;stroke-width:var(--icon-stroke,1.6);stroke-linecap:var(--icon-cap,round);stroke-linejoin:var(--icon-join,round);vertical-align:-.25em}
.ico-txt{display:inline-grid;place-items:center;width:1.25em}
.ico.rot-l{transform:rotate(-90deg)}
.ico.rot-r{transform:rotate(90deg)}
.ico.fill{fill:currentColor}
.ico.dim{opacity:.28}
.ico.flip{transform:scaleX(-1)}
/* (11.5) right to left (Arabic): "forward" points left, Back points right */
[dir=rtl] .ico.i-chev{transform:scaleX(-1)}
[dir=rtl] .ico.i-chev.flip{transform:none}

/* ---------- Notifications: information, action needed, urgent ---------- */
.li.notif{display:flex;align-items:flex-start;gap:.6rem;padding:.2rem .3rem .2rem .7rem}
.li.notif>.lvl{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;margin-top:.5rem;border-radius:var(--r-md);background:var(--info-soft);color:var(--info-text)}
.li.notif.act>.lvl{background:var(--warning-soft);color:var(--warning-text)}
.li.notif.urgent>.lvl{background:var(--danger-soft);color:var(--danger-text)}
.li.notif.new{background:color-mix(in srgb,var(--primary) 4%,var(--bg-surface));border-color:color-mix(in srgb,var(--primary) 22%,var(--border))}
.li.notif:not(.new){opacity:.8}
.notif-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem;text-align:start;background:none;border:0;padding:.55rem 0;font:inherit;color:inherit;cursor:pointer}
.notif-main span{line-height:1.4}
details.notif-old{margin-top:var(--sp-4)}
details.notif-old summary{cursor:pointer;color:var(--text-muted);padding:.3rem 0}

/* ---------- Hotel info: bus times, weather, info cards, photos ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-2)}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);cursor:zoom-in}
.gallery figcaption{font-size:var(--fs-small);color:var(--text-muted)}
.strip{display:flex;gap:var(--sp-2);overflow-x:auto}
.strip img{height:110px;border-radius:var(--r-md);cursor:zoom-in}
.thumb{width:80px;height:80px;object-fit:cover;border-radius:var(--r-md);margin-top:.3rem;cursor:zoom-in}
.bus{margin-bottom:var(--sp-4)}
.bus .times{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.bus .times span{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-md);padding:.3rem .6rem;font-weight:var(--fw-semibold);display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.bus .times small{font-weight:var(--fw-regular);color:var(--text-muted)}
.weather .now{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.weather .now b{font:var(--fw-semibold) 2.2rem/1 var(--font-ui)}
.weather .days{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;margin-top:.7rem;text-align:center}
.weather .days div{display:flex;flex-direction:column;align-items:center}
.ico.wx{width:2.2rem;height:2.2rem;color:var(--accent);stroke-width:1.4}
.info-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap)}
.info-cards .card+.card{margin-top:0}
.info-cards img{width:100%;max-height:160px;object-fit:cover;border-radius:var(--r-md);margin-bottom:var(--sp-2)}

/* ---------- Tablets and desktops ---------- */
@media (min-width:768px){
  #toasts{left:auto;right:var(--sp-6);transform:none;bottom:var(--sp-6)}
  .sticky-act{bottom:var(--sp-4)}
}
/* phones: the overrides come last (after the rules they change) */
@media (max-width:560px){
  .crud-row:has(>.btn)>.li-main{flex-basis:100%}
  .pg-actions .btn{padding:0 .75rem;font-size:var(--fs-small)}
  /* the ⋯ menu on a phone: a sheet along the bottom (never cut off at the screen's edge) */
  .menu-pop{position:fixed;inset-inline:var(--sp-3);top:auto;bottom:calc(var(--sp-3) + var(--safe-b));max-width:none;z-index:45;padding:.4rem;box-shadow:var(--shadow-3)}
  .menu-pop>a,.menu-pop>button{min-height:44px}
  .filters>input,.filters>select{flex:1 1 9rem}
  /* the period on a phone: the choice on its own line, From / To side by side; a trend names every other part of its axis */
  .period-pick{width:100%}
  .period-pick .field{flex:1 1 8rem;min-width:0}
  .period-pick .field:first-child{flex-basis:100%}
  .trend-x span:nth-of-type(even){visibility:hidden}
}
/* touch screens: every button at least 44 px (after the rules that size them) */
@media (pointer:coarse){
  .btn,.chip-btn,.seg button{min-height:44px}
  .icon-btn{min-height:44px;width:44px;height:44px}
  .btn.small{min-height:40px}
}

/* ---------- (11.4) THE ONE programme status: Happening now · Starts in 20 min · Later today · Finished · a coming day (words + icon, never colour alone) ---------- */
/* (11.6) the theme's chip: solid, soft or outlined; uppercase and spaced or plain – always the word and the icon */
.ps{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-small);font-weight:var(--chip-fw,600);text-transform:var(--chip-tt,none);letter-spacing:var(--chip-ls,0);line-height:1.3;padding:.15rem .6rem;border-radius:var(--r-chip,var(--r-pill));white-space:nowrap;vertical-align:middle;border:1px solid transparent}
.ps .ico{width:1em;height:1em;stroke-width:calc(var(--icon-stroke,1.6) * 1.3)}
.ps-now{background:color-mix(in srgb,var(--success) var(--chip-k),var(--bg-surface));color:color-mix(in srgb,var(--on-success) var(--chip-solid,0%),var(--success-text));border:var(--chip-bw,0px) solid var(--success)}
.ps-now .ico{animation:ps-pulse 1.6s ease-in-out infinite}
.ps-soon{background:color-mix(in srgb,var(--info) var(--chip-k),var(--bg-surface));color:color-mix(in srgb,var(--on-info) var(--chip-solid,0%),var(--info-text));border:var(--chip-bw,0px) solid color-mix(in srgb,var(--info) 70%,transparent)}
.ps-done{background:color-mix(in srgb,var(--neutral) var(--chip-k),var(--bg-surface));color:color-mix(in srgb,var(--on-neutral) var(--chip-solid,0%),var(--neutral-text));border:var(--chip-bw,0px) solid var(--border-strong)}
.ps-future{background:var(--bg-surface);color:var(--text-2);border-color:var(--border)}
@keyframes ps-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ps-now .ico{animation:none}}
/* a programme card: Start → End, NOW highlighted while it runs (it clears by itself at the end time), over ones quieter */
.item.is-now{border-color:color-mix(in srgb,var(--success) 55%,var(--border));border-inline-start:6px solid var(--success);background:color-mix(in srgb,var(--success) 7%,var(--bg-surface));box-shadow:0 2px 10px color-mix(in srgb,var(--success) 16%,transparent)}
.item.is-done{opacity:.62}
.item.is-done b{color:var(--text-2)}
.item .meta .loc{display:inline-flex;align-items:center;gap:.2rem;margin-inline-start:.35rem}
.item .meta .loc .ico{width:.9em;height:.9em}
.item .tags{display:flex;flex-wrap:wrap;gap:.25rem;margin:.2rem 0 .3rem}
.item .ps{margin-top:.25rem}
.item .grow>small.muted{display:block;margin-top:.2rem}
.arr{color:var(--text-muted);font-weight:var(--fw-regular)}
.timeline time small{display:block;font-weight:var(--fw-regular);color:var(--text-muted)}
.std-time{font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);min-width:7.5rem;display:inline-block}
/* a picture that is missing or broken: the activity type's own placeholder (never a broken-image icon) */
.cover-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--tc,var(--primary)) 28%,var(--bg-surface)),color-mix(in srgb,var(--tc,var(--primary)) 8%,var(--bg-surface)));color:color-mix(in srgb,var(--tc,var(--primary)) 80%,var(--text));min-height:120px}
.cover-ph .ico{width:3rem;height:3rem;stroke-width:1.4;opacity:.85}
/* a switch row (notifications on this phone) */
.sw-row{display:flex;align-items:center;gap:var(--sp-3);padding:.65rem 0;border-bottom:1px solid var(--border-subtle);min-height:52px;cursor:pointer}
.sw-row:last-of-type{border-bottom:0}
.sw-row .grow{display:flex;align-items:center;gap:.5rem;font-weight:var(--fw-medium)}
.tgl{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:15px;background:var(--border-strong);position:relative;cursor:pointer;flex:none;transition:background var(--dur-1)}
.tgl::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .3);transition:inset-inline-start var(--dur-1)}
.tgl:checked{background:var(--success)}
.tgl:checked::after{inset-inline-start:25px}
.tgl:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.copy-box .row{gap:var(--sp-2)}
.copy-box input{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-small)}
.push-steps{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:flex;flex-direction:column;gap:var(--sp-3);counter-reset:ps}
.push-steps>li{counter-increment:ps}
.push-steps h3::before{content:counter(ps) ". ";color:var(--accent)}