/* Kin OS — Home: the dark hero band, the globe, local times and the support line.
 *
 * P7.2 composition, from the reference: the brand chrome continues from the top bar into a
 * hero band that runs the full width of the working column — greeting left, globe and local
 * times right — and the clean white workspace begins beneath it. The hero is the brand's
 * moment; everything after it is operational.
 */

/* Full-bleed inside the padded content column: the hero cancels the column's padding and
   carries its own, so the dark band meets the rails and the window edge with no white seam. */
.kin-hero {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto;
    gap: var(--space-6);
    align-items: center;
    margin: 0 calc(-1 * var(--space-6)) 0;
    /* The same side inset as the working column below, so the greeting starts on the same
       vertical as the first tile and the band reads as one column of content rather than two
       that happen to be stacked (P7.5, second pass). */
    padding: var(--space-6) var(--space-6) var(--space-7);
    background: var(--brand-chrome);
    color: var(--brand-chrome-ink);
}

.kin-hero-text { min-width: 0; }

.kin-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-chrome-muted);
    margin-bottom: var(--space-4);
}

.kin-hero-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 1px;
    background: var(--brand-rail-accent);
}

/* One bold line. Only the final word carries the brand highlighter (P7.2 §22). Set in the
   brand's display face — for HelloKindred that is the licensed Gilroy Display web kit. */
.kin-hero-greeting {
    font-family: var(--brand-font-display);
    font-size: clamp(1.9rem, 1.2rem + 2vw, 2.75rem);
    font-weight: var(--weight-bold);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
    color: var(--brand-chrome-ink);
}

.kin-hero-greeting .kin-hi { font-size: 0.94em; }
/* The highlighter now carries its own right margin, so the full stop needs none of its own. */
.kin-hero-fullstop { margin-left: 0; }

.kin-hero-lede {
    color: var(--brand-chrome-muted);
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 64ch;
    margin: 0;
}

/* ---- The global scene ----------------------------------------------------------------------
 * Globe and clocks side by side on the chrome. The sphere is compact and crisp — no halo, no
 * ground shadow; its dimensionality is its own (P7.2 §25–26). */

/* Globe and clocks read as ONE object (P7.4 §1): a tighter gap between them, and a sphere
   with enough presence to hold the right of the hero instead of floating in it. Still
   compact - it complements the greeting, it does not compete with it. */
/* The globe sits further from the clocks than it did (P7.5, second pass), which moves it left
   off the edge of the screen and into the empty middle of the band. The two were tight against
   each other in the far right corner while half the hero stood empty. */
.kin-presence {
    display: grid;
    grid-template-columns: minmax(150px, 248px) minmax(180px, auto);
    gap: var(--space-8);
    align-items: center;
    justify-content: end;
}

.kin-globe {
    position: relative;
    width: 100%;
    max-width: 248px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kin-globe canvas {
    display: block;
    cursor: grab;
    touch-action: none;
}

.kin-globe canvas.is-dragging { cursor: grabbing; }

.kin-globe-reset {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    min-height: 26px;
    padding: 0.2rem 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    /* Chrome INK at a shallow dip, rather than chrome-muted at a deep one (P15
       §journey-shell-home#12). Opacity composites the label AND its pill onto the chrome
       behind, so a dip costs contrast twice over: muted at 0.42 measured under 2:1 against its
       own ground, and even at full opacity muted on chrome-hover is 3.87-4.20:1 — below AA for
       an 11.5px label. The ink at 0.7 is 6.1:1 or better in all four workspaces. */
    color: var(--brand-chrome-ink);
    background: var(--brand-chrome-hover);
    border: 1px solid var(--brand-chrome-line);
    border-radius: var(--radius-pill);
    cursor: pointer;
    /* Always present, never shouting (P7.5, second pass). It used to appear only once the
       globe had been turned, which is unimpeachable logic and completely undiscoverable: you
       cannot know a control exists until you have already done the thing it undoes. Quiet
       while the sphere faces the Sun, plain once it does not. */
    opacity: 0.7;
    transition: opacity var(--motion) var(--ease), color var(--motion-fast) var(--ease);
}

/* Once the globe has been turned the reset stops being decoration and becomes the way back. */
.kin-globe.is-off-sun .kin-globe-reset,
.kin-globe:hover .kin-globe-reset,
.kin-globe-reset:focus-visible { opacity: 1; }

.kin-globe.is-off-sun .kin-globe-reset {
    color: var(--brand-chrome-ink);
    border-color: var(--brand-chrome-muted);
}

.kin-globe-reset:hover { color: var(--brand-chrome-ink); }

/* ---- Local times ------------------------------------------------------------------------------
 * The date as a small heading; one line per Organization City, each led by a haloed dot; one
 * "+N more cities we work in" line for every supporting City; the reader's own time under a
 * hairline (DEC-P40-003). */

.kin-clocks { min-width: 0; }

.kin-clocks-date {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-chrome-muted);
    margin-bottom: var(--space-3);
    white-space: nowrap;
}

