/* ============================================================================ HPAD VISIONS DESK Design principle: "Hue belongs to the workflow. State belongs to form." The six workflow channels (white, purple, green, orange, yellow, red) own colour. Red already means FROZEN. Therefore urgency, escalation and lateness are NEVER expressed with hue -- they are expressed with FORM: overdue -> hairline outline in the text colour + inset ring + bold clock escalated -> dashed border frozen -> diagonal repeating-linear-gradient hatch (~62% opacity) unread -> small brand-Purple signal dot before the title Every state above survives a greyscale conversion. That is the acceptance test and it is also what keeps the board readable for colour-blind artists. Brand Purple (--signal) is the single interactive accent: focus rings, active nav, primary actions, the unread dot. It is the one hue the six workflow channels do not claim, so it is never spent on decoration. ========================================================================= */ /* --------------------------------------------------------------------------- 1. FACES (do not change paths -- preloaded in index.html, offline build) ------------------------------------------------------------------------ */ @font-face { font-family: 'Oxygen Mono'; src: url('./fonts/OxygenMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Kumbh Sans'; src: url('./fonts/KumbhSans-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* --------------------------------------------------------------------------- 2. TOKENS Components are styled through tokens only. The theme blocks below redefine tokens and nothing else, so a [data-theme] toggle can be wired up later without touching a single component rule. ------------------------------------------------------------------------ */ :root { color-scheme: light; /* -- surfaces & ink (LIGHT). --ground IS brand Blue #F4F9FD. --text is a brand-tinted near-black rather than brand Purple itself, because Purple is spent on --signal and body ink must not collide with the focus accent. -- */ --ground: #F4F9FD; /* BRAND Blue, verbatim */ --panel: #FFFFFF; --raise: #FFFFFF; --rule: #E4E2DE; /* warm hairline */ --rule-2: #787570; /* BRAND Grey, verbatim. Borders only: it is 4.33:1 on ground and FAILS AA as text. */ --dim: #6E6B66; /* BRAND Grey darkened ~4% to clear 4.5:1 */ --text: #2A2430; /* -- the single interactive accent. "Blue on Purple" is an approved brand pairing, so a filled control is literally brand-correct. -- */ --signal: #493D51; /* BRAND Purple, verbatim */ --signal-ink: #F4F9FD; /* BRAND Blue, verbatim */ /* -- workflow channels (LIGHT). Names are read by app.js channelColor(). Hue-faithful: every channel still reads as the colour it is named, pulled into the brand's desaturated register. Each sits at its own NATURAL luminance (yellow light, red dark) rather than a forced rank ladder, which buys greyscale separation for free: the worst pair is now 1.20:1 where it used to be 1.019:1 -- i.e. five of the six channels used to be the same grey, and the colour-blind claim below was not actually true. Every value clears 3:1 on --ground. -- */ --ch-white: #928E87; --ch-purple: #5D3D64; --ch-green: #3A5F4C; --ch-orange: #905A3B; --ch-yellow: #8E783A; --ch-red: #662931; /* -- derived, theme-tuned -- */ --wash: 7%; /* channel wash strength across a ticket body. Raised from 5%: the brand channels are lower in chroma, so 5% left the lanes invisible. */ --veil: rgba(42, 36, 48, 0.38); /* modal / drawer scrim */ /* Contact + near + ambient. A single flat 1px at 5% is a border pretending to be depth. Tinted in the brand ink rather than pure black, so the shadow belongs to the palette instead of greying it. Brand Blue #F4F9FD is fixed as --ground, so separation has to come from the panel LIFTING off it, not from darkening the ground. */ /* Elevation is declared ONCE per surface: in light the shadow carries it and --edge is transparent, in dark the shadow barely reads so the hairline carries it instead. A 1px border sitting under a wide soft shadow is the ghost card -- two elevation systems arguing on the same element. */ --edge: transparent; --lift: 0 1px 1px rgba(42, 36, 48, 0.04), 0 2px 6px rgba(42, 36, 48, 0.05), 0 8px 24px -8px rgba(42, 36, 48, 0.08); --lift-2: 0 2px 4px rgba(42, 36, 48, 0.06), 0 16px 48px -12px rgba(42, 36, 48, 0.22); --hatch: color-mix(in srgb, var(--dim) 62%, transparent); /* -- faces -- */ --sans: 'Kumbh Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Oxygen Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* -- type scale (base 15px, ratio ~1.2) -- */ --fs-1: 0.6875rem; /* 11 mono caps: eyebrow, table head, tag, label. Was 10px under Kumbh 650. Every consumer is now Oxygen Mono 400 -- a ~250-unit weight loss -- so one step up restores the optical weight. */ --fs-2: 0.6875rem; /* 11 meta, nav, button */ --fs-3: 0.75rem; /* 12 dense mono, ids */ --fs-4: 0.8125rem; /* 13 secondary prose, notes */ --fs-5: 0.9375rem; /* 15 body (base) */ --fs-6: 1.0625rem; /* 17 card title, lead value */ --fs-7: 1.3125rem; /* 21 h1, section lead */ --fs-8: 1.625rem; /* 26 big-title */ --fs-9: 2rem; /* 32 hero / sign-in wordmark */ /* -- tracking. A monospace glyph already carries ~0.1em of built-in sidebearing (the gap between an I and its advance). Adding another 0.1em on top DOUBLES the apparent letter gap and destroys word shape at 11px -- exactly the size where word-shape recognition matters most. Mono caps want roughly half the tracking Kumbh caps wanted. Wide tracking survives only where letterspacing is the deliberate gesture: mastheads and section rails. */ --track-mono: 0.05em; /* uppercase mono chrome: the default */ --track-mono-lead: 0.12em; /* mastheads, rails -- air is the point */ --track-num: 0.02em; /* mono numerals: tight so digits column up */ /* -- spacing scale (4px grid, 2px half-step) -- */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 40px; --sp-11: 56px; /* -- radii: tight, instrument-like. No pill shapes. -- */ --r-1: 2px; --r-2: 4px; --r-3: 6px; /* -- motion -- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --fast: 120ms; --slow: 260ms; /* -- legacy aliases: app.js writes these inline. Do not remove. -- */ --bg: var(--ground); --surface: var(--panel); --paper: var(--raise); --ink: var(--text); --ink-soft: var(--dim); --muted: var(--dim); --line: var(--rule); --line-strong: var(--rule-2); --border: var(--rule); --purple: var(--ch-purple); /* --maroon / --danger / --err used to alias --ch-red, which is ALSO the frozen channel -- so a config error and a revision-pressure marker both rendered in the exact hue that means "this project is frozen". The brand supplies a real Maroon distinct from the red channel; use it, and leave --ch-red meaning frozen and nothing else. */ --maroon: #563D40; /* BRAND Maroon, verbatim */ --danger: var(--maroon); --err: var(--maroon); --warn: var(--ch-orange); --ok: var(--ch-green); } /* Dark token block (1 of 2) -- system preference. :not([data-theme='light']) lets a future toggle opt back out. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; /* "Blue on Purple" is an approved brand pairing, so the dark theme is brand Blue ink on a ground derived from brand Purple. */ --ground: #1E1822; --panel: #282130; --raise: #332B3C; --rule: #3A3142; --rule-2: #4E4458; --dim: #A79FB0; --text: #F4F9FD; /* BRAND Blue, verbatim */ --signal: #B79FC4; /* brand Purple lifted to carry on a dark ground */ --signal-ink: #1E1822; --ch-white: #D0CFCB; --ch-purple: #A060B1; --ch-green: #549474; --ch-orange: #CF8C66; --ch-yellow: #C9B16F; --ch-red: #C63A4C; --maroon: #C98D93; /* brand Maroon lifted for a dark ground */ --wash: 10%; --veil: rgba(12, 9, 15, 0.66); --edge: var(--rule); --lift: 0 1px 2px rgba(0, 0, 0, 0.4); --lift-2: 0 16px 40px rgba(0, 0, 0, 0.55); } } /* Dark token block (2 of 2) -- explicit override. Keep values in sync with the media-query block above; nothing else in this file duplicates. */ :root[data-theme='dark'] { color-scheme: dark; --ground: #1E1822; --panel: #282130; --raise: #332B3C; --rule: #3A3142; --rule-2: #4E4458; --dim: #A79FB0; --text: #F4F9FD; /* BRAND Blue, verbatim */ --signal: #B79FC4; --signal-ink: #1E1822; --ch-white: #D0CFCB; --ch-purple: #A060B1; --ch-green: #549474; --ch-orange: #CF8C66; --ch-yellow: #C9B16F; --ch-red: #C63A4C; --maroon: #C98D93; /* brand Maroon lifted for a dark ground */ --wash: 10%; --veil: rgba(12, 9, 15, 0.66); /* Must match the media-query block: on a dark ground a shadow barely reads, so the hairline carries elevation instead. Missing here, an elevated surface would have no border AND no visible shadow. */ --edge: var(--rule); --lift: 0 1px 2px rgba(0, 0, 0, 0.4); --lift-2: 0 16px 40px rgba(0, 0, 0, 0.55); } /* --------------------------------------------------------------------------- 3. CHANNEL HOOKS A ticket surface reads its hue from --ch. app.js can supply it three ways: data-channel="purple", class="ch-purple", or inline style="--ch:var(--ch-x)". Absent all three the surface falls back to a neutral rule, so nothing breaks. ------------------------------------------------------------------------ */ [data-channel='white'], .ch-white { --ch: var(--ch-white); } [data-channel='purple'], .ch-purple { --ch: var(--ch-purple); } [data-channel='green'], .ch-green { --ch: var(--ch-green); } [data-channel='orange'], .ch-orange { --ch: var(--ch-orange); } [data-channel='yellow'], .ch-yellow { --ch: var(--ch-yellow); } [data-channel='red'], .ch-red { --ch: var(--ch-red); } /* --------------------------------------------------------------------------- 4. RESET & BASE ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } html, body { margin: 0; padding: 0; min-height: 100%; } body { background-color: var(--ground); color: var(--text); font-family: var(--sans); font-size: var(--fs-5); font-weight: 400; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; } /* --------------------------------------------------------------------------- TEXT SELECTION --------------------------------------------------------------------------- Selection has to state BOTH colours or it is only correct by luck. The old rule set a 28% signal tint and pinned the ink to --text, which is right on a normal surface and wrong everywhere the surface is inverted: .tag.solid and .prio.p1 paint --text as their BACKGROUND, so forcing the ink to --text as well rendered selected text black-on-black -- invisible. A filled .btn is --signal-ink on --signal; the same rule dropped near-black ink onto brand Purple, around 2:1. So the pair is stated outright, and it is the brand's own approved pairing: Blue on Purple. Because it overrides background AND colour, it is legible on any surface underneath -- washed ticket cards, hatched frozen rows, channel chips, inputs -- without one rule per component. Both themes work out because the tokens flip together: light is #F4F9FD on #493D51 (~9.3:1), dark is #1E1822 on #B79FC4 (~8.6:1). Comfortably AA either way, which is the whole point -- selected text is text you are trying to READ, usually to copy it. */ ::selection { background: var(--signal); color: var(--signal-ink); } /* The two inverted families, where the rule above would be legible but INVISIBLE -- the highlight would be the same colour as the surface it sits on, so nothing appears to happen when you drag across it. Each swaps to the opposite side of its own pair, which keeps the contrast and restores the highlight. */ /* Surfaces painted --signal: primary buttons, the active nav item, segmented and chip toggles, the sign-in CTA. */ .btn::selection, button.on::selection, .topnav a.active::selection, .mobile-drawer-nav a.active::selection, .seg button.on::selection, .chips button.on::selection, .signin-google::selection { background: var(--signal-ink); color: var(--signal); } /* Surfaces painted --text: solid tags, the P1 badge, maroon and hovered danger buttons. */ .tag.solid::selection, .prio.p1::selection, .btn.maroon::selection, .btn.danger:hover::selection { background: var(--ground); color: var(--text); } /* forced-colors mode supplies its own selection pair and must win: overriding it there would undo the very accommodation the user asked their OS for. */ @media (forced-colors: active) { ::selection, .btn::selection, button.on::selection, .topnav a.active::selection, .mobile-drawer-nav a.active::selection, .seg button.on::selection, .chips button.on::selection, .signin-google::selection, .tag.solid::selection, .prio.p1::selection, .btn.maroon::selection, .btn.danger:hover::selection { background: Highlight; color: HighlightText; } } /* One focus language everywhere. Brand Purple, offset, never removed. */ :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r-1); } :focus:not(:focus-visible) { outline: none; } /* --------------------------------------------------------------------------- 5. TYPOGRAPHY -- the brand pairing: OXYGEN CAPS over kumbh lowercase. Oxygen Mono uppercase is THE APP'S OWN VOICE: labels, nav, actions, enums, column heads. Anything a developer typed into a template literal. Kumbh Sans sentence case is OTHER PEOPLE'S VOICE: anything that came out of the database, a form field, or a person's name. Numerals stay mono and are NEVER uppercased -- they have no case. OXYGEN MONO HAS EXACTLY ONE WEIGHT (400). Setting font-weight above 400 on a mono element does not embolden it -- the browser fakes it by smearing the glyph horizontally, which on a uniform-advance face at 11px is muddy and unpredictably wider. Never do it. Where weight used to carry state, the state is now carried by border width or style, which also survives forced-colors mode where box-shadow does not. ------------------------------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--sans); color: var(--text); text-wrap: balance; margin: 0; } h1 { font-size: var(--fs-8); font-weight: 700; letter-spacing: -0.02em; /* larger type needs tighter optical tracking */ line-height: 1.15; margin-bottom: var(--sp-2); } h2 { font-size: var(--fs-6); font-weight: 650; letter-spacing: -0.006em; line-height: 1.3; margin-bottom: var(--sp-5); } /* h3 is a label, not a headline: section rails, kanban column heads. */ h3, .h { font-family: var(--mono); font-size: var(--fs-1); /* Explicit 400, NOT a deleted declaration: h3 is bold in the UA stylesheet, so removing font-weight here leaves browser-default bold on a font that has no bold, i.e. synthetic bold. Same reason for .table th and .wordmark b below. */ font-weight: 400; letter-spacing: var(--track-mono-lead); line-height: 1.4; text-transform: uppercase; color: var(--dim); margin-bottom: var(--sp-4); } .h { display: block; } /* A section rail with a trailing count. Was an inline style block in app.js that reimplemented .h by hand. */ .rail-head { display: flex; align-items: baseline; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-5); } h4 { font-size: var(--fs-4); font-weight: 650; margin-bottom: var(--sp-3); } p { margin: 0 0 var(--sp-5); text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--signal); text-underline-offset: 2px; } a:hover { color: var(--signal); } code { font-family: var(--mono); font-size: 0.92em; background-color: var(--raise); border: 1px solid var(--rule); border-radius: var(--r-1); padding: 0 var(--sp-2); } button, input, textarea, select { font: inherit; color: inherit; } /* Counted things. Applied by app.js to ids, points, hours, totals. */ .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: var(--track-num); } .small { font-size: var(--fs-4); } .big { font-size: var(--fs-6); } /* Single-letter utilities emitted by app.js. Each has a component-scoped refinement further down (.type-card .t, .meta-grid .k, .path-row .p); these are the standalone fallbacks so they never render unstyled. */ .t { font-weight: 650; letter-spacing: 0.02em; } .m { color: var(--dim); font-size: var(--fs-2); } .p { color: var(--dim); font-family: var(--mono); font-size: var(--fs-3); overflow-wrap: anywhere; } /* Generic active toggle. .seg button.on and .chips button.on outrank this. */ button.on { background-color: var(--signal); border-color: var(--signal); color: var(--signal-ink); } .note, .hint { color: var(--dim); font-size: var(--fs-4); line-height: 1.5; text-wrap: pretty; } .hint { margin-top: var(--sp-2); } .note { margin: 0; } /* --------------------------------------------------------------------------- 6. TOP BAR / NAV (mobile first: drawer trigger shows, nav hides) ------------------------------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 56px; padding: var(--sp-4) var(--sp-6); background-color: var(--panel); border-bottom: 1px solid var(--rule); } /* The lockup: primary mark + sub-product name. "HPAD" is no longer set in type -- the mark carries it -- so the old weight/colour split between the two words is gone and the separation is now mark-vs-text, which survives greyscale and forced-colors on its own. */ .wordmark { display: inline-flex; align-items: center; gap: 0.9ch; font-family: var(--mono); font-size: var(--fs-4); letter-spacing: var(--track-mono-lead); text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--text); } .wordmark b { font-weight: 400; /* is UA-bold; mono has no bold */ letter-spacing: var(--track-mono-lead); color: var(--dim); } /* The mark is fixed raster artwork from Logos/, so the light/dark colourway is a real second file rather than a tint. handles the system preference; the two rules below cover an explicit data-theme toggle, which a media query cannot see. */ .wordmark .mark { display: block; flex: none; } .wordmark .mark img { display: block; height: 1.7em; width: auto; } :root[data-theme='dark'] .wordmark .mark img { content: url('./logo/hpad-white.png'); } :root[data-theme='light'] .wordmark .mark img { content: url('./logo/hpad-purple.png'); } /* Gate screens (sync, auth, sign-in) render the wordmark oversized. This was an inline font-size:20px in app.js that overflowed a 320px phone. */ .wordmark.lg { font-size: var(--fs-6); } .topnav { display: none; flex: 1; flex-wrap: wrap; gap: var(--sp-1); } .topnav a { border-radius: var(--r-2); color: var(--dim); font-family: var(--mono); font-size: var(--fs-2); letter-spacing: var(--track-mono); padding: var(--sp-3) var(--sp-5); text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); } .topnav a:hover { background-color: var(--ground); color: var(--text); } .topnav a.active { background-color: var(--signal); color: var(--signal-ink); } .whoami { display: none; align-items: center; flex-wrap: wrap; gap: var(--sp-4); justify-content: flex-end; color: var(--dim); font-size: var(--fs-4); white-space: nowrap; } .mobile-menu-trigger { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--rule); border-radius: var(--r-2); color: var(--text); cursor: pointer; font-size: var(--fs-6); line-height: 1; height: 38px; width: 38px; padding: 0; } .mobile-menu-trigger:hover { background-color: var(--ground); } /* --------------------------------------------------------------------------- 7. MOBILE DRAWER ------------------------------------------------------------------------ */ .mobile-drawer { position: fixed; inset: 0 0 0 auto; z-index: 100; display: flex; flex-direction: column; width: 300px; max-width: 86vw; background-color: var(--panel); border-left: 1px solid var(--rule); box-shadow: var(--lift-2); transform: translateX(100%); transition: transform var(--slow) var(--ease); } .mobile-drawer.active { transform: translateX(0); } .mobile-drawer-backdrop { position: fixed; inset: 0; z-index: 99; background-color: var(--veil); opacity: 0; pointer-events: none; transition: opacity var(--slow) var(--ease); } .mobile-drawer-backdrop.active { opacity: 1; pointer-events: auto; } .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--rule); } .close-btn { background: transparent; border: 1px solid transparent; border-radius: var(--r-2); color: var(--dim); cursor: pointer; font-size: var(--fs-7); line-height: 1; height: 34px; width: 34px; padding: 0; } .close-btn:hover { background-color: var(--ground); color: var(--text); } .mobile-drawer-nav { display: flex; flex: 1; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6) var(--sp-5); overflow-y: auto; } .mobile-drawer-nav a { border-radius: var(--r-2); color: var(--text); font-family: var(--mono); /* fs-4 -> fs-2: 13px mono caps is heavy in a 300px drawer. */ font-size: var(--fs-2); letter-spacing: var(--track-mono); padding: var(--sp-5) var(--sp-6); text-decoration: none; text-transform: uppercase; } .mobile-drawer-nav a:hover:not(.active) { background-color: var(--ground); } .mobile-drawer-nav a.active { background-color: var(--signal); color: var(--signal-ink); } .mobile-drawer-foot { padding: var(--sp-7); border-top: 1px solid var(--rule); background-color: var(--ground); color: var(--dim); font-size: var(--fs-4); } /* --------------------------------------------------------------------------- 8. PAGE FRAME ------------------------------------------------------------------------ */ /* HPAD run 27" monitors as a floor. A fixed 1280px cap left 640px of dead margin on each side of every screen; the board was worse at 480px a side and the queue worst of all at 850px, two thirds of the glass. These are a floor plus a gutter now rather than a ceiling: fill the viewport, keep a consistent margin, and stop growing once prose lines get uncomfortably long. */ .page { margin: 0 auto; /* Explicit, not implied. Two things here would otherwise starve it: `margin: 0 auto` stops a flex item stretching to its cross size, and the container queries below mean the page cannot size from its own contents either. In block flow this is a no-op; inside the board's flex column it is the difference between a full-width board and one collapsed to 216px. */ width: 100%; max-width: min(1760px, calc(100vw - 96px)); padding: var(--sp-9) var(--sp-6) var(--sp-11); } /* Was an inline style="max-width:940px" on the detail page, which no rule could override -- including the panel's. */ .page.detail { max-width: 940px; } /* --------------------------------------------------------------------------- TICKET POPUP A ticket opens as a card OVER the list it came from. It used to open BESIDE the list, as a sticky right-hand column. That read well on a wide monitor and had one flaw that outweighed the rest: the column begins at the top of the page, so opening a ticket from a card you had scrolled down to put the ticket's contents above the viewport, and you had to scroll back up to read the thing you had just clicked. On a full board that is most of a screen height, every single time. Fixed and centred, it is always where you are looking, at any scroll position — and it uses the same backdrop convention as every other dialog here (dark area to dismiss, Close to dismiss, Escape to dismiss) rather than being a third kind of surface with its own rules. What this trades away, deliberately: the list no longer narrows to sit beside the ticket, so you cannot click straight from one card to the next with the ticket still open. Close then click is one extra press, against not having to hunt for what you opened every time. ------------------------------------------------------------------------ */ /* Same scrim, blur and scroll containment as .modal-backdrop, and deliberately BELOW it. A ticket is a surface you act from, so every dialog it raises -- Hold, Edit, Delete, Finish, Deliver, Revision -- has to stack on top of it. This sat at 55 against .modal-backdrop's 50 and swallowed all six: the modal rendered correctly and was then covered by the panel, so the buttons read as completely dead. Keep this number under .modal-backdrop's. */ .ticket-overlay { position: fixed; inset: 0; z-index: 45; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-8) var(--sp-5) var(--sp-10); background-color: var(--veil); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* The CARD is the scroll container, not the overlay. Letting the overlay scroll instead looks identical until the ticket is taller than the screen: then the whole card slides up and takes its own Close button with it, and no `position: sticky` inside can help, because sticky resolves against the nearest SCROLLING ancestor — which in that arrangement is the overlay and not the card. Capping the card's height and scrolling its body is what lets .ticket-head stick, keeping the name and the way out on screen at every viewport size. */ .ticket-panel { display: flex; flex-direction: column; width: 100%; /* Wider than .modal's 640px: this is a whole record — meta grid, heaviness lines, hour logs, activity — not a single question. */ max-width: 900px; /* Matches the overlay's own vertical padding (sp-8 top + sp-10 bottom). */ max-height: calc(100dvh - var(--sp-8) - var(--sp-10)); background-color: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--r-3); box-shadow: var(--lift-2); overflow: hidden; /* keeps the head inside the rounded corner */ } /* The record scrolls; the card's own header sticks to the top of it. `.panel-head` used to be a separate strip outside this scroller, which is how Close stayed put -- and why the card's coloured top edge started below a band of chrome. The header moved INTO the card, so it has to sticky itself or a long ticket scrolls its own way out. Sticky resolves against the nearest scrolling ancestor, which is this element, so `top: 0` is measured from here. Nothing between them may set `overflow`, or sticky silently stops working. */ .ticket-panel > .page { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; } .ticket-head-name { min-width: 0; } /* so a long title ellipsises rather than shoving the buttons out */ .ticket-head-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; /* Never squeezed: these are the ways out of, and into, this record. */ flex-wrap: wrap; justify-content: flex-end; } /* Inside the panel the header is sticky and bleeds to the scroller's edges, so the record passes UNDER it rather than beside it. The negative top margin cancels the card's own top padding, which is what puts the header directly against the coloured edge -- the card now starts at the colour. */ .ticket-panel .ticket-head { position: sticky; top: 0; z-index: 3; background-color: var(--panel); margin: calc(var(--sp-8) * -1) calc(var(--sp-6) * -1) var(--sp-5); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--rule); } /* The id sat above the title with its own spacing when it was the panel strip's job. In the header it is a caption on the line above the name. */ .ticket-head .tid { margin-bottom: var(--sp-1); } .ticket-head .ticket-title { margin: 0; } /* The detail screen is reused verbatim, so its page framing is undone here rather than forked into a second copy that would drift. */ .ticket-panel .page, .ticket-panel .page.detail { max-width: none; margin: 0; padding: var(--sp-6); } /* Inside the panel the card IS the panel -- a second border and shadow around it just draws a box within a box. */ .ticket-panel > .page > .card { border: 0; box-shadow: none; padding-left: 0; padding-right: 0; } /* Nothing here narrows, reflows or locks the page behind the popup. No background scroll lock on purpose: `overflow: hidden` on the document clamps the scroll offset, which would throw away the reading position on the board underneath — the exact complaint this change exists to fix. The overlay is itself scrollable and carries `overscroll-behavior: contain`, which is how .modal-backdrop has always handled it, and it is enough. The board's column count no longer needs correcting either; it was only ever reduced because the old side panel took 470px out of the width. */ /* On a phone the card is the screen: full width, and tall enough that the rounded corners stay visible so it still reads as a card you can dismiss rather than a page you have navigated to. */ @media (max-width: 700px) { .ticket-overlay { padding: var(--sp-5) var(--sp-4) var(--sp-8); } .ticket-panel { max-width: none; max-height: calc(100dvh - var(--sp-5) - var(--sp-8)); } } /* Which card you are reading, marked on the list itself. Without it, a panel open beside twelve near-identical cards gives no clue which one it is. */ /* Offset outward so it reads as a separate ring from .overdue's own inset outline -- an overdue card that is also the open one has to show both. */ .tcard.open { outline: 2px solid var(--signal); outline-offset: 2px; } /* Keyboard focus wears the same ring as the open card: brand Purple is the one interactive accent, and a card you have focused is one keypress from being the card you have opened. Only :focus-visible, so a mouse click does not leave a ring behind on the board. */ .tcard:focus-visible, div.card[data-action='open-ticket']:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* The board used to drop to three columns while a ticket was open, then win one back at 1700px. Both rules are gone with the side panel: an overlay takes no width from the list, so the board keeps all six columns whatever is open. */ .page.narrow { max-width: min(900px, calc(100vw - 96px)); } /* A grid of columns, not a document. It has no reading measure to protect, so it takes the width it is given. */ .page.wide { max-width: calc(100vw - 72px); } /* Stats: a table that reads better at a bounded width. */ .page.mid { max-width: min(1040px, calc(100vw - 96px)); } /* THE TITLE BLOCK. HPAD are architects, and the artifact that defines their working day is the drawing sheet -- which identifies itself with a hairline rule terminated by ticks. So every screen's head is one. It is the single signature in this stylesheet: it appears once per screen, never on a card, never on a panel, never twice. Everything around it is deliberately quiet. The brand guidelines pin four colours and two typefaces, so there is no new hue and no new face anywhere in this treatment -- the rule is brand Grey, which is the one role the guidelines give that colour (borders only, it fails AA as text). */ .page-head { position: relative; container-type: inline-size; /* so the right tick can be placed in cqw */ display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); margin-bottom: var(--sp-9); padding-bottom: var(--sp-6); } /* The rule. */ .page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: var(--rule-2); opacity: 0.55; } /* The terminal ticks. One element, two ticks: the right-hand one is placed by a box-shadow offset in container query units so it lands on the far edge at any page width, with no extra markup. 6px, the convention on a dimension line. */ .page-head::before { content: ''; position: absolute; left: 0; bottom: 0; width: 1px; height: 6px; background-color: var(--rule-2); opacity: 0.55; box-shadow: 100cqw 0 0 0 var(--rule-2); } /* Where cqw is unsupported, drop the right tick rather than drawing it in the wrong place -- a misplaced tick is worse than one tick. */ @supports not (width: 1cqw) { .page-head::before { box-shadow: none; } } .page-head > div { min-width: 0; } /* Stays SANS. Setting it in wide-tracked mono caps looked more like a real title block and read considerably worse -- a twelve-word sentence in uppercase at 0.12em loses word shape exactly where the reader needs it. The type rule is also narrower than it first appears: mono caps are for labels, nav, actions, enums and column heads, and a subtitle is prose. */ .page-head p { color: var(--dim); font-size: var(--fs-4); line-height: 1.6; margin: var(--sp-2) 0 0; max-width: 58ch; /* short, so a wrap cannot push the rule off the title */ } .section + .section { margin-top: var(--sp-8); } .status-group + .status-group { margin-top: var(--sp-8); } .status-group > h3 { display: flex; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-5); } .grid-2, .grid-3 { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); } .stack { display: grid; gap: var(--sp-5); } .split { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; } .hidden { display: none !important; } /* --------------------------------------------------------------------------- 9. PANELS background-color (longhand) is deliberate: .frozen layers a background-image hatch on top and a `background` shorthand here would silently erase it. ------------------------------------------------------------------------ */ .card { background-color: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-3); box-shadow: var(--lift); padding: var(--sp-8); } .card + .card { margin-top: var(--sp-6); } .soft-card { background-color: var(--raise); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--sp-6); } .empty { display: flex; align-items: center; color: var(--dim); font-size: var(--fs-4); min-height: 84px; } /* --------------------------------------------------------------------------- 10. BUTTONS ------------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); background-color: var(--signal); border: 1px solid var(--signal); border-radius: var(--r-2); color: var(--signal-ink); cursor: pointer; font-family: var(--mono); font-size: var(--fs-2); letter-spacing: var(--track-mono); line-height: 1; min-height: 38px; padding: var(--sp-4) var(--sp-6); text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); } .btn:hover { background-color: color-mix(in srgb, var(--signal) 84%, var(--text)); border-color: transparent; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled='true'] { cursor: not-allowed; opacity: 0.42; } .btn:disabled:hover { background-color: var(--signal); } .btn.ghost { background-color: transparent; border-color: var(--rule-2); color: var(--text); } .btn.ghost:hover { background-color: var(--ground); border-color: var(--text); } /* Secondary solid. Ink-on-ground, no hue -- reads in greyscale. */ .btn.maroon { background-color: var(--text); border-color: var(--text); color: var(--ground); } .btn.maroon:hover { background-color: color-mix(in srgb, var(--text) 82%, var(--ground)); border-color: transparent; } /* Destructive. Form, not colour: a doubled rule. font-weight:800 is GONE -- .btn is Oxygen Mono now and mono has one weight, so 800 only ever produced synthetic bold. The border carries it instead, which is strictly better: forced-colors mode discards box-shadow entirely but preserves border-width, so this state is now visible in High Contrast where the inset ring alone never was. Padding is pulled 1px to absorb the extra border so the button does not change size. */ .btn.danger { background-color: transparent; border: 2px solid var(--text); box-shadow: inset 0 0 0 1px var(--text); color: var(--text); font-weight: 400; /* pin: outranks the later .danger helper */ padding: calc(var(--sp-4) - 1px) calc(var(--sp-6) - 1px); } .btn.danger.small { padding: calc(var(--sp-2) - 1px) calc(var(--sp-4) - 1px); } .btn.danger:hover { background-color: var(--text); color: var(--ground); box-shadow: none; } .btn.big { font-size: var(--fs-4); min-height: 48px; padding: var(--sp-5) var(--sp-8); } .btn.small { font-size: var(--fs-1); min-height: 30px; padding: var(--sp-2) var(--sp-4); } .btn-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); } .copy-btn { background-color: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-1); color: var(--dim); cursor: pointer; flex: none; font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--track-mono); padding: var(--sp-1) var(--sp-3); text-transform: uppercase; } .copy-btn:hover { border-color: var(--signal); color: var(--signal); } /* --------------------------------------------------------------------------- 11. FORMS ------------------------------------------------------------------------ */ .field { margin-bottom: var(--sp-6); } .field > label { display: block; color: var(--dim); font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--track-mono); margin-bottom: var(--sp-3); text-transform: uppercase; } /* This used to be an allowlist of input[type='...'] selectors, which silently missed every written without a type attribute — an attribute selector matches the attribute, not the IDL default of "text". Seventeen inputs across the app were written that way (title, input path, output path, hold reason, the Zoho client id, the inline table edits), so they got none of this: no width, no padding, no radius, UA inset border, 26px tall against the 42px everything else stands at. Inverting it to an exclusion list fixes those and cannot regress the next one somebody writes. Anything that is NOT a box — the toggles, buttons and hidden fields — is listed out by hand. */ input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='submit']):not([type='button']):not([type='reset']):not([type='image']):not([type='hidden']), textarea, select { width: 100%; min-height: 42px; padding: var(--sp-4) var(--sp-5); background-color: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--r-2); color: var(--text); outline: none; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } input::placeholder, textarea::placeholder { color: var(--dim); opacity: 0.75; } input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--signal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 40%, transparent); outline: none; } input:disabled, textarea:disabled, select:disabled { background-color: var(--raise); color: var(--dim); cursor: not-allowed; } textarea { min-height: 88px; resize: vertical; line-height: 1.5; } /* Numeric / identifier inputs are counted, so they are mono. */ .mono-input { font-family: var(--mono); font-size: var(--fs-4); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); } /* Segmented control */ .seg { display: flex; border: 1px solid var(--rule-2); border-radius: var(--r-2); overflow: hidden; } .seg button { flex: 1; background-color: var(--panel); border: 0; color: var(--dim); cursor: pointer; font-family: var(--mono); font-size: var(--fs-2); letter-spacing: var(--track-mono); padding: var(--sp-5) var(--sp-4); text-transform: uppercase; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); } .seg button + button { border-left: 1px solid var(--rule-2); } .seg button:hover { background-color: var(--ground); color: var(--text); } .seg button.on { background-color: var(--signal); color: var(--signal-ink); } .seg button:focus-visible { outline-offset: -2px; } /* Value chips (hours, quantities) -- counted, so mono. */ .chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .chips button { min-width: 54px; background-color: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--r-2); color: var(--text); cursor: pointer; font-family: var(--mono); font-size: var(--fs-4); font-variant-numeric: tabular-nums; padding: var(--sp-4) var(--sp-5); transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .chips button:hover { border-color: var(--text); } .chips button.on { background-color: var(--signal); border-color: var(--signal); color: var(--signal-ink); } /* Type picker */ .type-cards { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); } .type-card { background-color: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--r-2); cursor: pointer; padding: var(--sp-5) var(--sp-5); text-align: left; transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); } .type-card:hover { border-color: var(--text); } /* "PHOTOS" over "still renders" -- the brand pairing in miniature, and the clearest demonstration of the new system anywhere in the app. */ .type-card .t { font-family: var(--mono); font-size: var(--fs-2); font-weight: 400; /* pin: outranks the standalone .t helper */ letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); } .type-card .m { color: var(--dim); font-size: var(--fs-2); margin-top: var(--sp-1); } .type-card.on { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); background-color: color-mix(in srgb, var(--signal) 6%, var(--panel)); } /* --------------------------------------------------------------------------- 12. TAGS, DOTS, COUNTERS Tag variants are FORM variants. .warn borrows the dashed language of escalation; .danger borrows the doubled rule of overdue. No extra hues. ------------------------------------------------------------------------ */ .tag { display: inline-flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--rule-2); border-radius: var(--r-1); color: var(--dim); font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--track-mono); line-height: 1.4; padding: var(--sp-1) var(--sp-3); text-transform: uppercase; white-space: nowrap; } .tag.solid { background-color: var(--text); border-color: var(--text); color: var(--ground); } .tag.ok { border-color: var(--rule-2); color: var(--text); font-weight: 400; } .tag.warn { border-style: dashed; border-color: var(--text); color: var(--text); font-weight: 400; } /* Doubled rule. font-weight:800 removed -- see .btn.danger for the full reasoning; border-width survives forced-colors, box-shadow does not. Padding absorbs the extra 1px so the chip does not grow. */ .tag.danger { border-color: var(--text); border-width: 2px; box-shadow: inset 0 0 0 1px var(--text); color: var(--text); font-weight: 400; /* pin: outranks the later .danger helper */ padding: calc(var(--sp-1) - 1px) calc(var(--sp-3) - 1px); } /* --- the two escape hatches ------------------------------------------------ .tag is overwhelmingly chrome (channel, status, priority, type, role), so the base is mono caps. But three things land in a .tag that are NOT the app's voice, and shouting them is wrong: .tag.name -> a person's name (assignee) or free text a lead typed (a hold reason). Uppercasing "Priya Subramanian" or a whole sentence is both ugly and, for the sentence, unreadable. .tag.num -> a counted value ("40 pts, 4.0 h"). Numerals have no case. These MUST ship with the matching class additions in app.js. */ .tag.name { font-family: var(--sans); font-size: var(--fs-2); letter-spacing: 0; text-transform: none; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; display: inline-block; } .tag.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: var(--track-num); text-transform: none; } .dot { display: inline-block; flex: none; height: 9px; width: 9px; border-radius: 50%; } /* .b = the white channel; it needs a rule so it does not vanish on paper. */ .dot.b { box-shadow: inset 0 0 0 1px var(--rule-2); } .n { font-family: var(--mono); font-size: var(--fs-3); font-variant-numeric: tabular-nums; color: var(--text); margin-left: auto; } /* Hero count on the Completed page. Retires --fs-9, which was defined and never used, and replaces a hardcoded 28px in app.js. */ .stat-num { font-family: var(--mono); font-size: var(--fs-9); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); line-height: 1.1; color: var(--text); } /* Countdown / clock. Always mono, always tabular. */ .countdown, .when { color: var(--dim); font-family: var(--mono); font-size: var(--fs-3); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); white-space: nowrap; } /* --------------------------------------------------------------------------- 13. TICKET CARD Channel arrives as a top edge rule plus a ~5% wash of the same hue across the body, so a lead scanning the board sees the colour lane before reading a single title. No left accent bar; density over decoration. Selector covers both the current markup (.tcard) and a card element carrying the open-ticket hook (div.card[data-action="open-ticket"]). ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------- A CARD ADAPTS TO ITS CONTAINER, NOT TO THE VIEWPORT The same .tcard renders in a ~250px board lane, a ~380px queue track and a full-width list. Viewport media queries cannot tell those apart -- they are all "desktop" -- so a card in a narrow lane and a card in a wide list were getting identical treatment and one of them was always wrong. The lane, the queue and the list declare themselves containers (below), and the card asks how much room IT has. That is why this needs no breakpoints: the same rules hold on a laptop and on a 27", because neither is the question being asked. ------------------------------------------------------------------------ */ .tcard, div.card[data-action='open-ticket'] { position: relative; display: block; cursor: pointer; /* Fluid, so there is no jump between a narrow lane and a wide one. */ padding: clamp(var(--sp-4), 3.5cqi, var(--sp-6)) clamp(var(--sp-4), 3.5cqi, var(--sp-6)) clamp(var(--sp-3), 3cqi, var(--sp-5)); border: 1px solid var(--rule); /* The channel moved from a top rule to a LEFT spine. Cards stack vertically in a column, so a left edge lines up into one continuous colour rail you can read straight down without looking at any card in particular -- which is the point, because the channel is how the client pays and therefore whose work leads. */ border-left: 4px solid var(--ch, var(--rule-2)); border-radius: var(--r-2); box-shadow: none; background-color: var(--panel); background-color: color-mix(in srgb, var(--ch, var(--rule)) var(--wash), var(--panel)); transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); } .tcard + .tcard, div.card[data-action='open-ticket'] + div.card[data-action='open-ticket'] { margin-top: var(--sp-4); } /* The three places a ticket card lives declare themselves as the thing to measure against. `inline-size` contains width only, so heights, sticky column heads and the lanes' own scrolling are untouched. */ .kcol, .page.queue, .page.narrow, .page:not(.wide) { container: cardhost / inline-size; } /* Roomy: title and the trailing meta line can breathe, and the meta row stops wrapping onto three lines. Reached by a queue track or a wide list, never by a board lane -- which is the point. */ @container cardhost (min-width: 340px) { .tcard .ttl { font-size: var(--fs-6); } .tcard-rest { gap: var(--sp-2) var(--sp-4); } } /* Tight: a board lane on a smaller monitor. Drop the trailing meta line to the essentials rather than letting it wrap three deep and push every card down the lane. Nothing is hidden that is not also on the ticket itself. */ @container cardhost (max-width: 250px) { .tcard .ri:nth-child(n + 4) { display: none; } .tcard-when { font-size: var(--fs-2); } } .tcard:hover, div.card[data-action='open-ticket']:hover { border-bottom-color: var(--rule-2); border-right-color: var(--rule-2); background-color: color-mix(in srgb, var(--ch, var(--rule)) calc(var(--wash) * 2), var(--panel)); } .tid { display: flex; align-items: center; gap: var(--sp-3); color: var(--dim); font-family: var(--mono); font-size: var(--fs-3); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); } /* --------------------------------------------------------------------------- CARD ANCHORS: channel, priority, deadline Three questions a card must answer before it is read: whose client is this (channel, from how they pay), how does the studio rank it (P1-P4), and when is it due. Each owns a fixed position so the eye learns where to look once and never hunts again. Everything else is one quiet trailing line. ------------------------------------------------------------------------ */ .tcard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); } .chan { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); } .chan .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background-color: var(--ch, var(--rule-2)); } /* The white channel would vanish on a white panel, so it alone is outlined. */ .chan .dot.b { box-shadow: inset 0 0 0 1px var(--rule-2); } /* `.chan.none` lived here to dim the words "no channel" on a card. channelBadge returns an empty placeholder span now instead of naming the absence, so there is nothing left to dim. */ /* Rank as WEIGHT, never as a second hue -- the channel already owns colour, and two colour scales side by side is two things shouting. The ladder still reads in greyscale and survives forced-colors, where box-shadow is dropped but border and background are not. */ .prio { flex: none; min-width: 2.4ch; padding: 2px var(--sp-3); border: 1px solid transparent; border-radius: var(--r-1); font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--track-num); text-align: center; color: var(--dim); } .prio.p1 { background-color: var(--text); border-color: var(--text); color: var(--ground); } .prio.p2 { border-color: var(--text); color: var(--text); } .prio.p3 { border-color: var(--rule-2); } .prio.p4 { color: var(--dim); } /* Dashed, because "not ranked yet" is a gap someone has to close, and a gap should not look like a settled state. */ .prio.none { border-style: dashed; border-color: var(--rule-2); } .tcard-when { margin-top: var(--sp-3); font-family: var(--mono); font-size: var(--fs-2); letter-spacing: var(--track-num); color: var(--dim); } .tcard-rest { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--rule); font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--dim); } /* The separator belongs to the item that FOLLOWS it, so a wrap can never end a line on a dangling "·" -- which it did when the dots were their own elements in a flex row. Items are nowrap and joined by : without an explicit break opportunity the whole run became one unbreakable string and shot straight out of the card into the next column. The separator is an ::after INSIDE the nowrap span, so it can only ever travel with the item it follows. As a ::before on the next item it simply moved the problem -- lines then began with a stray "·" instead of ending with one. */ .tcard-rest .ri { white-space: nowrap; } .tcard-rest .ri:not(:last-child)::after { content: '·'; margin: 0 var(--sp-3); opacity: 0.55; } /* The project name. Sans, because it is other people's voice -- it comes out of the Zoho registry, not out of a template literal. It gets its OWN line rather than sharing the id row. Sharing was tried: a kanban column is ~200px, the id eats half of it, and flex then squeezed the id itself until "HP-403-V01" broke across three lines. Neither field had room. On its own line the id stays whole and the name gets the full card width before it has to ellipsise. One line only, ellipsised, with the full string on title -- a project name that wrapped to three lines would out-weigh the ticket title directly below it, and the title is what you are choosing between. */ .tproj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: var(--sp-1); color: var(--dim); font-family: var(--sans); font-size: var(--fs-4); line-height: 1.35; } .ttl { font-family: var(--sans); font-size: var(--fs-5); font-weight: 650; line-height: 1.3; letter-spacing: -0.004em; margin: var(--sp-2) 0 var(--sp-4); text-wrap: pretty; overflow-wrap: anywhere; } .meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); } /* The ticket detail heading. This is a title a USER typed ("Parents toilet photos"), so it stays sans and sentence case -- it is not the app's voice. Was five inline overrides on the h1 in app.js, where the rule was invisible. */ .ticket-title { font-family: var(--sans); font-size: var(--fs-8); font-weight: 650; letter-spacing: -0.014em; line-height: 1.2; text-transform: none; overflow-wrap: anywhere; } /* -- STATE 1: UNREAD ------------------------------------------------------- A small brand-Purple signal dot. The one place the accent touches content. */ span.unread, .unread:not(.card):not(.tcard):not(.now-card) { display: inline-block; flex: none; height: 7px; width: 7px; border-radius: 50%; background-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); } /* On a ticket card the dot now leads the title rather than trailing the id, so it needs the gap the old flex row used to supply. */ .ttl > span.unread { margin-right: var(--sp-4); vertical-align: middle; } /* If unread is ever applied to the card itself, the dot leads the title. */ .tcard.unread > .ttl::before, .card.unread > .ttl::before, .now-card.unread .big-title::before { content: ''; display: inline-block; height: 7px; width: 7px; margin-right: var(--sp-3); vertical-align: 0.15em; border-radius: 50%; background-color: var(--signal); } /* -- STATE 2: OVERDUE ------------------------------------------------------ Hairline outline in the TEXT colour + inset ring + bold clock. Never red. */ .tcard.overdue, .card.overdue, .now-card.overdue, div.card[data-action='open-ticket'].overdue { outline: 1px solid var(--text); outline-offset: 2px; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent); } /* The clock is mono, and mono has one weight -- so the old font-weight:700 here was synthetic bold from the day this file was written, not something this retheme introduced. The border (previously only on a standalone clock) is promoted to the whole overdue group, and tracking does the rest: on a monospace numeral run the digits already sit on a fixed grid, so widening it is instantly visible against the on-time clocks stacked below it in a board column. Reads in greyscale and survives forced-colors. */ .tcard.overdue .countdown, .card.overdue .countdown, .now-card.overdue .countdown, .countdown.overdue, span.overdue, .overdue > .mono { color: var(--text); letter-spacing: 0.08em; border: 1px solid currentColor; border-radius: var(--r-1); padding: 0 var(--sp-2); } /* -- STATE 3: ESCALATED ---------------------------------------------------- Dashed border. The channel rule stays on top, dashed, so the lane still reads while the dash announces the escalation. */ .esc-banner { /* inline-block, not inline-flex: the banner now carries a sentence tail (.detail), and as a flex item that tail could not wrap with the text -- it became its own column and broke the box. */ display: inline-block; margin-bottom: var(--sp-4); padding: var(--sp-1) calc(var(--sp-4) - 1px); /* 2px dash replaces font-weight:800 -- the dash IS the escalation language (see .escalated below), so thickening it reinforces rather than invents. */ border: 2px dashed var(--text); border-radius: var(--r-1); color: var(--text); font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--track-mono-lead); text-transform: uppercase; } /* The detail-page banner carries a sentence and an approver's NAME after the word "Escalated". That tail is content, not chrome -- it must not shout. */ .esc-banner .detail { font-family: var(--sans); font-size: var(--fs-4); letter-spacing: 0; text-transform: none; } .tcard:has(.esc-banner), .card:has(.esc-banner), .now-card:has(.esc-banner), .escalated { border-style: dashed; border-top-width: 3px; } /* -- STATE 4: FROZEN ------------------------------------------------------- Diagonal hatch at ~62% opacity, laid in as a background-image so it works on cards, rows and panels alike without a pseudo-element. */ .frozen { background-image: repeating-linear-gradient( 135deg, transparent 0 6px, var(--hatch) 6px 7px ); background-attachment: local; } .tcard.frozen .ttl, .card.frozen .ttl { color: var(--dim); } .tcard.frozen:hover { background-color: color-mix(in srgb, var(--ch, var(--rule)) var(--wash), var(--panel)); } /* --------------------------------------------------------------------------- 14. BOARD ------------------------------------------------------------------------ */ .board { display: grid; align-items: start; gap: var(--sp-5); /* auto-fit derives the lane count from the room available, so the board reflows continuously instead of stepping at 640/900/1280. min() stops the 240px floor from overflowing a phone narrower than 240px. */ grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); overflow-x: auto; padding-bottom: var(--sp-2); } /* --------------------------------------------------------------------------- BOARD: fills the viewport once, lanes scroll themselves The board used to scroll the PAGE, which meant the column heads -- "New 3", "In Queue 4", the counts an admin is actually reading -- left the screen as soon as you looked into the third lane, and six lanes all grew to the height of the tallest, so a busy New column dragged four empty ones down with it. Now the board owns the space below the bar and each lane scrolls its own contents with its head pinned, so all six counts stay visible at all times. Only where there is vertical room to justify it: a laptop at 800px tall is better off scrolling the page than scrolling six 500px boxes. No magic number for the header. .topbar's min-height says 56px but it MEASURES 60px once its padding and 1px border count -- so a `calc(100dvh - 56px)` would be 4px out and leave the page scrolling by exactly the amount nobody can see. #app is a flex column instead and the board takes whatever is left, so the bar can be any height it likes. ------------------------------------------------------------------------ */ /* Content-derived, not device-derived. Six lanes need 6x200 + five 12px gaps + the 72px page margin = 1332px, so 1340px is the width at which this layout is actually possible; 720px is the height below which six scrolling boxes are worse than scrolling the page once. The old 1500x900 was a guess, and it shut every 1366x768 and 1440x900 laptop in the studio out of a layout their screen could have carried. */ @media (min-width: 1340px) and (min-height: 720px) { #app { display: flex; flex-direction: column; height: 100dvh; } #app > .topbar { flex: 0 0 auto; } #app > .page.wide { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: var(--sp-5); overflow: hidden; } #app > .page.wide > .page-head { flex: 0 0 auto; } #app > .page.wide > .board { flex: 1 1 auto; min-height: 0; /* without this the grid refuses to shrink */ /* `start`, not `stretch`. Stretching made every lane the full height of the board, so a Review column holding one ticket drew a mostly-empty box the size of the screen and four quiet lanes shouted as loudly as the busy one. A lane is now exactly as tall as its work; .kcol's max-height below is what keeps a FULL lane scrolling rather than overflowing. */ align-items: start; overflow: hidden; /* Pinned to six here, unlike the fluid board elsewhere: auto-fit wrapping a second row inside a FIXED height would squash both rows. minmax(0, 1fr) lets the six shrink to fit rather than overflow. */ grid-template-columns: repeat(6, minmax(0, 1fr)); } .page.wide .kcol { display: flex; flex-direction: column; min-height: 0; /* The cap, and the reason `align-items: start` above is safe: a lane grows with its cards until it reaches the bottom of the board, then stops and scrolls itself. Short lanes stay short, long lanes never overflow. */ max-height: 100%; overflow-y: auto; overscroll-behavior: contain; } /* The count is the point of the head, so it stays put while the lane scrolls under it. --raise matches .kcol's own background so cards do not show through behind the sticky row. */ .page.wide .kcol > h3 { position: sticky; top: calc(var(--sp-4) * -1); z-index: 1; flex: 0 0 auto; margin-top: 0; background-color: var(--raise); } /* A lane with one ticket must not stretch that ticket down the screen. */ .page.wide .kcol > .tcard { flex: 0 0 auto; } /* Six scrollbars would be six grey stripes across a board whose whole job is to be scanned. */ .page.wide .kcol { scrollbar-width: thin; } .page.wide .kcol::-webkit-scrollbar { width: 8px; } .page.wide .kcol::-webkit-scrollbar-thumb { background-color: var(--rule-2); border-radius: 4px; } .page.wide .kcol::-webkit-scrollbar-track { background: transparent; } } /* --------------------------------------------------------------------------- MY QUEUE: a work surface, not a column The artist's screen is the one they sit in front of all day, and it was a single 860px column on a 27" monitor -- one big card, then a vertical stack running off the bottom. The scroll was the real cost: "what am I doing after this" is the question the screen exists to answer, and it was below the fold. "Do this now" pins left and stays there; the rest of the queue lays out as capped tracks beside it. The cards are REAL GRID TRACKS -- an earlier pass used inline-block and they sat 8px out of line with each other, because inline-block still answers to the line box's baseline. Grid items are blockified and snapped to their row. ------------------------------------------------------------------------ */ /* 460px now-card + 24px gap + a 300px minimum queue track + 96px page margin = 880px. That is where this layout becomes possible, so that is the number -- not 1500px, which was arbitrary and denied it to every laptop. */ @media (min-width: 900px) { .page.queue { display: grid; /* Track 1 is the now-card. The rest are queue tracks, CAPPED rather than 1fr: a queue card holds a title, a project and one meta line, and at 640px it is a mostly-empty band. auto-fill also means a short queue does not stretch to fill the monitor. */ grid-template-columns: minmax(400px, 460px) repeat(auto-fill, minmax(300px, 380px)); justify-content: start; column-gap: var(--sp-6); row-gap: var(--sp-5); align-content: start; } /* .err / .ok-box used to be listed here too, back when a flash was drawn into the page as a direct child of the grid and needed spanning. Toasts are on document.body now, so those selectors matched nothing. */ .page.queue > .page-head, .page.queue > .card.empty { grid-column: 1 / -1; } /* 60px is .topbar's MEASURED height, not the 56px its min-height claims. */ .page.queue > .now-card { grid-column: 1; grid-row: 2 / span 40; align-self: start; position: sticky; top: calc(60px + var(--sp-6)); margin-bottom: 0; } .page.queue > h3 { grid-column: 2 / -1; align-self: end; margin: 0; } /* No grid-column: auto-placement drops each card into the next free cell. */ .page.queue > .tcard { margin: 0; align-self: start; } } .kcol { min-width: 0; min-height: 120px; padding: var(--sp-4); background-color: var(--raise); border: 1px solid var(--rule); border-radius: var(--r-3); } .kcol > h3 { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: var(--sp-1) var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--rule); } /* No .kcol .tcard background override here on purpose: it would outrank .tcard:hover and silently kill the hover wash inside board columns. */ /* --------------------------------------------------------------------------- 15. NOW CARD + META GRID ------------------------------------------------------------------------ */ .now-card { position: relative; margin-bottom: var(--sp-8); padding: var(--sp-9) var(--sp-8); background-color: var(--panel); background-color: color-mix(in srgb, var(--ch, var(--rule)) var(--wash), var(--panel)); border: 1px solid var(--edge); border-top: 3px solid var(--ch, var(--text)); border-radius: var(--r-3); box-shadow: var(--lift); } .now-label { color: var(--dim); font-family: var(--mono); font-size: var(--fs-1); /* 0.2em stays a literal: a deliberate editorial gesture on a three-word label, not a system value. */ letter-spacing: 0.2em; margin-bottom: var(--sp-4); text-transform: uppercase; } .big-title { font-family: var(--sans); font-size: var(--fs-8); font-weight: 700; letter-spacing: -0.018em; line-height: 1.15; margin: var(--sp-2) 0 var(--sp-5); text-wrap: balance; overflow-wrap: anywhere; } .meta-grid { display: grid; gap: var(--sp-6) var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .meta-grid > div { min-width: 0; } .k { color: var(--dim); font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--track-mono); margin-bottom: var(--sp-1); text-transform: uppercase; } .v { font-family: var(--sans); font-size: var(--fs-4); line-height: 1.45; overflow-wrap: anywhere; } /* --------------------------------------------------------------------------- PROJECT COMBOBOX Replaces a native . That gave no ranking, no two-word matching, and filtered on the option label only in Chrome -- in Firefox it matched the code alone, so "search by name" silently did not exist for half the studio. It also could not explain an empty result, which matters here because the list is a Zoho export and "missing" often means "newer than the export" rather than "you typed it wrong". ------------------------------------------------------------------------ */ .combo { position: relative; } .combo-list { position: absolute; z-index: 30; top: calc(100% + var(--sp-1)); left: 0; right: 0; max-height: 17rem; overflow-y: auto; background-color: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--r-2); box-shadow: var(--lift-2); } .combo-opt { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); cursor: pointer; border-bottom: 1px solid var(--rule); } .combo-opt:last-child { border-bottom: 0; } /* Hover and keyboard share one highlight, so there is never a second, competing "selected" row when the pointer drifts across an arrow-key selection. */ .combo-opt:hover, .combo-opt.on { background-color: color-mix(in srgb, var(--signal) 12%, var(--panel)); } /* The code is the app's own vocabulary -- mono, and it must not shrink, since a half-shown code is useless. The name is the client's words: sans, and it is the part that gives way when the row runs out of room. Spelled out rather than .c/.n: a bare .n already exists in this file as the count pill, carrying margin-left:auto, which silently flung every project name to the far right of its row. Single-letter classes in one global stylesheet do not stay unique. */ .combo-code { flex: none; font-family: var(--mono); font-size: var(--fs-3); letter-spacing: var(--track-num); color: var(--text); } .combo-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: var(--fs-4); color: var(--dim); } /* Sticky, because "ahmedabad" matches 135 projects and that count is the whole reason to keep typing. Pinned to the bottom of the scroller it stays on screen; sitting after the last row it would be the one thing you never scrolled far enough to read. */ .combo-more { position: sticky; bottom: 0; padding: var(--sp-3) var(--sp-5); background-color: var(--ground); border-top: 1px solid var(--rule); color: var(--dim); font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--track-mono); text-transform: uppercase; } .combo-status { margin-top: var(--sp-3); color: var(--dim); font-family: var(--sans); font-size: var(--fs-4); line-height: 1.45; } .combo-status.ok { color: var(--text); font-family: var(--mono); font-size: var(--fs-3); } .combo-status.err-text { color: var(--err); } /* Standalone form of the same idea, for failure ink outside a .combo-status (the Zoho heartbeat's credential line). Brand Maroon, never --ch-red: red is the FROZEN channel, and "the token was rejected" must not read as "this project is frozen". */ .err-text { color: var(--err); } .path-row { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; } /* Paths are long and their meaningful end is the tail, so direction: rtl is what makes text-overflow clip the START and keep the tail visible. But rtl also REORDERS the text, and a backslash is bidi-neutral: it takes the direction of its surroundings. A UNC path begins with two of them, so \\Oxygen\Projects\HP-350 rendered as Oxygen\Projects\HP-350\\ -- the leading slashes jumped to the end. Every HPAD path is a UNC path, and this is a value people copy, so it had to go. The fix keeps rtl on the box (still clips from the start) and isolates the text inside it as ltr, so the glyphs stay in their real order. app.js wraps the path in for exactly this; the pairing is load-bearing, so do not drop one without the other. */ .path-row .p { direction: rtl; text-align: left; color: var(--dim); font-family: var(--mono); font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .path-row .p > bdi { direction: ltr; unicode-bidi: isolate; } /* --------------------------------------------------------------------------- 16. TABLES Wide content scrolls inside its own container. The page body never moves. ------------------------------------------------------------------------ */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; } .table { border-collapse: collapse; font-size: var(--fs-4); min-width: 560px; width: 100%; } .table th { border-bottom: 1px solid var(--rule-2); color: var(--dim); font-family: var(--mono); font-size: var(--fs-1); font-weight: 400; /* th is UA-bold; mono has no bold */ letter-spacing: var(--track-mono); padding: var(--sp-4) var(--sp-5); text-align: left; text-transform: uppercase; white-space: nowrap; } /* Sortable column head. A real