.clock-location { position: relative; z-index: 1; width: min(100%, 420px); display: grid; gap: .4rem; margin: 0 0 1.2rem; text-align: left; color: #fff; }
.clock-location select { background: rgba(255,255,255,.96); }
.clock-location small { color: #d6e2f0; min-height: 1.2em; }
.table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.live-team-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.live-team-summary article { padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.live-team-summary strong { display: block; font-size: 2rem; }
.live-team-summary span { color: var(--muted); }
.live-team-heading,.live-person,.table-actions { display: flex; align-items: center; gap: 1rem; }
.live-team-heading { justify-content: space-between; }
.live-team-heading h2 { margin: 0; }
.live-team-list { display: grid; margin-top: 1rem; }
.live-person { padding: 1rem 0; border-top: 1px solid var(--line); }
.presence-dot { width: .75rem; height: .75rem; flex: 0 0 auto; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(41,211,162,.15); }
.presence-scheduled { background: #2789c7; box-shadow: 0 0 0 5px rgba(39,137,199,.14); }
.presence-paused { background: var(--amber); box-shadow: 0 0 0 5px rgba(255,191,105,.18); }
.live-person-main { min-width: 220px; flex: 1; }
.live-person-main span,.live-location span { display: block; color: var(--muted); font-size: .88rem; }
.live-location { min-width: 240px; flex: 1; }
.live-person time { font-variant-numeric: tabular-nums; font-weight: 850; }
.workplace-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.workplace-form-grid label { display: grid; gap: .45rem; }
.workplace-name,.workplace-address-mode,.workplace-address-search,.workplace-browser-location,.workplace-address-details { grid-column: 1 / -1; }
.workplace-address-mode { margin: 0; padding: 0; border: 0; }
.workplace-address-mode legend { margin-bottom: .65rem; font-size: .9rem; font-weight: 850; }
.workplace-mode-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.workplace-mode-card { grid-template-columns: auto 1fr; align-items: start; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; cursor: pointer; }
.workplace-mode-card:has(input:checked) { border-color: var(--mint-dark); background: #edfff9; box-shadow: 0 0 0 2px rgba(41,211,162,.16); }
.workplace-mode-card input { width: auto; margin-top: .15rem; accent-color: var(--mint-dark); }
.workplace-mode-card strong,.workplace-mode-card small { display: block; }
.workplace-mode-card small { margin-top: .25rem; font-weight: 500; line-height: 1.35; }
.workplace-address-search { position: relative; }
.workplace-address-suggestions { position: absolute; z-index: 8; top: 76px; left: 0; right: 0; overflow: auto; max-height: 280px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.workplace-address-suggestion { display: block; width: 100%; padding: .85rem 1rem; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.workplace-address-suggestion:hover,.workplace-address-suggestion[aria-selected="true"] { background: #edfff9; }
.google-attribution { display: block; margin-top: .5rem; text-align: right; font-weight: 750; }
.workplace-browser-location { padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.workplace-browser-location p { margin-bottom: .8rem; }
.workplace-address-details { padding: 1rem; border-radius: 15px; background: #f8faf9; }
.workplace-address-details h3 { margin: 0 0 .35rem; }
.workplace-address-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.workplace-street { grid-column: 1 / -1; }
.workplace-geocode-status { grid-column: 1 / -1; display: grid; gap: .3rem; color: var(--muted); }
.workplace-geocode-status small:first-child:not(:empty) { padding: .7rem .85rem; border-radius: 10px; background: #eef8ff; color: #174c70; }
.workplace-map-preview { grid-column: 1 / -1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.workplace-map-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; }
.workplace-map-preview iframe { display: block; width: 100%; height: 320px; border: 0; border-top: 1px solid var(--line); }
.table-actions form { display: contents; }
@media(max-width:760px){.live-team-summary,.workplace-form-grid,.workplace-mode-options,.workplace-address-detail-grid{grid-template-columns:1fr}.live-person{align-items:flex-start;flex-wrap:wrap}.live-location{min-width:calc(100% - 2rem);margin-left:1.75rem}.live-person time{margin-left:1.75rem}.table-actions{align-items:stretch;flex-direction:column}}

.kiosk-shell { align-content: center; gap: 1rem; padding-bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5rem)); }
.kiosk-identification-card { width: min(100%, 760px); }
.kiosk-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.35rem; }
.kiosk-card-header .brand { margin: 0; }
.kiosk-card-header > div { min-width: 0; text-align: right; }
.kiosk-card-header .eyebrow { margin: 0 0 .2rem; }
.kiosk-location-card,.kiosk-fixed-workplace { position: relative; z-index: 1; display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.1rem; border-radius: 17px; text-align: left; }
.kiosk-location-card { margin-bottom: 1.5rem; border: 1px solid #91d9c5; background: #edfff9; }
.kiosk-location-card > span,.kiosk-fixed-workplace > span { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; border-radius: 50%; background: var(--mint); color: var(--ink); font-size: 1.3rem; font-weight: 900; }
.kiosk-location-card small,.kiosk-location-card strong,.kiosk-fixed-workplace small,.kiosk-fixed-workplace strong { display: block; }
.kiosk-location-card small { color: var(--mint-dark); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.kiosk-location-card strong { margin-top: .15rem; font-size: 1.12rem; }
.kiosk-location-card p,.kiosk-fixed-workplace p { margin: .2rem 0 0; font-size: .82rem; }
.kiosk-identification-heading { text-align: center; }
.kiosk-identification-heading h1 { margin-bottom: .45rem; font-size: clamp(2rem,5vw,3.15rem); }
.kiosk-identification-grid { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 1.2rem; align-items: center; margin-top: 1.5rem; }
.kiosk-matricule-form label { display: grid; gap: .5rem; }
.kiosk-method-divider { align-self: stretch; display: grid; place-items: center; color: var(--muted); }
.kiosk-method-divider::before { content: ""; width: 1px; height: 100%; grid-area: 1/1; background: var(--line); }
.kiosk-method-divider span { z-index: 1; grid-area: 1/1; padding: .5rem 0; background: #fff; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.kiosk-camera-panel { min-width: 0; text-align: center; }
.kiosk-camera-panel .hint { margin: 0; font-size: .78rem; line-height: 1.45; }
.kiosk-camera-preview { position: relative; overflow: hidden; border-radius: 16px; background: #0b1220; }
.kiosk-camera-preview:has(video[hidden]) { display: none; }
.kiosk-camera-preview video { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.kiosk-camera-panel .alert { margin: 0; text-align: left; }
.kiosk-clock { width: min(100%,760px); min-height: auto; padding: clamp(1.4rem,4vw,2.4rem); }
.kiosk-clock-heading { position: relative; z-index: 1; }
.kiosk-clock-heading .eyebrow { margin-bottom: .35rem; }
.kiosk-clock-heading h1 { margin-bottom: 1rem; font-size: clamp(2rem,6vw,3.4rem); }
.kiosk-fixed-workplace { max-width: 620px; margin: 0 0 1.35rem; border: 1px solid rgba(41,211,162,.45); background: rgba(41,211,162,.13); color: #fff; }
.kiosk-fixed-workplace small { color: var(--mint); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.kiosk-fixed-workplace strong { margin-top: .15rem; font-size: 1.15rem; }
.kiosk-fixed-workplace p { color: #d6e2f0; }
.kiosk-session-footer { position: fixed; z-index: 40; left: 50%; bottom: max(.8rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .75rem; width: max-content; max-width: calc(100vw - 8rem); padding: .45rem .5rem .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 12px 35px rgba(11,18,32,.16); transform: translateX(-50%); }
.kiosk-session-footer strong { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.kiosk-session-footer .button { min-height: 38px; padding: .55rem .85rem; }
.kiosk-prerequisite { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem; align-items: center; border-color: #f0c46a; background: #fffaf0; }
.kiosk-prerequisite > span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--amber); font-size: 1.35rem; }
.kiosk-prerequisite h2,.kiosk-prerequisite p { margin: 0; }
.kiosk-prerequisite p { margin-top: .25rem; color: var(--muted); }
.kiosk-create-form { grid-template-columns: minmax(180px,1fr) minmax(220px,1fr) auto; }
@media(max-width:760px){.kiosk-card-header{align-items:flex-start;flex-direction:column}.kiosk-card-header>div{text-align:left}.kiosk-identification-grid{grid-template-columns:1fr}.kiosk-method-divider{display:flex;align-items:center;gap:.6rem}.kiosk-method-divider::before,.kiosk-method-divider::after{content:"";width:auto;height:1px;flex:1;background:var(--line)}.kiosk-method-divider span{padding:0 .3rem}.kiosk-prerequisite{grid-template-columns:auto 1fr}.kiosk-prerequisite .button{grid-column:1/-1}.kiosk-session-footer{left:1rem;right:5rem;justify-content:space-between;width:auto;max-width:none;transform:none}.kiosk-session-footer strong{white-space:normal}.kiosk-create-form{grid-template-columns:1fr}}

/* Clocking counters (shared by the application and the kiosk) */
.work-timer.is-frozen strong { opacity: .72; }
.work-timer-primary.is-frozen strong { color: #d6e2f0; }
.work-timer-pause strong { color: #c9c0ff; }
.clock-planned { position: relative; z-index: 1; margin: -.6rem 0 1.2rem; color: #d6e2f0; font-size: .9rem; text-align: center; }
.clock-forgotten { position: relative; z-index: 1; display: grid; gap: .45rem; justify-items: start; margin: 0 0 1.2rem; text-align: left; }

/* Kiosk: leave button always visible, countdown back to the start screen */
.kiosk-clock-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kiosk-exit { flex: none; }
/* Room for the fixed countdown so that it never covers the clocking buttons. */
.kiosk-shell[data-controller~="kiosk-session"] { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }
.kiosk-exit-button { min-height: 52px; padding: .75rem 1.3rem; border: 2px solid rgba(255,255,255,.55); border-radius: 16px; background: rgba(255,255,255,.12); color: #fff; font-size: 1.05rem; font-weight: 800; }
.kiosk-exit-button:hover, .kiosk-exit-button:focus-visible { background: rgba(255,255,255,.22); }
.kiosk-session-footer { flex-wrap: wrap; row-gap: .35rem; overflow: hidden; }
.kiosk-countdown-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line); }
.kiosk-countdown-bar i { display: block; width: 100%; height: 100%; background: var(--mint, #3cc79b); transition: width 1s linear; }
@media (max-width: 520px) {
  .kiosk-clock-heading { flex-direction: column-reverse; align-items: stretch; }
  .kiosk-exit, .kiosk-exit-button { width: 100%; }
}
/* Phones: the main counter gets its own row, the others share the next one
   and shrink their digits instead of overflowing their box. */
@media (max-width: 560px) {
  .work-timers { gap: .5rem; }
  .work-timer { min-width: 0; flex: 1 1 0; padding: .65rem .6rem; }
  .work-timer-primary { flex-basis: 100%; }
  .work-timer strong { font-size: clamp(1.05rem, 5.4vw, 1.35rem); white-space: nowrap; }
  .work-timer-primary strong { font-size: clamp(1.9rem, 11vw, 2.6rem); }
  .work-timer span { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .kiosk-countdown-bar i { transition: none; } }

/* Live presence grouped by team */
.live-team-heading { flex-wrap: wrap; }
.live-team-filter label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.live-team-group { display: grid; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.live-team-group:first-child { border-top: 0; padding-top: 0; }
.live-team-group + .live-team-group { margin-top: .9rem; }
.live-team-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.live-team-group-heading h3 { margin: 0; font-size: 1rem; }
.live-team-group-heading span { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.live-team-group-empty { margin: 0; }