/* Appointments — compact internal operations UI */
.hub-appointments{min-width:0;color:#0f1b32}.hap{display:grid;gap:18px}.hap .hub-btn{min-height:44px}.hap-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}.hap-intro h2{font:800 25px/1.15 Manrope,Inter,sans-serif;margin:0 0 4px}.hap-intro p{margin:0;color:#5f708b}.hap-intro>.hub-btn,.hap-intro-actions{flex:0 0 auto}.hap-intro-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hap-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #dbe4ef;border-radius:18px;background:#fff;overflow:hidden}.hap-summary article{padding:17px 20px;display:grid;gap:4px;border-left:1px solid #e6edf5;min-width:0}.hap-summary article:first-child{border-left:0}.hap-summary span{color:#63748f;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.035em}.hap-summary strong{font:800 27px/1 Manrope,Inter,sans-serif}.hap-summary small{color:#667892;font-size:12px}
.hap-tabs{display:flex;gap:4px;border-bottom:1px solid #d8e2ee;overflow-x:auto;scrollbar-width:none}.hap-tabs button{min-height:44px;padding:0 16px;border:0;border-bottom:3px solid transparent;background:transparent;color:#4f6078;font-weight:750;white-space:nowrap}.hap-tabs button.is-active{color:#087e75;border-bottom-color:#0d9488}.hap-tabs button:focus-visible,.hap-mode button:focus-visible{outline:3px solid #145fc5;outline-offset:2px}
.hap-panel,.hap-subpanel{background:#fff;border:1px solid #dbe4ef;border-radius:18px;padding:20px;min-width:0}.hap-subpanel{margin-top:22px;border-radius:14px}.hap-notice{padding:12px 15px;border-left:4px solid #0d9488;border-radius:8px;background:#ecfdf8;color:#105f59;font-weight:650}
.hap-filters,.hap-context-select{display:grid;grid-template-columns:repeat(4,minmax(145px,1fr));gap:12px;margin-bottom:18px}.hap-context-select{grid-template-columns:repeat(2,minmax(190px,300px))}.hap-filters label,.hap-context-select label,.hap-blockout-form label,.hap-range label{display:grid;gap:6px;color:#53647e;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.035em}.hap-filters select,.hap-context-select select,.hap-blockout-form input,.hap-blockout-form select,.hap-range input{min-height:44px;width:100%;border:1px solid #cad6e5;border-radius:10px;background:#fff;padding:0 12px;color:#0f1b32;font:500 14px Inter,sans-serif}.hap-filters select:focus,.hap-context-select select:focus,.hap-blockout-form input:focus,.hap-blockout-form select:focus,.hap-range input:focus{outline:3px solid #9dd7ff;outline-offset:1px;border-color:#1468aa}
.hap-calendar-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.hap-date-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hap-date-nav strong{margin-left:6px}.hap-mode{display:flex;border:1px solid #cbd8e7;border-radius:10px;padding:3px}.hap-mode button{min-height:44px;padding:0 14px;border:0;border-radius:7px;background:#fff;color:#50617a;font-weight:750}.hap-mode button.is-active{background:#0b4a68;color:#fff}
.hap-calendar-grid{display:grid;grid-template-columns:72px repeat(4,minmax(0,1fr));border:1px solid #dbe4ef;border-radius:12px;overflow:hidden}.hap-calendar-day{grid-template-columns:72px minmax(0,1fr)}.hap-grid-corner,.hap-day-head{min-height:60px;background:#f4f7fb;border-bottom:1px solid #dbe4ef;padding:10px}.hap-grid-corner{display:grid;place-items:center;color:#667892;font-size:11px;font-weight:800;text-transform:uppercase}.hap-day-head{display:grid;align-content:center;border-left:1px solid #dbe4ef}.hap-day-head span{font-size:11px;color:#667892;text-transform:uppercase;font-weight:800}.hap-day-head strong{font-size:13px}.hap-time-label{min-height:52px;padding:9px 8px;text-align:right;color:#687991;font-size:11px;border-bottom:1px solid #edf1f6;background:#fbfcfe}.hap-time-cell{min-height:52px;border-left:1px solid #e7edf4;border-bottom:1px solid #edf1f6;padding:3px;min-width:0}.hap-time-cell .hap-appointment-card{padding:6px;border-radius:7px;border-left-width:3px;display:block}.hap-time-cell .hap-card-time{display:flex;justify-content:space-between}.hap-time-cell .hap-card-time strong{font-size:11px}.hap-time-cell .hap-card-time span,.hap-time-cell .hap-card-main span,.hap-time-cell .hap-card-flags,.hap-time-cell .hub-btn{display:none}.hap-time-cell .hap-card-main strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hap-time-cell .hap-appointment-card{min-height:44px}
.hap-appointment-card{display:grid;grid-template-columns:86px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid #dce5ef;border-left:4px solid #0d9488;border-radius:11px;background:#fff;min-width:0}.hap-appointment-card[data-status="cancelled"]{border-left-color:#8a99ad}.hap-appointment-card[data-status="no_show"]{border-left-color:#c44d36}.hap-appointment-card[data-status="completed"]{border-left-color:#24724d}.hap-card-time,.hap-card-main{display:grid;gap:2px;min-width:0}.hap-card-time strong{font-size:14px}.hap-card-time span,.hap-card-main span,.hap-card-main small{color:#667892;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hap-card-main>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hap-card-flags{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* History is an audit surface, not a work queue. A quiet neutral band says so
   once at the top rather than restyling every row, so the table stays identical
   to Upcoming and a status pill keeps meaning exactly what it means elsewhere. */
.hap-panel-history .hap-history-note{margin:0 0 14px;padding:10px 13px;border-left:4px solid #8a99ad;border-radius:8px;background:#f4f6f9;color:#53647e;font-size:13px}
/* An issue row now carries two actions. They stack on narrow screens rather
   than squeezing, so neither control loses its 44px touch target. */
.hap-issue-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:600px){.hap-issue-actions{width:100%;justify-content:flex-start}.hap-issue-actions .hub-btn{flex:1 1 auto}}
/* The calendar card is a real <button>, so it needs the UA button styling reset
   back to the card look. Hover and focus are deliberate and visible: the card is
   now the control, and a control that does not say so is a trap. */
.hap-card-button{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;-webkit-appearance:none;appearance:none}
.hap-card-button:hover{border-color:#9db8d6;background:#f6faff}
.hap-card-button:focus-visible{outline:3px solid #145fc5;outline-offset:2px}
@media(prefers-reduced-motion:no-preference){.hap-card-button{transition:background .12s ease,border-color .12s ease}}
/* Appointments already booked onto a closed day. Named above the grid rather
   than given a column, using the warning tokens already in this sheet. */
.hap-closed-days{border:1px solid #f0dfae;border-left:4px solid #d68a00;border-radius:10px;background:#fff9e9;color:#684f0d;padding:12px 15px;display:grid;gap:10px}
.hap-closed-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hap-closed-head p{margin:0;font-size:13px}
.hap-closed-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hap-closed-list li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #f0dfae;border-radius:9px;padding:8px 10px;flex-wrap:wrap}
.hap-closed-when{display:grid;gap:1px}
.hap-closed-when strong{font-size:13px;color:#0f1b32}
.hap-closed-when span{font-size:12px;color:#667892}
.hap-closed-who{flex:1;min-width:0;font-size:13px;font-weight:700;color:#0f1b32;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hap-status,.hap-linkage{display:inline-flex;align-items:center;gap:5px;width:max-content;border-radius:999px;padding:4px 8px;background:#e7f8f1;color:#16664a;font-size:11px;font-weight:800;white-space:nowrap}.hap-status-cancelled,.hap-status-cancelled span{background:#eef2f6;color:#55657a}.hap-status-no_show{background:#fff0ed;color:#9b3020}.hap-status-completed,.hap-status-sent{background:#eaf7ef;color:#17673d}.hap-status-failed,.hap-status-ambiguous{background:#fff0ed;color:#9b3020}.hap-status-pending,.hap-status-processing{background:#fff7de;color:#775b09}.hap-linkage{background:#edf3ff;color:#285ea7}.hap-linkage-guest{background:#f4f1fb;color:#67548d}
.hap-agenda,.hap-list-cards{display:none}.hap-table-wrap{overflow-x:auto}.hap-table{width:100%;border-collapse:collapse}.hap-table th{text-align:left;padding:10px 9px;color:#63748f;background:#f5f8fb;border-bottom:1px solid #dbe4ef;font-size:11px;text-transform:uppercase;letter-spacing:.035em}.hap-table td{padding:12px 9px;border-bottom:1px solid #e6edf5;vertical-align:middle;font-size:13px}.hap-table tr:last-child td{border-bottom:0}.hap-table td:first-child{white-space:nowrap}.hap-table .hub-btn{min-height:44px}
.hap-pagination{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:16px 0 2px;color:#52637c;font-size:13px}.hap-pagination .hub-btn{min-width:110px}
.hap-state{min-height:230px;display:grid;place-items:center;align-content:center;text-align:center;padding:30px;color:#596b84}.hap-state-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#e9f8f5;color:#087e75;font-size:22px;font-weight:800}.hap-state h3{margin:12px 0 4px;color:#142139}.hap-state p{max-width:48ch;margin:0 0 14px}.hap-empty-inline{margin:12px 0;color:#687991}
.hap-term{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#dbe4ef;border:1px solid #dbe4ef;border-radius:12px;overflow:hidden;margin-bottom:22px}.hap-term>div{background:#f8fafc;padding:16px;display:grid;gap:3px}.hap-term span{font-size:11px;text-transform:uppercase;color:#667892;font-weight:800}.hap-term small{color:#667892}.hap-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.hap-section-head h3{margin:0 0 3px;font-size:17px}.hap-section-head p{margin:0;color:#667892;font-size:13px}
.hap-calendar-state{align-content:start}.hap-calendar-state[data-calendar-status="connected"]{box-shadow:inset 4px 0 #169c75}.hap-calendar-state[data-calendar-status="reconnect_required"],.hap-calendar-state[data-calendar-status="error"]{box-shadow:inset 4px 0 #d58a00}.hap-calendar-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.hap-calendar-actions .hub-btn{min-height:44px}
.hap-week-editor{border-top:1px solid #e1e8f1}.hap-week-editor fieldset{display:grid;grid-template-columns:120px minmax(0,1fr) 145px;gap:14px;align-items:start;border:0;border-bottom:1px solid #e6edf5;padding:14px 0;margin:0;min-width:0}.hap-week-editor legend{float:left;width:120px;padding-top:12px;font-weight:800}.hap-day-ranges{display:grid;gap:8px}.hap-range{display:grid;grid-template-columns:minmax(105px,150px) 12px minmax(105px,150px) 44px;gap:8px;align-items:end}.hap-range label span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.hap-icon-btn,.hap-dialog-close{min-width:44px;min-height:44px;border:1px solid #cad6e5;border-radius:9px;background:#fff;color:#53647e;font-size:20px}.hap-unavailable{margin:13px 0;color:#74839a}
.hap-blockout-form{display:grid;grid-template-columns:1.15fr 1fr .8fr .8fr 1.5fr auto;gap:10px;align-items:end}/* The request form carries one more field than the supervisor's direct form: a short reason AND the consultant's own note, which the queue shows separately. */[data-hap-request-form]{grid-template-columns:1fr .9fr .7fr .7fr 1.1fr 1.3fr auto}.hap-conflict{margin:16px 0;padding:16px;border:1px solid #e7b74c;border-left:4px solid #d68a00;border-radius:10px;background:#fff9e9;color:#684f0d}.hap-conflict ul{margin:8px 0 12px;padding-left:20px}.hap-check{display:flex;align-items:flex-start;gap:8px;margin:10px 0}.hap-check input{width:20px;height:20px}.hap-overrides{display:grid;gap:8px;margin-top:16px}.hap-overrides article{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;border:1px solid #e0e8f1;border-radius:10px}.hap-overrides article>div{display:grid;gap:2px}.hap-overrides span,.hap-overrides small{color:#64748b;font-size:12px}.hap-conflict-count{padding:5px 8px;border-radius:999px;background:#fff1d6;color:#74530a!important;font-weight:800;white-space:nowrap}
.hap-skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}.hap-skill-option{display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid #dbe4ef;border-radius:10px}.hap-skill-option input{width:20px;height:20px;margin-top:1px}.hap-skill-option span,.hap-skill-list span{display:grid;gap:2px}.hap-skill-option small,.hap-skill-list small{color:#667892}.hap-skill-list{display:flex;flex-wrap:wrap;gap:10px}.hap-skill-list>span{min-width:190px;padding:13px 15px;border:1px solid #cfe6e0;border-radius:10px;background:#f4fbf9}
.hap-dialog-scrim{position:fixed;inset:0;z-index:1200;background:rgba(5,20,38,.58);display:flex;justify-content:flex-end}.hap-dialog{width:min(580px,100%);height:100%;overflow:auto;background:#fff;box-shadow:-18px 0 50px rgba(6,24,45,.18);padding:22px;display:flex;flex-direction:column;gap:20px}.hap-dialog>header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #e1e8f1;padding-bottom:14px}.hap-dialog header span{font-size:11px;text-transform:uppercase;color:#667892;font-weight:800}.hap-dialog h2{margin:3px 0 0;font-size:24px}.hap-detail-status{display:flex;gap:8px}.hap-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}.hap-detail-grid div{border-bottom:1px solid #e8edf4;padding-bottom:10px}.hap-detail-grid dt{font-size:11px;text-transform:uppercase;color:#667892;font-weight:800}.hap-detail-grid dd{margin:4px 0 0;font-weight:650;overflow-wrap:anywhere}.hap-dialog section h3{font-size:15px;margin:0 0 7px}.hap-dialog section p{margin:0;color:#586a83}.hap-timeline,.hap-comms{list-style:none;padding:0;margin:0;display:grid;gap:8px}.hap-timeline li,.hap-comms li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e8edf4}.hap-timeline span{color:#667892;font-size:12px}.hap-dialog footer{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #e1e8f1;padding-top:16px}.hub-btn-danger{color:#9b3020;border-color:#e8b6ae;background:#fff}
/* Reschedule panel. Lives inside the same 580px drawer as the appointment detail,
   so the week is four narrow day columns and the times wrap inside each one rather
   than a calendar grid that would have to scroll sideways. Only Monday to Thursday
   is ever drawn -- the Hub's operating days -- and the server is what decides which
   of those actually carry times. */
.hap-resched{display:grid;gap:16px}
.hap-resched-current{margin:0;color:#334660;font-weight:650}
.hap-resched-week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
.hap-resched-day{min-width:0}
.hap-resched-day h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#667892;font-weight:800}
.hap-resched-slots{display:grid;gap:6px}
.hap-resched-slot{min-height:44px;padding:0 6px;border:1px solid #cad6e5;border-radius:9px;background:#fff;color:#23324a;font-weight:700;font-size:13px}
.hap-resched-slot:hover{border-color:#0b4a68}
/* Selection is a border and a fill, never colour alone: aria-pressed carries it for
   a screen reader and the weight change carries it without colour. */
.hap-resched-slot.is-picked{background:#0b4a68;border-color:#0b4a68;color:#fff;font-weight:800}
.hap-resched .hap-unavailable{margin:0;font-size:12px}
/* The week stepper sits in a 580px drawer, not the full-width calendar toolbar it was
   built for. Without this it wraps and the two arrows end up on separate lines with the
   date range stranded between them. */
.hap-resched .hap-section-head{align-items:flex-start;gap:12px}
.hap-resched .hap-date-nav{flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap}
.hap-resched .hap-date-nav strong{margin-left:0;font-size:13px}
@media(max-width:600px){.hap-resched-week{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){.hap-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-blockout-form{grid-template-columns:repeat(3,minmax(0,1fr))}.hap-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-calendar-grid{grid-template-columns:62px repeat(4,minmax(0,1fr))}.hap-time-cell .hap-appointment-card{padding:4px}.hap-time-cell .hap-card-main strong{font-size:10px}}
@media(max-width:900px){.hap-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-summary article:nth-child(3){border-left:0;border-top:1px solid #e6edf5}.hap-summary article:nth-child(4){border-top:1px solid #e6edf5}.hap-calendar-grid{display:none}.hap-agenda{display:grid;gap:18px}.hap-agenda section{display:grid;gap:8px}.hap-agenda h3{margin:0;font-size:15px}.hap-week-editor fieldset{grid-template-columns:105px minmax(0,1fr)}.hap-week-editor fieldset>.hub-btn{grid-column:2}.hap-table-wrap{display:none}.hap-list-cards{display:grid;gap:14px}.hap-list-date{display:block;margin:0 0 6px;font-weight:800}.hap-blockout-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hap{gap:14px}.hap-intro h2{font-size:22px}.hap-summary{grid-template-columns:1fr 1fr}.hap-summary article{padding:14px}.hap-summary strong{font-size:23px}.hap-panel,.hap-subpanel{padding:14px;border-radius:14px}.hap-filters,.hap-context-select{grid-template-columns:1fr}.hap-calendar-tools{align-items:flex-start;flex-direction:column}.hap-date-nav strong{width:100%;margin:2px 0 0}.hap-appointment-card{grid-template-columns:74px minmax(0,1fr) auto;gap:8px}.hap-appointment-card>.hub-btn{grid-column:1/-1;width:100%}.hap-card-flags{grid-column:2/4;justify-content:flex-start}.hap-term{grid-template-columns:1fr}.hap-week-editor fieldset{display:block}.hap-week-editor legend{float:none;width:auto;padding:0 0 8px}.hap-week-editor fieldset>.hub-btn{margin-top:8px}.hap-range{grid-template-columns:1fr 10px 1fr 44px}.hap-blockout-form{grid-template-columns:1fr}.hap-skill-grid{grid-template-columns:1fr}.hap-detail-grid{grid-template-columns:1fr}.hap-dialog{padding:16px}.hap-overrides article{align-items:flex-start;flex-wrap:wrap}.hap-overrides article .hub-btn{width:100%}}
@media(max-width:360px){.hap-summary{grid-template-columns:1fr}.hap-summary article{border-left:0!important;border-top:1px solid #e6edf5}.hap-summary article:first-child{border-top:0}.hap-appointment-card{grid-template-columns:1fr}.hap-card-flags{grid-column:auto}.hap-range{grid-template-columns:1fr 10px 1fr}.hap-range .hap-icon-btn{grid-column:1/-1;width:100%}}
@media(prefers-reduced-motion:reduce){.hap *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.hap-tabs,.hap-filters,.hap-calendar-tools .hub-btn,.hap-mode,.hap-dialog-scrim,.hap-intro>.hub-btn,.hap-intro-actions,.hap-request-actions{display:none!important}.hap-panel{border:0;padding:0}.hap-calendar-grid{display:none}.hap-agenda{display:grid}.hap-summary{break-inside:avoid}.hap-appointment-card{break-inside:avoid}}

/* Communication issues panel (read-only).
   Three states share one block: healthy, unavailable, and needs-attention. The
   healthy and unavailable states are deliberately quiet -- a Hub with no issues
   must not look alarmed, and a failed advisory request is not an incident. */
.hap-issues { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 10px; font-size: .9rem; }
.hap-issues p { margin: 0; }
.hap-issues-ok { background: var(--hub-surface-2, #f5f6f8); color: var(--hub-ink-2, #55606e); }
.hap-issues-muted { background: var(--hub-surface-2, #f5f6f8); color: var(--hub-ink-3, #6b7684); font-style: italic; }
.hap-issues-warn { background: #fff6e5; border: 1px solid #f0c675; color: #6b4a06; }
.hap-issues-warn > header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.hap-issues-warn > header span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hap-issues-warn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hap-issues-warn li { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                      background: #fff; border-radius: 8px; padding: .5rem .75rem; }
.hap-issues-warn li > div { display: grid; gap: .1rem; min-width: 0; }
.hap-issues-warn li strong { font-size: .9rem; }
.hap-issues-warn li span, .hap-issues-warn li small { color: var(--hub-ink-2, #55606e); }
.hap-issues-warn li small { font-size: .78rem; }
@media (max-width: 640px) {
  .hap-issues-warn li { flex-direction: column; align-items: stretch; }
}

/* Supervisor manual booking + consultant availability requests.
   Two screens, one visual language: the request queue reuses the override card
   shape already on the Availability tab so a supervisor reads both the same way,
   and the override warning reuses the conflict banner that already means
   "this is allowed, but say so on purpose". */
.hap-tab-badge { display: inline-block; margin-left: .45rem; padding: .1rem .45rem; border-radius: 999px;
                 background: #fff1d6; color: #74530a; font-size: 11px; font-weight: 800;
                 font-variant-numeric: tabular-nums; }
.hap-tabs button.is-active .hap-tab-badge { background: #d9f2ee; color: #0b5a52; }

/* New appointment dialog */
.hap-new form { display: grid; gap: 18px; }
.hap-new-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hap-new-grid label, .hap-new-note, .hap-override label { display: grid; gap: 6px; color: #53647e;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.hap-new-grid input, .hap-new-grid select, .hap-new-note textarea, .hap-override input[type="text"] {
  width: 100%; min-height: 44px; border: 1px solid #cad6e5; border-radius: 10px; background: #fff;
  padding: 10px 12px; color: #0f1b32; font: 500 14px Inter, sans-serif; }
.hap-new-note textarea { min-height: 76px; resize: vertical; }
.hap-new-grid input:focus, .hap-new-grid select:focus, .hap-new-note textarea:focus,
.hap-override input:focus { outline: 3px solid #9dd7ff; outline-offset: 1px; border-color: #1468aa; }
.hap-new-topics { border: 1px solid #e1e8f1; border-radius: 12px; padding: 14px; margin: 0; }
.hap-new-topics legend { padding: 0 6px; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .035em; color: #53647e; }
.hap-new-hint { margin: 0 0 10px; color: #667892; font-size: 12px; }
.hap-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hap-topic { display: grid; gap: 2px; align-content: center; min-height: 44px; padding: 8px 12px;
  text-align: left; border: 1px solid #dbe4ef; border-radius: 10px; background: #fff; color: #0f1b32; }
.hap-topic strong { font-size: 13px; font-weight: 700; }
.hap-topic small { color: #667892; font-size: 11px; }
.hap-topic.is-picked { border-color: #0d9488; background: #f2fbf9; box-shadow: inset 3px 0 #0d9488; }
.hap-topic:focus-visible { outline: 3px solid #145fc5; outline-offset: 2px; }

/* The override warning. Deliberately the same amber as the blockout conflict
   banner: both mean "the Hub cannot confirm this for you -- confirm it
   yourself". It never claims the Google data is fine. */
.hap-override { padding: 16px; border: 1px solid #e7b74c; border-left: 4px solid #d68a00;
  border-radius: 10px; background: #fff9e9; color: #684f0d; display: grid; gap: 10px; }
.hap-override strong { font-weight: 800; line-height: 1.45; }
.hap-override label:not(.hap-check) { color: #684f0d; }

/* Availability request queue */
.hap-requests { display: grid; gap: 10px; }
.hap-request { display: grid; gap: 8px; padding: 14px; border: 1px solid #e0e8f1; border-radius: 12px;
  background: #fff; }
.hap-request-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.hap-request-head > div { display: grid; gap: 2px; min-width: 0; }
.hap-request-head strong { font-size: 14px; }
.hap-request-head span { color: #64748b; font-size: 12px; }
.hap-request-status { flex: 0 0 auto; align-self: flex-start; border-radius: 999px; padding: 4px 10px;
  font-size: 11px; font-weight: 800; white-space: nowrap; background: #eef2f6; color: #55657a; }
.hap-request-pending { background: #fff7de; color: #775b09; }
.hap-request-approved { background: #eaf7ef; color: #17673d; }
.hap-request-rejected { background: #fff0ed; color: #9b3020; }
.hap-request-reason { margin: 0; font-weight: 700; font-size: 13px; }
.hap-request-note { margin: 0; color: #44546b; font-size: 13px; overflow-wrap: anywhere; }
.hap-request-meta { margin: 0; color: #687991; font-size: 12px; }
.hap-request-meta strong { color: #74530a; }
.hap-request-actions { display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid #eef2f7; padding-top: 12px; }
.hap-request-actions label:not(.hap-check) { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0;
  color: #53647e; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.hap-request-actions input[type="text"] { width: 100%; min-height: 44px; border: 1px solid #cad6e5;
  border-radius: 10px; padding: 0 12px; font: 500 14px Inter, sans-serif; color: #0f1b32; }
.hap-request-actions input[type="text"]:focus { outline: 3px solid #9dd7ff; outline-offset: 1px;
  border-color: #1468aa; }
.hap-request-actions .hap-check { flex: 1 1 100%; margin: 0; }
.hap-request-actions .hub-btn { min-height: 44px; }

@media (max-width: 640px) {
  .hap-intro-actions { flex: 1 1 100%; width: 100%; justify-content: flex-start; }
  .hap-intro-actions .hub-btn { flex: 1 1 auto; }
  .hap-new-grid, .hap-topic-grid { grid-template-columns: 1fr; }
  .hap-request-head { flex-direction: column; }
  .hap-request-actions .hub-btn { flex: 1 1 auto; }
}

/* A request whose consultant has left the city. The supervisor can still clear
   it -- by rejecting -- and the card says so rather than letting them find out
   by pressing a button that refuses. */
.hap-request-stranded { margin: 0; padding: 10px 12px; border-radius: 8px;
  border-left: 3px solid #d68a00; background: #fff9e9; color: #684f0d; font-size: 13px; }