/* ==========================================================================
   Amana Design System: layouts
   1. Mobile app shell (phone frame, app bar, tab bar, bottom CTA, in-frame sheet)
   2. Dashboard shell (sidebar, topbar, page, panels, split views)
   3. Web shell (header, hero, sections, footer)
   4. Wireframe board (frames, flow links, annotations list)
   ========================================================================== */

/* ==========================================================================
   1. MOBILE APP
   Android first (the primary device in Egypt), iOS-safe: 48dp targets, thumb-zone
   primary actions, bottom sheets instead of modals, back at the start edge.
   ========================================================================== */
.phone {
  position: relative; display: flex; flex-direction: column; flex: none;
  width: var(--phone-w); height: var(--phone-h); max-width: 100%;
  background: var(--bg); color: var(--text);
  border-radius: 2.25rem; border: 1px solid var(--border-strong); overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 6px var(--surface-sunken), 0 0 0 7px var(--border);
}
.phone--tall { height: 980px; }
.phone--auto { height: auto; min-height: var(--phone-h); }
.phone__status { flex: none; height: 2.75rem; display: flex; align-items: center; justify-content: space-between; padding-inline: 1.5rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; background: var(--bg); direction: ltr; }
.phone__status .icons { display: flex; gap: 6px; align-items: center; }
.phone__status .icon { --icon-size: 14px; stroke-width: 2.2; }
.phone--surface .phone__status, .phone--surface { background: var(--surface); }
.phone__screen { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.phone__screen::-webkit-scrollbar { width: 0; }
.phone__pad { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.phone__home { flex: none; height: 1.25rem; display: grid; place-items: center; background: inherit; }
.phone__home::after { content: ""; width: 7rem; height: 4px; border-radius: 2px; background: var(--text); opacity: 0.35; }

.appbar { flex: none; display: flex; align-items: center; gap: var(--space-1); min-height: 3.5rem; padding-inline: var(--space-1) var(--space-2); background: var(--bg); }
.appbar--surface { background: var(--surface); border-block-end: 1px solid var(--border); }
.appbar__title { flex: 1; font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 1.3; padding-inline: var(--space-2); }
.appbar__title small { display: block; font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--fw-regular); }
.appbar--large { align-items: flex-end; padding-block: var(--space-2); }
.appbar--large .appbar__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); padding-inline: var(--space-3); }

.tabbar { flex: none; display: grid; grid-template-columns: repeat(var(--tabs, 5), 1fr); background: var(--surface); border-block-start: 1px solid var(--border); padding-block: var(--space-1) 0; }
.tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3.75rem; color: var(--text-2); font-size: 0.6875rem; font-weight: var(--fw-medium); text-decoration: none; line-height: 1.2; }
.tabbar .icon { --icon-size: 24px; }
.tabbar [aria-current="page"] { color: var(--brand); font-weight: var(--fw-semibold); }
.tabbar [aria-current="page"] .tabbar__pill { background: var(--brand-subtle-2); }
.tabbar__pill { display: grid; place-items: center; width: 3.5rem; height: 2rem; border-radius: var(--radius-pill); transition: background-color var(--dur-base) var(--ease-out); }
.tabbar .count { position: absolute; inset-block-start: 4px; inset-inline-start: calc(50% + 8px); }
[data-surface="worker"] .tabbar a { min-height: 4.25rem; font-size: 0.75rem; }

.bottom-cta { flex: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface); border-block-start: 1px solid var(--border); }
.bottom-cta .row { gap: var(--space-2); }
.bottom-cta .row > .btn:first-child { flex: 1; }

/* In-frame overlay: shows a sheet or dialog on top of a wireframe without a real <dialog> */
.phone__overlay { position: absolute; inset: 0; z-index: var(--z-modal-backdrop); background: var(--scrim); display: flex; align-items: flex-end; }
.phone__sheet { width: 100%; background: var(--surface-2); border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); padding: var(--space-2) var(--space-4) var(--space-5); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-3); max-height: 85%; }
.phone__sheet::before { content: ""; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto var(--space-1); }
.phone__sheet--center { align-self: center; margin: auto var(--space-4); width: auto; border-radius: var(--radius-lg); }
.phone__sheet--center::before { display: none; }

