/* World clock — favourites, search and explore. Colours come from the tokens in styles.css. */

.wc-page { max-width:1140px; margin:auto; padding:52px 28px 84px; }
.wc-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.wc-page :is(button, a, [tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.wc-page kbd { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--text); font:500 11px 'DM Mono', monospace; }

/* Hero, search & format toggle */
.wc-hero { text-align:center; }
.wc-hero h1 { margin:0; font-size:clamp(30px,4vw,42px); line-height:1.15; letter-spacing:-1.6px; }
.wc-lede { max-width:520px; margin:11px auto 26px; color:var(--muted); font-size:14px; line-height:1.6; }
.wc-toolbar { display:flex; align-items:stretch; gap:10px; max-width:720px; margin:0 auto; }
.wc-search { position:relative; flex:1; min-width:0; }
.wc-search-icon { position:absolute; top:50%; left:18px; width:19px; height:19px; color:var(--muted); transform:translateY(-50%); pointer-events:none; }
.wc-search input { width:100%; height:56px; padding:0 50px 0 48px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); font:600 15px Manrope, Arial, sans-serif; box-shadow:var(--shadow); outline:none; transition:border-color .18s ease, box-shadow .18s ease; }
.wc-search input::placeholder { color:var(--muted); font-weight:500; opacity:1; }
.wc-search input:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow); }
.wc-search .wc-kbd { position:absolute; top:50%; right:16px; min-width:24px; height:24px; color:var(--muted); transform:translateY(-50%); pointer-events:none; transition:opacity .18s ease; }
.wc-search input:focus ~ .wc-kbd { opacity:0; }

.wc-popup { position:absolute; z-index:30; top:calc(100% + 8px); right:0; left:0; max-height:min(520px, 66vh); overflow-y:auto; padding:6px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow), 0 12px 32px color-mix(in srgb, var(--bg) 60%, transparent); text-align:left; overscroll-behavior:contain; }
.wc-popup[hidden] { display:none; }
.wc-results { margin:0; padding:0; list-style:none; }
.wc-option { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; cursor:pointer; }
.wc-option[aria-selected="true"] { background:var(--surface-2); box-shadow:inset 3px 0 0 var(--accent); }
.wc-option-text { min-width:0; }
.wc-option-name, .wc-option-sub { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-option-name { font-size:14px; font-weight:800; letter-spacing:-.2px; }
.wc-option-sub { margin-top:2px; color:var(--muted); font-size:12px; }
.wc-row-time { font:500 13px 'DM Mono', monospace; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.wc-row-time small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.wc-badge { display:inline-block; margin-left:8px; padding:2px 7px; border-radius:999px; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-text); font-size:10px; font-weight:800; letter-spacing:.3px; vertical-align:1px; }
.wc-search-status:empty { display:none; }
.wc-search-status .wc-status { padding:14px 12px; text-align:left; }

.wc-format { display:inline-flex; flex:none; align-items:center; gap:2px; padding:4px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.wc-format button { height:100%; min-width:54px; min-height:40px; padding:0 12px; border:0; border-radius:12px; background:transparent; color:var(--muted); font:800 13px Manrope, Arial, sans-serif; transition:background .18s ease, color .18s ease; }
.wc-format button:hover { color:var(--text); }
.wc-format button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }

/* Section headings */
.wc-section { margin-top:46px; }
.wc-section-head, .wc-explore-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px; }
.wc-section-head { align-items:center; margin-bottom:14px; }
.wc-head-actions { position:relative; display:flex; align-items:center; gap:14px; }
.wc-share-button { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); font:800 12px Manrope, Arial, sans-serif; transition:border-color .18s ease, background .18s ease; }
.wc-share-button:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.wc-share-pop { position:absolute; z-index:35; top:calc(100% + 8px); right:0; width:min(360px, calc(100vw - 32px)); padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow), 0 12px 32px color-mix(in srgb, var(--bg) 60%, transparent); }
.wc-share-pop[hidden] { display:none; }
.wc-share-pop label { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:700; }
.wc-share-row { display:flex; gap:8px; }
.wc-share-row input { flex:1; min-width:0; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); font:500 12px 'DM Mono', monospace; outline:none; }
.wc-share-row input:focus { border-color:var(--accent); }
.wc-share-row button { flex:none; height:36px; padding:0 14px; border:0; border-radius:10px; background:var(--accent); color:var(--accent-ink); font:800 12px Manrope, Arial, sans-serif; }

