:root {
  --ink: #111318;
  --muted: #686d75;
  --line: #e7e8ea;
  --paper: #ffffff;
  --wash: #f7f7f6;
  --blue: #003da5;
  --red: #e21b3c;
  --green: #19744c;
  --amber: #b15f00;
  --danger: #c32036;
  --radius: 18px;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--wash); font-family: Manrope, Arial, sans-serif; }
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #4c8dff; outline-offset: 3px; }
button { cursor: pointer; }
.mono { font-family: "DM Mono", monospace; letter-spacing: -.035em; }
.eyebrow { color: var(--blue); font: 600 11px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.btn { border: 1px solid var(--ink); border-radius: 999px; padding: 11px 17px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); background: var(--blue); border-color: var(--blue); }
.btn.secondary { color: var(--ink); background: transparent; border-color: var(--line); }
.btn.small { padding: 8px 12px; font-size: 12px; }
.topbar { height: 62px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; gap: 12px; align-items: center; font-weight: 800; font-size: 14px; text-decoration: none; color: var(--ink); }
.mark { display: grid; place-items: center; width: 31px; height: 31px; background: var(--blue); color: #fff; font: 700 12px "DM Mono", monospace; position: relative; }
.mark:after { content:""; width: 7px; height: 7px; position: absolute; right: -3px; bottom: -3px; background: var(--red); }
.nav { display: flex; gap: 22px; }
.nav button { border: 0; background: transparent; padding: 6px 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.nav button.active { color: var(--ink); border-bottom: 2px solid var(--red); }
.profile { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; }
.sso-button { border: 0; background: transparent; color: var(--blue); padding: 9px 5px; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.sso-button:hover { color: var(--ink); }
.avatar { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items:center; background: #d8e0ee; color: var(--blue); font-size: 11px; }
.avatar-image { object-fit: cover; background: #dfe6ea; }
.landing { min-height: 100vh; background: var(--paper); display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.landing .topbar { position: relative; }
.hero { max-width: 1220px; margin: auto; width: 100%; padding: 70px 32px 44px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.hero h1 { margin: 15px 0 21px; max-width: 750px; font-size: clamp(48px, 7vw, 92px); line-height: .97; letter-spacing: -.075em; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero p { margin: 0 0 30px; max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-visual { aspect-ratio: .95; position: relative; background: var(--ink); overflow: hidden; padding: 28px; color: #fff; }
.hero-visual:before { content:""; position: absolute; background: var(--blue); width: 67%; height: 65%; right: -18%; top: -8%; border-radius: 50%; }
.hero-visual:after { content:""; position: absolute; background: var(--red); width: 28%; aspect-ratio: 1; left: 10%; bottom: -11%; border-radius: 50%; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; width: 73%; aspect-ratio: 1; bottom: 9%; right: 9%; animation: turn 18s linear infinite; }
.orbit b { display: block; position: absolute; left: 14%; top: 7%; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
@keyframes turn { to { transform: rotate(360deg); } }
.hero-card { position: absolute; z-index: 2; right: 28px; bottom: 30px; width: min(74%, 300px); padding: 20px; background: rgba(255,255,255,.96); color: var(--ink); }
.hero-card h3 { margin: 7px 0 16px; font-size: 20px; letter-spacing: -.05em; }
.hero-card div { border-top: 1px solid var(--line); padding-top: 11px; display: flex; justify-content: space-between; font: 11px "DM Mono", monospace; }
.trust { max-width: 1220px; margin: 0 auto; padding: 20px 32px 34px; width: 100%; display: flex; gap: 35px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.trust span b { color: var(--ink); }
.shell { min-height: 100vh; }
.main { max-width: 1330px; margin: 0 auto; padding: 42px 32px 70px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 33px; }
.page-head h1 { margin: 7px 0 0; letter-spacing: -.065em; font-size: clamp(36px, 4vw, 58px); line-height: 1; }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.tabs { display: flex; gap: 5px; padding: 5px; background: #eceeed; width: max-content; border-radius: 999px; }
.tabs button { border: 0; background: transparent; padding: 8px 13px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 700; }
.tabs button.active { color: #fff; background: var(--ink); }
.booking-notification-badge { display:inline-grid; min-width:17px; height:17px; margin-left:4px; padding:0 4px; place-items:center; border-radius:999px; background:var(--red); color:#fff; font:800 9px/1 "DM Mono", monospace; vertical-align:middle; }
.decision-toast { position:fixed; z-index:50; right:22px; bottom:22px; display:flex; align-items:flex-start; gap:18px; max-width:min(420px, calc(100vw - 36px)); padding:15px 16px; border:1px solid var(--line); border-left:5px solid var(--blue); background:var(--paper); box-shadow:0 14px 34px rgba(17,19,24,.16); }
.decision-toast.declined { border-left-color:var(--danger); }
.decision-toast div { display:grid; gap:4px; }
.decision-toast b { font-size:13px; }
.decision-toast span { color:var(--muted); font-size:12px; line-height:1.45; }
.decision-toast .text-action { flex:0 0 auto; min-height:32px; color:var(--blue); }
.filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 24px; }
.filter { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 9px 13px; color: var(--muted); font-size: 12px; }
.filter.active { border-color: var(--ink); color: var(--ink); }
.catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.equipment { background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.equipment-image { aspect-ratio: 1.18; background: #e9ecee; position: relative; display: grid; place-items: center; overflow: hidden; }
.equipment-image .shape { width: 48%; height: 44%; background: var(--ink); border-radius: 15px; position: relative; box-shadow: 20px 18px 0 #bdc5ca; }
.equipment-image .shape:after { content:""; position: absolute; width: 45%; aspect-ratio: 1; border: 6px solid #e6ebed; border-radius: 50%; left: 27%; top: 20%; }
.equipment:nth-child(2) .shape { border-radius: 50%; width: 45%; height: 45%; background: #26282a; }
.equipment:nth-child(3) .shape { height: 60%; width: 31%; border-radius: 5px; background: #252a31; }
.equipment:nth-child(4) .shape { height: 28%; width: 66%; border-radius: 4px; background: #e7d9c3; }
.type-tag { position: absolute; top: 12px; left: 12px; background: #fff; padding: 5px 7px; font: 10px "DM Mono", monospace; }
.level { position: absolute; right: 12px; bottom: 12px; padding: 5px 7px; font: 10px "DM Mono", monospace; color: var(--green); background: #e7f3eb; }
.level.medium { color: var(--amber); background: #fff1d9; }.level.restricted { color: var(--danger); background: #fde9ed; }
.equipment-info { padding: 15px; }.equipment-info h3 { margin: 0 0 7px; font-size: 15px; letter-spacing: -.04em; }.equipment-info p { margin: 0; color: var(--muted); font: 11px "DM Mono", monospace; }.equipment-footer { border-top: 1px solid var(--line); padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); }.equipment-footer b { color: var(--ink); }
.admin-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 18px; }.panel { background: var(--paper); border: 1px solid var(--line); padding: 22px; }.panel h2 { margin: 0; font-size: 19px; letter-spacing: -.05em; }.panel-title { display:flex; justify-content: space-between; align-items: center; margin-bottom: 19px; }.panel-title a { color: var(--blue); font-size: 11px; font-weight: 800; }
.request { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }.request:first-of-type { border-top: 0; }.student-photo { width: 44px; height: 44px; background: #dfe6ea; border-radius: 50%; display:grid; place-items:center; color: var(--blue); font-size: 12px; font-weight: 800; }.request h3 { margin: 0 0 4px; font-size: 13px; }.request p { margin: 0; font-size: 11px; color: var(--muted); }.risk { text-align:right; }.risk span { display:inline-block; padding: 5px 7px; background: #e7f3eb; color: var(--green); font: 10px "DM Mono", monospace; }.risk.warn span { background:#fff1d9; color:var(--amber); }.risk small { display: block; color: var(--muted); font-size: 10px; margin-top: 5px; }
.today { display: grid; gap: 10px; }.today-item { padding: 13px; background: var(--wash); border-left: 3px solid var(--blue); }.today-item.return { border-color: var(--red); }.today-item h3 { margin: 0 0 5px; font-size: 12px; }.today-item p { margin:0; font: 10px "DM Mono", monospace; color: var(--muted); }.metric-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top:18px; }.metric { border-top:1px solid var(--line); padding-top: 13px; }.metric b { display:block; font-size: 26px; letter-spacing:-.07em; }.metric span { color:var(--muted); font-size:10px; }
.admin-tabs { display:flex; gap:7px; margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line); overflow-x:auto; }.admin-tabs button { flex:0 0 auto; border:0; background:transparent; padding:9px 12px; color:var(--muted); font-size:12px; font-weight:800; border-radius:999px; }.admin-tabs button.active { background:var(--ink); color:#fff; }.subtle { color:var(--muted); font-size:11px; }.desk-events { display:grid; }.desk-event { display:grid; grid-template-columns:72px auto minmax(0,1fr) minmax(150px,.8fr); gap:12px; align-items:center; padding:14px 0 14px 11px; border-top:1px solid var(--line); border-left:3px solid var(--blue); }.desk-event.return { border-left-color:#5a626b; }.desk-event.checkout { border-left-color:var(--green); }.event-time { color:var(--muted); font:11px "DM Mono", monospace; }.event-main { min-width:0; }.event-heading { display:flex; align-items:center; gap:7px; margin-bottom:4px; }.event-type { font:10px "DM Mono", monospace; color:var(--blue); text-transform:uppercase; }.return .event-type { color:#4d555d; }.checkout .event-type { color:var(--green); }.event-status { display:inline-flex; width:max-content; padding:4px 6px; color:var(--blue); background:#e9effc; font:9px "DM Mono", monospace; text-transform:uppercase; }.event-status.complete { color:var(--green); background:#e7f3eb; }.event-main h3 { margin:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.event-main h3 span { color:var(--muted); }.event-handler { display:flex; align-items:center; gap:8px; min-width:0; }.admin-avatar { width:29px; height:29px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:#674424; background:#efe2d7; font:10px "DM Mono", monospace; font-weight:800; }.handled-by { min-width:0; display:grid; gap:2px; }.handled-by b { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.handled-by small { color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.admin-content { min-height:420px; overflow:auto; }.date-switch { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; }.date-switch button { width:28px; height:28px; border:1px solid var(--line); background:#fff; border-radius:50%; }.admin-schedule { min-width:680px; border-top:1px solid var(--line); }.schedule-row { display:grid; grid-template-columns:72px repeat(5,1fr); min-width:680px; }.schedule-row > span { min-height:48px; padding:9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:10px; }.schedule-head-row > span { min-height:auto; background:var(--wash); color:var(--muted); font:10px "DM Mono", monospace; }.schedule-cell { color:var(--muted); }.schedule-cell.is-booked { background:#e9effc; color:var(--blue); font-weight:800; }.admin-note { margin:17px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }.log-filters { display:flex; gap:7px; }.activity-table { min-width:790px; border-top:1px solid var(--line); }.activity-row { display:grid; grid-template-columns:105px 1.35fr 1fr 1fr 82px; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:11px; }.activity-labels { padding:9px 0; color:var(--muted); font:10px "DM Mono", monospace; text-transform:uppercase; }.activity-row > span { min-width:0; }.activity-row small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }.person-cell { display:flex; align-items:center; gap:8px; }.person-cell .student-photo { width:27px; height:27px; flex:0 0 auto; font-size:9px; }.handler-cell { display:flex; align-items:center; }.admin-report-grid { display:grid; grid-template-columns:1.5fr .85fr; gap:18px; }.report-feature h2 { margin:5px 0 20px; }.report-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.report-stats div { padding:14px 0; border-top:1px solid var(--line); }.report-stats b { display:block; font-size:28px; letter-spacing:-.07em; }.report-stats span { color:var(--muted); font-size:10px; }.report-bars { display:grid; gap:14px; margin-top:26px; }.report-bars span { display:grid; grid-template-columns:150px 1fr 35px; gap:9px; align-items:center; font-size:11px; }.report-bars i { height:8px; display:block; background:linear-gradient(90deg,var(--blue) var(--value),var(--wash) var(--value)); }.report-bars em { color:var(--muted); font:10px "DM Mono", monospace; font-style:normal; text-align:right; }.staff-summary { display:grid; margin-top:16px; }.staff-summary > div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--line); }.staff-summary > div > span { color:var(--muted); font:10px "DM Mono", monospace; }.staff-summary .handled-by { margin-right:auto; }
.booking { display:grid; grid-template-columns: 290px 1fr; gap:18px; }.booking-side { background:var(--paper); border:1px solid var(--line); padding:22px; }.booking-side h2 { margin: 7px 0 15px; letter-spacing:-.05em; font-size:22px; }.booking-side p { color:var(--muted); font-size:12px; line-height:1.55; }.booking-side label { display:block; margin-top:16px; color:var(--muted); font:10px "DM Mono", monospace; text-transform:uppercase; }.booking-side select { width:100%; margin-top:7px; padding:10px; border:1px solid var(--line); background:#fff; font-size:12px; }.schedule { background:var(--paper); border:1px solid var(--line); padding:22px; overflow:auto; }.schedule-head { display:flex; justify-content:space-between; margin-bottom:18px; }.schedule-head h2 { margin:0; font-size:20px; letter-spacing:-.05em; }.schedule-head span { color:var(--muted); font:11px "DM Mono", monospace; }.calendar { min-width:650px; display:grid; grid-template-columns: 68px repeat(5,1fr); }.calendar > div, .calendar > button { min-height:46px; border:0; border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:8px; font-size:11px; }.calendar .day { font-weight:800; min-height:auto; background:var(--wash); }.calendar .time { color:var(--muted); font:10px "DM Mono", monospace; }.slot { background:#e9effc; color:var(--blue); font-weight:700; cursor:pointer; font-family:inherit; text-align:left; transition:background .15s ease, color .15s ease; }.slot:hover:not(:disabled) { background:#cbdafd; }.slot.unavailable { background:#f2f2f1; color:#a1a4a8; cursor:not-allowed; }.slot.selected { background:var(--blue); color:#fff; }.selection-summary { min-height:38px; margin:14px 0 0 !important; padding:10px; background:var(--wash); color:var(--ink) !important; font:11px/1.45 "DM Mono", monospace !important; }
.modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(17,19,24,.4); }.modal-card { max-width:520px; width:100%; background:#fff; padding:28px; box-shadow:0 30px 80px rgba(0,0,0,.2); }.modal-card h2 { margin:7px 0 10px; font-size:31px; letter-spacing:-.065em; }.modal-card p { color:var(--muted); line-height:1.6; font-size:13px; }.agreement { padding:14px; background:var(--wash); font-size:12px; line-height:1.55; }.check { display:flex; gap:9px; align-items:flex-start; margin:18px 0; font-size:12px; font-weight:700; }.modal-actions { display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; padding-top:48px; }.hero-visual { max-width:520px; }.catalog { grid-template-columns:repeat(2,1fr); }.admin-grid,.booking,.admin-report-grid { grid-template-columns:1fr; }.nav { display:none; } .desk-event { grid-template-columns:70px auto minmax(0,1fr); }.event-handler { grid-column:3; } }
@media (max-width:540px) { .topbar,.main { padding-left:18px;padding-right:18px; }.hero { padding-left:18px;padding-right:18px; }.catalog { grid-template-columns:1fr; }.page-head { align-items:flex-start; flex-direction:column; }.trust { padding-left:18px; gap:15px; flex-wrap:wrap; }.profile span { display:none; } }

/* Form controls: WCAG-friendly readable type and target size. */
.booking-side select { min-height: 46px; padding: 10px 38px 10px 12px; border-color: #bcc1c7; border-radius: 2px; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.3; }
.booking-side select:hover { border-color: var(--ink); }
.booking-side select option { color: var(--ink); background: #fff; font-size: 16px; }
.picker-wrap { position:relative; margin-top:16px; }
.picker-label { display:block; color:var(--muted); font:10px "DM Mono", monospace; text-transform:uppercase; }
.picker-trigger { width:100%; min-height:46px; margin-top:7px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #89909a; border-radius:2px; background:#fff; color:var(--ink); font:600 16px/1.3 inherit; text-align:left; }
.picker-trigger:hover, .picker-trigger[aria-expanded="true"] { border-color:var(--ink); }
.picker-trigger:focus-visible, .picker-option:focus-visible { outline:3px solid #7aa4f8; outline-offset:2px; }
.picker-chevron { flex:0 0 auto; font-size:22px; line-height:.8; }
.picker-menu { display:none; position:absolute; z-index:20; left:0; right:0; top:calc(100% + 5px); max-height:270px; overflow:auto; padding:6px; border:1px solid #89909a; border-radius:2px; background:#fff; box-shadow:0 14px 32px rgba(17,19,24,.16); }
.picker-menu.open { display:grid; }
.picker-option { min-height:44px; padding:10px 12px; border:0; border-radius:2px; background:#fff; color:var(--ink); font:600 16px/1.35 inherit; text-align:left; }
.picker-option + .picker-option { border-top:1px solid var(--line); }
.picker-option:hover, .picker-option[aria-selected="true"] { background:#e9effc; color:var(--blue); }
.ga-roster { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.ga-list { display: grid; }
.ga-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:14px 0; border-top:1px solid var(--line); }
.ga-row h3 { margin:0 0 4px; font-size:14px; }
.ga-row p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.skill-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.skill-tags span { padding:4px 6px; color:var(--blue); background:#e9effc; font:9px "DM Mono", monospace; }
.skill-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:20px 0 0; padding:14px; border:1px solid var(--line); }
.skill-picker legend { padding:0 5px; color:var(--muted); font:10px "DM Mono", monospace; text-transform:uppercase; }
.skill-picker label { display:flex; gap:8px; align-items:center; min-height:32px; font-size:13px; font-weight:700; }
.skill-picker input { width:18px; height:18px; accent-color:var(--blue); }
.booking-rule { margin: 8px 0 0 !important; color: var(--muted); font-size: 12px !important; }
.booking-limit { margin: 8px 0 0 !important; color: var(--red) !important; font-size: 12px !important; font-weight: 700; }
.reservation-list { display: grid; gap: 12px; max-width: 760px; }
.reservation-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; background: var(--paper); border: 1px solid var(--line); }
.reservation-card h2 { margin: 7px 0 5px; font-size: 18px; letter-spacing: -.045em; }.reservation-card p, .empty { margin: 0; color: var(--muted); font-size: 13px; }
.reservation-meta { display:grid; justify-items:end; gap:7px; text-align:right; }
.reservation-status-detail { max-width:235px; font-size:11px !important; line-height:1.4; }
.reservation-card.has-new-decision { border-left:4px solid var(--blue); }
.new-decision-label { padding:4px 6px; background:#e9effc; color:var(--blue); font:800 9px "DM Mono", monospace; letter-spacing:.04em; text-transform:uppercase; }
.empty-reservations { display:grid; justify-items:start; gap:12px; max-width:620px; padding:24px; border:1px solid var(--line); background:var(--paper); }
.empty-reservations h2 { margin:0; font-size:21px; letter-spacing:-.045em; }
.status { padding: 7px 9px; font: 11px "DM Mono", monospace; background: #fff1d9; color: var(--amber); }.status.approved { background:#e7f3eb; color:var(--green); }.status.declined,.status.cancelled { background:#fde9ed; color:var(--danger); }
.active-reservations { margin-top:18px; }
.cancellation-form .field-help { display:inline; font-weight:400; }
.request-actions { display:flex; gap:11px; margin-top:8px; }.text-action { border:0; background:transparent; padding:0; font-size:11px; font-weight:800; text-decoration:underline; }.text-action.approve { color:var(--green); }.text-action.reject { color:var(--danger); }
.email-label { display:block; margin-top:19px; font-size:12px; font-weight:800; }.email-input { width:100%; min-height:46px; margin-top:7px; padding:10px 12px; border:1px solid #89909a; border-radius:2px; color:var(--ink); background:#fff; font-size:16px; }.form-notice { margin:8px 0 16px !important; color:var(--muted); font-size:12px !important; }.form-notice.error { color:var(--danger); font-weight:700; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.profile-select { width:100%; min-height:46px; margin-top:7px; padding:10px 12px; border:1px solid #89909a; border-radius:2px; background:#fff; color:var(--ink); font-size:16px; font-weight:600; }.account-panel { margin-bottom:18px; }.account-panel .request { grid-template-columns:auto 1fr auto; }

/* Onboarding and staff shift editor */
.field-hint { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.z-number-field { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:stretch; margin-top:7px; }
.z-number-field > span { display:grid; place-items:center; min-height:46px; border:1px solid #89909a; border-right:0; background:var(--wash); color:var(--blue); font:700 16px "DM Mono", monospace; }
.z-number-field .email-input { margin:0; border-radius:0 2px 2px 0; }
.shift-editor { display:grid; gap:12px; margin:20px 0 0; padding:14px; border:1px solid var(--line); }
.shift-editor legend { padding:0 5px; color:var(--muted); font:10px "DM Mono", monospace; text-transform:uppercase; }
.shift-editor .admin-note { margin:0; }
.shift-list { display:grid; gap:10px; }
.shift-editor-row { border:1px solid var(--line); background:var(--wash); padding:12px; }
.shift-editor-row-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.shift-editor-row-title { color:var(--blue); font:700 10px "DM Mono", monospace; text-transform:uppercase; }
.shift-editor-fields { display:grid; grid-template-columns:.75fr 1fr 1fr 1.5fr; gap:8px; }
.shift-editor-fields label { display:grid; gap:6px; color:var(--muted); font:700 12px "DM Mono", monospace; text-transform:uppercase; }
.shift-editor-fields input,.shift-editor-fields select { min-height:44px; width:100%; padding:8px 10px; border:1px solid #89909a; border-radius:2px; background:#fff; color:var(--ink); font:16px "Manrope", sans-serif; }
.shift-add { width:max-content; min-height:44px; padding:0 8px; color:var(--blue); }
@media (max-width:540px) { .form-grid { grid-template-columns:1fr; }.account-panel .request { grid-template-columns:auto 1fr; }.account-panel .request .btn,.account-panel .request .mono { grid-column:2; width:max-content; } }

@media (max-width:540px) {
  .picker-menu.open { position:fixed; z-index:45; inset:auto 12px calc(76px + env(safe-area-inset-bottom)); max-height:min(54vh, 390px); padding:10px; border-color:var(--ink); box-shadow:0 18px 48px rgba(17,19,24,.25); }
  .picker-option { min-height:48px; }
}

/* Mobile-first desk workflow and accessible dialog behavior. */
.mobile-nav { display:none; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.btn, .filter, .tabs button, .nav button, .sso-button, .admin-tabs button, .desk-mode-tabs button, .mobile-nav button { min-height:44px; }
.desk-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.desk-mode-tabs { display:flex; gap:5px; padding:4px; max-width:100%; overflow-x:auto; background:var(--wash); border-radius:999px; }
.desk-mode-tabs button { flex:0 0 auto; border:0; border-radius:999px; padding:8px 12px; background:transparent; color:var(--muted); font-size:12px; font-weight:800; }
.desk-mode-tabs button.active { background:var(--ink); color:#fff; }
.review-notification-badge { display:inline-grid; min-width:18px; height:18px; margin-left:5px; padding:0 5px; place-items:center; border-radius:999px; background:var(--red); color:#fff; font:800 10px/1 "DM Mono", monospace; vertical-align:middle; }
.review-panel { max-width:860px; }
.request.compact { grid-template-columns:auto minmax(0,1fr) auto; }
.scan-flow .photo-input { display:block; width:100%; min-height:46px; margin-top:7px; padding:10px; border:1px dashed #89909a; background:var(--wash); font-size:14px; }
.profile-photo-picker { display:flex; align-items:center; gap:14px; margin:18px 0; padding:13px; border:1px solid var(--line); background:var(--wash); }
.profile-photo-picker > div:last-child { min-width:0; flex:1; }
.profile-photo-preview { width:64px; height:64px; flex:0 0 64px; overflow:hidden; display:grid; place-items:center; border-radius:50%; background:#d8e0ee; color:var(--blue); font:800 18px var(--mono); }
.profile-photo-preview img { width:100%; height:100%; object-fit:cover; }
.profile-photo-picker .photo-input { display:block; width:100%; min-height:40px; margin-top:5px; padding:7px; border:1px dashed #89909a; background:#fff; font-size:13px; }
.modal-card { position:relative; max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain; }
.modal-discard { position:absolute; z-index:3; inset:0; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:28px; background:rgba(255,255,255,.97); box-shadow:0 0 0 1px var(--line); font-size:14px; }
.modal-discard span { color:var(--muted); }
.modal-discard div { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }

/* Inventory controls keep the daily desk view compact while exposing governance actions. */
.scan-handoff { background:var(--blue); border-color:var(--blue); color:#fff; }
.scan-handoff::before { content:'⌁'; margin-right:6px; font-size:1.2em; }
.admin-schedule-scroll { max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; border:1px solid var(--line); }
.admin-schedule-scroll .admin-schedule { border:0; }
.inventory-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.inventory-filters button { min-height:40px; padding:8px 11px; border:1px solid var(--line); background:#fff; font-size:12px; font-weight:800; }
.inventory-filters button.active { border-color:var(--ink); background:var(--ink); color:#fff; }
.inventory-list, .archive-requests, .inventory-audit { display:grid; gap:10px; }
.inventory-asset, .archive-request, .audit-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px; border:1px solid var(--line); background:#fff; }
.asset-id { margin:0 0 4px; color:var(--blue); font:11px "DM Mono", monospace; }
.asset-meta, .audit-row p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.asset-meta b { color:var(--ink); }
.asset-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.inventory-status { display:inline-flex; margin:6px 0 0; padding:4px 7px; background:var(--wash); color:var(--ink); font:10px "DM Mono", monospace; text-transform:uppercase; }
.inventory-sync { margin:0 0 14px; padding:10px 12px; border-left:4px solid var(--blue); background:var(--wash); color:var(--ink); font-size:14px; line-height:1.45; }
.inventory-sync.loading { border-color:var(--blue); }
.inventory-sync.error { border-color:#a12b2b; background:#fff4f4; }
.inventory-sync.local { border-color:var(--muted); }
.asset-form { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.asset-form .form-span { grid-column:1 / -1; }
.field-help { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
.asset-label { display:grid; gap:15px; padding:26px; border:1px dashed var(--ink); background:#fff; }
.barcode-preview { height:52px; background:repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 5px, #111 5px 7px, transparent 7px 10px, #111 10px 14px, transparent 14px 17px); }
.qr-camera-preview { display:block; width:100%; max-height:260px; margin-top:10px; border:1px solid var(--line); background:#0e1114; object-fit:cover; }
.scan-camera-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:12px 0 4px; color:var(--muted); font-size:13px; }

@media (max-width:900px) {
  body { overflow-x:hidden; }
  .mobile-nav button span { font-size:20px; line-height:1; }
  .admin-schedule-scroll { margin-inline:-18px; padding-inline:18px; }
  .inventory-asset, .archive-request, .audit-row { align-items:start; }
}

@media (max-width:900px) {
  body { padding-bottom:76px; }
  .topbar { min-height:62px; height:auto; padding:9px 18px; }
  .brand { font-size:12px; gap:10px; line-height:1.35; }
  .mark { width:30px; height:30px; }
  .profile { margin-left:auto; }
  .mobile-nav { position:fixed; z-index:40; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); padding:7px 10px max(7px, env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); box-shadow:0 -8px 28px rgba(17,19,24,.06); }
  .mobile-nav-4 { grid-template-columns:repeat(4,1fr); }
  .mobile-nav button { display:grid; place-items:center; align-content:center; gap:2px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:10px; font-weight:800; }
  .mobile-nav-icon { position:relative; display:grid; width:28px; height:28px; place-items:center; }
  .mobile-nav-icon > span:first-child { font-size:20px; line-height:1; }
  .mobile-nav .booking-notification-badge { position:absolute; top:-3px; right:-7px; min-width:16px; height:16px; margin:0; padding:0 3px; border:2px solid #fff; font-size:8px; }
  .mobile-nav button.active { color:var(--blue); background:#e9effc; }
  .decision-toast { right:12px; bottom:calc(88px + env(safe-area-inset-bottom)); left:12px; max-width:none; }
  .main { padding:28px 18px 32px; }
  .page-head { margin-bottom:24px; }
  .page-head h1 { font-size:clamp(34px, 10vw, 48px); }
  .booking-side, .schedule, .panel { padding:18px; }
  .schedule { padding:14px; }
  .calendar { min-width:560px; }
  .schedule-head { align-items:flex-start; gap:8px; }
  .desk-event { grid-template-columns:60px auto minmax(0,1fr); gap:9px; }
  .event-handler { grid-column:3; padding-top:0; }
  .metric-grid { gap:7px; }
  .metric b { font-size:23px; }
  .admin-tabs { margin-left:-18px; margin-right:-18px; padding:0 18px 14px; }
  .admin-tabs button { min-height:44px; }
  .activity-table { min-width:0; }
  .activity-row { grid-template-columns:1fr 1fr; gap:8px 12px; padding:13px 0; }
  .activity-labels { display:none; }
  .activity-row > span:nth-child(1) { grid-column:1 / -1; }
  .activity-row > span:nth-child(2), .activity-row > span:nth-child(3) { min-width:0; }
  .handler-cell { grid-column:1 / -1; }
  .event-status { justify-self:start; }
  .modal { align-items:end; padding:12px; }
  .modal-card { max-width:640px; max-height:calc(100dvh - 24px); padding:22px 18px; }
  .modal-card h2 { font-size:clamp(28px, 8vw, 38px); }
  .modal-actions { position:sticky; bottom:-22px; margin:18px -18px -22px; padding:13px 18px; background:#fff; border-top:1px solid var(--line); }
}
@media (max-width:540px) {
  .shift-editor { padding:12px; }
  .shift-editor-fields { grid-template-columns:1fr 1fr; }
  .shift-editor-fields label:last-child { grid-column:1 / -1; }
  .shift-editor-row-head { align-items:flex-start; }
  .sso-button { font-size:11px; }
  .topbar .avatar { display:none; }
  .hero { padding-top:36px; }
  .hero h1 { font-size:clamp(48px, 15vw, 68px); }
  .hero-visual { min-height:350px; }
  .trust { padding-bottom:20px; }
  .booking-side select, .profile-select, .email-input { font-size:16px; }
  .reservation-card { align-items:flex-start; flex-direction:column; gap:10px; }
  .reservation-meta { justify-items:start; text-align:left; }
  .desk-panel-head { align-items:flex-start; flex-direction:column; }
  .desk-panel-head .btn { width:100%; }
  .request.compact { grid-template-columns:auto minmax(0,1fr); }
  .request.compact .risk { display:none; }
  .report-stats { gap:8px; }
  .report-stats b { font-size:23px; }
  .report-bars span { grid-template-columns:1fr 36px; }
  .report-bars i { grid-column:1 / -1; grid-row:2; }
  .modal-actions .btn { flex:1; }
  .ga-row { grid-template-columns:auto minmax(0,1fr); }
  .ga-row .text-action { grid-column:2; justify-self:start; min-height:44px; }
  .skill-picker { grid-template-columns:1fr; }
  .inventory-asset, .archive-request, .audit-row { grid-template-columns:1fr; gap:10px; }
  .asset-controls { justify-content:flex-start; }
  .asset-form { grid-template-columns:1fr; }
  .asset-form .form-span { grid-column:auto; }
  .inventory-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .inventory-filters button { flex:0 0 auto; }
}

/* Phase 2: mobile installation, account menu, and native form sizing */
.install-guide {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
  background: #eef4ff;
  color: var(--ink);
}
.install-guide-copy { display: grid; min-width: 0; gap: 2px; padding-top: 1px; }
.install-guide-eyebrow { color: var(--blue); font: 700 11px/1.1 var(--mono); letter-spacing: .1em; }
.install-guide strong { display: block; font-size: 16px; font-weight: 800; }
.install-guide p { margin: 1px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.install-guide-dismiss {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #89909a;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.install-guide-dismiss:hover { border-color: var(--ink); background: #f4f5f7; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.account-control { position: relative; }
.account-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.account-trigger:hover,
.account-trigger:focus-visible { background: #f4f5f7; }
.account-copy { display: grid; gap: 2px; line-height: 1.15; }
.account-copy strong { font-size: 13px; }
.account-copy small { color: var(--muted); font-size: 11px; }
.account-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  width: min(280px, calc(100vw - 32px));
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 14px 32px rgba(17, 19, 24, .15);
}
.account-control.open .account-menu { display: grid; }
.account-menu > span { padding: 4px 6px 9px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.account-menu button {
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.account-menu button:hover,
.account-menu button:focus-visible { background: #f4f5f7; }
select:not([multiple]) { min-height: 52px; padding: 10px 42px 10px 14px; font-size: 16px; line-height: 1.35; }
select:not([multiple]) option { color: var(--ink); background: #fff; font-size: 16px; line-height: 1.4; }
@media (max-width: 540px) {
  .install-guide { padding: 14px 18px; }
  .install-guide strong { font-size: 17px; }
  .install-guide p { font-size: 14px; }
  select:not([multiple]) { min-height: 54px; font-size: 17px; }
  select:not([multiple]) option { font-size: 17px; }
  .topbar .account-trigger .avatar { display: grid; }
  .account-copy { display: none; }
  .account-trigger { padding: 2px; }
}