/* Meeting Timezone — the tool's stylesheet.
   EVERY RULE IS SCOPED UNDER .mtz. The tool moved onto a real site page on
   2026-09-29, where glass.css already owns --bg, --fg, --line, --card,
   --mono, --ease and the names .wrap, .card and h1. Unscoped, each
   stylesheet would win somewhere and the page would be a coin toss.
   Scoped, the tool cannot reach one pixel outside itself. */

  /* ==========================================================
     MEETING TIMEZONE — the 2026-09-28 rebuild.

     His brief, and where each part of it went:
       "just a dotted orange line down ... no reds or other colors to
        highlight on globe, except for the cities"     -> earth.js, and --acc
       "each row / city colors are unique and tagged to their dots"  -> --c
       "background ... reminiscent of the universe with stars and movement"
                                                        -> .sky
       "stacked"                                        -> the only layout
       "the globe can be swapped out with the radial view"  -> .swap
       "meeting time ... not attached to the Local Time"    -> .local
       "marked via a chip, not brackets"                -> .chip
       "pulsing ... blueish or something nice"          -> --home, .pulse
       "Add a City should be easier to see"             -> .addrow
       "a fun 'spin the dial'"                          -> #spin
       "GMT hours like a rolex watch red/blue"          -> .bezel
     ========================================================== */
  /* THE TOOL'S SECTION. It brings its own ground and its own sky, clipped to
   itself, because the page around it is the site's and keeps its own. */