.section-title { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.section-title a { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.hscroll { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); padding-block-end: var(--space-1); scrollbar-width: none; }
.hscroll > * { scroll-snap-align: start; flex: none; }
.hscroll::-webkit-scrollbar { display: none; }

/* Onboarding / splash */
.splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); background: var(--brand); color: var(--on-brand); padding: var(--space-8); text-align: center; }
[data-theme="dark"] .splash, .splash--fixed { background: var(--surface-brand); color: var(--on-surface-brand); }
.progress-dots { display: flex; gap: 6px; justify-content: center; }
.progress-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.progress-dots i.on { width: 24px; border-radius: 4px; background: var(--brand); }

/* ==========================================================================
   2. DASHBOARD (office console and admin)
   Compact density is the default; set data-density="compact" on the shell.
   ========================================================================== */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; background: var(--bg); }
.shell.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
.sidebar {
  position: sticky; inset-block-start: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-3); background: var(--surface); border-inline-end: 1px solid var(--border); overflow-y: auto; z-index: var(--z-sticky);
}
.sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-2); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text); text-decoration: none; }
.sidebar__brand .logo { height: 2rem; width: auto; }
.sidebar__org { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--fs-sm); }
.nav-group { display: grid; gap: 2px; }
.nav-group__label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-3); }
.nav-item {
  display: flex; align-items: center; gap: var(--space-3); min-height: 2.5rem; padding-inline: var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-2); font-size: var(--fs-md); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-item:hover { background: var(--hover-wash); color: var(--text); }
.nav-item .icon { --icon-size: 19px; }
.nav-item[aria-current="page"] { background: var(--brand-subtle-2); color: var(--brand-subtle-fg); font-weight: var(--fw-semibold); }
.nav-item .count { margin-inline-start: auto; }
.nav-item__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell.is-collapsed .nav-item__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.shell.is-collapsed .nav-group__label, .shell.is-collapsed .sidebar__org > :not(:first-child), .shell.is-collapsed .sidebar__brand span, .shell.is-collapsed .nav-item .count { display: none; }
.shell.is-collapsed .nav-item { justify-content: center; padding-inline: 0; }
.sidebar__foot { margin-block-start: auto; display: grid; gap: var(--space-2); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-h); padding-inline: var(--space-6); background: var(--surface); border-block-end: 1px solid var(--border); }
.topbar .search { flex: 1 1 24rem; max-width: 30rem; }
.topbar__spacer { flex: 1; }
.page { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 90rem; margin-inline: auto; }
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.page__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.3; }
.page__sub { color: var(--text-2); font-size: var(--fs-md); margin-block-start: 2px; }
.page__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; display: flex; flex-direction: column; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--border); min-height: 3.5rem; }
.panel__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.panel__body { padding: var(--space-5); }
.panel__body--flush { padding: 0; }
.panel__foot { padding: var(--space-3) var(--space-5); border-block-start: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--text-2); }

.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }
@media (max-width: 1199px) { .col-3 { grid-column: span 6; } .col-4, .col-5 { grid-column: span 6; } .col-7, .col-8, .col-9 { grid-column: span 12; } }
@media (max-width: 839px) { .dash-grid > * { grid-column: span 12; } }

.kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.kpi-strip > * { padding: var(--space-4) var(--space-5); }
.kpi-strip > * + * { border-inline-start: 1px solid var(--border); }
@media (max-width: 1199px) { .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-strip > :nth-child(3) { border-inline-start: 0; } .kpi-strip > :nth-child(n+3) { border-block-start: 1px solid var(--border); } }

.filters-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.filters-bar .search { flex: 1 1 14rem; max-width: 22rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: var(--space-4); align-items: start; }
.split--list { grid-template-columns: 22rem minmax(0, 1fr); }
@media (max-width: 1199px) { .split, .split--list { grid-template-columns: minmax(0, 1fr); } }
.sticky-side { position: sticky; inset-block-start: calc(var(--topbar-h) + var(--space-4)); }

