/* I Know · css/modes.css — (11.6) THE DISPLAY MODES on the screens: Beginner · Smart · Professional · Advanced · Pro. A mode is how
   much a screen shows and how (never its colours – that is the theme). Its sizes and density are tokens on [data-display]
   (components/display-mode.js: text size, touch targets, spacing, width, the bottom bar); the renderers choose what to show; here is how
   each mode lays it out – on a phone, a tablet and a computer. Only tokens, no colour of its own. */

/* ---------- the same everywhere (the width of a page, the touch targets, the bottom bar: tokens) ---------- */
/* explanations: the more experienced the mode, the fewer (Pro: none; Beginner keeps them all) */
[data-display=pro] .field .hint,[data-display=pro] .lead,[data-display=pro] .x-kicker,[data-display=pro] .pg-sub{display:none}
[data-display=advanced] .field .hint{font-size:var(--fs-helper)}
/* Beginner: one column of large, obvious things; every button wide and tall */
[data-display=beginner] .actions .btn,[data-display=beginner] .acc-row{min-height:var(--control-h)}
[data-display=beginner] .dash{display:block}
[data-display=beginner] .stats{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
[data-display=beginner] .now-next>div{padding:var(--sp-5)}
[data-display=beginner] .now-next b{font-size:1.25rem}
/* Pro: more width for more data on a big screen; denser lists */
[data-display=pro] .items,[data-display=pro] .list{gap:2px}
[data-display=advanced] .items{gap:var(--sp-1)}

/* ---------- THE GUEST'S PROGRAMME CARD in each mode (systems/program-engine.js guestCard) ---------- */
.item.gcard{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3);border-inline-start-width:var(--card-bw,1px)}
.gc-pic{order:var(--pic-order,0);flex:none;width:var(--dm-pic);height:var(--dm-pic);border-radius:var(--r-img,8px);overflow:hidden;display:block}
.gc-pic:empty,[data-display=beginner] .gc-pic,[data-display=pro] .gc-pic{display:none}
.gc-pic>*{width:100%;height:100%;min-height:0;object-fit:cover;display:flex}
.gc-pic .gc-img{filter:var(--img-filter,none)}
.gc-pic .cover-ph .ico{width:1.6rem;height:1.6rem}
.gc-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.15rem}
.item.gcard time{display:block;min-width:0;font:var(--fw-semibold) .98rem/1.2 var(--font-ui);color:var(--text-2);font-variant-numeric:lining-nums tabular-nums}
.item.gcard .gc-top .ps{margin:0}
.item.gcard b{font:var(--fw-heading,600) calc(1.08rem * var(--fs-head-k,1))/1.25 var(--font-display)}
.item.gcard .meta{margin:.2rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .6rem}
.item.gcard .meta .loc{margin:0}
.item.gcard .tags{margin:.3rem 0 0}
.gc-side{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.item.gcard.is-now{border-inline-start-width:5px;border-inline-start-color:var(--success);border-color:color-mix(in srgb,var(--success) 45%,var(--border));background:color-mix(in srgb,var(--success) 7%,var(--bg-surface));box-shadow:0 2px 10px color-mix(in srgb,var(--success) 16%,transparent)}
/* Beginner: the time, the NAME, the place, a clear Open – big, nothing else */
.item.gcard.dm-beginner{flex-direction:column;gap:var(--sp-2);padding:var(--sp-5)}
.gcard.dm-beginner .gb-time{font:var(--fw-bold) 1.35rem/1.1 var(--font-num);font-variant-numeric:lining-nums tabular-nums;color:var(--text)}
.gcard.dm-beginner .gb-name{font:var(--fw-heading,700) 1.6rem/1.15 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.gcard.dm-beginner .meta{font-size:1.05rem;color:var(--text-2)}
.gb-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;width:100%;margin-top:var(--sp-2)}
.gb-foot .ps{font-size:1rem;padding:.3rem .8rem}
.gb-open{min-height:var(--control-h);padding-inline:1.4rem;font-size:1.05rem;margin-inline-start:auto}
/* Smart: the name first, then the time and place, the status in full words */
.item.gcard.dm-smart b{font-size:calc(1.18rem * var(--fs-head-k,1));margin-bottom:.15rem}
.item.gcard.dm-smart .gc-top{justify-content:flex-start;gap:.3rem .8rem;color:var(--text-2)}
/* Advanced: compact cards with every tag, places, booking state – and quick actions */
.gcard-wrap{display:flex;flex-direction:column;gap:0}
.gcard-wrap>.item{border-end-start-radius:0;border-end-end-radius:0}
.gcard-wrap>.item:only-child{border-radius:var(--r-card)}
.gc-acts{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--bg-muted);border:var(--card-bw,1px) solid var(--border);border-top:0;border-radius:0 0 var(--r-card) var(--r-card)}
@media (pointer:coarse){.gc-acts .btn{min-height:44px}}
.gc-acts .gc-fav.on{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}
.gc-acts .gc-fav.on .ico{fill:currentColor}
.item.gcard.dm-advanced{padding:var(--sp-2) var(--sp-3)}
.item.gcard.dm-advanced b{font-size:calc(1rem * var(--fs-head-k,1))}
/* Pro: one compact row with every key fact; icon actions at its end (a computer: one line; a phone: two) */
.gcard-wrap.dm-pro{flex-direction:row;align-items:stretch}
.gcard-wrap.dm-pro>.item{border-radius:var(--r-card) 0 0 var(--r-card)}
/* the actions: always the same column (an empty one too), so the rows stay aligned like a table */
.gcard-wrap.dm-pro .gc-acts{flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;gap:2px;min-width:calc(var(--control-h) + var(--sp-2) * 2);padding:0 var(--sp-2);border-top:var(--card-bw,1px) solid var(--border);border-inline-start:0;border-radius:0 var(--r-card) var(--r-card) 0}
.item.gc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"time name name" "ty meta ps";align-items:center;gap:.15rem .6rem;padding:var(--sp-2) var(--sp-3)}
.item.gc-row time{grid-area:time;font-size:.92rem;display:block;min-width:0}
.item.gc-row>b{grid-area:name;font:var(--fw-semibold) 1rem/1.2 var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0}
.item.gc-row .gc-ty{grid-area:ty;color:var(--tc,var(--text-muted));display:inline-flex;justify-content:center}
.item.gc-row .gc-meta{grid-area:meta;display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .5rem;min-width:0;font-size:var(--fs-small)}
.item.gc-row .gc-loc{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.item.gc-row .gc-loc .loc{margin:0;display:inline-flex;align-items:center;gap:.2rem}
.item.gc-row .gc-staff{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.item.gc-row .gc-meta .chip,.item.gc-row .gc-meta .pill{font-size:var(--fs-helper)}
.item.gc-row>.ps,.item.gc-row>.chip{grid-area:ps;margin:0;justify-self:end}
/* a wide list (a computer, a tablet): one line per activity – by the list's own width, so a narrow column or a preview keeps two lines */
.items:has(.gc-row){container-type:inline-size}
@container (min-width:640px){
  .item.gc-row{grid-template-columns:7.5rem minmax(0,1.3fr) 1.5rem minmax(0,2fr) auto;grid-template-areas:"time name ty meta ps";gap:.6rem}
  .item.gc-row .gc-meta{flex-wrap:nowrap}
  .gcard-wrap.dm-pro .gc-acts{flex-direction:row;min-width:calc(var(--control-h) * 2 + var(--sp-2) * 3)}
}
/* the staff app's rows: Beginner big and simple */
.item.dm-beginner:not(.gcard){align-items:center;padding:var(--sp-4) var(--sp-4)}
.item.dm-beginner:not(.gcard) .gb-time{font:var(--fw-bold) 1.2rem/1.1 var(--font-num);min-width:6.5rem}
.item.dm-beginner:not(.gcard) .gb-name{font-size:1.25rem}

/* ---------- the guest's Programme page in each mode (pages/guest/programme.js) ---------- */
.g-days2{display:flex;width:100%;margin:0 0 var(--sp-4)}
.g-days2 button{flex:1;min-height:var(--control-h);font-size:1.1rem;font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.g-only{margin-top:var(--sp-2);align-items:center}
.g-only .g-q{flex:1 1 12rem;min-width:10rem}
.g-sum{margin:var(--sp-2) 0;font-size:var(--fs-small);color:var(--text-2);font-variant-numeric:tabular-nums}
.g-done-tog{margin-top:var(--sp-3)}
.g-smart{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--sp-2);margin:0 0 var(--sp-5)}
.g-smart-tile{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;color:var(--text);padding:var(--sp-3) var(--sp-4)}
.g-smart-tile>.ico:first-child{width:1.6rem;height:1.6rem;color:var(--primary);flex:none}
.g-smart-tile small{display:block;color:var(--text-muted);font:var(--fw-semibold) var(--fs-helper)/1.3 var(--font-label);text-transform:var(--label-tt,none);letter-spacing:var(--label-ls,0)}
.g-smart-tile b{font-weight:var(--fw-semibold)}
.g-smart-tile.is-now{border-color:color-mix(in srgb,var(--success) 50%,var(--border));background:color-mix(in srgb,var(--success) 8%,var(--bg-surface))}
.g-smart-tile.is-now>.ico:first-child{color:var(--success)}
/* Explore and My Stay: Beginner big tiles; Advanced / Pro more per row */
[data-display=beginner] .x-cats{grid-template-columns:repeat(2,1fr)}
[data-display=beginner] .x-cat{min-height:7rem;font-size:1.1rem}
[data-display=beginner] .x-cat .ico{width:2.2rem;height:2.2rem}
[data-display=beginner] .g-tiles{grid-template-columns:repeat(2,1fr)}
[data-display=pro] .x-cats,[data-display=advanced] .x-cats{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
[data-display=pro] .g-tiles,[data-display=advanced] .g-tiles{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
[data-display=pro] .x-img,[data-display=advanced] .x-img{width:56px;height:56px}
[data-display=pro] .x-card,[data-display=advanced] .x-card{padding:var(--sp-2)}