/* The task page look (rail of steps, photo plan, proof photos, plates), shared by /tasks/{id} and /break: both wrap their page in
   .task-ui. Was TaskPage.razor.css; every selector starts with .task-ui so it keeps the weight the scoped version had. */

.task-ui.task-page {
    max-width: 640px;
}

.task-ui .task-back {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: var(--text-dim);
    text-decoration: none;
}

.task-ui .task-back:hover {
    color: var(--cyan);
}

.task-ui .task-title-h {
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

/* ---- Gate cards ---- */

.task-ui .task-gate {
    margin: 8px 0 22px;
    padding: 22px 20px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid rgba(35, 242, 255, 0.35);
    background: rgba(35, 242, 255, 0.05);
}

.task-ui .task-gate-warn {
    border-color: rgba(255, 178, 62, 0.55);
    background: rgba(255, 178, 62, 0.07);
}

.task-ui .task-gate-title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.task-ui .task-gate p {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 14px;
}

.task-ui .task-gate-btn {
    display: inline-block;
    text-decoration: none;
}

/* ---- Top line: difficulty, repeat, reward ---- */

.task-ui .task-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.task-ui .task-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px solid var(--panel-border);
}

.task-ui .task-diff {
    --d: 150;
    color: hsl(var(--d) 100% 78%);
    border-color: hsl(var(--d) 80% 60% / 0.5);
}

.task-ui .task-diff.d1 {
    --d: 45;
}

.task-ui .task-diff.d2 {
    --d: 350;
}

.task-ui .task-reward {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 20px;
    color: #ffd98a;
    text-shadow: 0 0 8px rgba(255, 178, 62, 0.5);
}

.task-ui .task-reward .task-coin {
    width: 24px;
    height: 24px;
    color: var(--amber);
    filter: drop-shadow(0 0 5px rgba(255, 178, 62, 0.55));
}

/* ---- Boxes ---- */

.task-ui .task-card-box {
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 255, 0.35);
    background: rgba(168, 85, 255, 0.05);
}

.task-ui .task-h2 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1px;
}

.task-ui .task-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-dim);
}

/* The formatted text of the task: HTML written in Mistress (plain elements under .task-body). */
.task-ui .task-body {
    font-size: 15.5px;
    line-height: 1.5;
}

.task-ui .task-body p {
    margin: 0 0 0.7em;
}

.task-ui .task-body h3 {
    margin: 0.2em 0 0.5em;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1px;
}

.task-ui .task-body ul,
.task-ui .task-body ol {
    margin: 0 0 0.7em;
    padding-left: 1.4em;
}

.task-ui .task-body blockquote {
    margin: 0 0 0.7em;
    padding: 4px 0 4px 12px;
    border-left: 3px solid var(--magenta);
    color: var(--text-dim);
}

/* Links in the text stand out: lit, underlined, with a small arrow saying they open in a new window. */
.task-ui .task-body a {
    color: var(--cyan);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-shadow: 0 0 8px rgba(35, 242, 255, 0.6);
    overflow-wrap: anywhere;
}

.task-ui .task-body a::after {
    content: "\2197";
    display: inline-block;
    margin-left: 3px;
    font-size: 0.85em;
}

.task-ui .task-body a:hover {
    color: #fff;
    text-shadow: 0 0 12px var(--cyan);
}

.task-ui .task-body > :last-child {
    margin-bottom: 0;
}

.task-ui .task-time-plate {
    border-color: rgba(35, 242, 255, 0.35);
    background: rgba(35, 242, 255, 0.05);
}

.task-ui .task-plate-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bff3ff;
}

.task-ui .task-plate-head svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.task-ui .task-plate-head b {
    margin-left: auto;
    font-family: var(--font-display);
}

.task-ui .task-time-plate p {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--text-dim);
}

/* ---- The three photos ---- */