.kin-clock-list { list-style: none; margin: 0; padding: 0; }

.kin-clock {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    padding: 0.16rem 0;
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* THE ROW THAT HOLDS THE DOT MUST NOT CLIP, SO THE ELLIPSIS LIVES ON THE NAME (P40-105 rework).
   This rule used to carry overflow: hidden for the ellipsis, and with it the dot's own container
   cut off everything outside the dot's box — which is exactly where an Organization City's halo
   ring is drawn, so the left of every ring was missing on hosted Home. The name truncates; the
   marker beside it never can. */
.kin-clock-city {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55em;
    min-width: 0;
    color: var(--brand-chrome-muted);
}

.kin-clock-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kin-clock-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-rail-accent);
    flex: none;
    align-self: center;
    transition: background var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}

/* A city on the face of the globe you cannot see has its light switched off — hollowed out
   rather than merely dimmed, so lit and unlit are told apart by shape as well as by
   brightness. clocks.js sets the class from what the globe publishes. */
.kin-clock.is-dark .kin-clock-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--brand-chrome-muted);
}

.kin-clock.is-dark .kin-clock-city,
.kin-clock.is-dark .kin-clock-time {
    color: color-mix(in srgb, var(--brand-chrome-muted) 68%, var(--brand-chrome));
}

.kin-clock-time {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    color: var(--brand-chrome-ink);
}

/* Shown only where the local date differs from the viewer's, which is the whole reason to
   show it at all. */
.kin-clock-day {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    color: var(--brand-chrome-muted);
    margin-left: 0.35em;
}

/* THE TWO MARKER TIERS, REPEATED BESIDE THE CITY NAMES (DEC-P40-003). The globe draws an
   Organization City as a glowing dot inside a halo ring and a supporting City as a smaller dot
   with no ring; the panel draws the same distinction so a reader can match a row to its marker
   without being told which tier is which. The ring, not the colour, is what separates them —
   the rule globe.js holds itself to. */
/* The margin is the ring's own width — 2px of gap and 1px of ring, the outer shadow's spread — so
   the whole halo sits inside the row and lines up with the column's left edge instead of hanging
   3px outside it. Change the spread and this must change with it; a test holds the two equal. */
.kin-clock-org .kin-clock-dot {
    width: 6px;
    height: 6px;
    margin-inline-start: 3px;
    box-shadow: 0 0 0 2px var(--brand-chrome), 0 0 0 3px color-mix(in srgb, var(--brand-rail-accent) 55%, transparent);
}

.kin-clock-supporting .kin-clock-dot {
    width: 4px;
    height: 4px;
    background: color-mix(in srgb, var(--brand-rail-accent) 80%, var(--brand-chrome));
}

/* ---- "+N more cities we work in" and what it discloses -----------------------------------------
 * Positioned over the hero rather than in its flow, so opening it never moves the greeting, the
 * globe or the reader's own clock. Opened by :hover and :focus-within here — which is what makes
 * the keyboard and the mouse equal before any script has loaded — and by .is-open, which
 * clocks.js sets when a click or tap pins it. .is-dismissed is Escape, and wins over all three. */

