/* ===========================================================================
   THE DAY STRIP

   The category colours are the marketing site's, unchanged and on purpose: a
   buyer who read worktracking.com learned that blue is project work, red is a
   bug and green is a customer ticket, and then signed in. Re-teaching them a
   second palette inside the product costs the recognition we already paid for.

   They were picked for colour-blind separation and contrast, not for looks. Do
   not eyeball replacements. Colour is also never the ONLY encoding here: height
   carries "was anything happening", so the strip reads without colour at all.
   =========================================================================== */

.pbds {
    /* Light theme values live here on the block, and are overridden per theme
       below, so a token never has its only definition inside a media query. */
    --ds-project: #4361ee;
    --ds-bug: #d9483b;
    --ds-ticket: #0f8a6a;
    --ds-work: #8f9bd6;
    --ds-idle: #c3c9d6;
    --ds-break: #e2b04a;
    --ds-off: #eceef3;

    padding: 4px 2px 2px;
}

/* The dark rail needs lifted, less saturated fills - the same hues at the same
   luminance on near-black read as neon and lose their separation. */
:root[data-theme="dark"] .pbds {
    --ds-project: #7d8cff;
    --ds-bug: #f1675c;
    --ds-ticket: #2dd4a4;
    --ds-work: #5a6488;
    --ds-idle: #39404f;
    --ds-break: #b98a2e;
    --ds-off: #1c2029;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pbds {
        --ds-project: #7d8cff;
        --ds-bug: #f1675c;
        --ds-ticket: #2dd4a4;
        --ds-work: #5a6488;
        --ds-idle: #39404f;
        --ds-break: #b98a2e;
        --ds-off: #1c2029;
    }
}

/* ---- heading ---------------------------------------------------------- */
.pbds-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 16px;
}

.pbds-title { font-size: 14px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.pbds-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.pbds-stat { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.pbds-stat .num { font-size: 16px; font-weight: 700; color: var(--text); margin-right: 3px; }

/* ---- the strip -------------------------------------------------------- */
.pbds-ticks {
    display: flex;
    align-items: flex-end;
    gap: 2px;                  /* a surface gap so adjacent fills never merge */
    height: 84px;
}

.pbds-t {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px 2px 0 0;
    background: var(--ds-off);
    transition: opacity .12s ease;
    cursor: crosshair;
}

/* Height is the second, non-colour encoding: measured work stands tall, everything
   that is not work sits low. The shape of the day survives a greyscale print. */
.pbds-t--tall { height: 100%; }
.pbds-t--low { height: 24%; }

.pbds-t--project { background: var(--ds-project); }
.pbds-t--bug     { background: var(--ds-bug); }
.pbds-t--ticket  { background: var(--ds-ticket); }
.pbds-t--work    { background: var(--ds-work); }
.pbds-t--idle    { background: var(--ds-idle); }
.pbds-t--break   { background: var(--ds-break); }
.pbds-t--off     { background: var(--ds-off); }

/* Hovering dims the day and lights the whole stretch, not the single tick - the
   question is never "what was that five minutes", it is "how long did that last". */
.pbds-ticks.is-hovering .pbds-t { opacity: .3; }
.pbds-ticks.is-hovering .pbds-t.is-lit { opacity: 1; }

/* ---- axis, readout ---------------------------------------------------- */
.pbds-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-3);
}

.pbds-readout {
    margin-top: 12px;
    min-height: 20px;
    font-size: 12.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbds-hint { color: var(--text-3); }
.pbds-readout .ro-time { font-weight: 650; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }
.pbds-readout .ro-sep { color: var(--border-2); margin: 0 9px; }
.pbds-readout .ro-what { color: var(--text-2); }
.pbds-readout .ro-app { color: var(--text-3); }

/* ---- legend ----------------------------------------------------------- */
.pbds-foot { margin-top: 14px; }

.pbds-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pbds-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-2);
}

.pbds-legend b { color: var(--text); }

.pbds-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--ds-off); }
.pbds-sw--project { background: var(--ds-project); }
.pbds-sw--bug     { background: var(--ds-bug); }
.pbds-sw--ticket  { background: var(--ds-ticket); }
.pbds-sw--work    { background: var(--ds-work); }
.pbds-sw--idle    { background: var(--ds-idle); }
.pbds-sw--break   { background: var(--ds-break); }
.pbds-sw--off     { background: var(--ds-off); border: 1px solid var(--border-2); }

/* ---- the four figures ------------------------------------------------- */
.pbds-figs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 18px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .pbds-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pbds-fig { background: var(--surface); padding: 12px 14px; }
.pbds-f-label { font-size: 9.5px; letter-spacing: .09em; color: var(--text-3); font-weight: 650; }
.pbds-f-value { font-size: 21px; font-weight: 700; color: var(--text); margin: 3px 0 4px; line-height: 1.1; }
.pbds-f-arrow { color: var(--text-3); margin: 0 6px; font-size: 15px; }
.pbds-f-note { font-size: 11px; color: var(--text-3); line-height: 1.45; }

.pbds-disc {
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.5;
}

/* ---- empty ------------------------------------------------------------ */
.pbds-empty {
    padding: 22px 18px;
    border: 1px dashed var(--border-2);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.6;
}

.pbds-empty b { display: block; color: var(--text); margin-bottom: 4px; }