:root { --bg: #f3f4ef; --panel: #fffdf8; --ink: #1b1f18; --muted: #4f5b4f; --accent: #12725e; /* The accent, darker for a button's edge, and dark enough for text on top of --accent-soft. All of them are named so that a brand can recolour the whole app by redefining this block and nothing else (server/brand.py). */ --accent-deep: #0f5f4e; --accent-ink: #154f42; --accent-line: #bcd4c9; --accent-soft: #d7efe5; --border: #c8d1c6; --border-strong: #b7c5b7; /* Inset surfaces: the area behind a PDF, an accordion header. */ --tint: #f7f8f4; /* The page's own background wash. */ --page-glow: #dde9dc; --page-wash-a: #edf0e7; --page-wash-b: #f8f7f3; --page-wash-c: #eef4ef; } /* xwaivers (server/brand.py) is the same product in its own colours: cooler, plainer, a business tool rather than a writing desk. The attribute is set by brand-config.js in , before the first paint, so a visitor never sees a flash of the other brand. */ :root[data-brand="xwaivers"] { --bg: #f1f5fa; --panel: #ffffff; --ink: #101827; --muted: #4b5768; --accent: #10508f; --accent-deep: #0b3f74; --accent-ink: #0d3c68; --accent-line: #bed3ea; --accent-soft: #dceaf8; --border: #ccd7e5; --border-strong: #b6c4d8; --tint: #f4f7fb; --page-glow: #d9e6f5; --page-wash-a: #e9eff7; --page-wash-b: #f7f9fc; --page-wash-c: #eaf1f8; } * { box-sizing: border-box; } /* Classes that set display would otherwise override the hidden attribute. */ [hidden] { display: none !important; } body { margin: 0; font-family: "Avenir Next", "Segoe UI", sans-serif; color: var(--ink); background: radial-gradient(circle at 20% 10%, var(--page-glow) 0, transparent 35%), linear-gradient(145deg, var(--page-wash-a) 0%, var(--page-wash-b) 60%, var(--page-wash-c) 100%); min-height: 100vh; } .app { display: grid; /* minmax(0, ...): a wide page inside must scroll in its own box, never stretch the column (and with it the whole screen) to its width. */ grid-template-columns: 360px minmax(0, 1fr); gap: 1rem; padding: 1rem; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; box-shadow: 0 10px 24px rgba(22, 31, 18, 0.08); min-width: 0; } h1 { margin: 0 0 0.4rem; letter-spacing: 0.02em; } .muted { color: var(--muted); } .small { margin: 0.5rem 0 0; font-size: 0.9rem; } .field { display: grid; gap: 0.45rem; margin: 0.9rem 0; } .inline { display: flex; gap: 0.5rem; align-items: center; margin: 0.9rem 0; } input[type="file"], input[type="range"], input[type="text"], input[type="email"], input[type="password"] { width: 100%; } input[type="text"], input[type="email"], input[type="password"] { border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.45rem 0.55rem; /* Not below 16px: an iPhone zooms the whole page into a smaller input and leaves it zoomed. */ font-size: 1rem; } button { border: 1px solid var(--accent-deep); background: var(--accent); color: #fff; border-radius: 10px; padding: 0.55rem 0.8rem; cursor: pointer; font-weight: 600; } button:disabled { cursor: not-allowed; opacity: 0.5; } .status { margin: 0.9rem 0; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); } /* Drawing surfaces. The fixed shape lets signature-pad.js size the bitmap to the screen; touch-action stops a stroke from scrolling the page. */ .sig-pad { display: block; width: 100%; aspect-ratio: 16 / 7; border: 1px dashed var(--border-strong); border-radius: 10px; background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .pdf-container { min-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--tint); padding: 0.75rem; } .pager-bottom { justify-content: center; margin: 0.9rem 0 0.2rem; } /* Stay put while a zoomed page scrolls sideways underneath. */ .pager-bottom, .zoom-bar { position: sticky; left: 0; } .zoom-bar { display: flex; justify-content: flex-end; gap: 0.35rem; margin-bottom: 0.5rem; } .zoom-bar button { min-width: 2.6rem; padding: 0.3rem 0.6rem; } .page-stage { /* Leaves room above the page when a bottom pager scrolls it into view. */ scroll-margin-top: 1rem; position: relative; width: fit-content; margin: 0 auto; } /* The frame is on the stage, not the canvas, so the canvas box is exactly the page and a pointer position maps to the page without a border's error. */ .page-stage { box-shadow: 0 0 0 1px var(--border); } #pdfCanvas { display: block; background: white; } /* Children are placed in page pixels; pdf-view.js scales the whole layer to the shown size and publishes the factor as --view-scale, which controls divide by to keep their size on screen. */ .signature-overlay { position: absolute; pointer-events: none; top: 0; left: 0; transform-origin: 0 0; } .signature-box { position: absolute; border: 2px solid rgba(18, 114, 94, 0.7); border-radius: 6px; background-size: 100% 100%; background-repeat: no-repeat; box-shadow: 0 3px 8px rgba(14, 47, 39, 0.2); } .mode-picker { margin: 0.3rem 0 0; } .mode-picker label { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--accent-ink); } .annotation-text { position: absolute; color: var(--ink); font-family: "Avenir Next", "Segoe UI", sans-serif; background: rgba(255, 255, 255, 0.8); border: 1px dashed rgba(27, 31, 24, 0.45); border-radius: 4px; padding: 1px 4px; white-space: nowrap; } .signature-box.locked, .annotation-text.locked { border: 1px dashed rgba(90, 100, 90, 0.55); box-shadow: none; background-color: transparent; } /* ---- side panel: accordion of tools, then a fixed finish block ---- */ .accordion { margin: 0.9rem 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; } .acc-item + .acc-item { border-top: 1px solid var(--border); } .acc-title { margin: 0; font-size: 1rem; } .acc-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 2.7rem; padding: 0.5rem 0.8rem; border: none; border-radius: 0; background: var(--tint); color: var(--ink); font-size: 1rem; font-weight: 600; text-align: left; } .acc-header::after { content: "+"; font-size: 1.2rem; font-weight: 400; color: var(--muted); } .acc-item.open .acc-header { background: var(--accent-soft); color: var(--accent-ink); cursor: default; } .acc-item.open .acc-header::after { content: "\2212"; } .acc-thumb { height: 1.6rem; max-width: 5.5rem; margin-left: auto; object-fit: contain; } /* 0fr -> 1fr animates to the content's own height with no fixed max-height. */ .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; } .acc-item.open .acc-body { grid-template-rows: 1fr; } .acc-inner { min-height: 0; overflow: hidden; padding: 0 0.8rem; } .acc-item.open .acc-inner { padding-bottom: 0.4rem; } @media (prefers-reduced-motion: reduce) { .acc-body { transition: none; } } .finish-block { margin-top: 1rem; padding-top: 0.9rem; border-top: 2px solid var(--border); } .finish-block h2 { margin-bottom: 0.4rem; } .finish-block button { width: 100%; padding: 0.7rem 0.8rem; font-size: 1rem; } .annotation-glyphs { position: relative; } /* A check mark must not hide the form's own checkbox under it. */ .annotation-text.mark { background: transparent; } /* ---- the signer's own placed items: drag to move, x to remove ---- */ .signature-overlay .movable, .signature-overlay .pinned { pointer-events: auto; touch-action: none; } .signature-overlay .movable { cursor: move; } .signature-overlay .selected { outline: 2px solid rgba(18, 114, 94, 0.55); outline-offset: 2px; } /* Remove button and resize grip sit outside the item's right-hand corners, so they never cover each other on an item as small as a check mark. --control is their size on screen; dividing by --view-scale undoes the layer's scaling. */ .item-delete, .item-resize { --control: 22px; --shown: calc(var(--control) / var(--view-scale, 1)); position: absolute; left: 100%; width: var(--shown); height: var(--shown); min-height: 0; padding: 0; border-radius: 50%; /* Hidden, not transparent: an invisible control must not be tappable. */ visibility: hidden; touch-action: none; } .item-delete { bottom: 100%; border: none; background: #8a1f1f; color: #fff; font-size: calc(var(--shown) * 0.65); line-height: var(--shown); text-align: center; cursor: pointer; } .item-resize { top: 100%; border: calc(2px / var(--view-scale, 1)) solid #fff; background: var(--accent); box-shadow: 0 0 0 calc(1px / var(--view-scale, 1)) var(--accent); cursor: nwse-resize; } .movable:hover .item-delete, .pinned:hover .item-delete, .selected .item-delete, .movable:hover .item-resize, .selected .item-resize { visibility: visible; } /* ---- fields the owner marks for signers ---- */ .field-box { /* Lets the label size itself against the box (cqh below). */ container-type: size; position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; user-select: none; } /* Readable when the page is shown small, but never taller than its box. */ .field-box .field-label { font-size: min(calc(0.78rem / var(--view-scale, 1)), 62cqh); } .field-box.mine { border: 2px solid #c99700; background: rgba(255, 221, 87, 0.45); color: #5a4708; } .field-box.mine.optional { border: 2px solid #3b6fb5; background: rgba(90, 150, 230, 0.25); } .field-box.reserved { border: 1px dashed rgba(90, 100, 90, 0.6); background: rgba(120, 130, 120, 0.12); color: var(--muted); font-weight: 500; } /* Field editor: the overlay ignores clicks, the boxes on it do not. */ .field-box.editable { pointer-events: auto; cursor: move; touch-action: none; border: 2px solid var(--field-color, var(--accent)); background: color-mix(in srgb, var(--field-color, var(--accent)) 18%, transparent); color: var(--ink); } .field-box.editable.frozen { cursor: default; border-style: dashed; opacity: 0.6; } /* The editor's delete button and resize grip keep their size on screen however small the page is shown (see --view-scale above). */ .field-box .field-delete, .field-box .field-resize { --shown: calc(var(--control) / var(--view-scale, 1)); position: absolute; width: var(--shown); height: var(--shown); min-width: 0; min-height: 0; padding: 0; background: var(--field-color, var(--accent)); touch-action: none; } .field-box .field-delete { --control: 18px; top: -1px; right: -1px; line-height: 1; border-radius: 0 3px 0 6px; border: none; color: #fff; font-size: calc(var(--shown) * 0.7); } .field-box .field-resize { --control: 12px; right: -1px; bottom: -1px; border-radius: 6px 0 3px 0; cursor: nwse-resize; } /* A checkbox field is smaller than its own controls, so they sit outside it. */ .field-box.editable.compact { overflow: visible; } .field-box.compact .field-delete, .field-box.compact .field-resize { left: 100%; right: auto; border-radius: 50%; } .field-box.compact .field-delete { top: auto; bottom: 100%; } .field-box.compact .field-resize { top: 100%; bottom: auto; } .bulk-add { margin-top: 0.9rem; } .bulk-add summary { cursor: pointer; color: var(--accent); font-weight: 600; } .bulk-add textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.5rem 0.6rem; font: inherit; font-size: 1rem; } .batch-badge { margin-left: 0.5rem; } .order-box { margin: 0 0 0.9rem; padding: 0.6rem 0.8rem 0.2rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; } /* ---- legal pages and the footer that links to them ---- */ .page.legal { max-width: 800px; } .page.legal .panel { padding: 1.4rem 1.6rem; line-height: 1.55; } .page.legal h2 { margin-top: 1.6rem; } .page.legal li { margin-bottom: 0.4rem; } .site-footer { padding: 1.2rem 1rem 1.6rem; text-align: center; font-size: 0.85rem; color: var(--muted); } .site-footer a { display: inline-block; padding: 0.6rem 0.3rem; color: var(--muted); } .template-form { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); } .form-row.two { grid-template-columns: 1fr 1fr; } .order-box.auto-mail { margin-top: 0.9rem; padding-bottom: 0.6rem; } .order-box legend { padding: 0 0.3rem; font-weight: 600; } .order-box p { margin: 0.15rem 0 0.6rem 1.5rem; } .order-choice { display: flex; align-items: baseline; gap: 0.45rem; } /* A choice this account cannot make (see #batchPlanNote). */ .order-choice input:disabled + span { opacity: 0.55; } .order-cell { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; } button.order-arrow { padding: 0.1rem 0.35rem; font-size: 0.7rem; line-height: 1.2; } .signer-choice { display: flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0; } .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--field-color); } select { width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.45rem 0.55rem; font-size: 1rem; background: #fff; } /* ---- account pages ---- */ .site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.2rem; background: var(--panel); border-bottom: 1px solid var(--border); } .site-nav .brand { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; } .nav-links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } a { color: var(--accent); } .page { max-width: 920px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; } .page.wide { max-width: 1280px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .panel-head h1, .panel-head h2 { margin: 0; } .panel-head input[type="text"] { max-width: 280px; } .inline-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); } .inline-label select { width: auto; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem; margin: 0.6rem 0 0.8rem; } .tile { padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; } .tile.warn { border-color: #e6d08a; background: #fff6dd; } .tile-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; } .tile-label { font-weight: 600; margin: 0.1rem 0; } td.num, th.num { text-align: right; white-space: nowrap; } .badge.plan { background: #fff6dd; border-color: #e6d08a; color: #6b4d06; } .badge.disabled { background: #fdecea; border-color: #f5c2c2; color: #6b1a1a; } tr.row-disabled td { opacity: 0.6; } .page.narrow { max-width: 460px; } h2 { margin: 0 0 0.6rem; font-size: 1.15rem; } .button-link { display: inline-block; border: 1px solid var(--accent-deep); border-radius: 10px; padding: 0.55rem 0.8rem; font-weight: 600; font-size: 0.83rem; text-decoration: none; background: #fff; color: var(--accent); } button.secondary { background: #fff; color: var(--accent); } button.danger { background: #fff; color: #8a1f1f; border-color: #c98c8c; } button.small-button { padding: 0.3rem 0.55rem; font-size: 0.85rem; font-weight: 500; } button.link-button { background: none; border: none; color: var(--accent); padding: 0; font-weight: 500; text-decoration: underline; font-size: inherit; } .notice { margin: 0.6rem 0; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); } .notice.error { background: #fdecea; border-color: #f5c2c2; color: #6b1a1a; } .notice.warn { background: #fff6dd; border-color: #e6d08a; color: #5a4708; } .badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border); background: #eef1ea; color: var(--muted); white-space: nowrap; } .badge.pending { background: #fff6dd; border-color: #e6d08a; color: #5a4708; } .badge.completed, .badge.signed { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); } table.list { width: 100%; border-collapse: collapse; } table.list th, table.list td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid #e3e8df; vertical-align: top; } table.list th { font-size: 0.82rem; color: var(--muted); font-weight: 600; } .table-scroll { overflow-x: auto; } .row-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: end; } .tabs { display: flex; gap: 1rem; margin-bottom: 0.4rem; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; word-break: break-all; } .consent { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.9rem 0; font-size: 0.95rem; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; } /* With the tools folded away the panel is short enough to stay in view while the page scrolls past it. */ @media (min-width: 921px) { .app > .controls { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; } } @media (max-width: 920px) { .form-row, .form-row.two { grid-template-columns: 1fr; } .app { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding: 0.5rem; } /* Phone order: who is asking and the pager, then the document, then the tools. The side panel dissolves into its two halves, which become panels of their own so the document can sit between them. */ .app > .controls.split { display: contents; } .controls.split > .controls-head, .controls.split > .controls-body { min-width: 0; padding: 0.8rem; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 24px rgba(22, 31, 18, 0.08); } .controls.split > .controls-head { order: 1; } .app > .viewer { order: 2; /* Every pixel of width goes to the page. */ padding: 0.35rem; } .controls.split > .controls-body { order: 3; } .pdf-container { min-height: 0; padding: 0.3rem; } h1 { font-size: 1.45rem; } .site-nav { flex-wrap: wrap; gap: 0.2rem 1rem; padding: 0.5rem 0.8rem; } .page { padding: 0.6rem; } /* The signing tools within reach of a thumb. app.js shows it once a document is open. */ .phone-bar:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 0.35rem; padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(22, 31, 18, 0.12); } .phone-bar button { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0.3rem 0.1rem; font-size: 0.84rem; line-height: 1.15; background: #fff; color: var(--accent); } .phone-bar button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); } .phone-bar .bar-plain { border-color: var(--border); color: var(--muted); } .phone-bar #barSignature { flex-grow: 1.5; } .phone-bar #barCheck { flex-grow: 0.7; } .phone-bar .bar-main { flex: 1.6 1 0; background: var(--accent); color: #fff; } body.has-phone-bar { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); } body.has-phone-bar .toast { bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); } } .phone-bar { display: none; } /* A table does not fit a phone: each row becomes a card, each cell a line with its column's name (data-label, set in api.js) in front of it. */ @media (max-width: 640px) { .table-scroll { overflow-x: visible; } table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; } table.list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } table.list tr { padding: 0.55rem 0; border-bottom: 1px solid #e3e8df; } table.list td { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.15rem 0; border-bottom: none; text-align: left; white-space: normal; } table.list td:empty { display: none; } table.list td[data-label]:not([data-label=""])::before { content: attr(data-label); flex: 0 0 5.2rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); } } /* ---- fingers instead of a mouse ---- */ /* Also by width: some phones and emulators do not report a coarse pointer. */ @media (pointer: coarse), (max-width: 920px) { button, select, .button-link, input[type="text"], input[type="email"], input[type="password"] { min-height: 44px; } .button-link { display: inline-flex; align-items: center; } button.link-button { min-height: 44px; padding: 0 0.15rem; } button.small-button, button.order-arrow { min-width: 40px; min-height: 40px; } input[type="file"] { min-height: 44px; } input[type="file"]::file-selector-button { min-height: 40px; margin-right: 0.6rem; padding: 0 0.8rem; border: 1px solid var(--accent-deep); border-radius: 10px; background: #fff; color: var(--accent); font-weight: 600; } input[type="range"] { min-height: 40px; } input[type="checkbox"], input[type="radio"] { width: 1.4rem; height: 1.4rem; flex: none; } .site-nav a, .site-nav button, table.list a, .panel > p > a, summary { display: inline-flex; align-items: center; min-height: 44px; } /* A placed check mark can be 7 pixels wide on a phone. This gives every placed item a fingertip of room to be caught and dragged by. */ .signature-overlay .movable::before, .signature-overlay .pinned::before { content: ""; position: absolute; inset: calc(-10px / var(--view-scale, 1)); } /* Finger-sized controls would cover a field shown this small, so in the editor they sit outside every field, as they do for checkboxes. */ .field-box.editable { overflow: visible; } .field-box.editable .field-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .field-box .field-delete, .field-box .field-resize, .field-box.compact .field-delete, .field-box.compact .field-resize { --control: 30px; left: 100%; right: auto; border-radius: 50%; } .field-box .field-delete { top: auto; bottom: 100%; } .field-box .field-resize { top: 100%; bottom: auto; } /* Only the field last touched shows them, or a form disappears under them. */ .field-box.editable:not(.selected) .field-delete, .field-box.editable:not(.selected) .field-resize { display: none; } .field-box.editable.selected { z-index: 2; box-shadow: 0 0 0 calc(2px / var(--view-scale, 1)) rgba(18, 114, 94, 0.35); } .item-delete, .item-resize { --control: 30px; } /* Links inside running text stay in the line; a tall box around each would tear a paragraph of the legal pages apart. */ .page.legal .panel a { display: inline; min-height: 0; } } /* ---- pop-up dialogs (signature-pad.js) ---- */ dialog.sheet { width: min(560px, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); /* Near the top, not the bottom: a phone's keyboard covers the bottom. */ margin: 4vh auto auto; padding: 1rem; overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--ink); box-shadow: 0 18px 50px rgba(14, 30, 22, 0.35); } dialog.sheet::backdrop { background: rgba(20, 30, 22, 0.5); } .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .sheet-title { margin: 0; } button.sheet-close { min-width: 44px; min-height: 44px; padding: 0; border: none; background: none; color: var(--muted); font-size: 1.7rem; font-weight: 400; line-height: 1; } .sheet-tabs { display: flex; gap: 0.4rem; margin: 0.5rem 0 0.7rem; } button.sheet-tab { flex: 1 1 0; background: #fff; color: var(--accent); border-color: var(--border); } button.sheet-tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); } .sheet-panel .field { margin-top: 0; } /* A phone held sideways is wide and short: keep the pad on the screen. */ dialog.sheet .sig-pad { width: min(100%, calc((100vh - 15rem) * 16 / 7)); width: min(100%, calc((100dvh - 15rem) * 16 / 7)); min-width: 14rem; margin: 0 auto; } .sheet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0; } input.sheet-input { min-height: 44px; font-size: 1.1rem; } button.chip { padding: 0.3rem 0.9rem; border-color: var(--border); background: #fff; color: var(--ink); font-size: 1.35rem; font-weight: 400; } button.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); } .sig-preview-box { display: grid; place-items: center; min-height: 5.5rem; padding: 0.5rem; border: 1px dashed var(--border-strong); border-radius: 10px; background: #fff; } .sig-preview { max-width: 100%; max-height: 7rem; } .sheet-saved { margin: 0.5rem 0 0; } .sheet-or { margin: 0.2rem 0 0; } .sheet-message { min-height: 1.2rem; margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9rem; } .sheet-message.error { color: #8a1f1f; } .sheet-save { margin: 0.4rem 0 0; } .sheet-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; } .sheet-actions .sheet-primary { flex: 1 1 auto; max-width: 20rem; } /* A phone held sideways: the pad takes the full height on the left, and everything else moves into a column beside it. */ @media (orientation: landscape) and (max-height: 500px) { dialog.sheet-signature[open] { display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; grid-auto-rows: min-content; column-gap: 0.8rem; width: calc(100vw - 1rem); margin-top: 0.4rem; padding: 0.6rem 0.8rem; } dialog.sheet-signature > * { grid-column: 2; } dialog.sheet-signature > .sheet-panel { grid-column: 1; grid-row: 1 / span 9; } dialog.sheet-signature .sheet-title { font-size: 1rem; } dialog.sheet-signature .sheet-tabs { margin: 0.2rem 0 0.4rem; } dialog.sheet-signature .sheet-tab { padding: 0.3rem 0.2rem; } dialog.sheet-signature .sheet-actions { flex-direction: column-reverse; } dialog.sheet-signature .sheet-actions .sheet-primary { flex: none; } dialog.sheet-signature .sig-pad { width: min(100%, calc((100vh - 6.2rem) * 16 / 7)); width: min(100%, calc((100dvh - 6.2rem) * 16 / 7)); } dialog.sheet-signature .sheet-panel .sheet-row .muted, dialog.sheet-signature .sheet-saved .sheet-or { display: none; } dialog.sheet-signature .sheet-saved .sig-preview-box { min-height: 0; } dialog.sheet-signature .sheet-saved .sig-preview { max-height: 3rem; } } /* ---- a status message for when the status line is out of sight ---- */ .toast { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 30; width: max-content; max-width: min(30rem, calc(100vw - 1.5rem)); padding: 0.6rem 0.9rem; border-radius: 10px; background: #1f3b31; color: #fff; font-size: 0.95rem; box-shadow: 0 8px 24px rgba(14, 30, 22, 0.3); opacity: 0; transform: translate(-50%, 0.8rem); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.error { background: #7a1f1f; } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } }