/* A drycraf server’s own pages: the setup’s layout, and the few layouts OZx’s views need beyond @drycraf/scene’s
   widgets. Everything that makes them look like drycraf is scene.css’s; portal.css adds the parts it lacks. */

.portal { min-height: 100svh; padding-bottom: 3rem; }

/* The setup: the lead and its steps at the left, the step being answered beside it */
.setup { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 46rem); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: start; padding: 2rem var(--dc-gutter) 0; }
.setup-alone { grid-template-columns: minmax(0, 40rem); }
.setup-lead { display: grid; gap: 1rem; align-content: start; }
.setup-step { display: grid; gap: 1rem; align-content: start; min-width: 0; padding: 1.25rem 1.4rem; border-radius: 12px; }
.setup-step h2 { color: var(--vellum); }
.setup-steps { margin-top: 0.5rem; }
.setup-steps > button:disabled { cursor: default; }
.setup-steps > button.next { opacity: 0.55; }
.setup-step-n { color: var(--ember); font-variant-numeric: tabular-nums; }
.setup-steps .done .setup-step-n, .setup-steps .done em { color: var(--rune); }
.setup-facts { display: grid; gap: 0.15rem; padding-top: 1rem; border-top: 1px solid var(--dc-line); color: var(--heather); }
.setup-facts dt { opacity: 0.75; }
.setup-facts dd { margin-bottom: 0.4rem; overflow-wrap: anywhere; color: var(--vellum); }
.setup-small { color: var(--heather); overflow-wrap: anywhere; }
.setup-dns { padding: 0.75rem 1rem; border: 1px solid rgb(160 144 201 / 0.3); border-radius: 8px; background: rgb(14 6 24 / 0.8); }
.setup-dns dt { color: var(--vellum); }
.setup-records { display: grid; gap: 0.5rem; }
.setup-record .dc-state { white-space: normal; }
.setup-panel:empty { display: none; }
.setup-push { display: grid; gap: 0.25rem; margin-bottom: 0.75rem; }
.setup-push ol { list-style: decimal; padding-left: 1.25rem; display: grid; gap: 0.25rem; color: var(--heather); }

/* OZx’s People and roles: the list, and each person in scene’s slide-over */
.people-table tbody tr { cursor: pointer; }
.people-name { color: var(--vellum); font-weight: 700; }
.people-email { display: block; }
.people-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.people-handover { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 40rem) { .people-two, .people-handover { grid-template-columns: minmax(0, 1fr); } }
textarea.dc-input { width: 100%; }

@media (max-width: 60rem) {
  .setup { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* A place whose data is still on its way: a thin bar of the place's accent, for the moment it takes. */
.dc-w-loading { height: 2px; margin-top: 1rem; overflow: hidden; border-radius: 1px; background: var(--w-line-soft); }
.dc-w-loading-bar { display: block; width: 30%; height: 100%; background: var(--dc-accent, var(--ember)); animation: dc-w-loading 0.9s ease-in-out infinite; }
@keyframes dc-w-loading { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .dc-w-loading-bar { animation: none; width: 100%; opacity: 0.4; } }

/* OZx's own text outside scene's widgets (a status line, the drawer's title) at the widgets'
   one size, as CEDE has it. */
html.dc-shell-on :is(.dc-status, .drawer-head h2) { font-size: var(--w-sm); }

/* Sign-in and SSO: the providers to pick from, and a provider's steps */
.sso-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.sso-steps { display: grid; gap: 6px; padding-left: 1.2rem; list-style: decimal; color: var(--w-muted); font-size: var(--w-sm); }

/* People and roles, narrow: one Access cell of badges in place of a column per product (the full table is in each
   person's sheet). */
.people-acc { display: none; }
@media (max-width: 70rem) {
  .people-table .people-prod { display: none; }
  .people-table .people-acc { display: table-cell; }
  .people-acc .dc-w-cell { flex-wrap: wrap; white-space: normal; }
}

/* The bell in OZx's bar: a count of what needs an admin, and under it a panel of one small card each (scene's
   attention rows), drawn as scene's find list is. */
.ozx-bell { position: relative; flex: none; }
.ozx-bell-btn { position: relative; }
.ozx-bell-count { position: absolute; top: 3px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--w-high); color: var(--w-deep); font-size: var(--w-xs); font-weight: 700; line-height: 15px; text-align: center; pointer-events: none; }
.ozx-bell-count[data-kind="bad"] { background: var(--w-critical); }
.ozx-bell-count[hidden] { display: none; }
.ozx-bell-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; width: min(400px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-panel); box-shadow: 0 12px 32px var(--w-shadow-c), 0 0 0 1px var(--dc-accent-dim); }
.ozx-bell-panel[hidden] { display: none; }
.ozx-bell-panel > .dc-w-text { margin: 0; padding: 8px 10px 10px; }
.ozx-bell-panel .dc-w-attention li { grid-template-columns: auto minmax(0, 1fr) auto; margin: 4px 0; border-top: 1px solid var(--w-border); border-right: 1px solid var(--w-border); border-radius: 6px; background: var(--w-panel-2); cursor: pointer; }
.ozx-bell-panel .dc-w-attention li:hover { background: var(--w-hover); }
.ozx-bell-panel .dc-w-attention li:last-child { border-bottom: 1px solid var(--w-border); }
.ozx-bell-panel .dc-w-attention li > .dc-w-badge { display: inline-block; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
.ozx-bell-panel .dc-w-attention-text span { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 60rem) { .ozx-bell-panel { position: fixed; top: calc(var(--w-bar) + 4px); left: 8px; right: 8px; width: auto; } }