.task-ui .task-steps {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-ui .task-steps li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.task-ui .task-step-n {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
}

.task-ui .task-steps li.sent .task-step-n {
    color: var(--green);
    border-color: rgba(57, 255, 176, 0.6);
}

.task-ui .task-step-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-ui .task-step-when {
    font-size: 13px;
    color: var(--text-dim);
}

.task-ui .task-step-hint {
    font-size: 13.5px;
    color: var(--text);
}

/* ---- Running, confirm ---- */

.task-ui .task-running {
    text-align: center;
    border-color: rgba(57, 255, 176, 0.5);
    background: rgba(57, 255, 176, 0.06);
}

.task-ui .task-running-title {
    font-family: var(--font-display);
    letter-spacing: 1px;
    color: var(--green);
}

.task-ui .task-running-left {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 26px;
}

.task-ui .task-reward-plate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-color: rgba(255, 178, 62, 0.5);
    background: rgba(255, 178, 62, 0.06);
}

.task-ui .task-reward-label {
    font-family: var(--font-display);
    letter-spacing: 1px;
}

.task-ui .task-running.task-waiting {
    border-color: rgba(255, 214, 62, 0.6);
    background: rgba(255, 214, 62, 0.07);
}

.task-ui .task-waiting .task-running-title {
    color: #ffd63e;
}

.task-ui .task-confirm {
    border-color: rgba(57, 255, 176, 0.55);
    background: rgba(57, 255, 176, 0.07);
}

.task-ui .task-confirm-title {
    font-family: var(--font-display);
    margin-bottom: 6px;
    color: var(--green);
}

.task-ui .task-confirm p {
    margin: 0 0 12px;
    font-size: 14px;
}

.task-ui .task-confirm p.task-repeat-note {
    color: var(--text-dim);
}

.task-ui .task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.task-ui .task-start {
    width: 100%;
}

.task-ui .task-start-now {
    flex: 1 1 100%;
    padding: 18px 20px;
    font-size: 18px;
    font-weight: 700;
}

.task-ui .task-not-now {
    flex: 1 1 100%;
}

.task-ui .task-blocked,
.task-ui .task-message {
    margin: 12px 0 0;
    text-align: center;
    color: var(--amber);
    font-size: 14px;
}


.task-ui .task-photo-state {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--text-dim);
}

.task-ui .task-photo-state.open {
    color: var(--green);
}

.task-ui a.task-photo-state {
    display: block;
    text-decoration: none;
}

.task-ui .tl-hint-link {
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

/* ---- The timeline of a running task ---- */

.task-ui .tl {
    position: relative;
    height: 112px;
    margin: 22px 30px 4px;
    text-align: center;
}

.task-ui .tl-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 19px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

/* The stretch of time in which a Duration task's photo can be taken. */
.task-ui .tl-win {
    position: absolute;
    top: -3px;
    bottom: -3px;
    border-radius: 999px;
    background: rgba(35, 242, 255, 0.22);
    border: 1px solid rgba(35, 242, 255, 0.5);
}

.task-ui .tl-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--magenta));
    box-shadow: 0 0 10px rgba(255, 43, 214, 0.5);
    transition: width 1s linear;
}

.task-ui .tl-now {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px var(--magenta), 0 0 4px #fff;
    transition: left 1s linear;
}

.task-ui .tl-pt {
    position: absolute;
    top: 0;
    width: 76px;
    margin-left: -38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.task-ui .tl-ico {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-dim);
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: #0b0b14;
    text-decoration: none;
}

.task-ui .tl-ico svg {
    width: 24px;
    height: 24px;
}