.mtz { position: relative; isolation: isolate; overflow: clip;
       background: #05070f; padding: 4vh clamp(1.1rem,4vw,3rem) 7vh; }
.mtz-in { position: relative; z-index: 1; max-width: 1420px; margin: 0 auto; }
.mtz {
    --bg: #0b0d18;
    --fg: #f2f3f7;
    --fnt: rgba(242,243,247,.58);
    --line: rgba(242,243,247,.12);
    --card: rgba(255,255,255,.035);
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --ease: cubic-bezier(.22,1,.36,1);

    /* ORANGE MARKS THE SELECTED HOUR. Nothing else on the page is orange and
       nothing else on the globe is coloured at all. */
    --acc: #e9a83a;
    /* the home row's own note — "blueish or something nice and congenial",
       his words, and deliberately quieter than the orange */
    --home: #7fa8d4;
    --home2: #9fc4e6;
    /* placeholders. Brackets are going: "marked via a chip, not brackets;
       stop using that, it's too hard to see". Anything still bracketed here
       is copy I do not have from him yet, and it is now a visible pink chip
       rather than punctuation that hides in a sentence. */
    --ph: #d45fb0;
    --bar-day: #dfe1e6; --bar-dusk: #8b8f9c; --bar-night: #2f3344;
    --nw: 11rem;
  }
/* ---------- THE CITY PALETTES, HIS FIVE ----------
     David sent five palettes and asked for the city colours to come from
     them. Each city takes the next swatch, and the same swatch paints its
     row's dot, its bar's edge, its pin on the globe and its ring on the
     radial — one colour per city, everywhere it appears.
     Entries beyond the five or nine he sent are LIGHTNESS STEPS OF HIS OWN
     HUES, never new ones, so eight cities can be told apart without leaving
     the palette he chose. Swatches too dark to read on this ground are left
     out; the deepest members of Deep Sea and Coastal are two of those. */
body[data-pal="coastal"] {
    --c1:#a8c9dd; --c2:#6c9cbd; --c3:#b9d4e6; --c4:#4e85ad;
    --c5:#86b1cb; --c6:#35719f; --c7:#cfe0ec; --c8:#2a6296; }
body[data-pal="harmony"] {
    --c1:#8bb89b; --c2:#d8806a; --c3:#e8cd97; --c4:#f1ece0;
    --c5:#9a9ac0; --c6:#a9cbb6; --c7:#e6b8a8; --c8:#f2e2bd; }
body[data-pal="summer"] {
    --c1:#9ed2e8; --c2:#4ba3c7; --c3:#f7bf1a; --c4:#c6e4f2;
    --c5:#2f7fa5; --c6:#fad967; --c7:#7cc0dc; --c8:#e9f3f9; }
body[data-pal="deepsea"] {
    --c1:#7f8fb0; --c2:#e2e4e0; --c3:#4f5f7f; --c4:#aab4cb;
    --c5:#c3c8d3; --c6:#67789c; --c7:#9aa6c2; --c8:#d2d6dc; }
body[data-pal="sunset"] {
    --c1:#f5c02c; --c2:#e0691c; --c3:#eda52a; --c4:#d21414;
    --c5:#dd4318; --c6:#f8d76a; --c7:#a50d16; --c8:#e08a1e; }
  /* ---------- THE SKY ----------
     "the background be a lighter color that's reminiscent of the universe
      with stars and movement and terrestial components that are accurate yet
      not overwhelming".
     The ground lifts off black to a deep blue, two star layers drift at
     different speeds so the movement reads as parallax rather than as
     animation, and a single wide wash stands in for a nebula. Everything
     here is behind the globe and nothing is bright enough to compete with
     it — the Earth stays the accurate thing in the picture.
     It respects prefers-reduced-motion by stopping, not by disappearing. */
  /* ---------- DEEP SPACE ----------
     "the background is not good enough, needs more movement/interaction deep
      space-like stuff."
     Four layers instead of two, and they move at four different rates, which
     is what makes a field read as depth rather than as wallpaper: a dense
     far field that barely creeps, two nearer fields that cross it, and a
     slow parallax on the whole stack tied to the POINTER, so the sky
     answers to the reader as well as to the clock. The nebulae drift and
     breathe out of phase so the picture never repeats on a short loop.
     None of it is bright enough to compete with the Earth, and all of it
     stops under prefers-reduced-motion. */
  .mtz .sky { position: absolute; inset: -6vmax -2vmax; z-index: 0; pointer-events: none;
         overflow: hidden;
         background:
           radial-gradient(120% 85% at 50% -15%, #16203c 0%, transparent 62%),
           radial-gradient(85% 65% at 90% 112%, #101730 0%, transparent 60%),
           radial-gradient(70% 50% at 8% 78%, #131b34 0%, transparent 64%),
           #05070f; }
.mtz .sky i { position: absolute; inset: -40%; display: block;
           background-repeat: repeat; will-change: transform;
           transform: translate3d(calc(var(--px,0) * 1px), calc(var(--py,0) * 1px), 0); }
.mtz .sky .s0 { background-image:
      radial-gradient(.8px .8px at 9% 12%, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(.7px .7px at 41% 29%, rgba(214,229,255,.4), transparent 60%),
      radial-gradient(.8px .8px at 68% 8%, rgba(255,255,255,.45), transparent 60%),
      radial-gradient(.7px .7px at 86% 47%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(.8px .8px at 23% 66%, rgba(214,229,255,.45), transparent 60%),
      radial-gradient(.7px .7px at 57% 88%, rgba(255,255,255,.4), transparent 60%);
    background-size: 170px 170px; animation: drift 620s linear infinite; opacity: .85; }
.mtz .sky .s1 { background-image:
      radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
      radial-gradient(1px 1px at 63% 42%, rgba(255,255,255,.62), transparent 60%),
      radial-gradient(1.4px 1.4px at 84% 71%, rgba(206,226,255,.85), transparent 60%),
      radial-gradient(1px 1px at 31% 83%, rgba(255,255,255,.5), transparent 60%);
    background-size: 300px 300px; animation: drift 240s linear infinite; }
.mtz .sky .s2 { background-image:
      radial-gradient(1.9px 1.9px at 22% 61%, rgba(255,238,206,.85), transparent 58%),
      radial-gradient(1.5px 1.5px at 72% 23%, rgba(226,238,255,.7), transparent 58%),
      radial-gradient(1.7px 1.7px at 47% 91%, rgba(255,255,255,.6), transparent 58%);
    background-size: 520px 520px; animation: drift 130s linear infinite reverse; }
.mtz .sky .s3 { background:
      radial-gradient(52% 38% at 26% 28%, rgba(86,116,196,.18), transparent 72%),
      radial-gradient(44% 34% at 76% 64%, rgba(150,104,178,.14), transparent 72%),
      radial-gradient(38% 30% at 58% 8%, rgba(70,150,170,.10), transparent 72%);
    animation: breathe 52s ease-in-out infinite; }
@keyframes drift{ to { transform: translate3d(calc(var(--px,0) * 1px - 300px),
                                                 calc(var(--py,0) * 1px - 190px), 0); } }
@keyframes breathe{ 50% { opacity: .5; transform: scale(1.09) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) {
.mtz .sky i { animation: none; }
}
body[data-sky="off"] .sky i { display: none; }
body[data-sky="stars"] .sky .s3 { display: none; }
body[data-sky="deep"] .sky { filter: saturate(1.15); }
.mtz .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
          backdrop-filter: blur(9px); }
  /* A PLACEHOLDER IS A CHIP NOW, not brackets. "stop using that, it's too
     hard to see" — so anything I do not have his words for is a pink pill
     that cannot be mistaken for finished copy. */
  .mtz .ph { display: inline-block; font-family: var(--mono); font-size: .68rem;
        letter-spacing: .04em; color: #1a0b16; background: var(--ph);
        border-radius: 5px; padding: 1px 6px; }
  /* ================= THE GLOBE, OR THE RADIAL IN ITS PLACE ================= */
  .mtz .c-globe { position: relative; max-width: 440px; margin: 0 auto 1.1rem; width: 100%; }
.mtz .stage { position: relative; aspect-ratio: 1; width: 100%; }
.mtz .stage canvas { display: block; margin: 0 auto; touch-action: none; }
.mtz #globe { cursor: grab; }
.mtz #globe.dragging { cursor: grabbing; }
.mtz .pinlayer { position: absolute; inset: 0; pointer-events: none; }
  /* EVERY CITY ITS OWN COLOUR, on the dot and on its row. A city behind the
     world is drawn hollow at the limb rather than removed, so the count on
     screen never changes. */
  .mtz .pin { position: absolute; transform: translate(-50%,-50%); width: 10px; height: 10px;
         border-radius: 50%; background: var(--c, #fff);
         /* --lit is the city's own daylight at the selected hour: 1 in full
            day, .3 in the middle of its night. Only opacity and the halo
            move, never the size, so nothing on the sphere resizes. */
         opacity: calc(.34 + var(--lit, 1) * .66);
         box-shadow: 0 0 0 1.5px rgba(8,8,11,.85),
                     0 0 calc(4px + var(--lit, 1) * 12px) -1px var(--c, #fff);
         transition: opacity .45s var(--ease), box-shadow .45s var(--ease); }
.mtz .pin b { transition: opacity .45s var(--ease); }
.mtz .pin[style*="--lit: .3"] b, .mtz .pin[style*="--lit: .42"] b { opacity: .62; }
.mtz .pin.behind { background: transparent; border: 1.5px solid var(--c, #fff);
                box-shadow: none; opacity: .75; }
.mtz .pin b { position: absolute; left: 15px; top: -9px; white-space: nowrap;
           font-size: 10.5px; font-weight: 400; background: rgba(8,10,18,.76);
           padding: 1.5px 5px; border-radius: 4px; color: var(--c, #fff); }
.mtz .pin.flip b { left: auto; right: 15px; }
  /* THE SWAP. "the globe can be swapped out with the radial view (via
     clicking on it or some subtle intuitive button)" — so both: the button
     is there to be found, and the stage itself takes a click. */
  .mtz .swap { display: none; position: absolute; right: 2px; bottom: 2px; z-index: 5;
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    font: inherit; font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(242,243,247,.72);
    background: rgba(11,13,24,.72); border: 1px solid var(--line);
    border-radius: 999px; padding: 0 12px; min-height: 34px; backdrop-filter: blur(8px); }
.mtz .swap:hover { color: var(--fg); border-color: rgba(242,243,247,.34); }
  /* `.stage canvas { display: block }` above out-specifies a bare `.dial`,
     so the radial was painted over the globe at all times and only the globe
     ever hid. The off state has to carry the same weight as the rule it is
     fighting. Same fault as the switcher that would not take `hidden`. */
  /* THE RADIAL IS THE GLOBE'S OTHER HALF. It stands in the stage in the
     globe's place: the globe answers "where", the radial answers "when", and
     only one of them is on at a time. `.stage canvas` sets display:block, so
     the off state has to carry the same weight as the rule it fights. */
  .mtz .stage canvas.dial { display: none; }
.mtz .dial { position: absolute; inset: 0; width: 100%; height: 100%;
          cursor: ew-resize; touch-action: none; }
.mtz #app[data-view="dial"] .dial { display: block; }
.mtz #app[data-view="dial"] #globe, .mtz #app[data-view="dial"] .pinlayer { display: none; }
  /* the two controls that belong to the stage rather than to the selector */
  .mtz .stagebar { position: absolute; right: 0; bottom: 0; z-index: 6; display: flex;
              gap: 6px; }
.mtz .stagebar button { font: inherit; font-family: var(--mono); font-size: 9px;
    letter-spacing: .16em; text-transform: uppercase; color: rgba(242,243,247,.74);
    background: rgba(9,12,22,.74); border: 1px solid var(--line); border-radius: 999px;
    padding: 0 13px; min-height: 36px; cursor: pointer; backdrop-filter: blur(8px); }
.mtz .stagebar button:hover { color: var(--fg); border-color: rgba(242,243,247,.34); }
.mtz #app[data-view="globe"] #flat { display: none; }
.mtz #app[data-ring="flat"] #flatlab::after { content: ""; }
  /* ================= THE CARD ================= */
  .mtz .sel { padding: 1rem 1.15rem 1.1rem; }
  /* ---------- LOCAL TIME AND THE MEETING WINDOW, TOGETHER ----------
     "The meeting time is not intuitive enough and located weirdly not
      attached to the Local Time." It was a pill on its own above the names
     with no stated relationship to anything. They are one control group now,
     standing in the name column directly above the names: who the clock
     belongs to, and the window being searched inside it. */
  .mtz .head { display: grid; grid-template-columns: var(--nw) 1fr 44px; gap: .85rem;
          align-items: end; margin-bottom: .5rem; }
.mtz .local { display: grid; gap: 5px; }
  /* justify-self, not just align-self: .local is a grid, so without it the
     chip stretched the whole name column and stopped reading as a chip. */
  .mtz .chip { display: inline-flex; align-items: center; gap: .4rem;
    align-self: start; justify-self: start;
    font-family: var(--mono); font-size: 9px; letter-spacing: .15em;
    text-transform: uppercase; color: #0b0d18; border-radius: 999px;
    padding: 3px 8px; background: linear-gradient(100deg, var(--home), var(--home2));
    background-size: 220% 100%; animation: shimmer 5.5s var(--ease) infinite; }
  /* "some differentiation or pulsing of the colors in a gradient that isn't
     orange ... just blueish or something nice and congenial" — a slow slide
     across the gradient rather than a flash, and it never changes size. */
  /* "some differentiation or pulsing of the colors in a gradient that isn't
     orange ... just blueish or something nice and congenial" — a slow slide
     across the gradient rather than a flash, and it never changes size. */
  @keyframes shimmer{ 0%,100% { background-position: 0% 50%; }
                       50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
.mtz .chip { animation: none; }
}
.mtz .mt { display: grid; gap: 1px; justify-items: start; text-align: left; font: inherit;
        cursor: pointer; color: var(--fg); background: rgba(242,243,247,.05);
        border: 1px solid var(--line); border-radius: 10px; padding: .36rem .55rem;
        width: 100%; min-height: 44px; }
.mtz .mt:hover { border-color: rgba(242,243,247,.32); }
.mtz .mt em { font-style: normal; font-family: var(--mono); font-size: 8px;
           letter-spacing: .16em; text-transform: uppercase; color: var(--fnt); }
.mtz .mt b { font-family: var(--mono); font-size: .78rem; font-weight: 400;
          font-variant-numeric: tabular-nums; }
.mtz .mt b i { font-style: normal; color: var(--fnt); margin-left: .3rem; }
  /* ---------- THE RULER, WITH A DAY/NIGHT BEZEL ----------
     "The time up top needs clearer labeling and indication of GMT hours like
      a rolex watch red/blue for the day/night type of indicator."
     So the hours carry a bezel above them, split at the home city's real
     sunrise and sunset — not at an assumed 6 and 18 — and the offset is
     written on it, because a 24-hour ruler with no zone named is only half a
     label. Two treatments, his to pick: ROLEX is the blue/red of a GMT
     bezel; MUTED keeps the same split in blue and sand. */
  .mtz .axis { position: relative; }
.mtz .bezel { position: relative; height: 9px; border-radius: 999px; overflow: hidden;
           margin-bottom: 5px; background: rgba(242,243,247,.05); }
.mtz .bezel i { position: absolute; top: 0; bottom: 0; display: block; }
.mtz .bezel .n { background: #1e3a6b; }
.mtz .bezel .d { background: #b23a34; }
body[data-bez="muted"] .bezel .n { background: #2b3f60; }
body[data-bez="muted"] .bezel .d { background: #b9a276; }
.mtz .gmt { position: absolute; right: 0; top: -14px; font-family: var(--mono);
         font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
         color: var(--fnt); }
.mtz .marks { position: relative; height: 1.45rem; }
.mtz .tick { position: absolute; bottom: 0; width: 1px; height: 5px;
          background: rgba(242,243,247,.2); }
.mtz .tick.maj { height: 9px; background: rgba(242,243,247,.44); }
.mtz .alab { position: absolute; bottom: 10px; transform: translateX(-50%);
    font-family: var(--mono); font-size: .62rem; color: var(--fnt);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtz .alab.first { transform: none; }
.mtz .alab.last { transform: translateX(-100%); }
.mtz .alab.end { color: rgba(242,243,247,.84); }
  /* ---------- THE TWO WINDOW TICKS ----------
     "just have two ticks and I can select and expand on the time on top of
      the current selector." They stand on the ruler, above the bars they
     govern, and are dragged. 44px of grab area behind a 3px mark, so the
     target is a thumb and the drawing is a hairline. */
  .mtz .wtick { position: absolute; top: -10px; bottom: -6px; width: 44px;
           margin-left: -22px; z-index: 6; cursor: ew-resize; touch-action: none; }
.mtz .wtick i { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
             margin-left: -1.5px; border-radius: 2px; background: var(--home);
             box-shadow: 0 0 9px -1px var(--home); }
.mtz .wtick::after { content: ""; position: absolute; left: 50%; top: -5px;
    width: 11px; height: 11px; margin-left: -5.5px; border-radius: 3px;
    background: var(--home); box-shadow: 0 0 0 2px rgba(5,7,15,.75); }
.mtz .wtick:focus-visible { outline: none; }
.mtz .wtick:focus-visible::after { box-shadow: 0 0 0 2px rgba(5,7,15,.75), 0 0 0 4px var(--fg); }
.mtz .mtread { display: grid; gap: 1px; margin: 0;
    font-family: var(--mono); font-size: 8px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--fnt); }
.mtz .mtread b { font-size: .82rem; letter-spacing: 0; text-transform: none;
    color: var(--home2); font-weight: 400; font-variant-numeric: tabular-nums; }
.mtz .ahl { position: absolute; bottom: 0; height: 13px; border-radius: 3px;
         background: var(--acc); box-shadow: 0 0 0 1px rgba(11,13,24,.5); }
  /* ---------- THE ROWS ---------- */
    /* THE ANSWER, AS A LINE. It sits above the instrument and states the hour
     in his own clock, with what it costs after it. No border, no card — the
     thing he objected to was the box, not the answer. */
  .mtz .answer { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .7rem;
    font-size: .92rem; color: var(--fnt); }
  .mtz .answer[hidden] { display: none; }
  .mtz .answer b { font-family: var(--mono); font-size: 1.05rem; font-weight: 500;
    color: var(--fg); font-variant-numeric: tabular-nums; }
  .mtz .answer.none b { color: var(--fnt); }
  .mtz .empty { margin: 0 0 .7rem; font-size: .88rem; }
  .mtz .empty[hidden] { display: none; }

.mtz .rows { position: relative; display: grid; gap: .55rem; touch-action: none; }
.mtz .trow { display: grid; grid-template-columns: var(--nw) 1fr 44px; gap: .85rem;
          align-items: center; min-height: 44px; }
  /* MOTION, AND ONLY WHERE SOMETHING ARRIVES OR LEAVES. A city does not pop
     into the list, it comes up into it; the radial does not appear, it
     resolves. Nothing here animates a position that the reader is steering —
     the ticker and the ticks stay instant, because lag on a drag reads as a
     fault. Everything stops under prefers-reduced-motion. */
  body[data-motion="on"] .mtz .trow { animation: mtz-in .42s var(--ease) both; }
  body[data-motion="on"] .mtz .dial { animation: mtz-fade .5s var(--ease) both; }
  body[data-motion="on"] .mtz #globe { animation: mtz-fade .5s var(--ease) both; }
  body[data-motion="on"] .mtz .answer { animation: mtz-fade .4s var(--ease) both; }
  @keyframes mtz-in { from { opacity: 0; transform: translateY(7px); } }
  @keyframes mtz-fade { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    body[data-motion="on"] .mtz .trow,
    body[data-motion="on"] .mtz .dial,
    body[data-motion="on"] .mtz #globe,
    body[data-motion="on"] .mtz .answer { animation: none; }
  }
.mtz .who { min-width: 0; cursor: pointer; display: grid; gap: 2px; }
.mtz .who .nm { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.mtz .who .dot { width: 9px; height: 9px; border-radius: 50%; flex: none;
              background: var(--c); box-shadow: 0 0 8px -1px var(--c); }
.mtz .who b { font-size: .84rem; font-weight: 400; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; color: rgba(242,243,247,.82); }
.mtz .who:hover b { color: var(--fg); }
.mtz .trow.home .who b { color: var(--fg); font-weight: 500; }
.mtz .x { font: inherit; font-size: 1.15rem; line-height: 1; width: 44px; height: 44px;
    border: 0; border-radius: 50%; background: rgba(242,243,247,.06); color: var(--fnt);
    cursor: pointer; display: grid; place-items: center; }
.mtz .x:hover { background: rgba(242,243,247,.16); color: #fff; }
.mtz .trow.home .x { visibility: hidden; }
.mtz .cell { position: relative; display: block; }
.mtz .bar { display: block; position: relative; height: 1.6rem; border-radius: 4px;
         overflow: hidden; background-color: rgba(242,243,247,.02);
         box-shadow: inset 0 0 0 1px rgba(242,243,247,.07); }
  /* the city's own colour claims its bar with a left edge, so a row can be
     matched to its dot on the globe without reading anything */
  .mtz .cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; border-radius: 2px 0 0 2px; background: var(--c); z-index: 3; }
  /* out of hours: an empty groove struck through, so it is a shape rather
     than a colour — the page has no red left to spend on it */
  .mtz .bar::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg,
      rgba(242,243,247,.17) 0 1px, transparent 1px 5px);
    -webkit-mask-image: var(--offmask); mask-image: var(--offmask);
  }
  /* ONE SIZE WHATEVER IT HOLDS, sized to the longest string it can ever show */
  .mtz .bub { position: absolute; top: 50%; transform: translate(-50%,-50%); z-index: 6;
    min-width: 4.3rem; text-align: center; pointer-events: none;
    font-family: var(--mono); font-size: .68rem; font-style: normal; font-weight: 600;
    font-variant-numeric: tabular-nums; padding: 3px 5px; border-radius: 5px;
    white-space: nowrap; background: #11141f; color: var(--fg);
    box-shadow: 0 0 0 1px var(--c), 0 4px 12px -6px rgba(0,0,0,.9); }
.mtz .trow.out .bub { color: rgba(242,243,247,.5);
                   background: repeating-linear-gradient(115deg,
                     #11141f 0 3px, #191d2b 3px 6px); }
.mtz .hourband { position: absolute; top: -.2rem; bottom: -.2rem; z-index: 4;
    pointer-events: none; border-left: 1.5px dashed var(--acc);
    border-right: 1.5px dashed var(--acc);
    background: color-mix(in srgb, var(--acc) 9%, transparent); }
.mtz .ph-grab { position: absolute; inset: -.3rem 0; z-index: 7; cursor: ew-resize; }
  /* which hours are workable: one notch an hour, under the bars */
  .mtz .viab { display: grid; grid-template-columns: var(--nw) 1fr 44px; gap: .85rem;
          margin-top: .5rem; opacity: .75; transition: opacity .2s var(--ease); }
.mtz .viab:hover, .mtz .viab:focus-within { opacity: 1; }
.mtz .vtrack { display: grid; grid-template-columns: repeat(24,1fr); gap: 2px; height: 6px; }
.mtz .vtrack button { border: 0; padding: 0; cursor: pointer; border-radius: 2px;
    background: rgba(242,243,247,.05); }
.mtz .vtrack button.ok { background: var(--acc); }
.mtz .vtrack button.part { background: rgba(233,168,58,.3); }
.mtz .vtrack button.on { outline: 1.5px solid var(--fg); outline-offset: 1px; }
  /* ---------- ADD A CITY, AND THE DIAL SPIN ----------
     "the Add a City should be easier to see (I liked the before open-field,
      that's cool but how can it hide or compact or etc and get out the way?)"
     So the open field is back — it is the thing he liked — but it only
     exists while it is being used. At rest the row is two small buttons; the
     field opens in their place at the same height, and closes on Escape, on
     blur, or the moment a city is added. Nothing around it moves. */
  .mtz .addrow { display: grid; grid-template-columns: var(--nw) 1fr 44px; gap: .85rem;
            align-items: center; min-height: 52px; margin-top: .6rem; }
.mtz .addbar { grid-column: 1 / 3; display: flex; gap: .5rem; align-items: center; }
.mtz .abtn { display: inline-flex; align-items: center; gap: .45rem; font: inherit;
    font-size: .82rem; color: var(--fg); cursor: pointer; min-height: 44px;
    padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--line);
    background: rgba(242,243,247,.05); }
.mtz .abtn:hover { border-color: rgba(242,243,247,.34); }
.mtz .abtn i { font-style: normal; font-size: 1rem; line-height: 1; }
.mtz #spin i { display: inline-block; transition: transform .8s var(--ease); }
.mtz #spin:hover i, .mtz #spin.go i { transform: rotate(360deg); }
.mtz .sugwrap { grid-column: 1 / 3; position: relative; }
.mtz .sugwrap input { width: 100%; max-width: 24rem; font: inherit; font-size: .95rem;
    font-weight: 300; color: var(--fg); background: rgba(242,243,247,.07);
    border: 1px solid var(--home); border-radius: 12px; outline: none;
    padding: .78rem .9rem; min-height: 48px; }
.mtz .sugwrap input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--home) 26%, transparent); }
.mtz .sugwrap input::placeholder { color: rgba(242,243,247,.42); }
.mtz .sugwrap ul { position: absolute; z-index: 40; left: 0; width: min(24rem,100%);
    top: calc(100% + 5px); margin: 0; padding: .25rem; list-style: none;
    max-height: 14rem; overflow: auto; background: #101423;
    border: 1px solid var(--line); border-radius: 12px; }
.mtz .sugwrap ul[hidden], .mtz .addrow[data-mode="button"] .sugwrap, .mtz .addrow[data-mode="input"] .addbar { display: none; }
.mtz .sugwrap li { padding: .5rem .6rem; border-radius: 7px; cursor: pointer;
    font-size: .9rem; display: flex; justify-content: space-between; gap: 1rem;
    font-weight: 300; }
.mtz .sugwrap li[aria-selected="true"], .mtz .sugwrap li:hover { background: rgba(242,243,247,.1); }
.mtz .sugwrap li em { font-style: normal; color: var(--fnt); font-size: .77rem; }
  /* ---------- THE SHEET ---------- */
  .mtz .sheet { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
    padding: 1.2rem; background: rgba(4,5,10,.76); backdrop-filter: blur(7px); }
.mtz .sheet[hidden] { display: none; }
.mtz .sheet-in { width: min(26rem,100%); background: #101423; border: 1px solid var(--line);
    border-radius: 16px; padding: 1.4rem; }
.mtz .sheet-in h2 { margin: 0 0 .25rem; font-size: 1.1rem; font-weight: 300; }
.mtz .sheet-in .note { margin: 0 0 1.15rem; font-size: .83rem; color: var(--fnt); }
.mtz .fields { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.mtz .fields label { display: block; font-family: var(--mono); font-size: 9.5px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--fnt); margin-bottom: .3rem; }
.mtz .fields input { width: 100%; font: inherit; font-family: var(--mono); font-size: 1rem;
    color: var(--fg); background: rgba(242,243,247,.05); border: 1px solid var(--line);
    border-radius: 9px; padding: .68rem .75rem; outline: none; }
.mtz .fields input:focus { border-color: var(--home); }
.mtz .sheet-act { display: flex; gap: .55rem; justify-content: flex-end; margin-top: 1.25rem; }
.mtz .sheet-act button { font: inherit; font-family: var(--mono); font-size: 9.5px;
    letter-spacing: .18em; text-transform: uppercase; cursor: pointer; border-radius: 999px;
    padding: .66rem 1.1rem; border: 1px solid var(--line); background: transparent;
    color: var(--fnt); }
.mtz .sheet-act button.go { background: var(--fg); border-color: var(--fg); color: #0b0d18; }
.mtz .sheet-err { margin: .75rem 0 0; font-size: .8rem; color: #e08b7f; min-height: 1.1em; }
  /* ================= STACKED, AND ONLY STACKED =================
     "Let's have it be stacked" — so the side-by-side layout is gone and the
     globe sits above the card at every width, capped so it never eats the
     screen. */
  .mtz #app { display: grid; gap: clamp(.9rem,1.8vw,1.3rem); }
.mtz #app, .mtz #app > * { min-width: 0; }
@media (max-width: 580px) {
:root { --nw: 1fr; }
.mtz .c-globe { max-width: 280px; }
.mtz .trow { grid-template-columns: 1fr 44px;
            grid-template-areas: "who x" "bar bar";
            min-height: 0; row-gap: .3rem; }
.mtz .who { grid-area: who; }
.mtz .cell { grid-area: bar; }
.mtz .x { grid-area: x; }
.mtz .rows { gap: .9rem; }
.mtz .head, .mtz .viab, .mtz .addrow { grid-template-columns: 1fr; }
.mtz .head { align-items: stretch; }
.mtz .mt { width: auto; justify-self: start; min-width: 10rem; }
.mtz .alab.drop { display: none; }
.mtz .ph-grab { pointer-events: none; }
.mtz .addbar, .mtz .sugwrap { grid-column: 1; }
}
  /* ================= THE OPTIONS ================= */
  .mtz .optbtn { position: fixed; z-index: 501; left: 50%; bottom: 14px;
    transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem;
    font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.82); cursor: pointer;
    background: rgba(11,13,24,.94); border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px; padding: 0 18px; min-height: 44px; backdrop-filter: blur(16px); }
.mtz .optbtn i { font-style: normal; transition: transform .3s var(--ease); }
.mtz .optbtn[aria-expanded="true"] i { transform: rotate(180deg); }
.mtz .banner { position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%);
    z-index: 500; display: grid; gap: 7px; padding: 9px 11px; border-radius: 16px;
    background: rgba(11,13,24,.94); border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(16px); max-width: calc(100vw - 20px);
    max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.mtz .banner[hidden] { display: none; }
.mtz .brow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
          justify-content: center; }
.mtz .banner b { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(255,255,255,.4); padding: 0 5px 0 2px; }
.mtz .banner button { font: inherit; font-family: var(--mono); font-size: 9.5px;
    letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.66);
    background: transparent; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
    padding: 9px 11px; cursor: pointer; white-space: nowrap; }
.mtz .banner button[aria-pressed="true"] { color: #0b0d18; background: #fff; border-color: #fff; }
  /* ================= TWO LAYOUTS, ONE STYLESHEET =================
     David, 2026-09-28: "I really really liked this view originally; it had
     some issues but the large aspect of the globe and right-sided and
     consolidated left-side was nice; can you please incorporate this into
     the redesign of a second preview page of this format."
     So the layout is an attribute rather than a fork. Everything else — the
     dotted marker, the city colours, the sky, the bezel, the chip, the spin
     — is shared, because the moment two copies of this existed they would
     start drifting apart. /preview/globe/ is STACK, /preview/globe2/ is
     SPLIT, and both run this file and app.js. */

  /* SPLIT IS THE ONE. David, 2026-09-28: "Okay let's go with Split for now
     as the main one to go off of now." Everything that changes the time is
     consolidated down the left; the globe is large on the right and pinned,
     and it is a reference you can turn rather than a control.
     /preview/globe2/ is deleted — one page, no drift. */
  /* THE BARS NEED THE WIDTH. At .96fr the card came to 560px and the name
     column took 176 of it, leaving 24 hours in 280px — 11.7px an hour. Even
     columns and a shorter name column give the bars 380. */
  .mtz #app[data-layout="split"] { grid-template-columns: minmax(0,1.06fr) minmax(0,1fr);
    gap: clamp(1.2rem,2.6vw,2.2rem); align-items: center; }
.mtz #app[data-layout="split"] .c-sel { --nw: 8.5rem; }
.mtz #app[data-layout="split"] .c-globe { max-width: none; margin: 0;
    position: sticky; top: 6vh; order: 2; }
.mtz #app[data-layout="split"] .c-sel { order: 1; }
@media (max-width: 1040px) {
.mtz #app[data-layout="split"] { grid-template-columns: 1fr; }
.mtz #app[data-layout="split"] .c-globe { order: 0; max-width: 340px;
      margin: 0 auto 1rem; position: static; }
}
  /* ---------- DOCKED BELOW ----------
     "Allow a click to expand the selector to move to the bottom of the screen
      (swapping views basically with this and the other one)." Docked, the
     globe takes the whole width and the selector becomes a panel across the
     foot of the screen — the reference becomes the subject and the controls
     get out of its way. It is fixed to the viewport, so scrolling the page
     does not take the time controls with it. */
  .mtz #app[data-dock="bottom"] { grid-template-columns: 1fr; }
.mtz #app[data-dock="bottom"] .c-globe { position: static; margin: 0 auto;
    max-width: min(64vh, 100%); }
.mtz #app[data-dock="bottom"] .c-sel { position: fixed; left: 50%; bottom: 66px;
    transform: translateX(-50%); width: min(1180px, calc(100vw - 2rem));
    z-index: 60; max-height: 54vh; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(9,12,22,.92); }
@media (max-width: 1040px) {
.mtz #app[data-dock="bottom"] .c-sel { bottom: 62px; }
}