/* World clock (/world-clock): what is its own, the search list, the clock cards with their analog faces and the meeting
   planner's hour strips. Panels, fields, buttons, tags, the empty state and the colours come from the app kit
   (css/app-kit, docs/app-kit.md); the accent is the time category's violet. Loaded only on this app's page (StylePaths). */

/* The app's own colours: the red second hand, day and night cards, the hour cells and the green working hours.
   Day and night card colours stay the same in both themes; the hour strip keeps its own night shade. */
.wcl-landing-app {
    --wcl-second: #dc2626;
    --wcl-day: #c5e4ff;
    --wcl-night: #07090d;
    --wcl-cell: #f1f5f9;
    --wcl-cell-night: #e7ebf5;
    --wcl-work: #bbf7d0;
    --wcl-work-text: #166534;
}

.wcl-landing-app[data-theme="dark"] > .filter-landing-stage {
    --wcl-second: #f87171;
    --wcl-cell: #1e293b;
    --wcl-cell-night: #0a1020;
    --wcl-work: #14532d;
    --wcl-work-text: #bbf7d0;
}

/* Full width blocks, also on phones, where the site sets align-items: start on the stage (seo-pages.css). */
.wcl-landing-app > .filter-landing-stage > * {
    align-self: stretch;
}

/* --- Search: a combobox with a list of time zones under it ------------------------------------------------------- */

.wcl-landing-app .wcl-search {
    position: relative;
}

.wcl-landing-app .wcl-search-row,
.wcl-landing-app .wcl-slider-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.wcl-landing-app .wcl-search-input {
    flex: 1 1 14rem;
}

.wcl-landing-app .wcl-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    display: block;
    max-height: 16rem;
    margin: 0.2rem 0 0;
    padding: 0.25rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-sm);
    background: var(--ak-field);
    box-shadow: var(--ak-shadow-lg);
}

.wcl-landing-app .wcl-option {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.35rem;
    cursor: pointer;
}

.wcl-landing-app .wcl-option:hover,
.wcl-landing-app .wcl-option.is-active {
    background: var(--ak-hover);
}

.wcl-landing-app .wcl-option--none {
    color: var(--ak-muted);
    cursor: default;
}

.wcl-landing-app .wcl-option-city {
    font-weight: 600;
}

.wcl-landing-app .wcl-option-zone {
    color: var(--ak-muted);
    font-size: 0.82rem;
    white-space: pre;
}

/* --- City cards: an analog face, the name (editable), the time and its chips ------------------------------------- */

.wcl-landing-app .wcl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wcl-landing-app .wcl-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius);
    background: var(--ak-panel);
}

/* Day is a light blue card with dark text; night is near black with light text. The local tokens keep the name
   field, chips, badge and icon buttons readable in either site theme. */
.wcl-landing-app .wcl-card.is-day {
    background: var(--wcl-day);
    color: #10243d;
    border-color: #8eb8de;
    --ak-text: #10243d;
    --ak-muted: #3e5674;
    --ak-field: #f4f9ff;
    --ak-border: #9ec4e4;
    --ak-hover: rgb(16 36 61 / 0.08);
}

.wcl-landing-app .wcl-card.is-night {
    background: var(--wcl-night);
    color: #e8eef6;
    border-color: #2a3144;
    --ak-text: #e8eef6;
    --ak-muted: #a3b0c4;
    --ak-field: #141820;
    --ak-border: #323a4e;
    --ak-hover: rgb(232 238 246 / 0.1);
}

.wcl-landing-app .wcl-analog {
    flex: 0 0 auto;
    width: 5.5rem;
    height: 5.5rem;
}

.wcl-landing-app .wcl-face {
    fill: var(--ak-field);
    stroke: var(--ak-border);
    stroke-width: 2;
}

.wcl-landing-app .wcl-tick {
    stroke: var(--ak-muted);
    stroke-width: 2;
}

.wcl-landing-app .wcl-hand {
    stroke: var(--ak-text);
    stroke-linecap: round;
}

.wcl-landing-app .wcl-hand--h {
    stroke-width: 4;
}

.wcl-landing-app .wcl-hand--m {
    stroke-width: 3;
}

.wcl-landing-app .wcl-hand--s {
    stroke: var(--wcl-second);
    stroke-width: 1.5;
}

.wcl-landing-app .wcl-pin {
    fill: var(--wcl-second);
}

.wcl-landing-app .wcl-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.wcl-landing-app .wcl-card-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

/* The city name is a field to rename it (site.css styles every text input, hence the long selector). */
.wcl-landing-app input.wcl-name:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--ak-border);
    border-radius: 0.3rem;
    background: var(--ak-field);
    color: var(--ak-text);
    font: inherit;
    font-weight: 700;
    box-shadow: none;
}

.wcl-landing-app input.wcl-name:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]):focus {
    outline: 2px solid var(--ak-accent);
    outline-offset: 1px;
    border-color: var(--ak-accent);
}

.wcl-landing-app .wcl-digital {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.wcl-landing-app .wcl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.wcl-landing-app .wcl-chip {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-pill);
    background: var(--ak-field);
    font-size: var(--ak-fs-xs);
    white-space: pre;
}

.wcl-landing-app .wcl-chip:empty {
    display: none;
}

.wcl-landing-app .wcl-zone {
    overflow: hidden;
    color: var(--ak-muted);
    font-size: var(--ak-fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wcl-landing-app .wcl-card-tools {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wcl-landing-app .wcl-remove:hover:not(:disabled) {
    color: var(--ak-danger);
}

/* --- Meeting planner: one row of 24 hour cells per city ---------------------------------------------------------- */

.wcl-landing-app .wcl-slider {
    flex: 1 1 12rem;
    width: auto;
}

.wcl-landing-app .wcl-slider-out {
    min-width: 8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wcl-landing-app .wcl-planner {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-x: auto;
}

.wcl-landing-app .wcl-row {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) 1fr;
    grid-template-areas: "name time" "strip strip";
    gap: 0.15rem 0.5rem;
}

.wcl-landing-app .wcl-row-name {
    grid-area: name;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wcl-landing-app .wcl-row-time {
    grid-area: time;
    color: var(--ak-muted);
    font-size: var(--ak-fs-sm);
}

.wcl-landing-app .wcl-row.is-work .wcl-row-time {
    color: var(--wcl-work-text);
    font-weight: 600;
}

.wcl-landing-app .wcl-strip {
    grid-area: strip;
    display: grid;
    grid-template-columns: repeat(24, minmax(1.6rem, 1fr));
    gap: 2px;
}

.wcl-landing-app .wcl-cell {
    padding: 0.2rem 0;
    border-radius: 0.2rem;
    background: var(--wcl-cell);
    color: var(--ak-muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.wcl-landing-app .wcl-cell.is-night {
    background: var(--wcl-cell-night);
}

.wcl-landing-app .wcl-cell.is-work {
    background: var(--wcl-work);
    color: var(--wcl-work-text);
    font-weight: 600;
}

.wcl-landing-app .wcl-cell.is-midnight {
    box-shadow: inset 2px 0 0 var(--ak-muted);
}

.wcl-landing-app .wcl-cell.is-slot {
    outline: 2px solid var(--ak-accent);
    outline-offset: -1px;
}

.wcl-landing-app .wcl-overlap {
    margin: 0;
    font-weight: 600;
}

.wcl-landing-app .wcl-status-row {
    min-height: 1.2rem;
}

/* --- Settings: working hours from / until side by side ----------------------------------------------------------- */

.wcl-landing-app .wcl-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--ak-space-2);
}

/* Phones: one card a row, as wide as the stage (the zone name is cut with an ellipsis). */
@media (max-width: 600px) {
    .wcl-landing-app .wcl-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}