/* Banner shown while viewing a shared link */
.wc-shared-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:0 0 14px; padding:14px 16px; border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius:16px; background:color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.wc-shared-banner[hidden] { display:none; }
.wc-shared-banner p { margin:0; font-size:14px; font-weight:800; }
.wc-shared-actions { display:flex; flex-wrap:wrap; gap:8px; }
.wc-shared-actions button { height:34px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); font:800 12px Manrope, Arial, sans-serif; transition:border-color .18s ease; }
.wc-shared-actions button:hover { border-color:var(--accent); }
.wc-shared-actions button.is-primary { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.wc-shared-actions button[hidden] { display:none; }

.wc-toast { position:fixed; z-index:60; bottom:24px; left:50%; padding:10px 18px; border:1px solid var(--line); border-radius:999px; background:var(--text); color:var(--bg); font-size:13px; font-weight:800; box-shadow:var(--shadow); transform:translateX(-50%); animation:wc-toast-in .2s ease-out; }
.wc-toast[hidden] { display:none; }
@keyframes wc-toast-in { from { opacity:0; transform:translate(-50%, 8px); } }
.wc-section-head h2, .wc-explore-head h2 { margin:0; font-size:19px; letter-spacing:-.6px; }
.wc-section-head p, .wc-explore-head p { margin:0; color:var(--muted); font-size:12px; }

/* Favourite cards */
.wc-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.wc-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:20px 18px 16px; border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease; }
.wc-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); }
.wc-card.is-local { border-color:var(--accent); background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface-2)); }
.wc-card.is-new { animation:wc-highlight 1.2s ease-out; }
@keyframes wc-highlight { from { box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow); } to { box-shadow:0 0 0 0 transparent, var(--shadow); } }
.wc-card-body { min-width:0; }
.wc-remove { position:absolute; z-index:4; top:12px; right:12px; display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); font-size:17px; line-height:1; opacity:.6; transition:opacity .18s ease, border-color .18s ease, color .18s ease; }
.wc-card:hover .wc-remove, .wc-remove:focus-visible { opacity:1; }
.wc-remove:hover { border-color:var(--danger); color:var(--danger); opacity:1; }

