/* ==========================================================================
   Site detail
   The case page's anatomy, filled differently. A case is thirty fields and one
   doctor; a site is four lines of address and a roomful of people — so the rail
   takes the record and the reading column takes the people. Everything structural
   (.case-page, .case-sticky, .modal-hero, .case-upper, .case-rail) comes from
   request-detail.css; this file only says what is different.
   ========================================================================== */

/* No species watermark to clear, so the hero starts where the page does. The case
   page's 7.75rem left padding is room for a glyph this page doesn't have. */
.site-hero { padding-left: 2rem; }

/* A mark, not a logo. Rounded square rather than the circle a person gets — a site
   is a place, and the app's discs all mean "someone". */
.site-mark {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 14px;
    background: var(--liu-blue-light);
    color: var(--liu-blue-dark);
}

.site-mark .rzi { font-size: 1.7rem; }

/* The rail's blocks sit at the top rather than spreading: this rail is a short list
   of facts, and the case page's floor-pinned last block would strand the gap in the
   middle of it. */
.site-rail .case-rail-inner { justify-content: flex-start; }
.site-rail .case-rail-inner > .rail-block + .rail-block:last-child { margin-top: 1.5rem; }

/* The block's own title, in place of the caption that used to sit above it. Reads as a
   heading rather than a field label — it is the one thing on the page that names what the
   rail is about, so it carries the weight the removed cap was borrowing. */
.site-rail-name {
    margin: 0;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}

/* ---- the people, in the reading column ---- */
.site-people { padding: 1.5rem 2rem 2rem; }

/* Two lists side by side, not one list with a role column. The two roles can do
   different things, and which list someone is in is the fact being managed. */
/* Two role lists, told apart by a rule rather than by distance alone. At a 2rem gap the two
   columns read as one wide list with a wobble in the middle — a manager's row and a staff row
   line up horizontally and the eye tracks across them instead of down. The line is what says
   "these are two lists"; the wider gutter is what stops the line feeling tight. */
.site-roles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 3rem;
    position: relative;
}

/* On the gap, not on a column — a border on the left column would sit against its content at
   whatever width the names happen to need. */
.site-roles::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 0.5px);
    width: 1px;
    background: var(--border-subtle);
}

/* One column on a narrow container, where a vertical rule between stacked lists would be a
   line down the middle of nothing. */
@container (max-width: 46rem) {
    .site-roles::before { display: none; }
}

/* Container query, not a viewport one: the column is the window minus a 22rem rail,
   so a viewport breakpoint is always guessing at the number that matters. */
@container (max-width: 46rem) {
    .site-roles { grid-template-columns: minmax(0, 1fr); }
}

.site-role { min-width: 0; }

.site-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Each person in their own tile, the same shape the case page draws its assignee in — a
   person should look like a person wherever the app shows one. Filled rather than bordered:
   the tint alone says "one person", and eight outlines stacked in a half-width column is a
   lot of line for what is a list of names. */
.site-member {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    background: var(--surface-sunken);
}

.site-member-who { flex: 1; min-width: 0; }

.site-member-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    line-height: 1.25;
}

/* Machine-length addresses in a half-column: truncate rather than wrap, and keep the
   whole thing on the row's title so it can still be read. */
.site-member-mail {
    font-size: 0.74rem;
    color: var(--text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Added, but can't sign in yet — the difference between "we set them up" and "they
   can use it", which is exactly the thing an admin is chasing on this page. */
.site-pending {
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--status-warning) 16%, #fff);
    color: var(--status-warning-text);
    font-size: 0.6rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-uppercase);
    vertical-align: middle;
}

/* Three buttons on every row is the loudest thing in a list of names, and the names are the
   content. They fade in on approach — still keyboard-reachable, since focus-within counts. */
.site-member-act {
    display: flex;
    gap: 0.25rem;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.site-member:hover .site-member-act,
.site-member:focus-within .site-member-act { opacity: 1; }

/* Touch has no hover, so there they simply stay. */
@media (hover: none) {
    .site-member-act { opacity: 1; }
}

/* Quiet until approached — three actions on every row would otherwise be the loudest
   thing in a list of names, and the names are the content. */
.site-act {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-base);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-act:hover { color: var(--text-primary); border-color: var(--border-strong); }
.site-act--bad:hover { color: var(--status-danger); border-color: var(--status-danger); }
.site-act .rzi { font-size: 0.95rem; }

/* ===== The site's own details, in the rail =====
   It was four lines at one weight, one colour and one size — an address, a phone and an email
   with nothing to tell them apart, and the two halves of the address as far from each other as
   they were from the phone. Now: a glyph per kind, the address as one thing, the two contacts
   behaving like the links they always looked like, and the same generous line spacing the flat
   version had — the grouping is what was missing, not the room. */

/* The site's name is this block's title — it replaced the caption that used to sit above it,
   so it has to read as a heading rather than as the first line of the list under it. A rule
   under the head is what makes the difference: without it the name and the facts are one
   stack of text with a bold line on top. */
.site-facts-block .rail-head {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-subtle);
}

.site-facts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

/* Values sit against their mark, not against the far edge. The names here collided with an
   older label-left/value-right rule group that owned them first, whose space-between and
   text-align:right opened a channel of dead white between the icon and the text. */
.site-fact {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
    font-size: var(--text-xs);
    color: var(--text-subtle);
    text-align: left;
}

/* A glyph per kind. The block holds two different things — where the site is, and how to
   reach it — and in a column this narrow the icon is the cheapest way to say which is which
   without spending a third of the width on a written label. */