.task-ui .tl-cap {
    margin-top: 4px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.task-ui .tl-sub {
    min-height: 16px;
    font-size: 12px;
    color: var(--text-dim);
}

/* Taken and sent. */
.task-ui .tl-pt.done .tl-ico {
    color: var(--green);
    border-color: rgba(57, 255, 176, 0.7);
    /* Opaque: a translucent tint let the bar show through the circle. */
    background: linear-gradient(rgba(57, 255, 176, 0.1), rgba(57, 255, 176, 0.1)), #0b0b14;
    box-shadow: 0 0 12px rgba(57, 255, 176, 0.35);
}

.task-ui .tl-pt.done .tl-sub {
    color: var(--green);
}

/* Can be taken now: lit, pulsing, a link to the camera. */
.task-ui .tl-pt.open .tl-ico {
    color: #fff;
    border-color: var(--magenta);
    background: radial-gradient(circle at 40% 35%, #ff8deb, var(--magenta) 65%, #b0108f);
    box-shadow: 0 0 18px rgba(255, 43, 214, 0.7);
    animation: tl-pulse 1.2s ease-in-out infinite;
}

.task-ui .tl-pt.open .tl-cap,
.task-ui .tl-pt.open .tl-sub {
    color: #ffd6f6;
}

/* A Duration window that passed without a photo: nothing stops, the icon is just out. */
.task-ui .tl-pt.missed .tl-ico {
    /* Dimmed through colours, not opacity: opacity let the bar show through the circle. */
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.12);
    border-style: dashed;
}

.task-ui .tl-pt.missed .tl-sub {
    color: var(--amber);
}

@keyframes tl-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* What each photo must show, under the timeline. */
.task-ui .tl-hints {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.task-ui .tl-hints li {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.02);
    opacity: 0.7;
}

/* The icon of a step under the bar: a rounded square as tall as the card. It holds the photo once it was taken. */
.task-ui .tl-hint-n {
    position: relative;
    flex: none;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    overflow: hidden;
    color: var(--text-dim);
    background: #0b0b14;
    border: 2px solid var(--panel-border);
    box-sizing: border-box;
}

.task-ui .tl-hint-n > svg {
    width: 32px;
    height: 32px;
}

.task-ui .tl-hint-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The ring around a round icon on the bar. Its picture is larger than the icon (viewBox -8..64) so the glow is not cut at the svg's edge. */
.task-ui .tl-ico > .tl-ring,
.task-ui .tl-ring {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    overflow: visible;
    transform: rotate(-90deg);
    fill: none;
    stroke-width: 3.5;
    pointer-events: none;
}

.task-ui .tl-ring-bg {
    stroke: rgba(255, 255, 255, 0.14);
}

.task-ui .tl-ring-fg {
    stroke: var(--magenta);
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px var(--magenta));
    /* Set once a second by the page; the linear transition makes the ring fill smoothly. */
    transition: stroke-dashoffset 1.05s linear;
}

.task-ui .tl-pt.open .tl-ring-fg {
    stroke: #fff;
    filter: none;
}

.task-ui .tl-ico {
    position: relative;
}

.task-ui .tl-ico-clock {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: -0.02em;
    color: #ffd6f6;
    font-variant-numeric: tabular-nums;
}

.task-ui .tl-hint-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14.5px;
}

.task-ui .tl-hint-main b {
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.task-ui .tl-hints li.open {
    opacity: 1;
    border-color: rgba(255, 43, 214, 0.7);
    background: rgba(255, 43, 214, 0.08);
}

.task-ui .tl-hints li.open .tl-hint-n {
    color: #fff;
    background: radial-gradient(circle at 40% 35%, #ff8deb, var(--magenta) 65%, #b0108f);
    border-color: #fff;
    box-shadow: 0 0 14px rgba(255, 43, 214, 0.6);
}

/* The open step is a link to the camera: the card lights up under the finger or mouse. */
.task-ui .tl-hints li.open {
    transition: box-shadow 0.15s, background 0.15s, border-color 0.15s;
}

.task-ui .tl-hints li.open:hover {
    border-color: #fff;
    background: rgba(255, 43, 214, 0.2);
    box-shadow: 0 0 20px rgba(255, 43, 214, 0.55);
}

.task-ui .tl-hints li.open:active {
    background: rgba(255, 43, 214, 0.3);
}

.task-ui .tl-hints li.open .tl-hint-main b {
    color: #ffd6f6;
}

.task-ui .tl-hints li.done .tl-hint-n {
    color: var(--green);
    border-color: rgba(57, 255, 176, 0.7);
}

/* Cancel: a quiet link-like button, and its confirmation. */
.task-ui .task-all-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 14px 0 24px;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
}

.task-ui .task-ended {
    border-color: rgba(255, 178, 62, 0.5);
    background: rgba(255, 178, 62, 0.06);
}

.task-ui .task-ended p {
    margin: 6px 0 0;
    font-size: 14px;
}

.task-ui .task-done {
    border-color: rgba(57, 255, 176, 0.5);
    background: rgba(57, 255, 176, 0.06);
}

.task-ui .task-done p {
    margin: 6px 0 0;
    font-size: 14px;
}

/* ---- The photos of a finished try ---- */

.task-ui .task-proofs-title {
    margin-bottom: 12px;
    font-family: var(--font-display);
    letter-spacing: 1px;
}

.task-ui .task-proofs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.task-ui .task-proof {
    margin: 0;
    text-align: center;
}

.task-ui .task-proof-box {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 18px;
    border: 2px solid rgba(57, 255, 176, 0.7);
    background: #0b0b14;
    color: var(--green);
}

.task-ui .task-proof-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.task-ui .task-proof-box svg {
    width: 32px;
    height: 32px;
}

.task-ui .task-proof.empty .task-proof-box {
    border-style: dashed;
    border-color: var(--panel-border);
    color: var(--text-dim);
}

.task-ui .task-proof figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-dim);
}