/* Reordering */
.wc-handle { position:absolute; z-index:4; top:12px; left:12px; display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); opacity:.6; cursor:grab; touch-action:none; transition:opacity .18s ease, border-color .18s ease, color .18s ease; }
.wc-card:hover .wc-handle, .wc-handle:focus-visible { opacity:1; }
.wc-handle:hover { border-color:var(--accent); color:var(--text); opacity:1; }
.wc-card.is-grabbed { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow); }
.wc-card.is-grabbed .wc-handle { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); opacity:1; }
.wc-card.is-dragging { z-index:50; border-color:var(--accent); box-shadow:0 28px 60px color-mix(in srgb, var(--bg) 55%, #0006); cursor:grabbing; transition:none; pointer-events:none; }
.wc-card.is-dragging .wc-handle { opacity:1; }
.wc-card-placeholder { border:1.5px dashed var(--accent); border-radius:20px; background:color-mix(in srgb, var(--accent) 7%, transparent); }
.wc-is-dragging, .wc-is-dragging * { cursor:grabbing !important; user-select:none; }

/* Skeletons while a shared link resolves */
.wc-card.is-skeleton { gap:12px; min-height:300px; }
.wc-skel { display:block; border-radius:8px; background:linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 50%, var(--surface)), var(--surface-2)) 0 0 / 200% 100%; animation:wc-shimmer 1.4s linear infinite; }
.wc-skel-face { width:132px; height:132px; margin:0 auto 6px; border-radius:50%; }
.wc-skel-title { width:60%; height:16px; }
.wc-skel-line { width:80%; height:12px; }
.wc-skel-time { width:55%; height:26px; }
@keyframes wc-shimmer { to { background-position:-200% 0; } }
.wc-eyebrow { display:inline-block; margin:0 0 8px; padding:3px 9px; border-radius:999px; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-text); font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.wc-card-title { display:flex; align-items:center; gap:8px; margin:0; font-size:16px; letter-spacing:-.4px; }
.wc-card-title span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-card-sub { margin:4px 0 0; overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.wc-card-time { margin:14px 0 0; font:500 27px/1 'DM Mono', monospace; letter-spacing:-1px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wc-card-time small { margin-left:5px; color:var(--muted); font-size:13px; letter-spacing:0; }
.wc-card-date { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0 0; color:var(--muted); font-size:12px; font-weight:700; }
.wc-rel { padding:2px 8px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-text); font-size:10px; font-weight:800; }
.wc-rel:empty { display:none; }
.wc-card-meta { display:flex; justify-content:space-between; gap:8px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font:500 12px 'DM Mono', monospace; }
.wc-diff { color:var(--text); }

/* Meeting planner */
.wc-meeting { margin-top:52px; padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }
.wc-meeting-head { display:flex; flex-wrap:wrap; align-items:start; justify-content:space-between; gap:14px; }
.wc-meeting-head h2 { margin:0; font-size:19px; letter-spacing:-.6px; }
.wc-meeting-head p, .wc-meeting-summary { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.wc-meeting-actions { display:flex; gap:8px; }
.wc-meeting-actions button { height:34px; padding:0 13px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--text); font:800 12px Manrope,Arial,sans-serif; }
.wc-meeting-actions button:hover { border-color:var(--accent); }
.wc-meeting-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:18px; }
.wc-meeting-controls label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; font-weight:800; }
.wc-meeting-controls input { width:104px; height:34px; padding:0 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text); font:600 12px 'DM Mono',monospace; }
.wc-meeting-controls #wc-meeting-date { width:132px; }
.wc-meeting-controls #wc-meeting-time { width:120px; }
.wc-meeting-controls label:last-child input { width:96px; }
.wc-timeline-wrap { position:relative; margin-top:16px; overflow-x:auto; padding-bottom:3px; }
.wc-timeline-labels { display:grid; grid-template-columns:repeat(5,1fr); min-width:730px; padding-left:180px; color:var(--muted); font:500 10px 'DM Mono',monospace; }
.wc-timeline-labels span:last-child { text-align:right; }
.wc-time-slider { position:relative; z-index:3; display:block; width:calc(100% - 180px); min-width:550px; margin:3px 0 7px 180px; accent-color:var(--accent); cursor:ew-resize; }
.wc-time-rows { min-width:730px; }
.wc-time-row { display:grid; grid-template-columns:172px minmax(550px,1fr); align-items:center; gap:8px; min-height:42px; border-top:1px solid var(--line); }
.wc-time-place { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; column-gap:8px; min-width:0; font-size:12px; font-weight:800; }
.wc-time-place > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-time-place small { grid-column:2; overflow:hidden; color:var(--muted); font:500 10px 'DM Mono',monospace; text-overflow:ellipsis; white-space:nowrap; }
.wc-time-track { display:grid; grid-template-columns:repeat(var(--slots,96),minmax(0,1fr)); height:25px; overflow:hidden; border-radius:7px; background:color-mix(in srgb,var(--surface-2) 70%,transparent); }
.wc-time-cell { min-width:0; border-right:1px solid color-mix(in srgb,var(--line) 65%,transparent); background:color-mix(in srgb,var(--bg) 18%,transparent); }
.wc-time-cell:nth-child(4n+1) { border-left:1px solid color-mix(in srgb,var(--text) 13%,transparent); }
.wc-time-cell.is-working { background:color-mix(in srgb,var(--accent) 43%,var(--surface)); }
.wc-time-cell.is-selected { position:relative; z-index:1; background:var(--text); box-shadow:0 0 0 1px var(--text); }

.wc-add-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:300px; padding:20px; border:1.5px dashed var(--line); border-radius:20px; background:transparent; color:var(--muted); font:inherit; transition:border-color .18s ease, color .18s ease, background .18s ease; }
.wc-add-card:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent); color:var(--text); }
.wc-add-plus { display:grid; place-items:center; width:42px; height:42px; margin-bottom:4px; border-radius:50%; background:var(--surface-2); color:var(--accent-text); font-size:24px; font-weight:500; }
.wc-add-label { font-size:14px; font-weight:800; }
.wc-add-hint { font-size:11px; }

/* Analog clock face (day/night colours are part of the face design) */
.clock-face { --face:132px; position:relative; flex:none; width:var(--face); aspect-ratio:1; margin:0 auto 16px; border:5px solid var(--surface); border-radius:50%; box-shadow:inset 0 0 0 1px var(--line); }
.clock-face.day { background:#f8faf6; color:#172017; }
.clock-face.night { background:#202421; color:#f5f7ee; }
.clock-number { position:absolute; z-index:1; top:50%; left:50%; font:700 9px Manrope, Arial, sans-serif; font-style:normal; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--face) * -.39)) rotate(calc(var(--angle) * -1)); }
.clock-dot { position:absolute; z-index:3; top:50%; left:50%; width:7px; height:7px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); }
.hand { position:absolute; z-index:2; bottom:50%; left:calc(50% - 1px); width:2px; border-radius:999px; background:currentColor; transform-origin:bottom; }
.hand.hour { height:23%; }
.hand.minute { height:33%; }
.hand.second { width:1px; height:36%; background:#ff947b; }

/* Flags */
.wc-flag { flex:none; width:20px; height:15px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); }
.wc-globe { display:inline-grid; place-items:center; color:var(--muted); box-shadow:none; }