/* Command palette (opened with Ctrl/Cmd+K; markup in docs) */
.cmdk { width: min(40rem, calc(100vw - 2rem)); margin: 10vh auto auto; background: var(--surface-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.cmdk__input { width: 100%; height: 3.5rem; padding-inline: var(--space-5); border: 0; border-block-end: 1px solid var(--border); background: transparent; font-size: var(--fs-lg); }
.cmdk__input:focus { outline: none; box-shadow: none; }
.cmdk__list { max-height: 20rem; overflow: auto; padding: var(--space-2); }

/* Admin review workbench: evidence on one side, decision on the other */
.workbench { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1199px) { .workbench { grid-template-columns: minmax(0, 1fr); } }
.viewer { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); min-height: 22rem; display: grid; place-items: center; position: relative; color: var(--text-3); }
.viewer__tools { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); display: flex; gap: var(--space-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.checklist { display: grid; gap: var(--space-2); }
.checklist .choice { border: 1px solid var(--border); border-radius: var(--radius-sm); padding-inline: var(--space-3); background: var(--surface); }

/* Mobile collapse for the dashboard shell */
.menu-toggle { display: none; }
@media (max-width: 839px) {
  .shell, .shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(18rem, 86vw); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out-expo); z-index: var(--z-drawer); box-shadow: var(--shadow-lg); }
  [dir="ltr"] .sidebar { transform: translateX(-100%); }
  .shell.nav-open .sidebar { transform: none; }
  .shell.nav-open::after { content: ""; position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-drawer) - 1); }
  .menu-toggle { display: inline-grid; }
  .topbar { padding-inline: var(--space-3); }
  .page { padding: var(--space-4); }
}

/* ==========================================================================
   3. WEB (marketing and family web app)
   Marketing surfaces use the brand register: more air, larger type, one
   drenched plum moment. Family web app uses the same components as the dashboard.
   ========================================================================== */
.container { width: min(100% - 2 * var(--space-5), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--space-5), var(--container-narrow)); margin-inline: auto; }
.site-header { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--surface); border-block-end: 1px solid var(--border); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-6); min-height: 4.5rem; }
.site-nav { display: flex; align-items: center; gap: var(--space-1); }
.site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--space-3); border-radius: var(--radius-sm); color: var(--text-2); font-weight: var(--fw-medium); font-size: var(--fs-md); text-decoration: none; }
.site-nav a:hover { color: var(--text); background: var(--hover-wash); }
.site-nav a[aria-current="page"] { color: var(--brand); font-weight: var(--fw-semibold); }
@media (max-width: 839px) { .site-nav { display: none; } }

.hero { background: var(--surface-brand); color: var(--on-surface-brand); padding-block: var(--space-20) var(--space-16); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-12); align-items: center; }
@media (max-width: 959px) { .hero { padding-block: var(--space-12); } .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
.hero h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); line-height: 1.25; font-weight: var(--fw-bold); max-width: 18ch; }
.hero__lead { font-size: var(--fs-lg); line-height: var(--lh-loose); color: var(--on-surface-brand-2); max-width: 46ch; margin-block-start: var(--space-4); }
.hero .btn--secondary { --btn-bg: transparent; --btn-border: var(--border-on-brand); --btn-fg: var(--on-surface-brand); }
.hero .btn--secondary:hover { background: oklch(1 0 0 / 0.1); }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-block-start: var(--space-8); color: var(--on-surface-brand-2); font-size: var(--fs-md); }
.hero__proof li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__proof .icon { color: var(--accent-on-brand); }
/* Arch motif: the brand shape, used as a quiet pattern behind the hero device */
.arch-pattern { position: absolute; inset: 0; opacity: 0.08; pointer-events: none; background-image: url("../img/arch-pattern.svg"); background-size: 120px; }

.device { background: var(--bg); border-radius: 1.75rem; border: 1px solid var(--border-strong); padding: 0.5rem; box-shadow: var(--shadow-lg); max-width: 22rem; margin-inline: auto; color: var(--text); }
.device__screen { border-radius: 1.4rem; overflow: hidden; background: var(--bg); }

