/* Core layer on top of the ui/ design system (static/ui/ is a synced COPY of ui/assets — never edit it here).
   Real pages reuse the artboard markup but must never render the artboards' fake device chrome, and must be fluid
   instead of fixed 402px / 1280px frames. Pages use <main class="screen page"> (mobile) or
   <main class="desktop page"> (admin). */

.status-bar, .home-indicator, .browser-bar, .lock-screen { display: none !important; }

html, body { min-height: 100%; }
body.surface-mobile { background: var(--paper); }
body.surface-admin { background: var(--paper); }

.screen.page { width: 100%; max-width: 480px; height: auto; min-height: 100vh; min-height: 100dvh; margin: 0 auto;
               overflow: visible; }
.screen.page > .content { overflow: visible; padding-top: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.desktop.page { width: 100%; min-width: 1024px; min-height: 100vh; overflow: visible; }

/* htmx: elements with .htmx-indicator show only while a request runs */
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* error page */
.error-page { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; text-align: center;
              align-items: center; padding: 48px 8px; }
.error-page .code { font: 500 12px/16px var(--font-ui); color: var(--ink-subtle); letter-spacing: .02em; }
.error-fragment { padding: 12px 16px; border-radius: var(--r-md, 12px); background: var(--red-soft); color: var(--red); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* web-admin-b (H7–H11: body.ops). Real controls inside the artboard's span-based fields, fixed overlays instead of
   the artboard's absolute ones, and h1/h2 clashes on the shared admin stylesheet. */
body.ops a { color: inherit; text-decoration: none; }
body.ops .scrim { position: fixed; z-index: 40; display: block; }
body.ops .modal { position: fixed; z-index: 41; max-height: calc(100vh - 48px); overflow-y: auto; }
body.ops .drawer { position: fixed; z-index: 30; overflow-y: auto; width: 480px; }
body.ops .drawer-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(12, 22, 17, .35); }
body.ops .field input, body.ops .field textarea, body.ops .field-search input {
  border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); width: 100%; min-width: 0; padding: 0; }
body.ops .field textarea { resize: vertical; min-height: 66px; line-height: 21px; }
body.ops .field input::placeholder, body.ops .field textarea::placeholder, body.ops .field-search input::placeholder {
  color: var(--ink-subtle); opacity: 1; }
body.ops .input:focus-within .field { box-shadow: inset 0 0 0 2px var(--ink); }
body.ops .input.error .field, body.ops .input.error:focus-within .field { box-shadow: inset 0 0 0 2px var(--red); }
body.ops .field-search:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
body.ops .select { position: relative; }
body.ops .select select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent;
  font: inherit; color: inherit; padding: 0; cursor: pointer; }
body.ops .select:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
body.ops button.toggle { border: 0; cursor: pointer; }
body.ops .toggle[aria-disabled="true"] { cursor: default; }
body.ops .table-foot { border-top: 0; background: none; }
body.ops .table tr.clickable { cursor: pointer; }
body.ops .table tr.clickable:hover td { background: var(--paper); }
body.ops .dropzone { cursor: pointer; position: relative; }
body.ops .dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
body.ops .dropzone.has-file { border-style: solid; color: var(--ink); }
body.ops .checkbox-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
body.ops .checkbox-row input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; margin: 0; cursor: pointer; }
body.ops .pager { display: flex; gap: 8px; }
body.ops .ops-toolbar-2 { display: flex; align-items: center; gap: 12px; margin-top: -8px; }
body.ops .t-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
body.ops .tpl-group { padding: 18px 0 6px; }
body.ops .tpl-row .col { min-width: 0; }
body.ops .tpl-row .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ops .tpl-row form { display: contents; }
body.ops .set-card .input .field .grow { min-width: 0; }
body.ops .toolbar .field-search { min-width: 200px; flex: 1 1 200px; }
body.ops .toolbar > .chips { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }
body.ops .kpi { min-width: 0; }
body.ops .pane .code { white-space: pre-wrap; overflow-wrap: anywhere; }
body.ops .field .unit, body.ops .field .pre { flex: none; white-space: nowrap; }
body.ops .kpi > .t-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* web-owner-b — owner panel G7–G12 (templates/owner/{domain_*,plan*,business*,suspended}.html) */
.ob-page [hidden], .ob-toast[hidden] { display: none !important; }
.ob-break { overflow-wrap: anywhere; min-width: 0; }
/* text inputs that look like the artboard's static values (inline editors, the domain field) */
.ob-input { border: 0; outline: 0; background: transparent; padding: 0; margin: 0; min-width: 0; width: 100%;
            color: inherit; font: inherit; }
.ob-input::placeholder { color: var(--ink-subtle); font-weight: 400; }
.input.ob-field .field { cursor: text; }
.input.ob-field:focus-within:not(.error) .field { box-shadow: inset 0 0 0 2px var(--ink); }
.ob-edit-row { cursor: text; }
.ob-edit-row:focus-within > .chev { color: var(--ink); }
.ob-hours-value { width: 9.5em; flex: none; text-align: right; }
/* buttons/forms laid out as list rows */
.ob-row-btn { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* native controls drawn with the design-system toggle / checkbox / radio */
.ob-toggle, .ob-check, .ob-choice { cursor: pointer; }
.ob-toggle input:checked + .toggle { background: var(--live); justify-content: flex-end; }
.ob-toggle input:disabled + .toggle { opacity: .5; }
.ob-toggle input:focus-visible + .toggle, .ob-check input:focus-visible + .checkbox,
.ob-choice input:focus-visible + .radio { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-check .checkbox .i { visibility: hidden; }
.ob-check input:checked + .checkbox { background: var(--ink); box-shadow: none; }
.ob-check input:checked + .checkbox .i { visibility: visible; }
.ob-choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.ob-choice input:checked + .radio { box-shadow: inset 0 0 0 7px var(--ink); }
/* sticky action bar above the tab bar (G8/G9 "Já adicionei, verificar" / "Verificar agora") */
.ob-bottom { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border-top: 1px solid var(--line);
             padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); }
/* disclosure buttons (share link, remove domain) */
.ob-share > summary, .ob-confirm > summary { list-style: none; cursor: pointer; }
.ob-share > summary::-webkit-details-marker, .ob-confirm > summary::-webkit-details-marker { display: none; }
button.icon-box.ob-copy { border: 0; cursor: pointer; }
.ob-add-hours { border: 0; background: none; padding: 0; cursor: pointer; align-self: flex-start; }
.ob-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
            width: calc(100% - 32px); max-width: 448px; z-index: 50; }
.rec.ob-rec-stack .grid { grid-template-columns: 1fr; gap: 10px; }   /* long TXT proof: name above value */
@media print { .ob-noprint, .tab-bar, .ob-bottom { display: none !important; } .ob-receipt { box-shadow: none; } }