.task-ui .task-proof figcaption b {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.task-ui .task-body-title {
    margin-bottom: 8px;
    font-family: var(--font-display);
    letter-spacing: 1px;
}

/* ---- Before the start: the photos of the task, in order ---- */

.task-ui .task-plan {
    border-color: rgba(255, 43, 214, 0.4);
    background: linear-gradient(180deg, rgba(255, 43, 214, 0.07), rgba(168, 85, 255, 0.04));
}

.task-ui .task-plan-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.task-ui .task-plan-title {
    font-family: var(--font-display);
    letter-spacing: 1px;
}

.task-ui .task-plan-count {
    flex: none;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 43, 214, 0.45);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffd6f6;
}

.task-ui .task-plan-sub {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--text-dim);
}

.task-ui .plan-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* One photo: the camera square on the left is as tall as the card (a square, whatever the text needs). */
.task-ui .plan-step {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 43, 214, 0.28);
    background: linear-gradient(90deg, rgba(255, 43, 214, 0.1), rgba(255, 255, 255, 0.015) 60%);
}

.task-ui .plan-ico {
    position: relative;
    flex: none;
    align-self: stretch;
    aspect-ratio: 1;
    min-height: 84px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 43, 214, 0.65);
    background: radial-gradient(circle at 40% 35%, rgba(255, 141, 235, 0.28), rgba(255, 43, 214, 0.08) 70%), #0b0b14;
    box-shadow: inset 0 0 16px rgba(255, 43, 214, 0.25), 0 0 12px rgba(255, 43, 214, 0.18);
    color: #ff8deb;
}

.task-ui .plan-ico > svg {
    width: 40%;
    height: 40%;
    filter: drop-shadow(0 0 6px rgba(255, 43, 214, 0.7));
}

/* The step number in the corner of the square. */
.task-ui .plan-n {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--magenta);
    color: #fff;
    font-style: normal;
    font-family: var(--font-display);
    font-size: 12px;
    box-shadow: 0 0 8px rgba(255, 43, 214, 0.7);
}

.task-ui .plan-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 2px 4px 2px 0;
}

.task-ui .plan-main b {
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffd6f6;
}

.task-ui .plan-hint {
    font-size: 15px;
    line-height: 1.35;
}

.task-ui .plan-when {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cyan);
}

.task-ui .plan-when > svg {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 1px;
}

