/* ==========================================================================
           #Z  The Calendar — the journey as a month, and one day of it
           ==========================================================================

           Migrated into the deck log on 2026-09-11, immediately after the journal's list
           and for a reason that round created: `buildTripCalendar` draws both grids, so
           migrating the journal's calendar moved this one's too, and this room was left
           reading in the deck log inside cream walls. The owner looked at the photograph
           (`journal/calendar-section.png`) and said to close it before going on.

           ⚠️ THE GRID ITSELF IS NOT HERE. Every `.pcal-*` rule lives in
           css/17n-journal-list.css, because it is ONE component drawn in two rooms and
           this file is where a second copy of it would start. What is here is the room:
           the key, the selected day, and the three MARKS — which are this screen's
           instrument rather than the grid's dressing, and are the whole reason it got its
           own round. */

        /* ---- the sheet's chrome ------------------------------------------------------ */

        /* `is-log` is set by openTripSectionSheet for the rooms on this sheet that have
           been migrated, and the chrome for all of them is dressed once in
           css/17n-journal-list.css. Adding a room to this world is a word in that toggle.

           The Calendar's own geometry, though, is its own: it is the one room here whose
           layout is a fixed grid above a panel that scrolls, so the body stops scrolling
           and .tcal-scroll does it instead. Two scrollers otherwise, and the panel drifts
           against the wrong one. */
        #tripSectionSheet.is-calendar .trip-section-sheet-body {
            position: relative;
            overflow: hidden;
            padding: 0;
            background: var(--log-stock);
        }

        #tripSectionSheet.is-calendar #sectionContent { position: static; }

        .trip-section-sheet.is-calendar {
            height: 100dvh;
            border-radius: 0;
            box-shadow: none;
        }

        /* Full height, pinned to the sheet body. `height: 100%` would need every ancestor
           between here and the sheet to pass a definite height down, and #sectionContent is
           moved in by JS and has none. */
        .trip-cal-section {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            background: var(--log-stock);
        }

        .tcal-scroll {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: calc(var(--sp-2xl) + env(safe-area-inset-bottom, 0px));
        }

        /* ---- the three marks -------------------------------------------------------- */

        /* ⚠️ THE ROOM'S INSTRUMENT, AND NOT ONE COLOUR IS NAMED IN THIS FILE.

           The three marks are the category colours — wood brown for a stay, sky blue for
           travel, the warm red of a meal for an activity — chosen the way a reader feels a
           colour, and already living in this world: Saved is a deck-log room and paints its
           category marks from the same table (`.sv-mark`, css/15-saved.css).

           ⚠️ I REPLACED THEM WITH THE ONE INK EARLIER THE SAME DAY, on the argument that
           this world's colour vocabulary is port, starboard and magenta and that all three
           mean STATE. The owner sent it back, and the evidence was there to be checked
           before I wrote it. What that round was actually right about was the OWNERSHIP,
           and that part is kept: the colour used to live in CALENDAR_MARK_COLOURS in JS AND
           in three hardcoded copies here, each with a comment asking the next person to
           keep them in step. It arrives as `--c` on the element now, from one table, the
           way Saved's does. Four copies became one, and this file names none.

           The shapes are still doing work, because colour alone is not enough at 3px:

             STAY      a solid run, the full width of every night it covers.
             TRAVEL    a solid run in its own lane, 5px below. ⚠️ It was DASHED for an hour
                       and the owner sent that back too — at 3px and often one cell wide, a
                       broken line reads as a row of dots, which is what an activity tick is.
             ACTIVITY  short ticks, in their own register well below the two runs.

           And the lightness scale from the version this came from still holds, because it
           is about legibility rather than palette: on a 3px line a difference in LIGHTNESS
           survives where a difference in hue does not. The three sit one step apart, which
           is why travel is a step lighter than CATEGORY_COLORS.flights — see the note on
           CALENDAR_MARK_COLOURS. */

        .pcal-lane {
            position: absolute;
            height: 3px;
            background: var(--c, var(--log-rule-firm));
            pointer-events: none;
            /* 1px over the shared hairline on each side, so a run joins across cells. */
            left: -1px;
            right: -1px;
        }

        /* Stay and travel sit 5px apart — tight, because they are the same KIND of thing:
           continuous runs that cross cell boundaries. The activity ticks sit well below
           them (see .pcal-acts) because they are not. */
        .pcal-lane.is-stay { top: 21px; }

        .pcal-lane.is-travel { top: 26px; }

        /* Half insets at the ends of a run, plus a 2px shoulder so two runs meeting on the
           same day leave a VISIBLE gap. Without the shoulder the halves met exactly at 50%
           and the changeover was invisible — the line looked continuous straight through a
           hotel change, which is the one thing that day needed to show. */
        .pcal-lane.lane-start { left: calc(50% + 2px); }
        .pcal-lane.lane-end { right: calc(50% + 2px); }

        /* A single-day item would otherwise be a zero-width sliver at the centre. */
        .pcal-lane.lane-start.lane-end { left: 22%; right: 22%; }

        .pcal-acts {
            position: absolute;
            /* A clear 8px gap below the travel lane, against 5px between stay and travel.
               The spacing does the grouping: the two runs read as a pair and the ticks as a
               separate register — things that happened on this day, rather than things
               spanning days. Crowded together, all three read as one stack of lines whose
               meaning depended on counting rows from the top. */
            top: 37px;
            left: 3px;
            right: 3px;
            display: flex;
            flex-direction: column;
            gap: 0;
            pointer-events: none;
        }

        /* 4px between two ticks. At gap:0 with each tick at 50% they almost touched and
           read as one long line — which erases the difference between "two things" and
           "one thing that took the whole day", and that difference is the entire meaning
           of this cell. */
        .pcal-arow { display: flex; gap: 4px; }

        .pcal-dash {
            flex: 1;
            /* A lone tick takes half the row, so one activity and two are tellable apart. */
            max-width: calc(50% - 2px);
            height: 3px;
            margin-bottom: 2px;
            /* Inherited from .pcal-acts, which is where the kind is known. */
            background: var(--c, var(--log-rule-firm));
        }

        /* ---- the key ---------------------------------------------------------------- */

        /* Only the kinds this journey actually uses, and drawn with the same three marks as
           the grid — so it reads as a key rather than as a second set of symbols to learn.
           The marks used to be painted from an inline style carrying a hex out of JS; they
           are drawn here, from the same declarations the grid uses. */
        .tcal-legend {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--sp-xs) var(--sp-lg);
            padding: var(--sp-xs) var(--sp-lg);
            background: var(--log-stock-band);
            border-bottom: 1px solid var(--log-rule);
        }

        .tcal-key {
            display: inline-flex;
            align-items: center;
            gap: var(--sp-xs);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }

        .tcal-key-mark {
            flex: none;
            width: 16px;
            height: 3px;
            background: var(--c, var(--log-rule-firm));
        }

        /* Short, like the tick it stands for. The other two are runs and keep the full
           16px. Colour comes in on `--c`, above. */
        .tcal-key.is-activity .tcal-key-mark { width: 8px; }

        /* ---- the selected day ------------------------------------------------------- */

        .tcal-day { padding-bottom: var(--sp-lg); }

        .tcal-day-head {
            display: flex;
            align-items: baseline;
            gap: var(--sp-sm);
            min-height: 44px;
            padding: var(--sp-xs) var(--sp-lg);
            border-bottom: 1px solid var(--log-rule-firm);
        }

        /* The date and the weekday are two spans inside one div, so the head's own `gap`
           never reached between them — it read as "11FRI". */
        .tcal-day-date {
            display: inline-flex;
            align-items: baseline;
            gap: var(--sp-xs);
        }

        .tcal-day-num {
            font-family: var(--log-print);
            font-size: var(--fs-lg);
            font-weight: 600;
            /* Lining and tabular. The date here changes as the reader taps across the grid
               and the number must not shift its own baseline while they do it — which is
               exactly what oldstyle figures, which this was set in, do. */
            font-variant-numeric: lining-nums tabular-nums;
            line-height: 1;
            color: var(--log-ink);
        }

        .tcal-day-dow,
        .tcal-day-ctx {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 400;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink-soft);
        }

        /* Going to the day's own page changes nothing, so it is ink rather than magenta —
           and it is a word with a thumb's worth of height of its own, which is why it came
           off the hit-area list in css/05-interaction.css. */
        .tcal-day-open {
            margin-left: auto;
            min-height: 44px;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            color: var(--log-ink);
        }

        /* ---- what is on that day ---------------------------------------------------- */

        /* A row carries a spine in its kind's ink — the same pressure as the mark in the
           grid that led the eye to this day, so the two connect without a label. Wide, not
           a hairline: at 2px it read as a border rather than as a mark.

           ⚠️ The spine used to be painted from `--c`, set inline from CALENDAR_MARK_COLOURS.
           The kind is a class now and the ink is named here, once. */
        .tcal-row {
            display: flex;
            align-items: center;
            gap: var(--sp-sm);
            /* 44, because a dense calendar row is still a control. The height was 34 and the
               floor was added in css/05-interaction.css on the accessibility pass; it moved
               here with the rest of the row so there is one owner. */
            min-height: 44px;
            padding: var(--sp-2xs) var(--sp-lg);
            border-bottom: 1px solid var(--log-rule);
            border-left: 6px solid var(--c, var(--log-rule-firm));
            cursor: pointer;
        }

        .tcal-row:active { background: var(--log-stock-band); }

        /* A stay is the day's ground fact, so it takes the band as well as the heaviest
           spine — it was a colour-mix tint of its own category colour, which this world
           has no way to make. */
        /* A stay is the day's ground fact, so it takes the band as well as its spine. */
        .tcal-row.is-stay { background: var(--log-stock-band); }

        /* An entry is not one of the three marks — it is under its own printed sub-head —
           so it takes the rule weight rather than a fourth colour, which would imply a
           fourth kind on the grid above. */
        .tcal-row.is-journal { border-left-color: var(--log-rule-firm); }

        .tcal-row-time {
            flex: none;
            width: 44px;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.06em;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink-soft);
        }

        .tcal-row-main { flex: 1; min-width: 0; }

        /* What the thing is called is the traveller's own words, so it is the written
           voice — the same as an activity's name on the ticket and on the day. */
        .tcal-row-name {
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tcal-row-meta {
            margin-top: 1px;
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tcal-sub {
            padding: var(--sp-xs) var(--sp-lg);
            background: var(--log-stock-band);
            border-bottom: 1px solid var(--log-rule);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        /* Ruled-To-The-Foot — see the note in css/17n-journal-list.css. */
        .tcal-fill {
            flex: 1 1 auto;
            min-height: 0;
            background-image: repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--log-row) - 1px),
                var(--log-rule) calc(var(--log-row) - 1px),
                var(--log-rule) var(--log-row));
        }

        .tcal-empty {
            padding: var(--sp-md) var(--sp-lg);
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink-soft);
        }