/* Time Zone Meeting Planner: the artifact.
   A found object, not AppZoo: a railway telegraph office's standard-time sheet, 18 November 1883, "the day of two noons".
   The inputs are a telegraph form (stamped labels, ruled boxes); the results are a printed timetable (ruled columns,
   tinted bands, one heavy printed bar where everyone is at work). Cream stock and black and oxblood ink by day; by night
   the lamp-lit office: blue-black stock, amber ink. It knows nothing of the Zoo; its one nod is the title, set in Rye.
   Scope: everything here sits under [data-artifact="time-zone-meeting-planner"], and nothing reaches the cabinet around it.
   The palette is the artifact's own, defined once at the scope root (the one place literals are allowed). */

[data-artifact="time-zone-meeting-planner"] {
  --tt-stock: #f3ead3;          /* cream timetable stock */
  --tt-field: #fbf5e4;          /* the form's blank boxes */
  --tt-ink: #1d1a16;            /* printer's black */
  --tt-soft: #4a4338;           /* second-colour grey ink */
  --tt-accent: #7a1f1f;         /* oxblood: rules, the title, the heavy bar */
  --tt-on-accent: #f3ead3;
  --tt-focus: #7a1f1f;
  --tt-day: #f3ead3;
  --tt-night: #cdc09a;          /* a dense tint for the hours of darkness */
  --tt-hatch: #a89a72;
  --tt-work: #e6d28a;           /* working hours: a printed yellow tint */
  --tt-work-edge: #6b4a00;
  --tt-overlap: #7a1f1f;
  --tt-overlap-wash: #e0b8a8;
  --tt-chosen: #1d1a16;
  --tt-on-chosen: #f3ead3;
  --tt-type: "Special Elite", "Courier New", Courier, monospace;
  --tt-body: "Old Standard TT", Georgia, "Times New Roman", serif;
  --tt-title: "Rye", Georgia, serif; /* the nod: AppZoo's title type */
  --tt-lane: 2.25rem;
  --tt-axis: 1.5rem;
  --tt-hit: 2.75rem;

  box-sizing: border-box;
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 14px 20px;
  background: var(--tt-stock);
  color: var(--tt-ink);
  font: 400 1rem/1.5 var(--tt-body);
  border: 3px double var(--tt-ink);
  box-shadow: 0 1px 0 rgba(29, 26, 22, .1), 0 14px 32px -20px rgba(29, 26, 22, .5);
}
:root[data-theme="dark"] [data-artifact="time-zone-meeting-planner"] {
  --tt-stock: #141a22; --tt-field: #1d2531; --tt-ink: #f0e2b0; --tt-soft: #c9bb8d; --tt-accent: #f0a93a; --tt-on-accent: #141a22;
  --tt-focus: #f0a93a; --tt-day: #1a222d; --tt-night: #0b0f15; --tt-hatch: #232c3a; --tt-work: #4a4020; --tt-work-edge: #f0a93a;
  --tt-overlap: #f0a93a; --tt-overlap-wash: #5c4519; --tt-chosen: #f0e2b0; --tt-on-chosen: #141a22;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) [data-artifact="time-zone-meeting-planner"] {
    --tt-stock: #141a22; --tt-field: #1d2531; --tt-ink: #f0e2b0; --tt-soft: #c9bb8d; --tt-accent: #f0a93a; --tt-on-accent: #141a22;
    --tt-focus: #f0a93a; --tt-day: #1a222d; --tt-night: #0b0f15; --tt-hatch: #232c3a; --tt-work: #4a4020; --tt-work-edge: #f0a93a;
    --tt-overlap: #f0a93a; --tt-overlap-wash: #5c4519; --tt-chosen: #f0e2b0; --tt-on-chosen: #141a22;
  }
}
[data-artifact="time-zone-meeting-planner"] *, [data-artifact="time-zone-meeting-planner"] *::before, [data-artifact="time-zone-meeting-planner"] *::after { box-sizing: border-box; }
[data-artifact="time-zone-meeting-planner"] [hidden] { display: none; }

