/* ═══════════════════════════════════════════════════════════════════════════ issue-file.css — the stage /i/ opens on ──────────────────────────────────────────────────────────────────────────── THE FILE, NOT A VIEW OF IT. /p/ opens a file: an overlay covers the homepage, the hero and the carousels stop being the thing on screen, and what fills the stage is one person's record. /i/ resolved its key correctly and then landed the reader on the homepage anyway — hero first, Door 1's four-way chooser next, the ledger somewhere below the fold. This stylesheet is the other half of fixing that: the panel the issue file mounts in. It is deliberately the person file's family, not a new species: · a fixed overlay at z-index 50, and inserted into the document immediately BEFORE #modal-overlay. Both numbers matter and neither alone is enough. The site's own top nav is `fixed z-50`, so a panel at 49 would have the homepage's header floating over a file reached by citation — the page showing through the thing meant to replace it. And the person modal is also z-50, decided between equals by document order: this panel is built at runtime and therefore lands last in if simply appended, which would put a file ABOVE the person file opened out of one of its own rows. Inserting before that overlay restores the order the reader needs — nav < issue file < person — with one rule and no !important on either; · a near-opaque backdrop rather than a translucent one. A file reached by citation is a destination, and hero cards reading through it would be the exact confusion this pass exists to end; · one sticky chrome bar carrying identity — surface, address, issue, family — and one scrolling body carrying the ledger; · nothing in here styles the ledger itself. Every .d1-* rule it needs is door1-workspace.css's, unchanged and already loaded, because the body of this panel is byte-for-byte the string the desk paints. A rule in here that restyled a census would be the second surface this pass refuses to build. THE IDENTITY BLOCK WEARS THE FAMILY'S COLOUR, AND OWNS NO COLOUR `.pdxif-bar` is the block the module paints `data-ic` and the four --pdx-ic* custom properties onto, through PDXIssueColors.skin() — the same contract Door 1's child chips carry, so a reader who tapped a green chip arrives at a green file. Three things spend the properties: a 4px rail down the left of the block, the title's ink, and the crumb's arrow and child half (the same ink/rule split .d1-led-crumb[data-ic] already uses under the census). NO HEX IS AUTHORED IN THIS FILE. Not as a value and not as a var() fallback. Every #rrggbb the bar renders arrived through --pdx-ic*, which means it came out of issue-colors.js's palette, which means the file and the chip cannot be two different greens. The chrome this bar has always had is still here as the fallback and is written in rgb()/rgba() like the rest of the panel — a grey scaffold in this stylesheet's own notation, so `#` in this file would be a palette colour someone re-typed by hand. THE FALLBACK IS THE ABSENCE OF THE ATTRIBUTE. skin() emits nothing at all for a key that lands on no Core National Issue, so every rule below is written `[data-ic]`-first: no attribute, no rail, no themed ink, and the bar is exactly the bar it was before this pass. There is no "unthemed" hue and nothing here goes grey to signal one. ═══════════════════════════════════════════════════════════════════════════ */ #pdx-issue-file { position: fixed; inset: 0; /* See the header: 50 clears the site's own fixed z-50 nav, and DOM order (the module inserts this before #modal-overlay) keeps the person file above it. */ z-index: 50; display: flex; align-items: center; justify-content: center; padding: 0; /* Near-opaque on purpose — see the header. The blur is what is left of the "there is a page under here" cue. */ background: rgba(4, 7, 16, 0.96); backdrop-filter: blur(10px); overscroll-behavior: contain; } /* Two spellings of closed, because [hidden] loses to a display rule and the module sets both. */ #pdx-issue-file[hidden] { display: none !important; } @media (min-width: 640px) { #pdx-issue-file { padding: 1.5rem; } } /* ── The panel ────────────────────────────────────────────────────────────── Full-bleed on a phone (a file is the whole screen there, as the person modal already decided) and a sheet with edges above it. */ .pdxif-panel { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: linear-gradient(135deg, rgba(26, 58, 107, 0.22) 0%, rgba(8, 12, 24, 0.96) 46%, rgba(192, 21, 42, 0.1) 100%), rgb(8, 12, 24); border: 0; overflow: hidden; } @media (min-width: 640px) { .pdxif-panel { width: min(56rem, 100%); height: auto; max-height: 92vh; border-radius: 1.25rem; border: 1px solid rgba(96, 165, 250, 0.22); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05); } } /* The same tricolour hairline the desk carries, so a reader who has seen the ledger in Door 1 recognises the surface it moved to. */ .pdxif-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, rgb(239, 68, 68) 20%, rgb(255, 255, 255) 50%, rgb(59, 130, 246) 80%, transparent); opacity: 0.55; pointer-events: none; z-index: 2; } /* ── The chrome ───────────────────────────────────────────────────────────── Identity and one way out. It carries no count, no band, no share and no verdict: the census is the first thing in the body, and chrome that printed a figure would outrank the record it is labelling. */ .pdxif-top { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; padding: 1rem 1.1rem 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(6, 10, 20, 0.82); backdrop-filter: blur(8px); } .pdxif-id { min-width: 0; } /* ── The identity block, and the family rail ───────────────────────────────── Unthemed it is a plain wrapper and changes nothing: the kick, the title and the crumb sit where they always sat. Given a family colour by the module it grows the rail and the room for it. */ .pdxif-bar { min-width: 0; } .pdxif-bar[data-ic] { position: relative; padding-left: 0.7rem; } /* The rail. 4px, the block's full height, in the family's own colour — the one piece of this bar that is a colour and nothing else, which is why it is the piece that can carry the family without saying anything about the record. */ .pdxif-bar[data-ic]::before { content: ""; position: absolute; left: 0; top: 0.1rem; bottom: 0.1rem; width: 4px; border-radius: 2px; background: var(--pdx-ic); pointer-events: none; } /* "Issue file · /i/lands_preserve" — the person file's kicker, in its own words. Quietest thing in the bar, for the reason person-file.css gives: it answers a question the reader only asks when lost. */ .pdxif-kick { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; margin: 0 0 0.15rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.1; } .pdxif-kick-what { color: rgb(127, 146, 180); flex: none; } .pdxif-kick-what::after { content: "·"; margin-left: 0.4rem; opacity: 0.55; } /* The citable address, lower-case because it is a URL and a URL you cannot retype is not a citation. Underlined on hover only. */ .pdxif-kick-addr { color: rgb(159, 180, 212); text-transform: none; letter-spacing: 0.02em; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; transition: color 0.15s ease; } .pdxif-kick-addr:hover, .pdxif-kick-addr:focus-visible { color: rgb(219, 230, 247); text-decoration: underline; text-underline-offset: 0.15em; } /* The issue's own name — the letterhead of this file. */ .pdxif-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; margin: 0; font-family: 'Oswald', 'Barlow Condensed', sans-serif; font-size: 1.12rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; color: rgb(255, 255, 255); } /* The letterhead in the family's ink. Ink rather than the raw colour because this is the largest text on the bar and issue-colors.js lightens each hue until it clears the text-contrast floor on this navy — the raw --pdx-ic is for rules and fills. */ .pdxif-bar[data-ic] .pdxif-title { color: var(--pdx-ic-ink); } .pdxif-name { min-width: 0; } /* Core → child. The CORE half is a door and the child half is not, which is the only shape that is true here: the child IS this file, so there is nowhere for it to go, and the core is a family, which has no file of its own — tapping it closes this panel and opens the desk on that shelf. The ledger below prints its own crumb too; that one is the body's and this module does not touch it. */ .pdxif-crumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; margin: 0.28rem 0 0; font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; } /* A button, dressed as the caption it replaced — no chrome of its own, the crumb's own type inherited whole, and the underline only on the hover and the focus, so the line reads as a breadcrumb rather than as a pair of buttons. */ .pdxif-core { appearance: none; -webkit-appearance: none; padding: 0; border: 0; min-height: unset; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: rgb(147, 197, 253); cursor: pointer; text-decoration: none; transition: color 0.15s ease; } .pdxif-core:hover { color: rgb(191, 219, 254); text-decoration: underline; } .pdxif-core:focus-visible { outline: 2px solid rgb(147, 197, 253); outline-offset: 2px; border-radius: 0.2rem; } .pdxif-arrow { color: rgb(107, 127, 156); } .pdxif-child { font-weight: 800; color: rgb(232, 238, 251); } /* The crumb's hue, split exactly as the live crumb under the census splits it: the child half takes the ink, the separator takes the colour, and the FAMILY half keeps its caption blue. The core label is the one word on this bar that names something other than this file, and giving it the child's colour would make one hue mean both. */ .pdxif-bar[data-ic] .pdxif-child { color: var(--pdx-ic-ink); } .pdxif-bar[data-ic] .pdxif-arrow { color: var(--pdx-ic); } .pdxif-x { flex: none; width: 2.5rem; height: 2.5rem; min-height: unset; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: rgb(203, 213, 225); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .pdxif-x:hover { background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); } .pdxif-x:active { background: rgba(255, 255, 255, 0.18); } .pdxif-x svg { width: 1.15rem; height: 1.15rem; } /* ── The body ─────────────────────────────────────────────────────────────── The ledger, and nothing of this module's own inside it. */ .pdxif-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0.35rem 1.1rem 1.6rem; } /* ── The letterhead ───────────────────────────────────────────────────────── What the key means and how much is filed under it, above the record and inside the scroll — the chrome bar above is fixed and identity-only, and the ledger host below holds the desk's builder string and nothing else, so this is the one place new copy on this page can live without touching either. */ .pdxif-head { margin: 0.9rem 0 0; padding: 0.85rem 0.95rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.09); border-left: 4px solid rgba(255, 255, 255, 0.14); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.035); } /* The family's colour on the same two properties the bar uses it for — the rail and a wash — and only where the palette resolved the key. */ .pdxif-head[data-ic] { border-left-color: var(--pdx-ic); background: var(--pdx-ic-wash); } /* The register's one-line statement of the key. */ .pdxif-chip { margin: 0 0 0.4rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; color: rgb(203, 213, 225); } .pdxif-head[data-ic] .pdxif-chip { color: var(--pdx-ic-ink); } /* The argued boundary, verbatim. Reading size, because it is the sentence the rest of the page is filed against. */ .pdxif-scope { margin: 0; font-size: 0.85rem; line-height: 1.5; color: rgb(226, 232, 240); } /* No scope on file. Italic and quieter, so the blank cannot be mistaken for a definition somebody wrote. */ .pdxif-scope.is-blank { font-style: italic; color: rgb(148, 163, 184); } /* The inventory. Counts only — tabular figures so the numerals line up, and monospace nowhere, because this is a sentence and not a table. */ .pdxif-inv { margin: 0.6rem 0 0; font-size: 0.76rem; line-height: 1.5; font-variant-numeric: tabular-nums; color: rgb(148, 163, 184); } /* The busy gate, in the inventory's own slot: while the roll-call read is out this is what stands where the integers will be, so nothing moves down the page when they arrive and no figure is published early. */ .pdxif-busy { margin: 0.6rem 0 0; font-size: 0.76rem; line-height: 1.5; color: rgb(203, 213, 225); } .pdxif-sofar { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: rgb(148, 163, 184); } /* The clipped read. It sits directly under the inventory it qualifies, and it is the one line on this letterhead that carries any warmth in it — amber ink and a rule down the edge — because it is the only statement here that a reader must carry down the page with them. Everything else up here resolves itself: the busy line becomes integers, the integers become the record. A row cap does not, so it is marked rather than blended in. No fill and no box: this qualifies the figures above it and is not a warning about the issue. */ .pdxif-clip { margin: 0.4rem 0 0; padding-left: 0.5rem; font-size: 0.74rem; line-height: 1.55; color: rgb(226, 213, 178); border-left: 2px solid rgba(252, 211, 77, 0.4); } /* ── HOW THIS ISSUE WAS TESTED ───────────────────────────────────────────── Under the inventory and inside the letterhead's rule, because it is the same kind of statement: counts of what is on file. Ruled off at the top rather than boxed, so it reads as a continuation of the inventory and not as a second panel arguing with it. Tabular figures throughout — these are integers in a column of integers, and a proportional numeral makes them look approximate. */ .pdxif-proc { margin: 0.7rem 0 0; padding: 0.6rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.1); display: grid; gap: 0.2rem; } .pdxif-ph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: rgb(148, 163, 184); } .pdxif-head[data-ic] .pdxif-ph { color: var(--pdx-ic-ink); } /* One label, one value. The label column is fixed so four rows read down as a list rather than as four unrelated sentences. */ .pdxif-prow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; margin: 0; font-size: 0.76rem; line-height: 1.5; font-variant-numeric: tabular-nums; } .pdxif-plb { flex: none; min-width: 4.6rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgb(107, 124, 148); } .pdxif-pv { flex: 1 1 12rem; min-width: 0; color: rgb(203, 213, 225); } /* Down to the cards. A quiet inline control, not a jump button: the two jumps below are about leaving this file, and this one is about a section of it. */ .pdxif-see { appearance: none; -webkit-appearance: none; padding: 0; min-height: unset; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: rgb(147, 197, 253); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; } .pdxif-see:hover { color: rgb(191, 219, 254); } /* A figure that is also a door. Same ink and underline as .pdxif-see, because it does the same job — down to a section of this file — and two controls with one job must not read as two kinds of control. The figure keeps the row's tabular numerals, so the measures row still reads down the column with the three under it. */ .pdxif-pjump { appearance: none; -webkit-appearance: none; padding: 0; min-height: unset; border: 0; background: none; font: inherit; font-variant-numeric: tabular-nums; color: rgb(147, 197, 253); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; } .pdxif-pjump:hover { color: rgb(191, 219, 254); } /* The locked menu sentence, where one applies. It is context for the counts above it and never a verdict, so it gets the record lane's amber ink and no fill, no icon and no rule of its own. */ .pdxif-pmenu { margin: 0.35rem 0 0; font-size: 0.73rem; line-height: 1.55; color: rgb(214, 201, 168); } .pdxif-pmenu b { color: rgb(252, 211, 77); } .pdxif-pmn { color: rgb(148, 163, 184); } /* Why the three measure figures do not add up. Smallest type on the block, because it is a caveat on one line and not a finding. */ .pdxif-pn { margin: 0.35rem 0 0; font-size: 0.7rem; line-height: 1.55; color: rgb(126, 143, 168); } /* The two jumps. Wrap rather than shrink — the hint under each label is the half that says what the control does, and a squeezed one is worse than a second row. */ .pdxif-jumps { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.75rem 0 0; } .pdxif-jump { appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; padding: 0.4rem 0.7rem; min-height: unset; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.65rem; background: rgba(255, 255, 255, 0.05); font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(226, 232, 240); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .pdxif-jump:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } .pdxif-jump:active { background: rgba(255, 255, 255, 0.16); } .pdxif-head[data-ic] .pdxif-jump:hover { border-color: var(--pdx-ic); } /* The hint. Lower-case and unspaced, because it is prose about the control and not a second label on it. */ .pdxif-jump-h { font-family: inherit; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: rgb(148, 163, 184); } /* The desk's own census block leads with a top margin that assumed a pane head above it. Under the letterhead it needs less, not more. */ #pdx-issue-file-ledger > .d1-scope { margin-top: 0.55rem; } @media (max-width: 420px) { .pdxif-top { padding: 0.85rem 0.9rem 0.7rem; } .pdxif-body { padding: 0.35rem 0.9rem 1.4rem; } .pdxif-head { padding: 0.75rem 0.8rem 0.7rem; } .pdxif-jump { flex: 1 1 8rem; } .pdxif-title { font-size: 1rem; } .pdxif-kick { font-size: 0.54rem; gap: 0.3rem; } } @media (prefers-reduced-motion: reduce) { .pdxif-kick-addr, .pdxif-x, .pdxif-core, .pdxif-jump { transition: none; } }