.site-fact > .rzi {
    flex: 0 0 auto;
    margin-top: 0.02rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* The label the icon replaced. Kept in the markup for screen readers to reach later; nothing
   draws it today. */
.site-fact-k { display: none; }

.site-fact-v {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

a.site-fact-v {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.site-fact-v:hover { text-decoration: underline; }

/* Phone and email are anchors, and now look it. They already read as links — --text-subtle is
   a slate blue — without behaving like ones, which is a promise the block wasn't keeping. */
a.site-fact-v { color: var(--liu-blue-dark); }

/* Two lines of ONE address, so they sit close. They used to be as far apart as the phone is
   from the email, which is what made four facts out of three and flattened the whole block —
   but tight enough to touch reads as a wrap rather than a pair, so they keep a little air. */
.site-addr-line + .site-addr-line { margin-top: 0.2rem; }

/* ---- the foot band ----
   Its own class rather than the case page's .case-activity, which is a 2fr/1fr grid:
   the table would stop two thirds of the way across and leave a third of the band empty. */
/* Nothing on the left now, so the link sits on the right alone — the row survives as a
   row because the table below still wants a control above it. */
.site-band-head { margin-bottom: 0.6rem; }

.site-band {
    padding: 1.4rem 2rem 2.5rem;
    border-top: 1px solid var(--border-default);
    background: var(--surface-base);
}

.site-cases {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.site-cases th {
    text-align: left;
    padding: 0.45rem 0.6rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-uppercase);
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border-default);
}

.site-cases td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.site-cases tr:last-child td { border-bottom: 0; }

.site-case-link {
    font-weight: var(--weight-semi);
    color: var(--liu-blue-dark);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.site-case-link:hover { text-decoration: underline; }

/* One column on a narrow window: the rail is facts, and facts read fine above the
   people when there isn't room beside them. */
@media (max-width: 62rem) {
    .site-people { padding: 1.25rem 1.25rem 1.75rem; }
    .site-band { padding: 1.25rem 1.25rem 2rem; }
}



/* ===== The rail's caseload =====
   A narrow column reads down, not across, so the stages are rows: name left, count right —
   the same shape the site's own facts use in the block below, which is what makes the two
   blocks read as one rail rather than as a chart sitting above a list. */
.site-pipe-block { padding-bottom: 0.25rem; }

.site-stage {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    /* No rule between stages. The rail was seven hairlines in a 22rem column — one under
       every stage, one over the exits, one under the block's head — so the device that is
       supposed to say "a new section starts here" was also saying "a new row starts here",
       and a reader can't tell which boundaries matter when they all look the same. The stage
       name and its count already sit on their own line at opposite edges; they don't need a
       line under them as well. Rules now separate GROUPS only. */
    padding: 0.42rem 0.15rem;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.site-stage:hover { background: var(--surface-raised); }
.site-stage[disabled] { cursor: default; }
.site-stage[disabled]:hover { background: none; }

.site-stage-l {
    font-size: 0.72rem;
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-uppercase);
    color: var(--text-subtle);
}

/* The count in its own small tinted box — the dashboard's pipeline tile, shrunk to fit a
   list row. Ground, edge and ink all come from the .tone-* class on the row, which is the
   same source the dashboard tiles and the status pills read, so a stage is one colour
   everywhere rather than three rules that agree until one of them is edited.

   Fixed minimum width so the boxes line up down the right edge whether the number is 3 or
   30 — a ragged column of boxes reads as a mistake in a way ragged text doesn't. */
.site-stage-n {
    min-width: 2rem;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    background: var(--tone-bg);
    border: 1px solid var(--tone-edge);
    color: var(--tone-ink);
    font-size: 0.82rem;
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* A stage nobody has reached is a fact, not a state — so it loses the tint and keeps only
   the outline. Six filled boxes when five of them say zero is a lot of colour for very
   little news. */
.site-stage-n:empty,
.site-stage--none .site-stage-n {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-subtle);
}

/* The three exits, quietly.
   A hold is a pause on whatever stage a case is already at and the other two are ways off
   the line — worth stating, not worth competing with the six stages above for attention.
   So: sentence case rather than the stages' small caps, regular weight rather than semi,
   and a dot at a fraction of its colour's strength. The stages are what you read on every
   visit; these are what you check occasionally, and the type says which is which before
   any of it is read. */
.site-exits {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border-subtle);
}

/* A button, like the stages above: these are counts of this site's cases, so each one is a
   way into the cases it counts. Everything a button brings with it has to be undone first —
   the browser's own background, border, font and centring — or the row stops matching the
   stage rows it sits under. */
.site-exit {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.26rem 0.15rem;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.site-exit:hover { background: var(--surface-raised); }
.site-exit[disabled] { cursor: default; }
.site-exit[disabled]:hover { background: none; }

.site-exit-l {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.72rem;
    color: var(--text-subtle);
}

/* Mixed into white rather than used at strength: enough to tell amber from red at 5px,
   not enough to pull the eye down here from the stages. */
.site-exit-l::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateY(-1px);
    background: var(--border-strong);
}

.site-exit--warn .site-exit-l::before { background: color-mix(in srgb, var(--status-warning) 65%, #fff); }
.site-exit--bad  .site-exit-l::before { background: color-mix(in srgb, var(--status-danger) 55%, #fff); }

/* The same box as a stage's count, with the skin taken off — min-width, padding, border and
   centring all matched, only transparent. The exits' numbers were plain text flush to the
   right edge while the stages' sit centred inside a 2rem pill, so the two columns of digits
   were out by the pill's padding and border and the rail read as slightly broken. */
.site-exit-n {
    min-width: 2rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid transparent;
    text-align: center;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}