/* Text basics, reset inside the sheet. */
[data-artifact="time-zone-meeting-planner"] p { margin: 0 0 10px; }
[data-artifact="time-zone-meeting-planner"] a { color: var(--tt-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
[data-artifact="time-zone-meeting-planner"] a:hover { text-decoration-thickness: 2px; }
[data-artifact="time-zone-meeting-planner"] :focus-visible { outline: 3px solid var(--tt-focus); outline-offset: 2px; box-shadow: none; }

/* Masthead: the sheet's heading, with one station that is on no map. */
[data-artifact="time-zone-meeting-planner"] .tz-mast { border-top: 5px solid var(--tt-ink); border-bottom: 1px solid var(--tt-ink); padding: 10px 0 12px; margin-bottom: 14px; text-align: center; }
[data-artifact="time-zone-meeting-planner"] .tz-kicker { font: 400 .8125rem/1.3 var(--tt-type); letter-spacing: .12em; text-transform: uppercase; color: var(--tt-soft); margin: 0 0 6px; }
[data-artifact="time-zone-meeting-planner"] .tz-title { font: 400 clamp(1.5rem, 7.2vw, 2.5rem)/1.1 var(--tt-title); color: var(--tt-accent); margin: 0 0 8px; padding: 0; border: 0; letter-spacing: .01em; overflow-wrap: anywhere; }
[data-artifact="time-zone-meeting-planner"] .tz-stations { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; margin: 0; padding: 4px 0 0; border-top: 1px dotted var(--tt-soft); font: 400 .75rem/1.5 var(--tt-type); letter-spacing: .06em; text-transform: uppercase; color: var(--tt-soft); }
[data-artifact="time-zone-meeting-planner"] .tz-stations span { white-space: nowrap; }

/* Glyphs: mask files are the companion's job; here they only take the ink. */
[data-artifact="time-zone-meeting-planner"] .tz-glyph { color: var(--tt-ink); }

/* The telegraph form. */
[data-artifact="time-zone-meeting-planner"] .tz-form { margin: 0 0 12px; padding: 10px; background: var(--tt-field); border: 2px solid var(--tt-ink); outline: 1px solid var(--tt-ink); outline-offset: 2px; }
[data-artifact="time-zone-meeting-planner"] .tz-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end; }
[data-artifact="time-zone-meeting-planner"] .tz-field { display: grid; gap: 4px; min-width: 0; }
[data-artifact="time-zone-meeting-planner"] .tz-field-add, [data-artifact="time-zone-meeting-planner"] .tz-field-date { grid-column: 1 / -1; }
[data-artifact="time-zone-meeting-planner"] .tz-field label { font: 400 .8125rem/1.2 var(--tt-type); letter-spacing: .1em; text-transform: uppercase; color: var(--tt-soft); }
[data-artifact="time-zone-meeting-planner"] .tz-add-row { display: flex; gap: 8px; }
[data-artifact="time-zone-meeting-planner"] .tz-add-row input { flex: 1 1 auto; min-width: 0; }
[data-artifact="time-zone-meeting-planner"] .tz-hint, [data-artifact="time-zone-meeting-planner"] .tz-lead { font: 400 .875rem/1.4 var(--tt-body); color: var(--tt-soft); margin: 0; }
[data-artifact="time-zone-meeting-planner"] .tz-hint:empty { display: none; }
[data-artifact="time-zone-meeting-planner"] .tz-note { color: var(--tt-ink); background: var(--tt-field); border: 1px solid var(--tt-ink); border-left: 5px solid var(--tt-accent); padding: 8px 12px; margin: 12px 0; font: 400 .9375rem/1.45 var(--tt-body); }
[data-artifact="time-zone-meeting-planner"] .tz-form input[type="text"], [data-artifact="time-zone-meeting-planner"] .tz-form input[type="date"], [data-artifact="time-zone-meeting-planner"] .tz-form select {
  font: 400 1rem/1.2 var(--tt-type); width: 100%; height: var(--tt-hit); padding: 0 8px;
  background: var(--tt-stock); color: var(--tt-ink); border: 0; border-bottom: 2px solid var(--tt-ink); border-radius: 0;
}
[data-artifact="time-zone-meeting-planner"] .tz-form input::placeholder { color: var(--tt-soft); opacity: 1; }
[data-artifact="time-zone-meeting-planner"] .tz-form select { appearance: auto; }
[data-artifact="time-zone-meeting-planner"] .tz-btn { font: 400 .9375rem/1 var(--tt-type); letter-spacing: .1em; text-transform: uppercase; min-height: var(--tt-hit); padding: 0 16px; border: 2px solid var(--tt-ink); border-radius: 0; cursor: pointer; }
[data-artifact="time-zone-meeting-planner"] .tz-btn-primary { background: var(--tt-accent); color: var(--tt-on-accent); border-color: var(--tt-accent); }
[data-artifact="time-zone-meeting-planner"] .tz-btn-secondary { background: var(--tt-field); color: var(--tt-ink); }
[data-artifact="time-zone-meeting-planner"] .tz-btn:hover { box-shadow: 3px 3px 0 var(--tt-ink); }
[data-artifact="time-zone-meeting-planner"] .tz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
[data-artifact="time-zone-meeting-planner"] .tz-status { margin: 8px 0 0; }

/* The timetable: one ruled lane per place, hours along the top, the overlay on top of everything. */
[data-artifact="time-zone-meeting-planner"] .tz-plan-body { max-width: 100%; }
[data-artifact="time-zone-meeting-planner"] .tz-timeline { position: relative; overflow: hidden; margin: 12px 0; padding-top: var(--tt-axis); background: var(--tt-day); border: 2px solid var(--tt-ink); outline: 1px solid var(--tt-ink); outline-offset: 2px; }
[data-artifact="time-zone-meeting-planner"] .tz-zone { position: relative; }
[data-artifact="time-zone-meeting-planner"] .tz-zone-head { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 2.25rem; padding: 2px var(--tt-hit) 2px 10px; font: 400 .875rem/1.3 var(--tt-body); pointer-events: none; }
[data-artifact="time-zone-meeting-planner"] .tz-zone-head .tz-remove { position: absolute; top: 50%; right: 0; transform: translateY(-50%); pointer-events: auto; width: var(--tt-hit); height: var(--tt-hit); display: inline-flex; align-items: center; justify-content: center; font: 400 1.5rem/1 var(--tt-type); color: var(--tt-ink); text-decoration: none; background: transparent; border: 0; }
[data-artifact="time-zone-meeting-planner"] .tz-zone-head .tz-remove:hover { color: var(--tt-accent); }
[data-artifact="time-zone-meeting-planner"] .tz-zone-head .tz-now { font-family: var(--tt-type); font-weight: 400; margin-left: 8px; }
[data-artifact="time-zone-meeting-planner"] .tz-city { font-weight: 700; white-space: nowrap; }
[data-artifact="time-zone-meeting-planner"] .tz-off { color: var(--tt-soft); font: 400 .75rem/1.2 var(--tt-type); white-space: nowrap; }
[data-artifact="time-zone-meeting-planner"] .tz-track { position: relative; display: flex; height: var(--tt-lane); border-block: 1px solid var(--tt-ink); }
[data-artifact="time-zone-meeting-planner"] .tz-q { position: relative; flex: 1 1 0; min-width: 0; }
[data-artifact="time-zone-meeting-planner"] .tz-ph-day { background: var(--tt-day); }
[data-artifact="time-zone-meeting-planner"] .tz-ph-night { background: var(--tt-night) repeating-linear-gradient(135deg, transparent 0 3px, var(--tt-hatch) 3px 4px); }
[data-artifact="time-zone-meeting-planner"] .tz-ph-work { background: var(--tt-work); box-shadow: inset 0 3px 0 var(--tt-work-edge); }
[data-artifact="time-zone-meeting-planner"] .tz-mid::before { content: ''; position: absolute; inset-block: 0; left: 0; border-left: 2px dashed var(--tt-soft); }
[data-artifact="time-zone-meeting-planner"] .tz-q[data-t]::after { content: attr(data-t); position: absolute; z-index: 3; left: 3px; top: 50%; transform: translateY(-50%); font: 400 .6875rem/1 var(--tt-type); color: var(--tt-ink); white-space: nowrap; pointer-events: none; }

/* The overlay: a link per quarter hour. Inside every zone's hours it is the heavy bar; the chosen one is the marker. */
[data-artifact="time-zone-meeting-planner"] .tz-picks { position: absolute; inset: 0; z-index: 1; display: flex; touch-action: pan-y; }
[data-artifact="time-zone-meeting-planner"] .tz-picks[role="slider"] { cursor: ew-resize; }
[data-artifact="time-zone-meeting-planner"] .tz-picks:focus-visible { outline: 3px solid var(--tt-focus); outline-offset: -3px; }
[data-artifact="time-zone-meeting-planner"] .tz-pick { position: relative; display: block; flex: 1 1 0; min-width: 0; color: var(--tt-ink); text-decoration: none; }
[data-artifact="time-zone-meeting-planner"] .tz-pick:focus-visible { outline: 3px solid var(--tt-focus); outline-offset: -3px; z-index: 4; }
[data-artifact="time-zone-meeting-planner"] .tz-pick[data-tick]::after { content: attr(data-tick); position: absolute; z-index: 3; top: 0; left: 0; padding-left: 3px; line-height: var(--tt-axis); font: 400 .6875rem/var(--tt-axis) var(--tt-type); color: var(--tt-soft); white-space: nowrap; pointer-events: none; border-left: 1px solid var(--tt-soft); }
[data-artifact="time-zone-meeting-planner"] .tz-q-all::before { content: ''; position: absolute; inset: 0; background: var(--tt-overlap-wash); opacity: .6; pointer-events: none; }
[data-artifact="time-zone-meeting-planner"] .tz-q-all { box-shadow: inset 0 4px 0 var(--tt-overlap), inset 0 -4px 0 var(--tt-overlap); }
[data-artifact="time-zone-meeting-planner"] .tz-q-first { box-shadow: inset 3px 0 0 var(--tt-overlap), inset 0 4px 0 var(--tt-overlap), inset 0 -4px 0 var(--tt-overlap); }
[data-artifact="time-zone-meeting-planner"] .tz-q-last { box-shadow: inset -3px 0 0 var(--tt-overlap), inset 0 4px 0 var(--tt-overlap), inset 0 -4px 0 var(--tt-overlap); }
[data-artifact="time-zone-meeting-planner"] .tz-q-first.tz-q-last { box-shadow: inset 3px 0 0 var(--tt-overlap), inset -3px 0 0 var(--tt-overlap), inset 0 4px 0 var(--tt-overlap), inset 0 -4px 0 var(--tt-overlap); }
[data-artifact="time-zone-meeting-planner"] .tz-q-chosen::before { content: ''; position: absolute; z-index: 2; inset-block: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--tt-chosen); opacity: 1; pointer-events: none; }
[data-artifact="time-zone-meeting-planner"] .tz-pick.tz-q-chosen[data-time]::after { content: attr(data-time); position: absolute; z-index: 5; top: 0; left: 50%; transform: translateX(-50%); padding: 0 6px; border-left: 0; line-height: var(--tt-axis); font: 400 .75rem/var(--tt-axis) var(--tt-type); color: var(--tt-on-chosen); background: var(--tt-chosen); white-space: nowrap; pointer-events: none; }