/* Where the window lies in the task's time (Duration tasks): the whole bar is the task, the lit part the window. */
.task-ui .plan-bar {
    position: relative;
    height: 6px;
    margin-top: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.task-ui .plan-bar > i {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

.task-ui .task-cancel-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
}

/* Two equal buttons: "Keep going" must not wrap next to the wider warning button. */
.task-ui .task-cancel-dialog .danger-modal-actions > button {
    flex: 1 1 0;
    white-space: nowrap;
}

.task-ui .task-start-dialog .danger-modal-strong {
    font-family: var(--font-display);
    letter-spacing: 0.5px;
}

/* The waiting icon already has the progress ring: no second border under it. */
.task-ui .tl-ico.tl-ico-wait {
    border-color: transparent;
}

/* The ring is the circle's border: its stroke sits exactly on the edge of the 46 px icon (r 21.5 px, 3 px wide). */
.task-ui .tl-ico-wait {
    border: 0;
    background: #0b0b14;
}

/* Traffic light for a photo that has to be taken inside its window: green, amber, red (pulsing). */
.task-ui .tl-hint-urgent {
    --u: 57, 255, 176;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-weight: 600;
    color: rgb(var(--u));
}

.task-ui .tl-hint-urgent::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(var(--u));
    box-shadow: 0 0 8px rgb(var(--u));
}

.task-ui .tl-hints li.open.warn {
    --u: 255, 178, 62;
}

.task-ui .tl-hints li.open.hot {
    --u: 255, 70, 90;
}

.task-ui .tl-hints li.open.ok .tl-hint-urgent {
    --u: 57, 255, 176;
}

.task-ui .tl-hints li.open.warn .tl-hint-urgent {
    --u: 255, 178, 62;
}

.task-ui .tl-hints li.open.hot .tl-hint-urgent {
    --u: 255, 70, 90;
}

.task-ui .tl-hints li.open.ok {
    border-color: rgba(57, 255, 176, 0.8);
    background: rgba(57, 255, 176, 0.08);
}

.task-ui .tl-hints li.open.warn {
    border-color: rgba(255, 178, 62, 0.85);
    background: rgba(255, 178, 62, 0.09);
}

.task-ui .tl-hints li.open.hot {
    border-color: rgba(255, 70, 90, 0.9);
    background: rgba(255, 70, 90, 0.1);
    animation: tl-hot 1s ease-in-out infinite;
}

