/* =============================================================================
   hospitals.css — the Hospitals desk's own sheet (labs 561)

   Tokens only. Every colour here is a var() that assets/css/site.css defines
   and assets/css/dark.css redefines, so this one file serves both editions.
   A literal colour in this file is a bug in the dark edition that the paper
   edition cannot show you.

   Class names are all prefixed hs-. site.css owns the short names (.band,
   .console, .field, .btn, .lbl, .hint) and this sheet only places them.

   Phones first: one column, every control at least 44px tall, nothing wider
   than the screen (a table of measures becomes a stack of rows under 46rem).
   Colour is never the only signal: a rating is a number beside its stars, a
   comparison is CMS's own words, a warning carries a bar and says what is wrong.
   ========================================================================== */

.hs-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ the hero */
.hs-disc {
    margin: 1.6rem 0 0; padding: .8rem 1rem; max-width: 46rem;
    border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px;
    font-size: .95rem; line-height: 1.55; color: var(--ink);
}
.hs-fact {
    margin: 2.2rem 0 0; padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    max-width: 46rem;
    font-size: .84rem; line-height: 1.6; color: var(--ink-55);
}

/* ------------------------------------------------------------------ the form */
.hs-stat { margin: 0 0 0 auto; font-size: .78rem; letter-spacing: .04em; color: var(--ink-55); text-align: right; }
.hs-stat--busy { color: var(--ink-77); }
.hs-stat--live { color: var(--free); }
.hs-stat--err  { color: var(--taken); }

.hs-form { display: grid; gap: .8rem; min-width: 0; }
.hs-f { min-width: 0; display: grid; gap: .1rem; align-content: start; }
.hs-inline { display: flex; gap: .5rem; min-width: 0; }
.hs-inline .field { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 48px; }
.hs-go { flex: 0 0 auto; min-height: 48px; white-space: nowrap; }
.hs-btn { min-height: 44px; }
.hs-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-size: .92rem; color: var(--ink-77); cursor: pointer; width: fit-content; max-width: 100%; }
.hs-check input { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.hs-msg {
    margin: 0; padding: .7rem .9rem;
    border: 1px solid var(--taken); border-left-width: 4px; border-radius: 10px;
    background: var(--taken-wash);
    font-size: .88rem; line-height: 1.5; font-weight: 600; color: var(--ink);
}
.hs-msg[hidden], .hs-tray[hidden] { display: none; }
.hs-try { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hs-try__l { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-55); margin-right: .2rem; }
.hs-chip {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    min-height: 44px; padding: 0 .95rem;
    border: 1px solid var(--line); border-radius: 999px; background: transparent;
    font: inherit; font-size: .9rem; color: var(--ink);
}
.hs-chip:hover { border-color: var(--ink); }
.hs-chip:focus-visible, .hs-link:focus-visible, .hs-x:focus-visible, .hs-h:focus-visible, .hs-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 30rem) {
    .hs-inline { flex-wrap: wrap; }
    .hs-go { flex: 1 1 100%; }
}

/* ------------------------------------------------------------ the comparison */
/* The tray is a grid item of the console's body AND a grid of its own: without min-width: 0 and a column that may
   shrink (minmax(0, 1fr)), one hospital's unbroken name becomes the track's minimum and widens the whole desk past a
   phone's edge, where the console clips it (561 review H1). The name ends in an ellipsis instead. */