.section { padding-block: var(--space-20); }
.section--tint { background: var(--surface-sunken); }
.section--brand { background: var(--brand-subtle); }
.section__head { max-width: 40rem; margin-block-end: var(--space-10); }
.section__head h2 { font-size: var(--fs-4xl); line-height: 1.3; font-weight: var(--fw-bold); }
.section__head p { color: var(--text-2); font-size: var(--fs-lg); line-height: var(--lh-loose); margin-block-start: var(--space-3); }
@media (max-width: 839px) { .section { padding-block: var(--space-12); } .section__head h2 { font-size: var(--fs-3xl); } }
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.feature-row + .feature-row { margin-block-start: var(--space-16); }
.feature-row--flip > :first-child { order: 2; }
@media (max-width: 839px) { .feature-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .feature-row--flip > :first-child { order: 0; } }
.feature-row h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.35; }
.feature-row p { color: var(--text-2); font-size: var(--fs-base); line-height: var(--lh-loose); margin-block-start: var(--space-3); max-width: 46ch; }
.checklist-plain { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); }
.checklist-plain li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-md); }
.checklist-plain .icon { color: var(--success-solid); margin-block-start: 0.15rem; --icon-size: 18px; }
.flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); counter-reset: flow; }
.flow-steps > li { counter-increment: flow; display: grid; gap: var(--space-2); align-content: start; }
.flow-steps > li::before { content: counter(flow); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.flow-steps h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.flow-steps p { color: var(--text-2); font-size: var(--fs-md); line-height: var(--lh-base); }
@media (max-width: 839px) { .flow-steps { grid-template-columns: minmax(0, 1fr); } }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
@media (max-width: 959px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.plan--featured { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.plan__price { font-size: var(--fs-4xl); font-weight: var(--fw-bold); font-variant-numeric: lining-nums; line-height: 1.1; }
.plan__price small { font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--text-3); }
.site-footer { background: var(--surface-brand-deep); color: var(--on-surface-brand-2); padding-block: var(--space-12) var(--space-8); }
.site-footer a { color: var(--on-surface-brand-2); text-decoration: none; }
.site-footer a:hover { color: var(--on-surface-brand); text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-8); }
@media (max-width: 839px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-footer h4 { color: var(--on-surface-brand); font-size: var(--fs-md); margin-block-end: var(--space-3); }
.site-footer li { padding-block: 4px; font-size: var(--fs-md); }

/* ==========================================================================
   4. WIREFRAME BOARD
   Frames in a flow, numbered, with a notes column. Same markup renders hi-fi
   or greyscale wire (html[data-fidelity="wire"]).
   ========================================================================== */
.board { padding: var(--space-8) var(--space-6) var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.board__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; max-width: 90rem; width: 100%; margin-inline: auto; }
.board__title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.flow { max-width: 90rem; width: 100%; margin-inline: auto; display: grid; gap: var(--space-5); min-width: 0; }
.flow > * { min-width: 0; }
.flow > .frame { max-width: 100%; overflow-x: auto; }
.browser__body { overflow-x: auto; }
.board > * { min-width: 0; }
.flow__head { display: grid; gap: var(--space-1); }
.flow__head h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--space-3); }
.flow__head p { color: var(--text-2); max-width: 70ch; font-size: var(--fs-md); }
.flow__track { display: flex; gap: var(--space-8); overflow-x: auto; padding: var(--space-4) var(--space-2) var(--space-6); align-items: flex-start; }
.frame { display: flex; flex-direction: column; gap: var(--space-3); flex: none; position: relative; }
.frame__label { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); max-width: var(--phone-w); }
.frame__num { flex: none; display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-inline: 6px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.frame__note { font-size: var(--fs-xs); color: var(--text-2); font-weight: var(--fw-regular); max-width: var(--phone-w); line-height: 1.6; }
.frame__notes { max-width: var(--phone-w); display: grid; gap: var(--space-1); font-size: var(--fs-xs); color: var(--text-2); }
.frame__notes li { display: flex; gap: var(--space-2); align-items: flex-start; line-height: 1.55; }
.frame__notes b { flex: none; display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #d4351c; color: #fff; font-size: 10px; }
.frame--desktop { width: 100%; max-width: 90rem; }
.browser { border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--bg); }
.browser__bar { display: flex; align-items: center; gap: var(--space-3); height: 2.5rem; padding-inline: var(--space-3); background: var(--surface-sunken); border-block-end: 1px solid var(--border); direction: ltr; }
.browser__dots { display: flex; gap: 6px; } .browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.browser__url { flex: 1; max-width: 28rem; height: 1.625rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; padding-inline: var(--space-3); font-size: var(--fs-xs); color: var(--text-3); }
.browser__body { position: relative; }
.browser--scroll .browser__body { max-height: 46rem; overflow: auto; }
.browser .shell { min-height: 46rem; }
.browser .sidebar { position: static; height: auto; min-height: 46rem; }
.browser .topbar { position: static; }
.browser .site-header { position: static; }
.flow-link { flex: none; align-self: center; color: var(--text-3); display: grid; place-items: center; }
.toolbar-fixed { position: sticky; inset-block-start: 0; z-index: var(--z-tooltip); background: var(--surface); border-block-end: 1px solid var(--border); }