/* Explore */
.wc-explore { margin-top:52px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }
.wc-explore-head { padding:20px 22px 0; }
.wc-tabs { display:flex; gap:6px; padding:16px 22px; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:none; }
.wc-tabs::-webkit-scrollbar { display:none; }
.wc-tab { flex:none; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font:800 12px Manrope, Arial, sans-serif; transition:border-color .18s ease, color .18s ease, background .18s ease; }
.wc-tab:hover { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); color:var(--text); }
.wc-tab[aria-selected="true"] { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.wc-tabs .wc-tab:focus-visible { outline-offset:-2px; }
.wc-panel { padding:6px 12px 12px; }
.wc-panel-section + .wc-panel-section { margin-top:14px; }
.wc-panel-title { margin:0; padding:14px 10px 6px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.wc-rows.wc-rows-compact { grid-template-columns:repeat(4, minmax(0,1fr)); }

/* Countries: one disclosure row per country, capital's time on the right */
.wc-countries-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; padding:0 10px 8px 0; }
.wc-filter { width:min(260px, 100%); height:38px; padding:0 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--text); font:600 13px Manrope, Arial, sans-serif; outline:none; transition:border-color .18s ease, box-shadow .18s ease; }
.wc-filter::placeholder { color:var(--muted); font-weight:500; opacity:1; }
.wc-filter:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.wc-countries { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:12px; margin:0; padding:0; list-style:none; }
.wc-country { min-width:0; border-bottom:1px solid var(--line); }
.wc-country[hidden] { display:none; }
.wc-country.is-open { grid-column:1 / -1; }
.wc-country-row { display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:center; gap:6px; padding-right:10px; }
.wc-country-toggle { display:grid; grid-template-columns:20px minmax(0,1fr) auto 14px; align-items:center; gap:10px; width:100%; min-width:0; padding:10px; border:0; border-radius:12px; background:transparent; color:var(--text); font:inherit; text-align:left; transition:background .18s ease; }
.wc-country-toggle:hover, .wc-country.is-open .wc-country-toggle { background:var(--surface-2); }
.wc-tag { margin-left:6px; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-text); font-size:9.5px; font-style:normal; font-weight:800; letter-spacing:.3px; vertical-align:1px; }
.wc-zones { margin-left:6px; color:var(--muted); font-size:10.5px; }
.wc-zones::before { content:"· "; }
.wc-chevron { width:8px; height:8px; justify-self:center; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-2px) rotate(45deg); transition:transform .18s ease; }
.wc-country-toggle[aria-expanded="true"] .wc-chevron { transform:translateY(2px) rotate(-135deg); }
.wc-country-cities { margin:4px 0 12px; padding:4px 8px 10px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.wc-country-cities[hidden] { display:none; }
.wc-country-note { margin:0; padding:10px 10px 4px; color:var(--muted); font-size:12px; }
.wc-country-cities .wc-row:last-child { border-bottom:0; }
.wc-more { display:block; margin:10px auto 0; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); font:800 12px Manrope, Arial, sans-serif; transition:border-color .18s ease; }
.wc-more:hover { border-color:var(--accent); }
.wc-more[hidden] { display:none; }
.wc-panel:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; border-radius:0 0 22px 22px; }
.wc-rows { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:12px; margin:0; padding:0; list-style:none; }
.wc-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto 32px; align-items:center; gap:10px; min-width:0; padding:10px; border-bottom:1px solid var(--line); }
.wc-row-name { min-width:0; }
.wc-row-name > b, .wc-row-name > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-row-name > b { font-size:13px; font-weight:800; }
.wc-row-name > span { margin-top:2px; color:var(--muted); font-size:11px; }
.wc-star { display:grid; place-items:center; width:32px; height:32px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font-size:17px; line-height:1; transition:border-color .18s ease, color .18s ease; }
.wc-star:hover { border-color:var(--line); color:var(--text); }
.wc-star[aria-pressed="true"] { color:var(--accent-text); }
.wc-status { margin:0; padding:34px 12px; color:var(--muted); font-size:13px; text-align:center; }
.wc-grid > noscript, .wc-grid > .wc-status { grid-column:1 / -1; }
.wc-retry { display:inline-block; margin-left:10px; padding:6px 13px; border:1px solid var(--accent); border-radius:999px; background:transparent; color:var(--text); font:800 12px Manrope, Arial, sans-serif; }
.wc-retry:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); }