.hs-tray {
    margin-top: 1rem; padding: .85rem 1rem;
    border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px;
    display: grid; gap: .6rem;
    min-width: 0; grid-template-columns: minmax(0, 1fr);
}
.hs-tray__h { margin: 0; font-size: .92rem; color: var(--ink); }
.hs-tray__h span { color: var(--ink-55); margin-left: .4rem; }
.hs-tray__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hs-tray__list li {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .3rem 0 .8rem;
    border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; color: var(--ink); max-width: 100%;
}
.hs-tray__list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hs-x {
    -webkit-appearance: none; appearance: none; cursor: pointer; flex: 0 0 auto;
    width: 44px; height: 44px; margin: -1px -4px -1px 0; border: 0; border-radius: 999px; background: transparent;
    font: inherit; font-size: 1.25rem; line-height: 1; color: var(--ink-77);
}
.hs-x:hover { color: var(--taken); }
.hs-tray__acts { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hs-btn[disabled] { opacity: .55; cursor: default; }
/* The cue beside the button just pressed: the tray itself sits above the list, far off a phone's screen. */
.hs-cue { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.hs-cue--say { display: block; padding: .2rem 0; font-size: .88rem; line-height: 1.45; color: var(--ink-77); }
.hs-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ------------------------------------------------------------------- results */
.hs-out { margin-top: 1.2rem; min-width: 0; }
.hs-empty { font-size: .95rem; line-height: 1.6; color: var(--ink-77); max-width: 46rem; }
.hs-empty p { margin: 0 0 .6rem; }
.hs-empty ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .3rem; }
.hs-empty b, .hs-defs b { color: var(--ink); }
.hs-wait { margin: 0; padding: 1rem 0; color: var(--ink-77); font-size: .95rem; }
.hs-h { margin: 0 0 .5rem; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.hs-h3 { margin: 1.6rem 0 .5rem; font-size: 1.05rem; line-height: 1.3; color: var(--ink); }
.hs-stamp { margin: .15rem 0; font-size: .8rem; line-height: 1.5; color: var(--ink-55); }
.hs-how { margin: .7rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ink-77); max-width: 52rem; }
.hs-warn {
    margin: .7rem 0; padding: .75rem .95rem;
    border: 1px solid var(--unsure); border-left-width: 4px; border-radius: 10px;
    background: var(--unsure-wash);
    font-size: .9rem; line-height: 1.55; color: var(--ink);
}
.hs-warn p { margin: 0 0 .5rem; }
.hs-warn p:last-child { margin-bottom: 0; }
.hs-fail { display: block; font-size: .86rem; line-height: 1.5; color: var(--ink); border-left: 3px solid var(--taken); padding-left: .55rem; }
.hs-old { display: inline-block; margin-top: .2rem; padding: .05rem .45rem; border: 1px solid var(--unsure); border-radius: 6px; font-size: .74rem; color: var(--ink); }

.hs-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.hs-card, .hs-head {
    min-width: 0; padding: 1.1rem 1.15rem;
    border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
}
.hs-name { margin: 0; font-size: 1.06rem; line-height: 1.3; letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; }
.hs-ord { color: var(--ink-55); font-weight: 500; font-variant-numeric: tabular-nums; }
.hs-addr { margin: .3rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-77); overflow-wrap: anywhere; }
.hs-tel { margin: 0; font-size: .9rem; color: var(--ink-77); }
.hs-tel a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: inherit; text-underline-offset: 3px; }
.hs-dist { white-space: normal; }
.hs-dist b { color: var(--ink); }
.hs-facts { margin: .9rem 0 0; display: grid; gap: .8rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.hs-facts > div { min-width: 0; padding-top: .6rem; border-top: 1px solid var(--line-soft); }
.hs-facts dt { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-55); }
.hs-facts dd { margin: .25rem 0 0; font-size: .93rem; line-height: 1.5; color: var(--ink-77); overflow-wrap: anywhere; }
.hs-facts dd b, .hs-t td b { color: var(--ink); }
.hs-src { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hs-src::before { content: '\00b7\00a0'; }
.hs-rate { display: inline-flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.hs-stars { color: var(--accent); font-size: 1.12rem; letter-spacing: .08em; line-height: 1; }
.hs-foot, .hs-per, .hs-sub, .hs-cmp { display: block; font-size: .8rem; line-height: 1.5; color: var(--ink-55); }
.hs-sub { display: inline; }
.hs-t td .hs-sub, .hs-facts dd > .hs-sub { display: block; }
.hs-cmp { color: var(--ink-77); }
.hs-tally { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.hs-tally span { white-space: normal; }
.hs-card__acts, .hs-head__acts { margin: 1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.hs-more { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.hs-count { margin: 0; font-size: .86rem; color: var(--ink-55); }
.hs-acts { margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.hs-copied { font-size: .82rem; color: var(--ink-77); overflow-wrap: anywhere; min-width: 0; }
.hs-unplaced { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.55; color: var(--ink-77); }
.hs-unplaced p { margin: 0 0 .5rem; }
.hs-unplaced ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .1rem; }
.hs-link {
    -webkit-appearance: none; appearance: none; cursor: pointer; background: none; border: 0; padding: .65rem 0; min-height: 44px;
    font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.hs-ext { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; color: var(--ink); text-underline-offset: 3px; }

/* ---------------------------------------------------- one hospital / side by side */
.hs-back { margin: 0 0 1rem; }
.hs-heads { display: grid; gap: 1rem; margin-top: .8rem; }
.hs-heads .hs-stamp { grid-column: 1 / -1; }
@media (min-width: 60rem) {
    .hs-heads--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-heads--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hs-facts--head { grid-template-columns: 1fr; }
.hs-heads--1 .hs-facts--head { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.hs-col {
    display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin: 0 .2rem 0 0;
    border: 1px solid var(--ink); border-radius: 6px; font-size: .78rem; font-weight: 700; color: var(--ink); vertical-align: middle;
}
p.hs-col { margin: 0 0 .5rem; }
.hs-groups { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: .86rem; line-height: 1.5; color: var(--ink-77); }
.hs-groups b { color: var(--ink); }
.hs-groups .hs-foot { display: inline; }
.hs-sec { margin-top: 2rem; padding-top: .4rem; border-top: 1px solid var(--line); min-width: 0; }
.hs-sec__say { margin: 0 0 .8rem; max-width: 54rem; font-size: .9rem; line-height: 1.6; color: var(--ink-77); }
.hs-tw { min-width: 0; }
.hs-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9rem; line-height: 1.5; color: var(--ink-77); }
.hs-t th, .hs-t td { padding: .7rem .7rem .7rem 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.hs-t thead th { border-top: 0; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-55); font-weight: 600; }
.hs-t tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.hs-t--1 tbody th { width: 38%; }
.hs-id { display: block; margin-top: .15rem; font-size: .72rem; font-weight: 400; letter-spacing: .03em; color: var(--ink-55); }
.hs-verdict { display: block; }
.hs-details { margin-top: 1rem; }
.hs-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: .92rem; font-weight: 600; color: var(--ink); }
.hs-details summary::before { content: '+'; display: inline-block; width: 1.2rem; font-weight: 400; }
.hs-details[open] summary::before { content: '\2212'; }
.hs-details summary::-webkit-details-marker { display: none; }
@media (max-width: 46rem) {
    /* A table of measures as a stack: the measure, then each hospital's cell under its own name. The roles are
       written on the elements, so the table is still a table to a screen reader. */
    .hs-t, .hs-t tbody, .hs-t tr, .hs-t th, .hs-t td { display: block; width: auto; }
    .hs-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
    .hs-t tbody tr { padding: .8rem 0; border-top: 1px solid var(--line); }
    .hs-t tbody th, .hs-t--1 tbody th { width: auto; padding: 0 0 .4rem; border: 0; }
    .hs-t td { padding: .45rem 0 .45rem .8rem; border: 0; border-left: 2px solid var(--line); margin-top: .35rem; }
    .hs-t td::before { content: attr(data-hs-colname); display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-55); }
}

/* ------------------------------------------------------------ reading / method */
.hs-defs { margin: 1.6rem 0 0; display: grid; gap: 1.2rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.hs-defs > div { min-width: 0; padding-top: .9rem; border-top: 1px solid var(--line); }
.hs-defs dt { font-weight: 700; color: var(--ink); }
.hs-defs dd { margin: .35rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink-77); }
.hs-next { margin: 2rem 0 0; max-width: 52rem; font-size: .95rem; line-height: 1.6; color: var(--ink-77); }
.hs-next a, .hs-method a { color: var(--ink); text-underline-offset: 3px; }
.hs-method { margin-top: 1.4rem; display: grid; gap: 0 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); font-size: .95rem; line-height: 1.65; color: var(--ink-77); }
.hs-method > div { min-width: 0; }
.hs-method p { margin: 0 0 .8rem; }
.hs-method b { color: var(--ink); }
.hs-method code { font-size: .86em; overflow-wrap: anywhere; }
.hs-method .hs-h3:first-child { margin-top: .4rem; }
.hs-ul { margin: 0 0 .8rem; padding-left: 1.15rem; display: grid; gap: .35rem; }