/* Share / Print Center. The preview is pinned and the options scroll under it, because the whole point of the screen is watching a change land on the page. */ .export-view { display: flex; flex-direction: column; min-height: 0; } .export-preview { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-2); padding: 0; } /* * The well the paper sits in. * * It used to be a bordered, rounded slab with a conic-gradient checkerboard painted inside it, * which in light mode stacked white paper on a near-white checker inside a bordered box on a * near-white page: four surfaces within a few percent of each other, three of them there to * hold the one that matters. The page's own shadow is what says "sheet"; the well only has to * be darker than it. The preview is the primary content of this screen and it takes the height * the container gave up. */ .export-stage { position: relative; display: flex; align-items: center; justify-content: center; /* Big enough to be a real preview, small enough to leave the controls room to work on a phone — which is the binding constraint, because a phone stacks the two. At 42dvh the options pane was 333px of porthole on a 390px phone holding a 1690px wristband panel, so not one open section could be seen whole. The tablet and desktop preview keeps the width it gained: the 820px rule below replaces this height entirely. */ height: clamp(180px, 30dvh, 520px); background: var(--surface-sunken); overflow: hidden; } /* * Landscape phones and tablets have room for the options beside the page rather than under. * * The app bar stays. It used to be hidden at this width, which left the browser's own back * gesture as the only way out of the Share Center on every tablet and desktop — so the columns * are a row INSIDE the view rather than the view itself being the row. */ .export-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } @media (min-width: 820px) { .export-body { flex-direction: row; align-items: stretch; } /* The preview is the primary content of this screen, so it takes the larger share. */ .export-preview { flex: 1 1 58%; min-width: 0; } .export-stage { height: auto; flex: 1; } .export-options { flex: 1 1 42%; min-width: 0; max-width: 480px; border-left: var(--border-width) solid var(--hairline); } } .export-stage__page { display: block; /* Paper is white in both appearances, because it is paper — this is the sheet that comes out of the printer, not a surface of the app. */ background: #fff; box-shadow: var(--elev-3); border-radius: 2px; } /* ── The one place in the app where pinch is handed back to the browser ──────────────── * * A coach checks a diagram on this page before he commits paper to it, and on a phone the * preview is 30dvh of a 390px screen. Everywhere else the app refuses the browser's pinch * (`touch-action: pan-x pan-y` on , base.css); here it gives it back, so the page can be * magnified the way any other page can. * * WHY THIS IS TEN SELECTORS AND NOT ONE. `touch-action` is INTERSECTED from the touched element * up to the viewport, and the intersection can only ever narrow: a descendant cannot re-widen * what an ancestor took away. So there is no `touch-action: auto` on the canvas that can undo * the rule on , and the only way to reach this one element is to relax the whole spine * above it and re-narrow every branch that is still interface. * * The spine is gated on `:has(> #app > .export-view)` so is only ever relaxed while this * screen is the one mounted — the DOM is the state, and there is no flag to set, to clear, or to * leak onto Home when a render throws. The `>` combinators keep the match two levels deep rather * than letting it search the document. * * Deleting this block restores the app-wide refusal, which is the whole of the undo. */ body:has(> #app > .export-view), body:has(> #app > .export-view) > #app, .export-view, .export-body, .export-preview, .export-stage, .export-stage__page { touch-action: auto; } /* * ...and the branches off that spine that are interface, not paper. The app bar, the action bar, * the options pane, the pager — and the sheets, menus and toasts, which are appended to * rather than into the view and would otherwise inherit the relaxation above. * * A NEW SIBLING OF THE PREVIEW NEEDS A LINE HERE. The default on this screen is inverted from * the rest of the app, which is the cost of the paragraph above; the failure is a corner of the * Share Center that pinches, which is what the whole screen did before this pass. */ .export-view > .appbar, .export-view > .export-actions, .export-body > .export-options, .export-preview > .export-pager, body:has(> #app > .export-view) > .sheet, body:has(> #app > .export-view) > .sheet-backdrop, body:has(> #app > .export-view) > .menu, body:has(> #app > .export-view) > .menu-backdrop, body:has(> #app > .export-view) > .toast-host { touch-action: pan-x pan-y; } .export-stage__note { position: absolute; margin: 0; padding: 0 var(--space-6); text-align: center; color: var(--text-2); font-size: var(--fs-secondary); line-height: var(--lh-secondary); font-weight: var(--fw-semibold); } .export-pager { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--gutter); } .export-pager .btn--icon { width: 36px; min-width: 36px; min-height: 36px; font-size: 16px; } .export-pager__label { font-weight: var(--fw-bold); font-size: var(--fs-secondary); line-height: var(--lh-secondary); color: var(--text); } .export-pager__size { margin-left: auto; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); font-variant-numeric: tabular-nums; } /* * The output bar: one decision, not three peers. * * PDF, Image and Print were three equal-width buttons in a row — the brief's "three enormous * cards" complaint in miniature — and the band sat BETWEEN the preview and the options, so the * screen read Preview → Output → Configuration. One filled button and two text buttons reads * as a choice, and the bar sits at the bottom where the last step belongs, stuck to the edge so * it is reachable without scrolling back up. */ .export-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--gutter) calc(var(--space-2) + var(--safe-bottom)); background: var(--surface); border-top: var(--border-width) solid var(--hairline); } /* The two text actions shrink; the filled one takes what is left. Without `min-width: 0` a `.btn`'s automatic minimum size is its whole nowrap label, so at 320px the three of them came to 345px and Print was cut off at the edge of the screen. */ .export-actions .btn { min-width: 0; overflow: hidden; } .export-actions .btn--primary { flex: 1 1 auto; } .export-actions[data-busy] { opacity: 0.5; pointer-events: none; } /* Steppers and sliders ----------------------------------------------------------- */ /* `Rows 6 − +` — a label, a number and two nudges, and not one rectangle among them. */ .opt-stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-h-lg); } /* A `.section__body` is not a `.group`, so it does not get `.group > * + *` — and without `.group-row + .group-row` the Wristband panel drew rules between its steppers and none between the switch rows under them, which is a list half divided for no reason a reader can see. */ .opt-stepper + .opt-stepper, .opt-stepper + .group-row, .group-row + .opt-stepper, .group-row + .group-row { border-top: var(--border-width) solid var(--hairline); } .opt-stepper__label { flex: 1; min-width: 0; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-medium); } .opt-stepper__controls { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; } .opt-stepper__value { width: 52px; min-height: var(--control-h-sm); padding: 0; text-align: center; background: transparent; border: 0; border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); } .opt-stepper__value:focus { box-shadow: none; background: var(--surface-3); } .opt-stepper__suffix { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); } .opt-slider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); min-height: var(--control-h-lg); } .opt-slider .field-label { margin: 0; } .opt-slider__input { width: 100%; accent-color: var(--accent); } .opt-slider__value { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-size: var(--fs-secondary); line-height: var(--lh-secondary); min-width: 52px; text-align: right; } /* Card pickers ------------------------------------------------------------------- */ /* * ONE VALUE OF A CHOICE IS NOT AN OBJECT. * * These were filled, rounded tiles — a card per option — and they were the default shape for * every exclusive choice on the screen: five card sizes, five numbering schemes, six paper * sizes, four orientations and eight document types, twenty-eight rectangles on the Wristband * panel alone. They are a list of values now: a name, its detail, and a tick on the chosen one. * The class and the `role="radio"` / `aria-checked` contract are untouched. */ .opt-cards { display: flex; flex-direction: column; } .opt-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; /* Explicit rows, so the tick's `1 / -1` span has lines to resolve against — without them it collapsed to the first row and sat level with the name instead of centred on the card. */ grid-template-rows: auto auto; align-items: center; column-gap: var(--space-3); row-gap: 2px; width: calc(100% + var(--space-2) * 2); min-height: var(--control-h-lg); padding: var(--space-2); margin-inline: calc(var(--space-2) * -1); border-radius: var(--radius-xs); background: transparent; border: 0; text-align: left; transition: background var(--dur-fast) var(--ease-standard); } .opt-card + .opt-card { border-top: var(--border-width) solid var(--hairline); border-radius: 0; } .opt-card:active { background: var(--surface-hover); } .opt-card__name { grid-column: 1; font-weight: var(--fw-medium); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text); } .opt-card__detail { grid-column: 1; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); } /* The chosen value carries a mark as well as the accent, so it is never colour alone. */ .opt-card__tick { grid-column: 2; grid-row: 1 / -1; color: var(--accent); visibility: hidden; } .opt-card[aria-checked='true'] .opt-card__tick, .opt-card[aria-pressed='true'] .opt-card__tick { visibility: visible; } .opt-card[aria-checked='true'] .opt-card__name, .opt-card[aria-pressed='true'] .opt-card__name { font-weight: var(--fw-bold); color: var(--accent); } /* A document type carries its mark in a column of its own, so the name sits beside the icon rather than under it. */ .opt-card--type { grid-template-columns: auto minmax(0, 1fr) auto; } /* A direct child: `.opt-card--type .ico` also matched the glyph inside the tick. */ .opt-card--type > .ico { grid-column: 1; grid-row: 1 / -1; color: var(--accent); } .opt-card--type .opt-card__name, .opt-card--type .opt-card__detail { grid-column: 2; } .opt-card--type .opt-card__tick { grid-column: 3; } .opt-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; } .opt-field .field-label { margin: 0; } .opt-field--inline { position: relative; } .opt-field__unit { position: absolute; right: var(--space-3); bottom: var(--space-3); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); pointer-events: none; } .opt-count { margin-left: auto; align-self: center; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); font-weight: var(--fw-semibold); } /* Play picker -------------------------------------------------------------------- */ /* A play IS an object — but this is a multi-select list of them, and a list is rows. The tick and the thumbnail already say which are in the document; the fill, the radius and the accent border were a third and fourth signal for the same fact. */ /* * A divided list has no gap between its rows: the rule between them IS the separation. Both of * these used to be a `.stack` with an inline 6 or 8px gap, which left each new hairline floating * in the air above its row instead of dividing two of them. * * The list owns the space around the things that are not rows, which is why the headings get * their margin here rather than a gap that also lands between every pair of plays. */ .pick-list, .group-list { display: flex; flex-direction: column; } .pick-list > .btn-row { margin-bottom: var(--space-2); } .pick-list > .section-label { margin-top: var(--space-4); } .pick-row { display: flex; align-items: stretch; gap: var(--space-1); } .pick-row + .pick-row { border-top: var(--border-width) solid var(--hairline); } /* * The same shape as a playbook row in the library, so it carries the same geometry. * * Its padding used to be the only inset it had, which put a play's name 8px further in than the * `.opt-card` rows and the `.section__head` label directly above it — two divided lists on one * scroller with two different left edges. The negative margin is what the rest of the app uses * to line a row's content up with the screen's gutter while its pressed highlight overhangs; * see `.pb-card__main`, which is this component with a different payload. */ .pick-row__main { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; padding: var(--space-2); margin-inline: calc(var(--space-2) * -1); border-radius: var(--radius-xs); background: transparent; text-align: left; transition: background var(--dur-fast) var(--ease-standard); } .pick-row__main:active { background: var(--surface-hover); } .pick-row__check { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-xs); border: 1.5px solid var(--text-3); color: var(--text-on-accent); font-weight: var(--fw-bold); font-size: var(--fs-secondary); } .pick-row[data-selected='true'] .pick-row__check { background: var(--accent); border-color: var(--accent); } .pick-row__thumb { flex: 0 0 auto; width: 72px; height: 46px; border-radius: var(--radius-xs); overflow: hidden; background: var(--surface-sunken); } .pick-row__thumb canvas { display: block; width: 100%; height: 100%; } .pick-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pick-row__title { font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: var(--lh-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pick-row__order { display: flex; flex-direction: column; gap: 4px; justify-content: center; } .pick-row__order .btn { min-height: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0 var(--space-2); } /* Call-sheet groups -------------------------------------------------------------- */ /* Pinned to the top of the options scroller. A play is dragged from the list at the bottom of this panel onto a situation at the top, and on a phone those are further apart than the screen is tall — so without this the gesture needs a scroll in the middle of it, which is not a gesture anybody completes. */ .group-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) 0; margin: calc(var(--space-2) * -1) 0 0; background: var(--bg); scrollbar-width: none; } .group-tabs::-webkit-scrollbar { display: none; } /* A situation. It is also the drop target for dragging a play onto it, which is the one place on this screen a filled, bounded shape earns itself — but only the selected one needs the fill. Four pale pills doing nothing was four containers for a strip that has one state. */ .group-tab { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; min-height: 38px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: transparent; border: var(--border-width) solid var(--hairline-strong); font-weight: var(--fw-semibold); font-size: var(--fs-secondary); color: var(--text-2); } .group-tab[aria-selected='true'] { background: var(--accent); border-color: transparent; color: var(--text-on-accent); } .group-tab.is-drop-target { border-color: var(--highlight); background: var(--warning-soft); color: var(--text); } .group-tab__count { font-variant-numeric: tabular-nums; opacity: 0.75; } .group-tab--add { min-width: 38px; justify-content: center; padding: 0; } .group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .group-head__name { font-weight: var(--fw-bold); font-size: var(--fs-label); line-height: var(--lh-label); } /* One assigned play in a situation: a row in a reorderable list, not an object. It bleeds to the gutter for the same reason `.pick-row__main` does — it shares a scroller with the `.opt-card` layout picker, and the two lists have to start at the same left edge. */ .group-item { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: var(--space-1) var(--space-2); margin-inline: calc(var(--space-2) * -1); background: transparent; } .group-item + .group-item { border-top: var(--border-width) solid var(--hairline); } .group-item.is-dragging { opacity: 0.4; } .group-item__index { flex: 0 0 auto; min-width: 20px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--accent); } .group-item__name { flex: 1; min-width: 0; font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: var(--lh-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-item__actions { display: flex; gap: 4px; } .group-item__actions .btn { min-height: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0 var(--space-2); } .chips--wrap { flex-wrap: wrap; } /* Dragging ----------------------------------------------------------------------- */ .drag-ghost { position: fixed; z-index: 60; pointer-events: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--accent); color: var(--text-on-accent); font-weight: var(--fw-bold); font-size: var(--fs-secondary); box-shadow: var(--elev-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-dragging] { cursor: grabbing; user-select: none; -webkit-user-select: none; } /* Animation sheet ---------------------------------------------------------------- */ .anim-stage { border-radius: var(--radius-md); overflow: hidden; /* Letterbox for a video frame, which is black whatever the app is wearing. */ background: #000; } .anim-preview { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; } .anim-transport { display: flex; align-items: center; gap: var(--space-3); } .anim-scrub { flex: 1; accent-color: var(--accent); } .anim-time { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-size: var(--fs-secondary); line-height: var(--lh-secondary); min-width: 48px; text-align: right; } .anim-progress { height: 4px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; } .anim-progress__bar { height: 100%; width: 0%; background: var(--accent); transition: width var(--dur-base) linear; } /* Wristband labels ---------------------------------------------------------------- */ .band-row { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-2); } .band-row input { min-height: 38px; } .band-row__code { text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }