/* Our own versions of the windows a browser opens for date, time, date and time and color fields
   (./UI/FieldPickers.js). The card, its floating and small screen popup and the RETURN button are
   the symbol picker's (./UI/SymbolPicker.css), every button inside is one of its symbol tiles, so
   only what is particular to each picker is described here. */

.tnx-field-picker-control:not([readonly]):not(:disabled):not([data-editable="0"]):not([data-editable-state="readonly"]) {
    cursor: pointer;
    caret-color: transparent;
    user-select: none;
}
.tnx-field-picker-control:not([readonly]):not(:disabled):not([data-editable="0"]):not([data-editable-state="readonly"]):hover {
    filter: opacity(.8);
}
.tnx-field-picker-control:focus:not([readonly]):not(:disabled):not([data-editable="0"]):not([data-editable-state="readonly"]) {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: none;
}

.tnx-field-picker .tnx-symbol-picker-panel-inner {
    gap: 0.6rem;
}

.tnx-field-picker-footer { flex: 0 0 auto; padding: 0.6rem 0.9rem 0.9rem; }
.tnx-field-picker button.tnx-field-picker-ok { width: 100%; max-width: none; margin: 0; }

/* The page-wide button rules would turn every tile into a 300px block with white text. */
.tnx-field-picker button.tnx-symbol-picker-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 2.4rem;
    min-width: 0;
    aspect-ratio: auto;
    padding: 0 0.2rem;
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Visibility must be immediate so opening a modal focuses its date before a clock. */
    transition-property: opacity, border-color, background-color, color, filter, box-shadow;
}

.tnx-field-picker button.tnx-symbol-picker-symbol:disabled {
    opacity: 0.25;
    cursor: default;
    filter: none;
    border-color: var(--border-color);
    background: transparent;
}

/* Today and the current time are named in the link color; only what is picked has a border. */
.tnx-field-picker button.tnx-symbol-picker-symbol.is-today {
    color: var(--link-color);
}

/* What is picked keeps every other tile's hover and click, which confirms it and moves on. */
.tnx-field-picker button.tnx-symbol-picker-symbol.is-active {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.tnx-field-picker-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    flex: 0 0 auto;
}

.tnx-field-picker-endpoint {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.tnx-field-picker-time {
    --tnx-time-row-height: 2.5rem;
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    flex: 0 0 auto;
}

.tnx-field-picker-time[hidden] { display: none; }

/* During date selection a clock is one ordinary input-height row. Both clocks expand
   together when the time section is active, without replacing their scroll columns. */
.tnx-field-picker-time.is-compact {
    --tnx-time-row-height: 2.4rem;
    gap: 0;
}

.tnx-field-picker-time.is-compact .tnx-field-picker-wheel {
    height: var(--tnx-time-row-height);
    padding: 0;
    mask-image: none;
    -webkit-mask-image: none;
}

.tnx-field-picker-time.is-compact .tnx-field-picker-wheel-value,
.tnx-field-picker-time.is-compact .tnx-field-picker-colon { font-size: 0.95rem; }

.tnx-field-picker-time.is-compact .tnx-field-picker-minute-shortcuts { display: none; }

/* Each clock's NOW link and minute shortcuts fill its width on one centred row. */
.tnx-field-picker-minute-shortcuts {
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0.25rem;
}

.tnx-field-picker-time-now {
    color: var(--link-color);
    font-size: 0.8rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.tnx-field-picker-time-now:hover,
.tnx-field-picker-time-now:focus-visible { opacity: 0.8; }
.tnx-field-picker-minute-shortcuts .is-current { visibility: hidden; transition: none; }
.tnx-field-picker-time[data-role="single"] .tnx-field-picker-minute-shortcuts button { height: 3rem; }

/* Each clock has two native scroll columns. The centre stays clear while neighbouring
   values fade towards the edges; the field label remains outside the selection border. */
.tnx-field-picker-clock {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0.65rem minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.tnx-field-picker-clock::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--tnx-time-row-height);
    transform: translateY(-50%);
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    pointer-events: none;
}

.tnx-field-picker-clock.is-active::before {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.tnx-field-picker-colon {
    text-align: center;
    font-size: 1.6rem;
}

.tnx-field-picker-wheel {
    height: calc(var(--tnx-time-row-height) * 7);
    box-sizing: border-box;
    padding: calc(var(--tnx-time-row-height) * 3) 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    touch-action: pan-y;
    user-select: none;
    cursor: pointer;
    outline: none;
    mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
    -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
}

.tnx-field-picker-wheel::-webkit-scrollbar { display: none; }

.tnx-field-picker-wheel-value {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--tnx-time-row-height);
    font-size: 1.2rem;
    opacity: 0.4;
    cursor: pointer;
}

.tnx-field-picker-wheel-value:not(.is-selected):not(.is-unavailable):hover { opacity: 0.32; }

.tnx-field-picker-wheel-value.is-selected {
    font-size: 1.6rem;
    opacity: 1;
    cursor: pointer;
}

.tnx-field-picker-wheel-value.is-unavailable:not(.is-selected) {
    opacity: 0.15;
    cursor: pointer;
}

.tnx-field-picker-wheel:focus-visible .is-selected {
    color: var(--primary-color);
}

.tnx-field-picker button.tnx-symbol-picker-symbol.is-in-range {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.tnx-field-picker button.tnx-symbol-picker-symbol.is-range-endpoint {
    border-color: var(--primary-color);
    border-style: dashed;
    cursor: pointer;
    touch-action: none;
}

.tnx-field-picker button.tnx-symbol-picker-symbol.is-range-endpoint.is-active {
    border-style: solid;
}

.tnx-field-picker button.tnx-symbol-picker-symbol.is-outside-month {
    opacity: 0.55;
}

.tnx-field-picker .tnx-symbol-picker-categories {
    flex: 0 0 auto;
}

.tnx-field-picker-head {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
    gap: 0.3rem;
}

.tnx-field-picker-head button.tnx-symbol-picker-symbol {
    font-weight: 700;
}

.tnx-field-picker-grid {
    display: grid;
    grid-template-columns: repeat(var(--tnx-field-picker-columns, 3), minmax(0, 1fr));
    gap: 0.3rem;
    align-items: center;
}

.tnx-field-picker-grid[hidden] {
    display: none;
}

/* The calendar week leads every row, as readable as the weekday names above the days. */
.tnx-field-picker-grid--days {
    position: relative;
    grid-template-columns: 1.9rem repeat(7, minmax(0, 1fr));
}

/* Absolute grid placement follows the Saturday column without affecting day-cell sizing. */
.tnx-field-picker-grid--days::after {
    content: '';
    position: absolute;
    grid-column: 7;
    grid-row: 1 / 8;
    top: 0;
    bottom: 0;
    left: calc(-0.15rem - 0.5px);
    width: 1px;
    background: currentColor;
    opacity: 0.3;
    pointer-events: none;
}

.tnx-field-picker-weekday,
.tnx-field-picker-week,
.tnx-field-picker-label {
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
    opacity: 0.5;
    white-space: nowrap;
}

.tnx-field-picker-week {
    cursor: default;
    opacity: 0.25;
}

.tnx-field-picker-week.is-in-range { opacity: 0.5; }

.tnx-field-picker-label {
    text-align: left;
}

/* The shortcuts below the field (TODAY, +1D, ...) and CLEAN, each an empty line apart. The
   shortcuts keep their look and shrink exactly like below the field; CLEAN has a line of its own. */
.tnx-field-picker .tnx-field-picker-shortcuts {
    flex: 0 0 auto;
    margin-top: 1rem;
    text-align: center;
}

/* Below a field they are a quiet hint, in the card they are a choice like the days above them. */
.tnx-field-picker .tnx-field-picker-shortcuts a {
    opacity: 1;
}

.tnx-field-picker .tnx-field-picker-shortcuts a:hover,
.tnx-field-picker .tnx-field-picker-shortcuts a:focus-visible {
    opacity: 0.8;
}

.tnx-field-picker-clean {
    flex: 0 0 auto;
    align-self: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--link-color);
    text-decoration: none;
    opacity: 0.5;
}

.tnx-field-picker-clean:hover,
.tnx-field-picker-clean:focus-visible {
    opacity: 0.4;
}

/* color: saturation and brightness in one area, the hue on a strip below it */
.tnx-field-picker-area,
.tnx-field-picker-hue {
    position: relative;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    touch-action: none;
    cursor: crosshair;
}

.tnx-field-picker-area {
    height: 11rem;
    border-radius: 12px;
    background:
        linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
        linear-gradient(to right, #fff, hsl(var(--tnx-field-picker-hue, 0), 100%, 50%));
}

.tnx-field-picker-hue {
    height: 1.2rem;
    border-radius: 999px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    cursor: pointer;
}

.tnx-field-picker-thumb {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.tnx-field-picker-hue .tnx-field-picker-thumb {
    top: 50%;
}

.tnx-field-picker-color-row {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    gap: 0.3rem;
    align-items: center;
}

.tnx-field-picker-preview {
    height: 2.4rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.tnx-field-picker input.tnx-field-picker-hex {
    padding: 0.5rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tnx-field-picker-color-row button.tnx-symbol-picker-symbol {
    width: 2.4rem;
}

/* The recently picked colors stand an empty line below the standard ones. */
.tnx-field-picker-grid--recent {
    margin-top: 1rem;
}
.tnx-recurrence-editor { display: flex; flex-direction: column; gap: 12px; padding: 8px; }
.tnx-recurrence-label { display: flex; flex-direction: column; gap: 4px; }
.tnx-recurrence-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0; }
.tnx-recurrence-choices legend { margin-bottom: 8px; }
.tnx-recurrence-ordinals input { width: 20px; min-width: 20px; height: 20px; margin: 0; }
[data-recurrence-choice] { touch-action: none; user-select: none; cursor: pointer; }
.tnx-recurrence-choices--days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tnx-recurrence-choices--months { grid-template-rows: repeat(6, auto); grid-auto-flow: column; }
.tnx-recurrence-choices--weekdays { grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
.tnx-recurrence-ordinals { display: grid; grid-template-columns: minmax(85px, 1.8fr) repeat(6, minmax(20px, 1fr)); gap: 8px 3px; border: 0; padding: 0; margin: 0; font-size: 12px; align-items: center; }
.tnx-recurrence-ordinals legend { margin-bottom: 8px; }
.tnx-recurrence-ordinals input { justify-self: center; }
.tnx-recurrence-ordinals span { overflow-wrap: normal; }
.tnx-recurrence-ordinals > span:nth-of-type(n+2):nth-of-type(-n+7) { text-align: center; }
.tnx-field-picker[data-kind="recurring-repetition"] .tnx-symbol-picker-panel-inner { overflow-y: auto; }