/* ------------------------------------------- Calendar with Tasks slide ---
   Epic onfiremobile-t4se2. Loaded after styles.css. Only decorates the
   calendar's own chips and blocks (the ns-cal-* rules in styles.css); every
   class here is emitted through app.js's calendarItemClass hook. Sizes use
   clamp()/vmin so a 1280x720 Pi and a 4K panel read the same. */

/* List colour. Personal tasks are brand orange, a group chat gets a stable
   slot, overdue always wins with system red (it is declared last). */
.ns-ct-personal { --ct-hue: #FF6B1F; }
.ns-ct-hue-0 { --ct-hue: #2D71EC; }
.ns-ct-hue-1 { --ct-hue: #22C55E; }
.ns-ct-hue-2 { --ct-hue: #A855F7; }
.ns-ct-hue-3 { --ct-hue: #14B8A6; }
.ns-ct-hue-4 { --ct-hue: #EAB308; }
.ns-ct-hue-5 { --ct-hue: #EC4899; }
.ns-ct-hue-6 { --ct-hue: #38BDF8; }
.ns-ct-hue-7 { --ct-hue: #84CC16; }
.ns-ct-overdue { --ct-hue: #FF3B30; }

/* The reminder circle / tick. Inline-block so a struck-through completed
   title does not strike the glyph too. */
.ns-cal-glyph {
    display: inline-block;
    margin-right: 0.32em;
    font-weight: 700;
    line-height: 1;
    color: var(--ct-hue, #FF6B1F);
}

/* --- all-day band (day / week / split agenda) --- */
.ns-cal-chip.ns-ct-task {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ns-cal-chip.ns-ct-task.ns-ct-overdue {
    background: rgba(255, 59, 48, 0.16);
    color: #FF6961;
    box-shadow: inset 0 0 0 1px rgba(255, 59, 48, 0.35);
}
.ns-cal-chip.ns-ct-task.ns-ct-done {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.4);
    text-decoration: line-through;
    box-shadow: none;
}
.ns-cal-chip.ns-ct-done .ns-cal-glyph { opacity: 0.6; }

/* --- timed blocks --- */
.ns-cal-ev.ns-ct-task {
    background: rgba(18, 18, 24, 0.88);
    border-left-color: var(--ct-hue, #FF6B1F);
}
.ns-cal-ev.ns-ct-task.ns-ct-overdue .ns-cal-ev-title { color: #FF6961; }
.ns-cal-ev.ns-ct-task.ns-ct-done { background: rgba(18, 18, 24, 0.55); box-shadow: none; }
.ns-cal-ev.ns-ct-task.ns-ct-done .ns-cal-ev-title {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: line-through;
}

/* --- month cells --- */
.ns-cal-month .ns-cal-chip.ns-ct-task {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
}
.ns-cal-month .ns-cal-chip.ns-ct-task.ns-ct-overdue {
    background: rgba(255, 59, 48, 0.18);
    color: #FF6961;
}
.ns-cal-month .ns-cal-chip.ns-ct-task.ns-ct-done {
    background: none;
    color: rgba(255, 255, 255, 0.38);
    text-decoration: line-through;
}

/* "Tasks unavailable" when one of the two fetches failed. A small pill in the
   corner: the calendar is still the content. */
.ns-ct-note {
    position: absolute;
    right: clamp(10px, 1.8vmin, 32px);
    bottom: clamp(8px, 1.4vmin, 24px);
    z-index: 3;
    padding: 0.3em 0.9em;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(11px, 1.5vmin, 20px);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

/* ============================================ layout: Apple month + list ===
   Bead onfiremobile-t4se2.6, DESIGN.md §8.3. Month grid on top (markers only),
   events and tasks listed below. Every rule is scoped under .ns-ctl, so the
   Calendar slide and the "grid" layout are untouched. */

.ns-ctl-body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 44fr) minmax(0, 56fr);
    gap: clamp(10px, 1.8vmin, 28px);
}
.ns-cal--portrait .ns-ctl-body {
    grid-template-rows: minmax(0, 42fr) minmax(0, 58fr);
}

/* --- month grid --- */
.ns-ctl-month {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.5vmin, 8px);
}
.ns-ctl-dows,
.ns-ctl-mgrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.ns-ctl-dow {
    text-align: center;
    font-size: clamp(10px, 1.55vmin, 22px);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.ns-ctl-dow.ns-ctl-weekend { color: rgba(255, 255, 255, 0.3); }
.ns-ctl-mgrid {
    flex: 1 1 auto;
    min-height: 0;
}
.ns-ctl-cell {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.4vmin, 7px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* The days the list below covers: one faint band, rounded where it starts and
   ends on each week row. */
.ns-ctl-inlist::before {
    content: '';
    position: absolute;
    inset: 7% 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.055);
}
.ns-ctl-inlist-first::before {
    left: 6%;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}
.ns-ctl-inlist-last::before {
    right: 6%;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}
.ns-ctl-date {
    width: 1.85em;
    height: 1.85em;
    line-height: 1.85em;
    border-radius: 50%;
    text-align: center;
    font-size: clamp(12px, 2vmin, 30px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.9);
}
.ns-ctl-weekend .ns-ctl-date { color: rgba(255, 255, 255, 0.5); }
.ns-ctl-today .ns-ctl-date {
    background: #FF6B1F;
    color: #0b0b10;
    font-weight: 700;
}
/* Dim the content, not the cell, so the list band stays one even strip across
   a month boundary. */
.ns-ctl-out .ns-ctl-date,
.ns-ctl-out .ns-ctl-marks { opacity: 0.35; }
.ns-ctl-marks {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.35vmin, 5px);
    height: clamp(4px, 0.7vmin, 9px);
}
.ns-ctl-dot,
.ns-ctl-ring {
    display: block;
    box-sizing: border-box;
    width: clamp(4px, 0.7vmin, 9px);
    height: clamp(4px, 0.7vmin, 9px);
    border-radius: 50%;
}
.ns-ctl-dot { background: #FF6B1F; }
.ns-ctl-dot-allday { background: #FFCE54; }
.ns-ctl-ring { border: clamp(1px, 0.17vmin, 2px) solid rgba(255, 255, 255, 0.78); }
.ns-ctl-ring-overdue { border-color: #FF3B30; }

/* --- list --- */
.ns-ctl-list {
    min-height: 0;
    display: grid;
    column-gap: clamp(14px, 3vmin, 52px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: clamp(8px, 1.5vmin, 22px);
}
.ns-ctl-col {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.5vmin, 24px);
}
.ns-ctl-day {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ns-ctl-dayhead {
    margin: 0 0 0.25em;
    font-size: clamp(11px, 1.65vmin, 24px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.ns-ctl-day-today .ns-ctl-dayhead { color: #FF6B1F; }
.ns-ctl-row {
    display: flex;
    align-items: center;
    gap: 0.55em;
    min-width: 0;
    padding: 0.26em 0;
    font-size: clamp(13px, 2.1vmin, 30px);
    line-height: 1.25;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92);
}
/* Bars and glyphs share one 1em lead column so every title starts in line. */
.ns-ctl-bar {
    flex: 0 0 1em;
    align-self: stretch;
    display: flex;
    justify-content: center;
}
.ns-ctl-bar::before {
    content: '';
    width: clamp(3px, 0.45vmin, 6px);
    border-radius: 999px;
    background: #FF6B1F;
}
.ns-ctl-allday .ns-ctl-bar::before { background: #FFCE54; }
.ns-ctl-row .ns-cal-glyph {
    flex: 0 0 1em;
    margin: 0;
    text-align: center;
}
.ns-ctl-time {
    flex: 0 0 auto;
    min-width: 4.4em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #FFCE54;
}
.ns-ctl-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ns-ctl-meta {
    flex: 0 1 auto;
    max-width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.45);
}
.ns-ctl-prio {
    font-weight: 800;
    color: var(--ct-hue, #FF6B1F);
}
.ns-ctl-task.ns-ct-overdue { color: #FF6961; }
.ns-ctl-task.ns-ct-overdue .ns-ctl-meta { color: rgba(255, 105, 97, 0.75); }
.ns-ctl-task.ns-ct-done { color: rgba(255, 255, 255, 0.4); }
.ns-ctl-task.ns-ct-done .ns-ctl-title { text-decoration: line-through; }
.ns-ctl-task.ns-ct-done .ns-cal-glyph { opacity: 0.6; }
.ns-ctl-row.ns-cal-past { color: rgba(255, 255, 255, 0.4); }
.ns-ctl-row.ns-cal-past .ns-ctl-time { color: rgba(255, 206, 84, 0.45); }
.ns-ctl-row.ns-cal-past .ns-ctl-bar::before { opacity: 0.4; }
.ns-ctl-row.ns-cal-next .ns-ctl-title { font-weight: 700; }
.ns-ctl-quiet { color: rgba(255, 255, 255, 0.35); }
.ns-ctl-more {
    font-size: clamp(11px, 1.7vmin, 24px);
    color: rgba(255, 255, 255, 0.5);
}