.kin-clocks-more {
    position: relative;
    margin-top: var(--space-2);
}

.kin-clocks-more-toggle {
    font: inherit;
    font-size: var(--text-xs);
    color: var(--brand-chrome-muted);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.kin-clocks-more-toggle:hover,
.kin-clocks-more-toggle[aria-expanded="true"] { color: var(--brand-chrome-ink); }

.kin-clocks-more-toggle:focus-visible {
    outline: 2px solid var(--brand-rail-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.kin-clocks-more-panel {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 14rem;
    max-width: min(22rem, calc(100vw - 2rem));
    max-height: 18rem;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    background: var(--brand-chrome);
    border: 1px solid var(--brand-chrome-line);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-chrome) 70%, transparent);
}

.kin-clocks-more:hover .kin-clocks-more-panel,
.kin-clocks-more:focus-within .kin-clocks-more-panel,
.kin-clocks-more.is-open .kin-clocks-more-panel { display: block; }

.kin-clocks-more.is-dismissed .kin-clocks-more-panel { display: none; }

.kin-clocks-more-country {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-chrome-muted);
    margin: var(--space-2) 0 var(--space-1);
}

.kin-clocks-more-country:first-child { margin-top: 0; }

/* ON THE WIDE LAYOUT THE LIST IS EXACTLY AS WIDE AS THE CLOCKS ABOVE IT (P40-105 rework).
 *
 * From 1241px the hero is two columns and the clocks are the right-most thing in it: a column
 * about 180px wide, flush with the hero's right padding. The panel's 14rem floor is 224px, so it
 * ran 44px past that column and, at 1600px, 12px past the viewport — measured on a page built
 * from this stylesheet. Jakes saw it as detached from its link and pushed to the far right, which
 * is what that is.
 *
 * Spanning the column rather than shifting the panel left keeps it under the link it belongs to
 * and inside the hero, at every wide width, without guessing how wide the column will be. Below
 * 1241px the hero stacks, the clocks sit on the left with room to their right, and the narrow
 * layout Jakes accepted keeps its own rules untouched. The breakpoint is the hero's own two-column
 * one, and a test holds them equal. */
@media (min-width: 1241px) {
    .kin-clocks-more-panel {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
    }
}

.kin-clock-viewer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    font-size: var(--text-sm);
    white-space: nowrap;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--brand-chrome-line);
}

.kin-clock-viewer .kin-clock-city { color: var(--brand-chrome-ink); font-weight: var(--weight-medium); }

/* The viewer's IANA zone name (filled in by clocks.js) is a long string that would set the
   whole column's width and squeeze the greeting — the row reads "Your time" without it. */
.kin-clock-viewer [data-viewer-zone] { display: none; }

/* ---- Module access on the white workspace ---------------------------------------------------- */

.kin-home-modules { margin-top: var(--space-6); }

.kin-home-support {
    margin-top: var(--space-7);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--brand-muted);
}

@media (max-width: 1240px) {
    .kin-hero { grid-template-columns: 1fr; gap: var(--space-6); }
    .kin-presence { justify-content: start; }
}

@media (max-width: 1420px) and (min-width: 1241px) {
    /* Between those widths the sphere would crowd the greeting before the layout stacks. */
    .kin-presence { grid-template-columns: minmax(140px, 196px) minmax(170px, auto); }
    .kin-globe { max-width: 196px; }
}

@media (max-width: 1100px) {
    .kin-hero { margin: 0 calc(-1 * var(--space-5)) var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); }
}

@media (max-width: 860px) {
    .kin-hero { margin: 0 calc(-1 * var(--space-4)) var(--space-2); padding: var(--space-5) var(--space-4) var(--space-6); }
}

@media (max-width: 720px) {
    .kin-presence { grid-template-columns: 1fr; justify-items: start; gap: var(--space-5); }
    .kin-globe { max-width: min(200px, 56vw); }
    .kin-clocks { width: 100%; }
}