/* Prototype-only layout. NOT components — nothing here is imported by the app.
 * Anything that survives review gets promoted into design/components/ properly.
 * The three candidates this flow found are named in index.html. */

body { background: var(--color-surface-sunken); min-block-size: 100vh; }
[tabindex="-1"]:focus { outline: none; }

.app { min-block-size: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border-block-end: 1px solid var(--color-border);
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
}
.topbar__org { display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-semibold); padding: var(--space-2);
  border-radius: var(--radius-md); min-block-size: var(--target-min);
  display: inline-flex; align-items: center; }
/* Language sits before the plan and pushes both to the end. A real <select>,
 * so the OS draws the popup and it is keyboard- and screen-reader-correct for
 * free — design.md prefers the real control wherever the behaviour allows it. */
.topbar__lang { margin-inline-start: auto; min-block-size: var(--target-min);
  padding-inline: var(--space-2); font: inherit; font-size: var(--text-sm);
  color: var(--color-text); background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  cursor: pointer; }
.topbar__lang:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset); }

/* A button now rather than a label — the tier is the one thing you would want
 * to change from here. Still reads as a badge, because that is what it is. */
.topbar__plan { font-size: var(--text-xs);
  color: var(--color-text-muted); border: 1px solid var(--color-border);
  background: none; font-family: inherit;
  min-block-size: var(--target-min); cursor: pointer;
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); }
.topbar__plan:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.topbar__plan:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset); }
.topbar__back { display: inline-flex; }
.topbar__back[hidden] { display: none; }

.shell { flex: 1; display: flex; min-block-size: 0; }

.nav { background: var(--color-surface-raised);
  border-inline-end: 1px solid var(--color-border);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1);
  inline-size: 15rem; flex: none; }
.nav a { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  color: var(--color-text-muted); text-decoration: none;
  font-size: var(--text-sm); min-block-size: var(--target-min); }
.nav a:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.nav a:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: calc(var(--focus-ring-offset) * -1); }
.nav a[aria-current="page"] { color: var(--color-text); background: var(--color-surface-sunken);
  font-weight: var(--weight-semibold);
  box-shadow: inset var(--border-width-accent) 0 0 var(--color-accent); }
.nav__scrim { display: none; }
.nav__close { display: none; }
.topbar__menu { display: inline-flex; }

@media (max-width: 47.99rem) {
  .nav { position: fixed; inset-block: 0; inset-inline-start: 0;
    z-index: var(--z-modal); inline-size: min(17rem, 82vw);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-out); overflow-y: auto; }
  [data-drawer="open"] .nav { transform: translateX(0); }
  [data-drawer="open"] .nav__scrim { display: block; position: fixed; inset: 0;
    background: rgb(0 0 0 / 0.5); z-index: var(--z-overlay); }
  .nav__close { display: inline-flex; align-self: flex-end; }
}
@media (min-width: 48rem) {
  .topbar__menu { display: none; }
  .topbar__back { display: none; }
  .nav { position: static; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

.main { flex: 1; padding: var(--space-5) var(--space-4); min-inline-size: 0; }
.main__inner { max-inline-size: 62rem; margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--space-4); }
.page-head { display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: baseline; justify-content: space-between; }
.page-head h1 { margin: 0; font-size: var(--text-2xl); line-height: var(--leading-tight); }
.action-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.action-bar .btn { inline-size: 100%; }
@media (min-width: 48rem) { .main { padding: var(--space-6); } .action-bar .btn { inline-size: auto; } }

.back { display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 0; color: var(--color-accent); font: inherit;
  font-size: var(--text-sm); cursor: pointer; padding: var(--space-2) 0;
  min-block-size: var(--target-min); align-self: flex-start; }
.back:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset); }

/* ---- modal --------------------------------------------------------------- */
/* A native <dialog>: focus trap, Escape, inert background and focus restore all
 * come with it. The SAME panel is moved between the phone view and the dialog,
 * so the two can never drift apart. */
.modal {
  inline-size: min(42rem, calc(100vw - var(--space-6)));
  max-block-size: calc(100vh - var(--space-7));
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
.modal::backdrop { background: rgb(0 0 0 / 0.55); }
.modal__body { padding: var(--space-5); }

/* ---- tabs ---------------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1);
  border-block-end: 1px solid var(--color-border); }
.tab { background: none; border: 0; font: inherit; font-size: var(--text-sm);
  color: var(--color-text-muted); cursor: pointer;
  padding: var(--space-3) var(--space-4); min-block-size: var(--target-min);
  border-block-end: var(--border-width-accent) solid transparent; margin-block-end: -1px; }
.tab:hover { color: var(--color-text); }
.tab[aria-selected="true"] { color: var(--color-text);
  font-weight: var(--weight-semibold); border-block-end-color: var(--color-accent); }
.tab:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: calc(var(--focus-ring-offset) * -1); }


/* Count on a tab — "Still out 3". Sits on the tab rather than in the panel
   because the number is the reason to go there. */
.tab__count { display: inline-block; margin-inline-start: var(--space-2);
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  background: var(--color-surface-sunken); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: 0 var(--space-2); }
.tab[aria-selected="true"] .tab__count { background: var(--color-accent);
  color: var(--color-text-on-accent); border-color: var(--color-accent); }
.proto__taps { font-variant-numeric: tabular-nums; border: 1px solid currentcolor;
  border-radius: var(--radius-full); padding: 2px var(--space-3); }
.proto__taps b { font-weight: var(--weight-bold); }