/* Key to the shading. */
[data-artifact="time-zone-meeting-planner"] .tz-keys { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; padding: 0; list-style: none; font: 400 .875rem/1.3 var(--tt-body); color: var(--tt-soft); }
[data-artifact="time-zone-meeting-planner"] .tz-keys li { display: inline-flex; align-items: center; gap: 8px; }
[data-artifact="time-zone-meeting-planner"] .tz-key { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1rem; border: 1px solid var(--tt-ink); color: var(--tt-ink); }
[data-artifact="time-zone-meeting-planner"] .tz-key .tz-glyph { width: .75rem; height: .75rem; }
[data-artifact="time-zone-meeting-planner"] .tz-key-all { background: var(--tt-overlap-wash); border: 2px solid var(--tt-overlap); }

[data-artifact="time-zone-meeting-planner"] .tz-chosen { margin: 12px 0; }
[data-artifact="time-zone-meeting-planner"] .tz-windows { padding-left: 24px; margin: 8px 0; }
[data-artifact="time-zone-meeting-planner"] .tz-summary-box { margin: 12px 0; }
[data-artifact="time-zone-meeting-planner"] .tz-summary-box summary { cursor: pointer; font: 400 .9375rem/1.2 var(--tt-type); letter-spacing: .06em; text-transform: uppercase; min-height: var(--tt-hit); display: flex; align-items: center; }
[data-artifact="time-zone-meeting-planner"] .tz-summary { width: 100%; font: 400 .875rem/1.4 var(--tt-type); color: var(--tt-ink); background: var(--tt-field); border: 1px solid var(--tt-ink); border-radius: 0; padding: 10px; }
[data-artifact="time-zone-meeting-planner"] .tz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Wider screens: the date joins the strip, and the sheet gets its margins. */
@media (min-width: 40.0625rem) {
  [data-artifact="time-zone-meeting-planner"] { padding: 24px 36px 28px; }
  [data-artifact="time-zone-meeting-planner"] .tz-strip { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) repeat(2, minmax(0, 1fr)); }
  [data-artifact="time-zone-meeting-planner"] .tz-field-add { grid-column: 1 / -1; }
  [data-artifact="time-zone-meeting-planner"] .tz-field-date { grid-column: auto; }
}
/* Narrow screens: label every six hours instead of every three. */
@media (max-width: 40rem) {
  [data-artifact="time-zone-meeting-planner"] .tz-minor[data-t]::after, [data-artifact="time-zone-meeting-planner"] .tz-minor[data-tick]::after { content: none; }
}

/* Small motion: the band draws in when the plan changes, the marker settles. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-artifact="time-zone-meeting-planner"] .tz-q-all::before { animation: tz-band-in .4s ease-out both; }
  [data-artifact="time-zone-meeting-planner"] .tz-q-chosen::before { animation: tz-settle .15s ease-out both; }
}
@keyframes tz-band-in { from { opacity: 0; } to { opacity: .6; } }
@keyframes tz-settle { from { transform: scaleY(.6); } to { transform: scaleY(1); } }