/* ══════════════════════════════════════════════════════════════════════════ THE WIZARD ON A PHONE — the document is the page, the question is a sheet Below 65rem the two-pane wizard stops being two panes. There is one page, and the page is the DOCUMENT: a customer holding a phone is reading the paragraph their last answer changed, not admiring a column layout. The question moves to a bottom sheet they raise when they want to answer and drop when they want to read — three detents, dragged or tapped, remembered. WHY THIS IS ITS OWN FILE. Nothing in here redeclares an existing component: every new selector is `.nt-wz-sheet-*`, and everything else is a scoped override of a rule that lives elsewhere. Propshaft loads the stylesheets alphabetically, so `wizard_sheet.css` lands after `notarium.css` and `wizard.css` and wins ties without a single `!important`. (`.nt-sheet` was already taken by the marketing hero — hence `.nt-wz-sheet`.) WHY A MEDIA QUERY AND NOT A CONTAINER QUERY. The sheet is anchored to the VIEWPORT, and `container-type: inline-size` computes to `contain: layout style inline-size` — which makes the container the containing block for every `position: fixed` descendant. §26b therefore switches the wizard shell's container on only above 65rem, precisely so that `position: fixed` means the viewport down here. 64.99rem is the other side of that line. WHAT IS DELIBERATELY ABSENT: * a backdrop. The document behind the sheet stays scrollable and interactive — it is the page. Nothing here sets `html.nt-mobile-open` (navbar.css §3), which is the mobile NAV's page lock: reusing it would freeze the very thing this design exists to let you read. * a page count. See §4 — the preview reflows down here, so the paginator is switched off and the footer stops claiming a page number it cannot stand behind. ══════════════════════════════════════════════════════════════════════════ */ /* ── the one rule that cannot live inside the breakpoint ───────────────── The handle is markup at every width (moving it between breakpoints would mean re-rendering the sheet's own controls), and above 65rem the sheet wrappers are `display: contents` — so without this the chrome row would become a stray grid item in the desktop two-pane layout. Everything else in this file is inside `@media (max-width: 64.99rem)`. */ .nt-wz-sheet-chrome { display: none; } @media (max-width: 64.99rem) { /* ══════════════════════════════════════════════════════════════════════ 1. THE DETENTS Three heights, declared once, in the customer's units: peek — the handle and the footer. "Trin 5 af 14 · Hvem er dirigent?" and Næste. Enough to keep going without covering the document. compact — the question, its answers, and the document still visible above. The working position. full — a table, a list of people, a refusal. The whole screen. Declared on :root because .nt-app-main — an ANCESTOR of the sheet — needs the peek height for the desk it leaves under the document, and custom properties only travel downwards. ══════════════════════════════════════════════════════════════════════ */ :root { /* Handle row + a compacted actions row, plus whatever the home indicator takes. The 0px fallback is not decoration: an env() the browser does not know invalidates the whole declaration and the sheet would lose its height entirely. */ --nt-wz-peek: calc(6.75rem + env(safe-area-inset-bottom, 0px)); --nt-wz-compact: clamp(18rem, 40dvh, 26rem); /* 88dvh rather than 100: the sliver of document above the sheet is what says "this is still the page, and it is still there". */ --nt-wz-full: 88dvh; } /* ══════════════════════════════════════════════════════════════════════ 2. THE SHEET HEIGHT-DRIVEN, NOT TRANSFORM-DRIVEN, and that is deliberate against the usual advice. The footer ("Næste") sits at the BOTTOM of the panel's content: translating the sheet down pushes it off the screen, and counter-translating it fights `position: sticky`. Height is the one property that keeps the footer glued to the bottom of the viewport at every detent with no second transform. The cost is layout per frame while a finger is down, bounded by `contain: layout paint` over a subtree that holds one panel, with the writes batched in requestAnimationFrame. ══════════════════════════════════════════════════════════════════════ */ .nt-wz-sheet { --nt-wz-pad: var(--nt-space-4); --nt-wz-detent-h: var(--nt-wz-compact); position: fixed; inset-inline: 0; /* --nt-wz-vv-shift is how much of the LAYOUT viewport an on-screen keyboard is standing on, written by the controller. `bottom` is measured against the layout viewport, which the keyboard does not shrink — so without this the sheet is behind the keys the customer is typing on. Lifting it with `bottom` rather than a transform keeps the sheet from becoming a containing block for anything inside it. */ bottom: var(--nt-wz-vv-shift, 0px); /* --nt-z-sticky, NOT --nt-z-overlay: the mobile nav panel and its scrim must cover this, because a menu that opens behind the question is a menu nobody can use. */ z-index: var(--nt-z-sticky); display: flex; flex-direction: column; /* The inline height is what a drag writes, frame by frame; the fallback is whatever detent the sheet has settled on. */ height: var(--nt-wz-sheet-h, var(--nt-wz-detent-h)); /* --nt-wz-vv is visualViewport.height, written by the controller: an on-screen keyboard shrinks the visual viewport without touching the layout viewport, and a sheet sized to 100dvh would run underneath it. */ max-height: var(--nt-wz-vv, 100dvh); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--nt-surface-overlay); border-top: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius-lg) var(--nt-radius-lg) 0 0; box-shadow: var(--nt-shadow-3); contain: layout paint; transition: height var(--nt-duration-slow) var(--nt-ease); } .nt-wz-sheet[data-detent="peek"] { --nt-wz-detent-h: var(--nt-wz-peek); } .nt-wz-sheet[data-detent="compact"] { --nt-wz-detent-h: var(--nt-wz-compact); } .nt-wz-sheet[data-detent="full"] { --nt-wz-detent-h: var(--nt-wz-full); } /* A sheet that eases while a finger is on it lags behind the finger. */ .nt-wz-sheet[data-dragging="true"] { transition: none; } @media (prefers-reduced-motion: reduce) { .nt-wz-sheet { transition: none; } } /* ── the chrome: grabber, title, and the way to the step list ───────── */ .nt-wz-sheet-chrome { display: block; flex: none; padding: 0 var(--nt-wz-pad) var(--nt-space-2); /* The drag is a pointer gesture on this row; without this the browser claims the vertical axis for scrolling and the sheet never moves. */ touch-action: none; cursor: grab; } .nt-wz-sheet[data-dragging="true"] .nt-wz-sheet-chrome { cursor: grabbing; } .nt-wz-sheet-grabber { display: block; width: 2.25rem; height: 4px; margin: 0.5rem auto 0.55rem; border-radius: var(--nt-radius-full); background: var(--nt-border); } /* At peek every pixel is the footer's. */ .nt-wz-sheet[data-detent="peek"] .nt-wz-sheet-grabber { margin-block: 0.35rem 0.35rem; } .nt-wz-sheet-row { display: flex; align-items: center; gap: var(--nt-space-2); min-width: 0; } /* A REAL BUTTON, not a div with a pointer handler: the drag is an enhancement over a control that already works with a tap and with the arrow keys. `aria-expanded` reflects detent !== "peek". */ .nt-wz-sheet-handle { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 0.4rem; margin-inline: -0.45rem; padding: 0.25rem 0.45rem; border: 0; border-radius: var(--nt-radius-sm); background: transparent; box-shadow: none; color: var(--nt-text); font-family: inherit; text-align: left; cursor: pointer; transition: background-color var(--nt-duration) var(--nt-ease), box-shadow var(--nt-duration) var(--nt-ease); } .nt-wz-sheet-handle:focus-visible { outline: none; box-shadow: var(--nt-shadow-focus); } .nt-wz-sheet-count { flex: none; font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); font-variant-numeric: tabular-nums; color: var(--nt-text-tertiary); } /* The separator belongs to the pair, so it disappears with the count on a screen that has no rail to count against. */ .nt-wz-sheet-count:not(:empty)::after { content: "·"; margin-inline-start: 0.4rem; opacity: 0.65; } .nt-wz-sheet-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nt-text-sm); font-weight: 600; } /* THE UPDATE SIGNAL. `.nt-wz-pulse` lives at the top of the paper and is hidden down here (§4) — it would sit above a document the customer has already scrolled past. The same fact arrives on the handle instead, over the `nt:preview:updated` event document_preview_controller dispatches. No second pulse element, no second string. */ .nt-wz-sheet-handle[data-updated="true"] { background: var(--nt-ok-soft); box-shadow: inset 0 0 0 1px var(--nt-ok-border); } .nt-wz-sheet-nav { flex: none; padding: 0.35rem 0.7rem; border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius-full); background: var(--nt-surface); color: var(--nt-text-secondary); font-family: inherit; font-size: var(--nt-text-xs); cursor: pointer; } .nt-wz-sheet-nav:focus-visible { outline: none; box-shadow: var(--nt-shadow-focus); } /* One control, two states: "Alle trin" while the question is showing, "Tilbage til spørgsmålet" while the list is. */ .nt-wz-sheet[data-view="steps"] .nt-wz-sheet-steps, .nt-wz-sheet:not([data-view="steps"]) .nt-wz-sheet-back { display: none; } /* Thumbs, not cursors. */ @media (pointer: coarse) { .nt-wz-sheet-handle { min-height: 2.75rem; align-items: center; } .nt-wz-sheet-nav { min-height: 2.75rem; } } /* ── the scroll body ─────────────────────────────────────────────────── */ .nt-wz-sheet-scroll { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; /* The sheet's scroll must not become the page's when it runs out. */ overscroll-behavior: contain; padding-inline: var(--nt-wz-pad); } /* Nothing to scroll at peek — and a scrollbar over two rows is noise. */ .nt-wz-sheet[data-detent="peek"] .nt-wz-sheet-scroll { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════ 3. WHAT THE PANEL LOOKS LIKE INSIDE A SHEET The panel is ONE DOM node serving both breakpoints — it has to be, or two renderings of the same question would post duplicate field names. So the rendering MODE is CSS keyed on [data-detent] plus the shape hints the server already emits (data-wizard-field-count, data-forces-full, data-option-count, data-label). ══════════════════════════════════════════════════════════════════════ */ /* A card inside a sheet is a box inside a box. The sheet is the surface. */ #wizard-panel .nt-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; } #wizard-panel .nt-card-head { padding: var(--nt-space-4) 0 var(--nt-space-3); border-bottom: 0; } #wizard-panel .nt-card-body { padding: 0 0 var(--nt-space-2); } /* PEEK IS "HIDE EVERYTHING EXCEPT THE FOOTER", expressed once, on the form's own children — rather than a second, JS-driven rendering of a footer that branches six ways on the server (locked + resume link, escalated + jurist CTA, review + nothing, hard stop + held button, autosave chip or not). Because the footer re-renders with the panel, it is correct by construction at every detent. `.nt-stop` and `.nt-handoff` are exempt as belt and braces; the sheet also expands to full the moment either arrives. */ .nt-wz-sheet[data-detent="peek"] #wizard-panel > form > *:not(.nt-wizard-actions):not(.nt-stop):not(.nt-handoff), .nt-wz-sheet[data-detent="peek"] #wizard-progress { display: none; } /* "Gemt" is not what a two-row strip is for. */ .nt-wz-sheet[data-detent="peek"] .nt-autosave { display: none; } /* COMPACT KEEPS THE QUESTION AND DROPS THE COMMENTARY. The help lines and the folded "Hvorfor spørger vi?" are all still one tap away — raising the sheet is the tap. */ .nt-wz-sheet[data-detent="compact"] .nt-choice-help, .nt-wz-sheet[data-detent="compact"] .nt-question-help, .nt-wz-sheet[data-detent="compact"] .nt-wz-why { display: none; } .nt-wz-sheet[data-detent="compact"] .nt-choice { padding: var(--nt-space-3); align-items: center; } /* ── the footer ────────────────────────────────────────────────────── `.nt-wizard-actions` STAYS INSIDE #wizard-panel and becomes the sheet's footer by CSS. It bleeds to the sheet's edges by cancelling the scroll body's own padding. No safe-area padding here: the sheet already carries it, and paying it twice would leave a band of nothing under the button. */ #wizard-panel .nt-wizard-actions { position: sticky; bottom: 0; z-index: 2; margin-top: var(--nt-space-4); margin-inline: calc(-1 * var(--nt-wz-pad)); padding: var(--nt-space-3) var(--nt-wz-pad); /* THE CORNER THE CHAT OWNS (chat.css §"THE CORNER THE CHAT OWNS"). The launcher is a fixed 3.5rem circle at --nt-z-overlay, and this row is now pinned to the bottom of the viewport at EVERY detent — so without the gutter the bubble sits on top of "Næste" and eats the taps, which is the same collision the onboarding plan picker hit and solved this way. The sheet deliberately stays below the launcher in the stack (§2), so reserving the corner is the fix, not raising the sheet over it. */ padding-right: var(--nt-chat-gutter); background: var(--nt-surface-overlay); border-top: 1px solid var(--nt-border-subtle); } .nt-wz-sheet[data-detent="peek"] #wizard-panel .nt-wizard-actions { margin-top: 0; padding-block: var(--nt-space-2); } /* ── the review screen ────────────────────────────────────────────── The beslutning is the footer here, so there is exactly one of them: while the commit panel is open its own actions row is the sticky bar and the wizard's toolbar drops back into the flow. Collapsed (the JS default), the trigger is a full-width button in the flow and the toolbar is the footer again — which is right, because "Tilbage" is then the only thing to do from the bottom of the screen. */ #wizard-panel .nt-commit-actions { position: sticky; bottom: 0; z-index: 2; margin-inline: calc(-1 * var(--nt-space-6)); padding: var(--nt-space-3) var(--nt-space-6); /* Same corner, same reason — and this is the button that signs. */ padding-right: var(--nt-chat-gutter); background: var(--nt-surface-overlay); } #wizard-panel:has(.nt-commit-panel[data-state="open"]) .nt-wizard-actions { position: static; margin-inline: 0; padding-inline: 0; background: none; border-top: 0; } /* ══════════════════════════════════════════════════════════════════════ 4. THE DOCUMENT IS THE PAGE REFLOW, NOT SCALE, and the arithmetic decides it: a true 210mm sheet is 794px at 96dpi, so on a 390px phone the scale factor is about 0.43 and `.nt-doc-sheet`'s 0.95rem serif renders at 6.5px. That is a picture of a document. The customer's job on a phone is to READ the paragraph that just changed, and reflowed at ~342px with 1.1rem gutters the same type gives about 40 characters to the line — cramped, and legible. The change bar and the flash work unmodified. ══════════════════════════════════════════════════════════════════════ */ .nt-wizard-paper { /* The pane was a sticky, scrolling column beside the question. It is the page now: it scrolls with the window, and the sheet floats over it. */ position: static; max-height: none; overflow: visible; /* READ BY document_preview_controller#paginates. A page COUNT computed at a reflowed width would not match the PDF, and a page number that disagrees with the print is worse than no page number — so the paginator does not run here, and the switch is a computed style rather than a breakpoint repeated in JavaScript, which is how the two would eventually come to disagree. */ --nt-doc-paginate: 0; } .nt-wizard-paper .nt-doc-frame { padding: var(--nt-space-3) var(--nt-space-2); } .nt-wizard-paper .nt-doc-sheet { aspect-ratio: auto; max-width: none; padding: 1.5rem 1.1rem; } /* The bound edge is a 1.5rem gutter shadow — wider than the whole reflowed margin, so the first character of every line would sit inside it. */ .nt-wizard-paper .nt-doc-sheet::before { width: 0.6rem; } /* The running footer is absolutely positioned against an A4-shaped sheet. With the aspect ratio gone it would land on the last line of the document, so it rejoins the flow — and drops the page number, which this breakpoint has no honest way to compute (see --nt-doc-paginate above). The eyebrow still says "Udkast", which is the part that was ever true. */ .nt-wizard-paper .nt-doc-sheet .nt-doc-footer { position: static; margin-top: var(--nt-space-8); } .nt-wizard-paper .nt-doc-sheet .nt-doc-footer span:last-child { display: none; } /* The pane is no longer a scroll container, so a bar stuck to its top would stick to the VIEWPORT's — under the navbar, over the document. */ .nt-wizard-paper .nt-doc-bar { position: static; } /* "Tilpas til vinduet" is a view of a page's SHAPE. There are no pages here, and a zoom remembered from a desktop session must not shrink reflowed type on a phone. */ .nt-wizard-paper .nt-doc-zoom { display: none; } .nt-wizard-paper[data-zoom="fit"] .nt-doc-sheet { zoom: 1; } /* The chip pinned to the top of the paper. The signal moved to the handle (§2) — down here the top of the paper is somewhere the customer scrolled past two paragraphs ago. */ .nt-wizard-paper .nt-wz-pulse-slot { display: none; } /* The desk the sheet stands on: the last line of the document must be readable with the sheet at peek. */ .nt-app-main:has(.nt-wizard) { padding-bottom: calc(var(--nt-wz-peek) + var(--nt-space-6)); } /* ══════════════════════════════════════════════════════════════════════ 5. THE STEP LIST, INSIDE THE SHEET #wizard-progress stays rendered at every width and keeps its controller running — it owns the "et spørgsmål faldt væk" announcement, and a live region that is display:none announces nothing. So only its VISIBLE row is hidden; the note and the progressbar stay in the tree. The chips are laid out vertically at ALL times below 65rem, not only in the steps view. wizard_progress_controller stamps the fill axis from the step list's computed flex-direction (it cannot observe a container query), and it re-reads only on resize — so an orientation that appeared when the view changed would leave the spine filled along the axis it no longer has. ══════════════════════════════════════════════════════════════════════ */ #wizard-progress { padding: var(--nt-space-4); } #wizard-progress .nt-wz-stepper-row { flex-direction: column; align-items: stretch; gap: var(--nt-space-3); } /* Nothing scrolls sideways in a column, and the overflow fade is a mask that would clip the left edge of every chip. */ #wizard-progress .nt-wz-rail, #wizard-progress .nt-wz-rail[data-overflow="true"] { overflow: visible; mask-image: none; padding-block: 0; } #wizard-progress .nt-wz-rail-inner { width: auto; } #wizard-progress .nt-wz-steps { flex-direction: column; align-items: stretch; gap: 0.4rem; } #wizard-progress .nt-wz-chip { max-width: none; width: 100%; justify-content: flex-start; } #wizard-progress .nt-wz-chip-label { white-space: normal; overflow: visible; } /* The spine turns 90°: a 2px column down through the middle of the chip marks — 1px border + 0.22rem of chip padding + half of the 1.3rem mark. */ #wizard-progress .nt-wz-spine { left: 0.93rem; right: auto; top: 0.4rem; bottom: 0.4rem; width: 2px; height: auto; transform: none; } #wizard-progress .nt-wz-spine-fill { width: 100%; height: 0; transition: height var(--nt-duration-slow) var(--nt-ease); } #wizard-progress .nt-wz-group-label { display: block; margin: var(--nt-space-3) 0 0.1rem 1.9rem; font-size: var(--nt-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nt-text-tertiary); } #wizard-progress .nt-wz-group-label:first-child { margin-top: 0; } #wizard-progress .nt-wz-count { order: -1; align-self: flex-start; } @media (pointer: coarse) { #wizard-progress .nt-wz-chip { min-height: 2.75rem; } } /* ── which view the sheet is showing ───────────────────────────────── */ .nt-wz-sheet:not([data-view="steps"]) #wizard-progress { padding: 0; border: 0; background: none; } .nt-wz-sheet:not([data-view="steps"]) #wizard-progress .nt-wz-stepper-row { display: none; } .nt-wz-sheet[data-view="steps"] #wizard-panel { display: none; } /* ══════════════════════════════════════════════════════════════════════ 6. A TABLE IS A LIST OF CARDS Below 40rem a fordeling grid — kapitalejer, ejerandel, bruttoudbytte, a remove button — cannot be a table: four columns of inputs at 390px is three characters per cell. Each row becomes a small card whose cells carry their own column name, which is the one thing the layout cannot do without the server (`data-label`, _field_table_row.html.erb). ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 40rem) { /* The table's own box model has to go with the columns: rows laid out as grids inside a `display: table` would still be sized by anonymous table boxes. */ .nt-grid, .nt-grid tbody, .nt-grid tfoot { display: block; } .nt-grid thead { display: none; } /* Nothing to scroll sideways any more — and the picker's own escape hatch (`.nt-grid-scroll.nt-wz-person-spill`) becomes a no-op rather than a fight. */ .nt-grid-scroll { overflow-x: visible; } .nt-grid tbody tr { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 0.15rem 0.6rem; padding: var(--nt-space-3) 0; border-bottom: 1px solid var(--nt-border-subtle); } .nt-grid tbody td { display: contents; } .nt-grid td[data-label]::before { content: attr(data-label); font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); } /* The remove button belongs to the row, not to a column of its own. */ .nt-grid td.nt-grid-actions { display: block; grid-column: 1 / -1; justify-self: end; } /* The totals row is one line: "I alt" and the sum. The empty spacer cells a table needed are noise in a flex row. */ .nt-grid tfoot tr { display: flex; align-items: center; justify-content: space-between; gap: var(--nt-space-3); padding: var(--nt-space-3) 0; } .nt-grid tfoot td:empty, .nt-grid tfoot td.nt-grid-actions { display: none; } } }