/* Responsive */
@media (max-width:980px) {
  .wc-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .wc-rows, .wc-rows.wc-rows-compact { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:899px) {
  .wc-countries { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .wc-page { padding:34px 16px 60px; }
  .wc-meeting { padding:16px; border-radius:18px; }
  .wc-meeting-actions { width:100%; }
  .wc-meeting-actions button { flex:1; }
  .wc-meeting-controls { gap:9px; }
  .wc-lede { margin-bottom:20px; }
  .wc-toolbar { flex-direction:column; }
  .wc-format { align-self:center; }
  .wc-search .wc-kbd, .wc-section-head p { display:none; }
  .wc-grid { grid-template-columns:1fr; gap:12px; }
  .wc-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:16px; padding:16px; }
  .wc-card .clock-face { --face:96px; margin:0; border-width:4px; }
  .wc-card .clock-number { font-size:7px; }
  .wc-card-body { padding-right:30px; }
  .wc-handle { top:48px; right:12px; left:auto; }
  .wc-card.is-skeleton { min-height:0; grid-template-columns:96px minmax(0,1fr); }
  .wc-skel-face { width:96px; height:96px; grid-row:span 3; margin:0; }
  .wc-shared-banner { padding:12px; }
  .wc-card.is-local .wc-card-body { padding-right:0; }
  .wc-card-time { margin-top:10px; font-size:24px; }
  .wc-card-meta { margin-top:10px; padding-top:9px; }
  .wc-add-card { min-height:0; flex-direction:row; padding:16px; }
  .wc-add-plus { width:32px; height:32px; margin:0 4px 0 0; font-size:20px; }
  .wc-add-hint { display:none; }
  .wc-explore { border-radius:18px; }
  .wc-explore-head { padding:18px 16px 0; }
  .wc-tabs { padding:14px 16px; }
  .wc-panel { padding:4px 6px 8px; }
  .wc-rows, .wc-rows.wc-rows-compact { grid-template-columns:1fr; }
  .wc-countries-head { padding-right:0; }
  .wc-filter { width:100%; }
  .wc-country-row { padding-right:4px; }
  .wc-country-toggle { padding:10px 6px; gap:8px; }
  .wc-country-cities { padding:2px 2px 10px; }
}

/* Compact clock list: keep the planner visible without losing the live clock. */
.wc-section { margin-top:38px; }
.wc-add-small { height:34px; padding:0 14px; border:1px solid var(--accent); border-radius:999px; background:var(--accent); color:var(--accent-ink); font:800 12px "Times New Roman",Times,serif; }
.wc-add-small:hover { filter:brightness(.96); }
.wc-add-small[hidden] { display:none; }
.wc-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.wc-card { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; column-gap:13px; min-height:118px; padding:14px; border-radius:16px; }
.wc-card-body { padding-right:28px; }
.wc-card .clock-face { --face:64px; margin:0; border-width:3px; }
.wc-card .clock-number { font-size:5px; }
.wc-card .hand.hour { height:21%; }
.wc-card .hand.minute { height:31%; }
.wc-card .hand.second { height:34%; }
.wc-eyebrow, .wc-card-sub { display:none; }
.wc-card-title { gap:7px; font-size:14px; letter-spacing:-.2px; }
.wc-card-time { margin-top:7px; font-size:25px; }
.wc-card-time small { margin-left:4px; font-size:11px; }
.wc-card-date { gap:5px; margin-top:5px; font-size:10px; }
.wc-card-meta { margin-top:6px; padding-top:0; border-top:0; font-size:10px; }
.wc-handle { top:auto; right:10px; bottom:10px; left:auto; width:24px; height:24px; border-radius:8px; }
.wc-show-clocks { grid-column:1/-1; justify-self:center; padding:8px 15px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); font:800 12px "Times New Roman",Times,serif; }
.wc-meeting { margin-top:28px; }

@media (max-width:1080px) { .wc-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:780px) { .wc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  .wc-grid { grid-template-columns:1fr; gap:10px; }
  .wc-card { grid-template-columns:64px minmax(0,1fr); min-height:106px; column-gap:12px; padding:12px; }
  .wc-card .clock-face { --face:64px; border-width:3px; }
  .wc-card .clock-number { font-size:5px; }
  .wc-card-body, .wc-card.is-local .wc-card-body { padding-right:28px; }
  .wc-handle { top:auto; right:8px; bottom:8px; left:auto; }
  .wc-card-time { margin-top:5px; font-size:23px; }
  .wc-card-meta { margin-top:4px; }
}