/* Daily Goals tab — one column per day, each a flat board of goal cards. Root is `.gd-view.dlg-view`, and this file @imports BOTH stylesheets: - the dashboard stylesheet (`.gd-view …`) styles the cards themselves — the goal row, its completion check, its tag row, and the reflection tray. - the weekly-goals stylesheet supplies the `.wlg-grid` FRAME (column cards, headers). Its frame rules are `.wlg-grid`-scoped, so they apply here without a `.wlg-view` root. What this file adds: the scrolling day strip, the day column's own shape, and the board card — one card per daily goal, all the same surface, with the colour carried by its tags. See `instructions/spec-daily-goals-tag-board.md`. ⚠️ It no longer @imports `daily-modern-cards.css` (deleted 2026-08-04 with the tinted per-weekly-goal card it styled). ⚠️ `.dlg-view` IS NOT THIS TAB. The reflection blocker modal renders its daily cards into `div.gd-view.dlg-view.rbm-daily` to borrow this root's card styling, so anything scoped only to `.dlg-view` lands inside that modal too. Every rule that shapes THE BOARD — the uniform card, its hover, its tag row, the hidden reflection tray — is therefore scoped through `.dlg-day-rows`, the day column's goal list, which exists only here. Hiding `.gd-toggle` on a bare `.dlg-view` took out the modal's reflection tray AND its focus trap: the trap pulls focus to the modal's first focusable, that was the toggle, and `focus()` on a `display:none` button is a silent no-op, so the keyboard escaped to the app behind the blocker (caught 2026-08-04 by `reflection_blocker_enforcement_check`). */ @import url('../goals-dashboard/goals-dashboard.css'); @import url('../weekly-long-term-goals/weekly-long-term-goals.css'); /* "Connect to Week Goals" — the header button, and the three `display: contents` rules that let the mounted weekly column BE a column of the day strip. Its own file because this one is Modulario ORANGE; imported here so it loads exactly where the board does. See `js/daily-long-term-goals/daily_week_column.js`. */ @import url('../../styles/daily-week-column.css'); /* Light mode's opaque card, for this board and for the Reflect grid that imports it. Also its own file, same reason. */ @import url('daily-solid-cards.css'); /* ── Seven day columns (Mon–Sun), on a strip that SCROLLS ──────────── The week is no longer squeezed to fit. A day column has a comfortable width (`--dlg-col-w`) and the seven of them make a strip you scroll sideways — the only way a 180px column could hold the goal card, and the reason that column was 180px was that seven of them had to fit a laptop at once. THE GRID IS THE SCROLLER, not the view around it. Two reasons, both visible: the horizontal bar then sits at the BOTTOM OF THE SCREEN where it can be dragged, instead of at the bottom of a grid that is taller than the window; and the grid's own surface, border and rounded corners stay put while the days move inside them, rather than sliding off the left edge. `1fr` as the max keeps a wide monitor honest: past 7 × `--dlg-col-w` the columns share the extra rather than leaving a band of empty grid. ONE row. The frame flows `grid-auto-flow:column` into `grid-template-rows` and each `.wlg-week-column` is `display:contents`, so a column's cards are direct grid items filling top-to-bottom. A day is ONE card now, so one row — with more rows than a column has children the grid still places correctly, but with FEWER the extra child wraps into the next column and the week staircases. */ .gd-view.dlg-view { /* A task-board column, not a page column. 360px was set when the card was two stacked rows of chrome and the goal's words had to survive that; the row is one line now — check, words, three 15px controls — so ~185px of words fits at 284, which is where a goal of six or seven words still lands on one line. Narrower than that and the words start wrapping again; much wider and a day stops reading as a column of tasks, which is the whole shape. The strip scrolls either way, so this is not about fitting the week: it is about how much of one day you can take in at once. 284 → 300 on 2026-08-12, and the 16px is the day HEADER's, not the row's. The header gained a labelled "Schedule" button and it is a flex row whose only elastic element is the day's own name: at 284 the name it had left was 64px and "Wednesday" needs 66, so the longest weekdays ellipsised the moment the day also had a goal count. Widening is the honest fix — the alternative was shaving the button until it stopped saying what it does. 300 → 326 the same day, and for exactly the same reason one more time: the header gained the "Connect to Week Goals" button beside Schedule. That one is ICON ONLY precisely because a second word would not fit at any sane width, and 26px is what the icon plus the header's own 6px gap costs. The week column this opens is a track of the same strip, so it is this wide too — `daily_week_column.js` writes the track list, and one of the reasons the week reads as "the Tuesday before Wednesday" is that it is exactly as wide as a day. */ --dlg-col-w: 326px; } .dlg-view .wlg-grid.dlg-grid { grid-template-columns: repeat(7, minmax(var(--dlg-col-w), 1fr)); grid-template-rows: minmax(0, 1fr); /* The weekly frame sets `gap: 0` and rules its columns off with a hairline instead — right for seven columns squeezed onto a laptop, a table here. The gutter is what lets a day read as a place rather than as a cell; the rule it replaces is dropped further down, on the section card itself. */ column-gap: 12px; /* The weekly frame sets `overflow: hidden` (it clips its columns to the rounded border). Here that would CLIP the days past the window instead of letting you reach them. The HEIGHT that goes with it is set by `daily_day_strip.js`, not here: every ancestor up to is auto-height, so a `height: 100%` resolves to none and the strip is as tall as its content — the horizontal bar then lands at the bottom of a grid that can be twice the window (scroll down in order to scroll sideways) or, on a light week, halfway up the page over blank space. The module measures the room left under the topbar and sets an exact height. */ overflow: auto; /* A sideways flick that runs out of days must not become the browser's back-gesture — the tab would navigate away mid-scroll. */ overscroll-behavior-x: contain; scrollbar-color: rgba(var(--overlay-rgb), 0.3) transparent; } /* A bar you can actually grab. The default overlay scrollbar is a few pixels of ghost, and dragging the strip is the primary way to reach Thursday. */ .dlg-view .wlg-grid.dlg-grid::-webkit-scrollbar { height: 12px; width: 10px; } .dlg-view .wlg-grid.dlg-grid::-webkit-scrollbar-track { background: transparent; } .dlg-view .wlg-grid.dlg-grid::-webkit-scrollbar-thumb { /* Inset by a transparent border rather than a smaller height, so the thumb keeps the full 12px hit area while reading as a slim pill. */ background: rgba(var(--overlay-rgb), 0.28); background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; } .dlg-view .wlg-grid.dlg-grid::-webkit-scrollbar-thumb:hover { background: rgba(var(--overlay-rgb), 0.5); background-clip: padding-box; } /* Grab-anywhere panning (js/daily-long-term-goals/daily_day_strip.js). The cursor is only promised on the empty surface between the cards — the module refuses to pan from a card, a row or a field, and a grab cursor over one of those would be promising a gesture that will not start. */ .dlg-view .wlg-grid.dlg-grid.dlg-strip-panning { cursor: grabbing; /* Mid-pan the pointer is sweeping across text; without this the drag paints the week blue behind itself. */ user-select: none; } /* ── Phone: one day, full width, no strip ──────────────────────────── The Views dropdown already lands a phone on '1 day' (period_windows.js), so the usual case is a single column and there is nothing to scroll. This covers the other one: a phone whose user picked 'Full week' gets a day per SCREEN with snap points, rather than a 300px column and a hairline of the next — the strip is a pointer gesture, and a thumb should page through days. `100%` of the SCROLLPORT, so it tracks rotation with no breakpoint of its own. */ html[data-device='phone'] .dlg-view .wlg-grid.dlg-grid { grid-template-columns: repeat(7, 100%); scroll-snap-type: x mandatory; } /* `.wlg-week-column` is `display:contents`, so the snap point goes on the card that starts the column rather than on the column itself. */ html[data-device='phone'] .dlg-view .wlg-grid.dlg-grid .dlg-day-card { scroll-snap-align: start; } /* ── Day header: day name (left) · date (right) ────────────────────── The weekly header shows a single week-range label; here `.wlg-week-label` holds the day name and this date span sits to its right (the label has flex:1). */ .dlg-view .dlg-col-date { font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } /* ── Column layout ──────────────────────────────────────────────────── The weekly frame reserves a big fixed block per column (min-height 140/120px) plus roomy 24px page padding — mostly empty on a day with a few goals. The day card sizes to its content instead, scoped to `.dlg-view` so the Weekly Goals tab (same `.wlg-*` classes, different root) keeps its own spacing. */ .gd-view.dlg-view { padding: 12px; } /* 🔴 A DAY column generates no box, and that is what makes the day card a grid item of the strip — so the strip's one `minmax(0, 1fr)` row BOUNDS the card's height, and a 30-goal Wednesday scrolls inside its own list instead of growing the strip past the bottom of the window and taking the horizontal scrollbar with it (`daily_tab_day_strip_check` asserts exactly that). This rule used to come free from the weekly stylesheet this file imports. It stopped on 2026-08-07: a PERIOD column has to be a real box, because the drag layer finds the column you dropped a card on with `elementFromPoint(…).closest` and an element with no box has no rect to find. The two boards want opposite things here, so the daily strip states its own. */ .dlg-view .wlg-grid.dlg-grid .wlg-week-column { display: contents; } /* The weekly frame separates its columns with a HAIRLINE RULE. That is a table, and a table is right for seven columns that have to line up on a laptop — but this strip's columns are `--dlg-col-w` wide precisely so a day does not have to be read as a cell. The rule goes; the GUTTER that replaces it is on the grid, up with the rest of the strip. `.dlg-day-card` is a COLUMN of its own so the header, the goal list and the add button stack with the list taking the slack. */ .dlg-view .wlg-grid .section-card.dlg-day-card { display: flex; flex-direction: column; min-height: 0; /* Vertical is tight; HORIZONTAL is not negotiable down past 10px — that inset is what makes a goal card read as an island in the day rather than as a filled row of a table, and `daily_tab_day_strip_check` measures it. */ padding: 8px 10px 10px; border-right: none; border-bottom: none; } /* The goal list scrolls INSIDE the day, so a 30-goal Wednesday does not make every other column that tall — the strip scrolls sideways, and a page that also scrolled down to the bottom of one day would put the sideways bar out of reach (the same reason the grid, not the view, owns the horizontal scroll). ⚠️ `flex-grow` is 0 ON PURPOSE. The day card is a full-height grid item, so a growing list stretched to the bottom of the strip and carried "+ Add goal" down with it — the button for adding to a two-goal Tuesday sat six hundred pixels under the second goal, at the bottom of the page. Add-goal belongs at the END OF THE LIST, which is where the button is in the DOM; growing was the only thing moving it. `flex-shrink: 1` + `min-height: 0` are what still cap a long day at the room available and scroll the overflow inside it. */ .dlg-view .dlg-day-rows { display: flex; flex-direction: column; gap: 5px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; } /* ── Scroll past the last goal ──────────────────────────────────────── A scroller whose content ends at its last child stops dead there: you can reach the bottom goal of a full day and no further, so every goal you add lands one row below the fold, in space you cannot look at until it exists. This block is that space — empty room after the last card, so the list scrolls PAST its content and the next few goals have somewhere visible to land. Sized and added by `js/daily-long-term-goals/daily_column_tail.js`, not here, because its height is a fraction of the column's — and because it must exist ONLY while the list overflows. On a two-goal Tuesday the same block is a gap between the last goal and the "+ Add goal" button it is pushing away. 🔴 THE LIST IS ORDERED BY `order`, NOT BY DOM POSITION — cards, then the add button, then the tail. Two things append past whatever is last: the renderer (which appends cards to a list that already holds the button) and `orderBoardCards`, which sinks completed cards by appending them with no re-render behind it. Either would put the add button or the blank space in the middle of the day if position were what held them at the end. `pointer-events: none` on the tail so the blank space still belongs to the strip's grab-and-pull and to a goal dropped on the column. */ .dlg-view .dlg-day-rows > .dlg-add-foot { order: 1; } .dlg-view .dlg-day-rows > .dlg-day-tail { order: 2; flex: 0 0 auto; pointer-events: none; } /* ── The board card: one daily goal ────────────────────────────────── Every card is the SAME surface. That is the whole point of the tag board — the old shape tinted each card in its weekly parent's colour, which made the parent the loudest thing on screen and turned a day into a paint chart. Colour now lives in the tag, where it identifies without shouting. 🔴 OPAQUE (`--card-surface`) in both themes — see styles/goal-board.css, whose card this one has to match tab for tab. */ .dlg-view .dlg-day-rows .gd-daily-group { position: relative; box-sizing: border-box; background: var(--card-surface); border: 1px solid var(--border-subtle); border-radius: 8px; /* Two lines and the space to separate them, nothing else. A card is the goal's words and its two tags; every extra pixel here is multiplied by the number of goals in the day, which is the number a board exists to show you. */ padding: 5px 8px 6px; transition: background 0.12s ease, border-color 0.12s ease; } /* Hover is a real affordance here, not decoration: pressing a card opens its sub-goals, so the card has to say it is pressable. */ .dlg-view .dlg-day-rows .gd-daily-group:hover { background: var(--card-surface-strong); border-color: rgba(var(--overlay-rgb), 0.22); } /* The parent's colour ring the dashboard puts on a linked card. Dropped: the ring was how the OLD card said which weekly goal it belonged to, and the tag says that now. Two of them would be the same fact twice, in the same colour. */ .dlg-view .dlg-day-rows .ltg-row.gd-linked { box-shadow: none; } /* The tray the renderer still builds and still saves to — hidden, not removed, so every reflection ever written stays loaded and round-trips on save. Its toggle goes with it: the card's one disclosure is its sub-goals. */ .dlg-view .dlg-day-rows .gd-daily-group > .gd-daily-reflect, .dlg-view .dlg-day-rows .gd-daily-group .gd-toggle { display: none; } /* ── The tag row ───────────────────────────────────────────────────── Weekly-goal chip first (its own colour), then the outcome/skill readout. A card with no parent shows "+ tag" in the first slot instead. */ .dlg-view .dlg-day-rows .gd-daily-foot { margin-top: 3px; } /* ONE line, always. Wrapping was costing a whole extra row on exactly the cards whose weekly goal has a name worth reading — and a two-line tag row on a card whose goal is one line is the card spending more height on its labels than on its subject. The parent chip is the thing that gives: it ellipsises. */ .dlg-view .dlg-day-rows .gd-link-tags { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; } /* The parent chip is a BUTTON on this surface (it opens the parent menu), so it gets a pointer and a hover — everywhere else it is a label and stays one. */ .dlg-view .dlg-day-rows .wlg-monthly-tag.is-pickable { cursor: pointer; } .dlg-view .dlg-day-rows .wlg-monthly-tag.is-pickable:hover { filter: brightness(1.15); } /* Deliberately quiet, and deliberately not chip-shaped: it is the ABSENCE of a tag, and a filled pill would read as one more tag the goal already has. */ .dlg-view .dlg-tag-add { background: none; border: 1px dashed var(--border-subtle); border-radius: 5px; color: var(--text-tertiary, var(--text-secondary)); cursor: pointer; font-size: 11px; line-height: 1; padding: 3px 6px; } .dlg-view .dlg-tag-add:hover { border-color: rgba(var(--overlay-rgb), 0.45); color: var(--text-primary); } /* The outcome/skill READOUT lived here — a flat chip and its two opaque fills, with a dark-mode tint over in `daily-solid-cards.css`. It reported which of two arrays a goal was in; the outcome/process split was retired on 2026-08-30 and there is one array, so the chip is gone with it. */ /* ── The day header and its two add buttons ────────────────────────── The header "+" and the footer "+ Add goal" are the same action; they are styled as two different WEIGHTS of it, because the footer one is the one you reach for after reading the day and the header one is the one you find before you have scrolled. */ /* 🔴 TWO ROWS' worth, not one line's. The header wraps its two leaving buttons (Connect / Schedule) onto a line of their own — see `.dlg-day-actions` in `styles/daily-week-column.css` for why — and the mounted week column wears this same header WITHOUT an action row of its own. Without a floor here its header is one line shorter and its goal list starts above the day's, which is the one way that column stops reading as another column of the strip. `checks/daily_tab_week_column_check.mjs` asserts the two lists begin level. */ .dlg-view .dlg-day-card .card-header { height: auto; min-height: 45px; margin-bottom: 8px; } .dlg-view .dlg-day-count { color: var(--text-tertiary, var(--text-secondary)); font-size: 12px; font-weight: 500; margin-left: 2px; } .dlg-view .dlg-add-goal { background: none; border: none; color: var(--text-secondary); cursor: pointer; } .dlg-view .dlg-add-head { border-radius: 5px; font-size: 17px; line-height: 1; padding: 1px 5px 3px; } .dlg-view .dlg-add-foot { align-items: center; border-radius: 6px; display: flex; flex: 0 0 auto; font-size: 11px; font-weight: 600; gap: 5px; letter-spacing: 0.06em; margin-top: 8px; padding: 6px 7px; text-transform: uppercase; } /* The day is full: the cap's answer, on the day the press landed on. Ordered with the add button (both `order: 1`) so it sits directly above it rather than being pushed under the scroll tail — see js/daily-long-term-goals/daily_goal_limit_notice.js. */ .dlg-view .dlg-day-rows > .dlg-limit-note { background: rgba(var(--overlay-rgb), 0.12); border: 1px solid var(--accent-warning, #d08a3c); border-radius: 6px; color: var(--text-primary); flex: 0 0 auto; font-size: 11px; line-height: 1.35; margin-top: 8px; order: 1; padding: 6px 7px; } .dlg-view .dlg-add-goal:hover { background: rgba(var(--overlay-rgb), 0.1); color: var(--text-primary); } .dlg-view .dlg-add-plus { font-size: 14px; } /* ── Reflection field: drop the boxed "rectangle" ───────────────────── The dashboard styles the reflection textarea as its own bordered/filled box (background + 1px border + radius + 6/8px padding) layered inside the tray. Here we strip that box so the reflection text lays directly in `.wlg-reflection-wrap` with almost no space around the edges, and shrink the tray's own padding/min-h. */ /* `.gd-view.dlg-view` (both root classes) so these outrank the dashboard's own `.gd-view textarea.icx-prompt-answer` box rules regardless of stylesheet load order (equal specificity would otherwise lose the cascade tie). */ .gd-view.dlg-view textarea.icx-prompt-answer, .gd-view.dlg-view textarea.icx-prompt-answer:focus { background: transparent; border: none; border-radius: 0; padding: 0 2px; min-height: 20px; outline: none; font-size: 13px; /* reflection text — match the goal title/tag, not larger */ /* Match the authored-question label's color (`.icx-prompt-label`) so the free reflection never reads a different color from the questions above it. The dashboard hard-codes this answer to #fff in light mode (meant for the weekly tab's colored ROW); here the reflection sits in the tray on the card, so mirror the question's own accent/text vars (see the theme-light override below). */ color: var(--intentional-event-accent-color, inherit); } .gd-view.dlg-view textarea.icx-prompt-answer.ltg-word-count-target { padding-bottom: 16px; } /* Light mode: the question label switches to the goal's legible-on-light text var; mirror it here too. Extra `.dlg-view` class outranks the dashboard's `body.theme-light .gd-view textarea.icx-prompt-answer { color:#fff }`. */ body.theme-light .gd-view.dlg-view textarea.icx-prompt-answer, body.theme-light .gd-view.dlg-view textarea.icx-prompt-answer:focus { color: var(--intentional-event-text-color, inherit); } .gd-view.dlg-view .wlg-reflection-wrap { padding: 3px 2px 2px; gap: 2px; } .gd-view.dlg-view .gd-daily-prompts { gap: 2px; } .gd-view.dlg-view .gd-daily-prompts-actions { margin-top: 2px; } /* ── Font sizes ─────────────────────────────────────────────────────── Keep the daily goal title, reflection, and parent-link tag all at 13px so they don't read larger than the surrounding UI. Dashboard defaults were 16px (title), 15px (reflection — set above), 14px (tag). `.gd-view.dlg-view` outranks the dashboard's `.gd-view` rules regardless of load order. The tag name/emoji spans inherit from `.wlg-monthly-tag`. */ .gd-view.dlg-view .ltg-text { font-size: 13px; } .gd-view.dlg-view .wlg-monthly-tag, .gd-view.dlg-view .wlg-tag-emoji { font-size: 13px; } /* emoji has its own size — pin it too */ /* ── Tighten the goal-row lead columns ──────────────────────────────── The 14px completion check sat in a 28px column (14px dead space), and the toggle→check / check→number gaps were 6px / 4px. Pull the check, number, and toggle in so the goal text starts much sooner and gets more room. */ .gd-view.dlg-view .gd-daily-body { gap: 2px; } .gd-view.dlg-view .gd-daily-line { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px; } /* Sub-goal disclosure + editor styling moved to the shared styles/subgoals.css (un-scoped) so the dashboard's Daily column + the undated sidebar share it. */ /* The brain-dump card, the capture bar and the legacy-dump list were all styled here until 2026-08-04. All three are gone: an unlinked goal is now just a card with no weekly tag, sitting in the same list as every other goal, and the way in is the day's add button rather than a bar of its own. */ /* Drag-over target: the DAY you are about to drop a goal into — an undated-goals sidebar chip, a brain-dump card, or one of this tab's own goals being moved off another day. Toggled by js/daily-long-term-goals/daily_goal_drop.js. The whole day card lights, and it is the same light the Weekly / Monthly / Quarterly boards use on the column under the pointer (`.gb-col.gb-drop-target` in styles/goal-board.css) — one gesture across the four goal boards should answer "where will this land" the same way on all of them. A dashed outline was what this drew back when it lit one section card inside the day; a filled box is what reads at the size of a whole column. 🔴 The class lands on `.dlg-day-card`, not on `.wlg-week-column` — the column is `display: contents` and paints nothing. That mismatch is exactly why this tab spent a while with no drop feedback at all. */ .dlg-view .section-card.dlg-day-drop-target { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } /* ── Day→day row drag (js/daily-long-term-goals/daily_goal_move.js) ─── The whole row is the handle, so it says so: grab everywhere except the title, which is a text field and keeps its caret (it still STARTS a drag while unfocused — focus is what decides, see the module header). No `touch-action: none` here on purpose. It is what makes a drag survive a touch pointer, and it would also stop a finger on a goal row from scrolling the day column — seven columns of rows, on the surface where scrolling is how you read them. Touch keeps scrolling; the drag is a pointer gesture. */ .dlg-view .gd-daily-line:not(.gd-daily-line--ghost) { cursor: grab; } /* …and the title is part of the handle while it is LOCKED, which on the board is most of the time (`daily_card_row.lockRowText`). A text cursor over words that take no caret promises an edit the pencil is the only way into. */ .dlg-view .gd-daily-line .ltg-text { cursor: text; } .dlg-view .dlg-day-rows .gd-daily-line .ltg-text[readonly] { cursor: grab; /* A read-only textarea still SELECTS, and a press that lands inside selected text starts Chrome's native text-drag — which cancels the pointer stream and kills the row drag mid-gesture. The module also preventDefaults the mousedown; this is the half that stops the selection ever appearing. */ user-select: none; } /* Mid-drag, an unfocused title must not keep extending a text selection under the moving pointer — that paints the column blue as the row travels. */ body.intentional-calendar-x-goal-dragging .dlg-view .gd-daily-line .ltg-text { user-select: none; } /* ── The card is a HANDLE, so it does not select ────────────────────── Pressing the weekly-goal tag and pulling used to paint the tag blue: the press is a drag now, but the browser had already started a text selection inside a label, and a selection under a moving pointer is both ugly and dangerous — Chrome will happily turn one into a native TEXT drag, which cancels the pointer stream and kills the row drag with it (the same trap `lockRowText` guards the title against). Only the two things that ARE text opt back in: a title the pencil has opened, and the sub-goal checklist. Everything else on the card — the tick, the tags, the controls, a locked title — is something you grab. */ .dlg-view .dlg-day-rows .gd-daily-group { user-select: none; } .dlg-view .dlg-day-rows .gd-daily-group .ltg-text:not([readonly]), .dlg-view .dlg-day-rows .gd-daily-group .gd-subgoals-body { user-select: text; } /* The calendar's own drag adds this to whatever it is dragging. The gesture is attached to the CARD on this board (js/daily-long-term-goals/daily_goal_move.js), so both are named: the row rule is what a surface that still drags rows gets. */ .dlg-view .gd-daily-line.intentional-calendar-x-event-card--dragging, .dlg-view .dlg-day-rows .gd-daily-group.intentional-calendar-x-event-card--dragging { opacity: 0.5; } /* ── The card you are carrying ──────────────────────────────────────── A copy of the dragged card, walked under the pointer by `drag_carry.js` and built by `daily_drag_carry.js`. It is mounted INSIDE `.dlg-view` — that is the only way the card rules above reach it — and `position: fixed` is what then lets it leave the day column it was cloned from. It must not be hit-testable: the drop resolvers read `elementFromPoint`, and a card following the pointer would be the only thing they ever found. */ .dlg-view .dlg-day-rows.dlg-drag-carry { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; /* Undo the column: this wrapper exists to satisfy `.dlg-day-rows .gd-daily-group`, not to lay anything out. Its own scroll would clip the card it carries. */ flex: none; gap: 0; overflow: visible; will-change: transform; /* Same treatment as the period boards' `.gb-drag-carry`: enough transparency to see the surface you are aiming at through the thing in your hand, and a shadow that says it is above that surface rather than in it. */ opacity: 0.92; } .dlg-view .dlg-drag-carry .gd-daily-group { /* The board's card is translucent over the day behind it; a carried one flies over the whole week, so it needs a floor of its own or the columns it passes read straight through the goal's words. */ background: linear-gradient(rgba(var(--overlay-rgb), 0.06), rgba(var(--overlay-rgb), 0.06)), var(--card, var(--bg)); border-color: rgba(var(--overlay-rgb), 0.3); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); /* 🔴 NO transform here, and no rotation anywhere on a carry. It used to be `rotate(-2deg) scale(1.03)` — "picked up off the surface" — and it read as a card that had come loose and gone crooked. The other boards' carry (`.gb-drag-carry`, goal-board.css) never tilted, so the same gesture looked like two different things depending on which surface you started it on. Held is said by the shadow and the slight transparency below, both of which survive the compositor move `drag_carry.js` writes into `transform` — a transform declared here would be overwritten by it anyway. */ } /* No hover state on a card nobody can point at — the wrapper is pointer-events: none, but the cursor is still geometrically over it and Chrome will paint the hover anyway. */ .dlg-view .dlg-drag-carry .gd-daily-group:hover { background: linear-gradient(rgba(var(--overlay-rgb), 0.06), rgba(var(--overlay-rgb), 0.06)), var(--card, var(--bg)); } /* ── The day header's two copy glyphs ───────────────────────────────── "⧉" copies THIS day's goals to the clipboard as text (js/daily-long-term-goals/ daily_copy_text.js); "⟲" copies the PREVIOUS day's goals into this one (daily_carry_forward.js). Out and in — one control shape, so the pair reads as two directions of the same thing rather than two unrelated buttons. Both sit at the right edge of the day header, after the date. Quiet until hovered so fourteen of them across the grid don't shout; the header is a flex row, so they just need to not shrink. */ .dlg-view .dlg-carry, .dlg-view .dlg-copy { background: none; border: none; padding: 0 1px; font-size: 13px; line-height: 1; cursor: pointer; color: var(--text-secondary); opacity: 0.5; flex-shrink: 0; position: relative; } .dlg-view .dlg-carry:hover, .dlg-view .dlg-copy:hover { opacity: 1; color: var(--text-primary); } .dlg-view .dlg-carry:disabled, .dlg-view .dlg-copy:disabled { cursor: default; opacity: 0.3; } /* ── The day header's "Schedule" button ─────────────────────────────── The one control in the header that is not a glyph, because it is the one that LEAVES: ⧉ ⟲ + all act on the day in place, and this opens that day on its own with its schedule beside it (js/daily-long-term-goals/daily_schedule_button.js). A word says where you are going in a way a fifth icon in a 300px header could not — the calendar frame beside it is the destination, not the label. Last in the header, hard against the right edge, and the only one of the four that is drawn as a surface. Quiet enough that seven of them across the strip are not a row of buttons demanding to be pressed; awake on hover, where the day is the one you are looking at. 🔴 IT IS SIZED AGAINST THE DAY'S NAME. The header is a flex row in a ~300px column already carrying the day name, the date, the goal count and three glyph buttons, and the name is the one element with `flex: 1` — so every pixel this button takes comes out of it, and past ~30 of them "Wednesday" becomes "Wednesda…". That is why it is borderless, lower-case and tightly padded rather than the uppercase bordered pill it started as: a chip, not a button bar. `checks/daily_tab_schedule_button_check.mjs` asserts the name is never clipped, which is the assertion to read before making this any wider. */ .dlg-view .dlg-day-head { gap: 6px; } .dlg-view .dlg-schedule { align-items: center; background: rgba(var(--overlay-rgb), 0.08); border: none; border-radius: 5px; color: var(--text-secondary); cursor: pointer; display: inline-flex; flex-shrink: 0; font-size: 11px; font-weight: 600; gap: 3px; line-height: 1; padding: 3px 5px; white-space: nowrap; } .dlg-view .dlg-schedule:hover { background: rgba(var(--overlay-rgb), 0.18); color: var(--text-primary); } /* Pressed — the day IS narrowed and the schedule panel IS open on it, so the next press puts both back. Drawn exactly as its twin `.dlg-connect-week` is while its column is up (`styles/daily-week-column.css`): the two are one pair of chips, and a pair that says "open" in two different ways is two features. Keyed on `aria-pressed` rather than on a class, so the state a screen reader is told and the state the eye is shown cannot drift apart. */ .dlg-view .dlg-schedule[aria-pressed='true'], .dlg-view .dlg-schedule[aria-pressed='true']:hover { background: var(--accent, #4a9eff); color: #fff; } .dlg-view .dlg-schedule-icon { height: 12px; width: 12px; flex-shrink: 0; } /* Deliberately NOT hidden on the one-day window this button opens — it is the way BACK OUT of that window as well as the way in (2026-08-30). Pressing it again while the panel is open on this day restores the full week and closes the panel; pressing it on a day already narrowed with the panel SHUT re-opens the panel there instead, which is still the only way back to it that names a day. See js/daily-long-term-goals/daily_schedule_button.js. */ /* Transient status ("Nothing to copy" / a failed read / "Copied"), set as data-note by the carry and copy modules. Absolutely positioned so it can't reflow the header, and pointer-events:none so it never eats the next click on the button. */ .dlg-view .dlg-carry[data-note]::after, .dlg-view .dlg-copy[data-note]::after { content: attr(data-note); position: absolute; top: 100%; right: 0; margin-top: 4px; white-space: nowrap; font-size: 11px; padding: 3px 6px; border-radius: 6px; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--border-subtle); color: var(--text-secondary); pointer-events: none; z-index: 901; } /* The two-item mode menu. `position:fixed` + appended to (not the column) so the narrow, overflow-scrolling day column can't clip it. */ .dlg-carry-menu { position: fixed; z-index: 900; display: flex; flex-direction: column; min-width: 150px; padding: 4px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(12px) brightness(120%); -webkit-backdrop-filter: blur(12px) brightness(120%); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } .dlg-carry-menu[hidden] { display: none; } .dlg-carry-option { background: none; border: none; border-radius: 6px; padding: 7px 10px; text-align: left; font-size: 13px; color: var(--text-primary); cursor: pointer; } .dlg-carry-option:hover { background: rgba(var(--overlay-rgb), 0.08); } /* ── Per-goal repeat control (js/daily-long-term-goals/daily_goal_repeat.js) ── Sits directly under a daily goal's row, inside its grouped card. Only a small trigger: the day columns here are narrow, and the choices live in the shared repeat dialog (views/week/shared/scope-dialog.css) that the Calendar tab's popup opens too. Its label is DERIVED from the other day columns' data, not stored — a lit day means that day already holds this goal under the same weekly parent. */ .dlg-repeat { display: flex; align-items: center; /* Right-aligned, not indented under the goal's text: the left edge of a row is already the checkbox/text column, and a pill starting there reads as part of the goal. Against the right edge it reads as what it is — a control on the row above it. */ justify-content: flex-end; gap: 6px; padding: 2px 0 4px; font-size: 10px; color: var(--text-muted); } .dlg-repeat-trigger { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 7px 1px 5px; border-radius: 999px; border: 1px solid rgba(var(--overlay-rgb), 0.16); background: rgba(var(--overlay-rgb), 0.05); color: var(--text-muted); font: inherit; font-size: 10px; line-height: 1.5; cursor: pointer; } .dlg-repeat-trigger:hover { background: rgba(var(--overlay-rgb), 0.12); color: var(--text-primary); } .dlg-repeat-trigger.is-active { border-color: rgba(74, 158, 255, 0.7); background: rgba(74, 158, 255, 0.22); color: var(--text-primary); } .dlg-repeat-trigger-icon { font-size: 11px; line-height: 1; } .dlg-repeat-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Cramped: drop to the bare ⟳, the same symbol the day header's carry-forward button uses, so a narrow column spends ~18px on this instead of a truncated word. Driven by the sub-goals row's own width (`container: goal-aside` in styles/subgoals.css), not a viewport breakpoint — what runs out of room is the column, and the same column is wide at 1-day and narrow at 7. The threshold is the point below which the disclosure header ("▸ subgoals · 12/15", ~105px) plus the full pill (~63px) plus their 8px gap stop fitting. Round, not the carry button's bare glyph: this one also has to show its `is-active` state, and a lit background needs a shape to sit in. */ @container goal-aside (max-width: 220px) { .dlg-repeat-trigger-label { display: none; } .dlg-repeat-trigger { justify-content: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; } } /* ── The weekly-goal dropdown (js/daily-long-term-goals/daily_parent_menu.js) ── A plain list of the week's goals, hung off a card's bottom edge. Not scoped to `.dlg-view`: it is appended to so it can overlay the day columns without the strip's `overflow: auto` clipping it, which puts it outside the view root. `position: fixed` for the same reason the placement is measured in JS — an absolutely-positioned menu inside a scrolling column would ride the column, and a menu that pushed the day's remaining cards down would move the very card you are aiming at. */ .dlg-pmenu { position: fixed; z-index: 1200; min-width: 190px; max-width: 320px; max-height: 60vh; overflow-y: auto; padding: 5px; /* The panel is the fallback, not a fixed hex — see `.gb-menu`. */ background: var(--bg-elevated, var(--card)); border: 1px solid var(--border-subtle); /* Squared off on the edge it is nozzled against, rounded on the other three, so the menu reads as the card opening rather than as a separate window that happens to be touching it. `data-placement` is stamped by `place()`. */ border-radius: 0 0 9px 9px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); } /* A 40%-black drop under a white panel reads as dirt, not as height. */ body.theme-light .dlg-pmenu { box-shadow: 0 10px 28px rgba(15, 20, 30, 0.16); } .dlg-pmenu[data-placement='above'] { border-radius: 9px 9px 0 0; } .dlg-pmenu-row { align-items: center; background: none; border: none; border-radius: 6px; color: var(--text-primary); cursor: pointer; display: flex; font-size: 13px; gap: 9px; padding: 7px 9px; text-align: left; width: 100%; } .dlg-pmenu-row:hover { background: rgba(var(--overlay-rgb), 0.12); } /* The goal this card is already under. Marked, not hidden — re-picking it is a harmless no-op, and removing it would make the list a different length every time you opened it. */ .dlg-pmenu-row.is-current { background: rgba(var(--overlay-rgb), 0.08); font-weight: 600; } /* Filtered out by a typed `#tag`. The rule has to be here and has to be explicit: `[hidden]`'s own display:none is a UA rule and the row's `display: flex` above beats it on specificity, so without this a "hidden" row is fully visible. */ .dlg-pmenu-row[hidden] { display: none; } /* The row Enter would take — set by the arrow keys, or by a tag that narrowed the list to a first match. Stronger than :hover, because the pointer is nowhere near it: this is the only thing on screen saying which goal is about to be chosen, and it has to be readable at a glance from the caret two lines below. The bar is what distinguishes it from `.is-current` (a fact about the goal) — this is a fact about the keyboard. */ .dlg-pmenu-row.is-highlighted { background: rgba(var(--overlay-rgb), 0.2); box-shadow: inset 2px 0 0 var(--accent, var(--text-primary)); } /* Typed a tag that matches nothing. Said in the list rather than by an empty box: a menu narrowed to a sliver of border reads as a bug, and the answer ("that isn't one of your weekly goals") is worth one line. Not a button — there is nothing to press, and a row 0 above it already offers the only action there is on the surfaces that can mint a parent. */ .dlg-pmenu-none { color: var(--text-secondary, var(--text-tertiary)); font-size: 12px; padding: 7px 9px; } /* The row's digit shortcut. Fixed width so the dots and names line up whether or not a row has one (past the ninth there is no digit left), and quiet — it is a hint about the keyboard, not part of the goal's name. */ .dlg-pmenu-num { color: var(--text-tertiary, var(--text-secondary)); flex: 0 0 auto; font-size: 10px; font-variant-numeric: tabular-nums; opacity: 0.7; text-align: right; width: 8px; } .dlg-pmenu-dot { background: var(--dlg-pmenu-dot-color, var(--text-tertiary, #888)); border-radius: 3px; flex: 0 0 auto; height: 11px; width: 11px; } /* Row 0's mark, in the slot a goal's colour dot occupies. The goal does not exist yet, so it has no colour to show: the dot's OUTLINE with a `+` in it. Same footprint, so the names stay in one column; visibly the odd one out, because it is the only row that makes something rather than picking it. */ .dlg-pmenu-dot--new { background: none; border: 1px dashed currentColor; color: var(--text-secondary, var(--text-tertiary)); display: grid; font-size: 9px; font-weight: 700; line-height: 1; place-items: center; } .dlg-pmenu-lead:hover .dlg-pmenu-dot--new { color: var(--text-primary); } .dlg-pmenu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── The empty week ────────────────────────────────────────────────── One row, two lines: what is missing, and the trip that fixes it. It stacks (the goal rows are a single line each) and it does NOT ellipsise — the whole sentence is the affordance, and a truncated one would read as a broken goal name. Wider min-width than a goal row needs, so the invitation is not the narrowest thing on screen. */ .dlg-pmenu[data-empty='true'] { min-width: 230px; } .dlg-pmenu-row.dlg-pmenu-empty { align-items: flex-start; flex-direction: column; gap: 3px; padding: 9px; white-space: normal; } .dlg-pmenu-empty-title { font-weight: 600; } /* The link half. Underlined rather than coloured: the menu has no accent of its own and every colour in it belongs to a weekly goal. */ .dlg-pmenu-empty-hint { color: var(--text-secondary, var(--text-tertiary)); font-size: 12px; text-decoration: underline; } .dlg-pmenu-row.dlg-pmenu-empty:hover .dlg-pmenu-empty-hint { color: var(--text-primary); } /* ── The goal's own text ───────────────────────────────────────────── It is a `