.task-ui .tl-hints li.open.ok .tl-hint-n {
    background: radial-gradient(circle at 40% 35%, #8dffd0, #1fd98f 65%, #0b8a5c);
    box-shadow: 0 0 14px rgba(57, 255, 176, 0.55);
}

.task-ui .tl-hints li.open.warn .tl-hint-n {
    background: radial-gradient(circle at 40% 35%, #ffd98a, #ffb23e 65%, #b36a00);
    box-shadow: 0 0 14px rgba(255, 178, 62, 0.55);
}

.task-ui .tl-hints li.open.hot .tl-hint-n {
    background: radial-gradient(circle at 40% 35%, #ff9aa6, #ff4660 65%, #a8132b);
    box-shadow: 0 0 14px rgba(255, 70, 90, 0.6);
}

@keyframes tl-hot {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 70, 90, 0.3); }
    50% { box-shadow: 0 0 22px rgba(255, 70, 90, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
    .task-ui .tl-hints li.open.hot { animation: none; }
}

/* ---- The vertical rail: it runs through the step icons next to the square cards and fills as the time passes ---- */

.task-ui .tl-hints li {
    position: relative;
    margin-left: 66px;
    opacity: 1;
}

/* The dimming sits on the card's content, not on the whole li: a see-through icon would show the rail behind it. */
.task-ui .tl-hints li:not(.open) .tl-hint-n,
.task-ui .tl-hints li:not(.open) .tl-hint-main {
    opacity: 0.7;
}

.task-ui .rail {
    position: absolute;
    left: -66px;
    top: 0;
    bottom: 0;
    width: 56px;
    display: grid;
    place-items: center;
}

.task-ui .tl-pt.rail-pt {
    position: relative;
    z-index: 1;
    top: auto;
    width: auto;
    margin: 0;
}

.task-ui .rail-line {
    position: absolute;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

/* The ul's gap is 8px: the line runs through it to meet the next icon's line. */
.task-ui .rail-up {
    top: -8px;
    bottom: 50%;
}

.task-ui .rail-down {
    top: 50%;
    bottom: -8px;
}

.task-ui .rail-line i {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, #ff8deb, var(--magenta));
    box-shadow: 0 0 8px var(--magenta);
    transition: height 1.05s linear;
}

/* ---- Thick rail with branches to the photo cards (no round icons any more) ---- */

.task-ui .tl-hints li {
    margin-left: 44px;
}

.task-ui .rail {
    left: -44px;
    width: 28px;
}

.task-ui .rail-line {
    width: 12px;
    margin-left: -6px;
    border-radius: 6px;
}

/* The branch from the rail to the card. */
.task-ui .rail-link {
    position: absolute;
    top: 50%;
    left: 50%;
    right: -16px;
    height: 8px;
    margin-top: -4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
}

.task-ui .rail-link.on {
    background: linear-gradient(90deg, #ff8deb, var(--magenta));
    box-shadow: 0 0 8px var(--magenta);
}

.task-ui .rail-link.done.on {
    background: var(--green);
    box-shadow: 0 0 8px rgba(57, 255, 176, 0.6);
}

.task-ui .tl-hints li.open.ok .rail-link { background: #39ffb0; box-shadow: 0 0 10px #39ffb0; }
.task-ui .tl-hints li.open.warn .rail-link { background: #ffb23e; box-shadow: 0 0 10px #ffb23e; }
.task-ui .tl-hints li.open.hot .rail-link { background: #ff4660; box-shadow: 0 0 10px #ff4660; }

.task-ui .tl-hint-n .tl-hint-clock {
    margin-top: 2px;
    font-size: 12px;
}

.task-ui .tl-hint-n:has(.tl-hint-clock) {
    grid-auto-flow: row;
    align-content: center;
    gap: 0;
}

.task-ui .tl-hint-n:has(.tl-hint-clock) > svg {
    width: 22px;
    height: 22px;
}

.task-ui .tl-hint-clock {
    font-family: var(--font-mono);
    color: #ffd6f6;
    font-variant-numeric: tabular-nums;
}

/* ---- v3: a slim rail, a node on it for each step, and an arrow from the node to the card ---- */

.task-ui .tl-hints li {
    margin-left: 44px;
}

.task-ui .rail {
    left: -44px;
    width: 28px;
}

.task-ui .rail-line {
    width: 6px;
    margin-left: -3px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.13);
}

.task-ui .rail-line i {
    box-shadow: none;
    background: var(--magenta);
}

/* The branch: a thin line that ends in an arrowhead on the card's edge. */
.task-ui .rail-link {
    left: 50%;
    right: -16px;
    height: 4px;
    margin-top: -2px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.task-ui .rail-link::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -7px;
    border-left: 9px solid rgba(255, 255, 255, 0.2);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.task-ui .rail-link.on,
.task-ui .rail-link.done.on {
    background: var(--magenta);
    box-shadow: none;
}

.task-ui .rail-link.on::after {
    border-left-color: var(--magenta);
}

.task-ui .rail-link.done.on {
    background: var(--green);
}

.task-ui .rail-link.done.on::after {
    border-left-color: var(--green);
}

.task-ui .tl-hints li.open.ok .rail-link { background: #39ffb0; box-shadow: none; }
.task-ui .tl-hints li.open.ok .rail-link::after { border-left-color: #39ffb0; }
.task-ui .tl-hints li.open.warn .rail-link { background: #ffb23e; box-shadow: none; }
.task-ui .tl-hints li.open.warn .rail-link::after { border-left-color: #ffb23e; }
.task-ui .tl-hints li.open.hot .rail-link { background: #ff4660; box-shadow: none; }
.task-ui .tl-hints li.open.hot .rail-link::after { border-left-color: #ff4660; }

/* The node where the branch leaves the rail. */
.task-ui .rail-node {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #14141f;
    border: 3px solid rgba(255, 255, 255, 0.28);
}

.task-ui .rail-node.on {
    background: var(--magenta);
    border-color: #ffd6f6;
    box-shadow: 0 0 10px var(--magenta);
}

.task-ui .rail-node.done {
    background: var(--green);
    border-color: #d6ffee;
    box-shadow: 0 0 10px rgba(57, 255, 176, 0.7);
}

.task-ui .rail-node.open {
    animation: rail-node-pulse 1.2s ease-in-out infinite;
}

.task-ui .tl-hints li.open.ok .rail-node { background: #39ffb0; box-shadow: 0 0 12px #39ffb0; }
.task-ui .tl-hints li.open.warn .rail-node { background: #ffb23e; box-shadow: 0 0 12px #ffb23e; }
.task-ui .tl-hints li.open.hot .rail-node { background: #ff4660; box-shadow: 0 0 12px #ff4660; }

@keyframes rail-node-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .task-ui .rail-node.open { animation: none; }
}

/* ---- v4: solid colours only (see-through lines showed their joins), no arrowheads, branches in the card's border colour ---- */

.task-ui .rail-line {
    background: #2b2b3d;
}

.task-ui .rail-line i {
    background: var(--magenta);
}

.task-ui .rail-link::after,
.task-ui .rail-link.on::after,
.task-ui .rail-link.done.on::after,
.task-ui .tl-hints li.open .rail-link::after {
    content: none;
}

/* Pending card: its border is the panel border. */
.task-ui .rail-link {
    background: #2b2b3d;
}

.task-ui .rail-link.on {
    background: #c43aa8;
}

.task-ui .rail-link.done,
.task-ui .rail-link.done.on {
    background: #2fbf8a;
}

.task-ui .tl-hints li.open .rail-link {
    background: #ff2bd6;
}

.task-ui .tl-hints li.open.ok .rail-link { background: #39ffb0; }
.task-ui .tl-hints li.open.warn .rail-link { background: #ffb23e; }
.task-ui .tl-hints li.open.hot .rail-link { background: #ff4660; }

.task-ui .rail-node {
    background: #2b2b3d;
    border-color: #4a4a62;
}

.task-ui .rail-node.on {
    background: var(--magenta);
    border-color: #ffd6f6;
}

.task-ui .rail-node.on.done {
    background: var(--green);
    border-color: #d6ffee;
}

/* ---- v5: the progress line is green like the done branches; a missed photo shows a broken picture ---- */

.task-ui .rail-line i {
    background: #2fbf8a;
}

.task-ui .rail-node.on {
    background: #2fbf8a;
    border-color: #d6ffee;
    box-shadow: 0 0 10px rgba(57, 255, 176, 0.6);
}

.task-ui .rail-link.on {
    background: #2fbf8a;
}

.task-ui .tl-hints li.missed .tl-hint-n {
    color: #ff8795;
    border-color: rgba(255, 70, 90, 0.5);
}

.task-ui .task-proof-none svg {
    width: 30px;
    height: 30px;
}

/* Keep the state line tidy on a phone: no lone word on the last line. */
.task-ui .task-photo-state {
    text-wrap: balance;
    text-align: center;
}

/* ---- Rating of the task ---- */

.task-ui .task-rate {
    text-align: center;
    border-color: rgba(255, 197, 61, 0.4);
    background: linear-gradient(180deg, rgba(255, 197, 61, 0.09), rgba(255, 197, 61, 0.02));
}

.task-ui .task-rate-title {
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
}

.task-ui .task-rate-sub {
    margin: -6px 0 12px;
    font-size: 13.5px;
    color: var(--text-dim);
}

/* A step whose photo is sent: the card lights up green, its border the colour of the progress line. */
.task-ui .tl-hints li.done {
    opacity: 1;
    border-color: #2fbf8a;
    background: linear-gradient(90deg, rgba(57, 255, 176, 0.13), rgba(57, 255, 176, 0.03) 70%);
    box-shadow: 0 0 14px rgba(57, 255, 176, 0.18);
}

.task-ui .tl-hints li.done .tl-hint-n {
    border-color: #2fbf8a;
}

.task-ui .tl-hints li.done .tl-hint-main b {
    color: #7dffc9;
}