/* The browser node's page: where its cards sit and the few things only it
   draws. Every colour, radius and type size is a ui.css token. */
@layer ui, app;

@layer app {
  [hidden] { display: none !important; }
  html, body { margin: 0; height: 100%; }
  body { font-size: .9375rem; line-height: 1.5; }
  #shell, .shell { height: 100%; display: flex; flex-direction: column; }
  .mono, code { font-family: var(--font-mono); font-size: .8125rem; font-variant-ligatures: none; }
  .dim { color: var(--muted-foreground); }
  .small { font-size: .8125rem; color: var(--muted-foreground); margin: 0; }
  p { margin: 0; }

  /* The bar: the account's name, and two standing facts that whisper. */
  .bar {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .5rem 1rem;
    border-bottom: 1px solid var(--border); background: var(--background);
  }
  .brand { font-weight: 600; margin-right: .25rem; letter-spacing: -.01em; }
  .brand .who { font-weight: 700; color: var(--brand-text); }
  .chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--muted-foreground); }

  /* Before the script: four cards in a grid of the same shape as the first
     workspace (tiles.ts, HOME), so nothing moves when it runs. */
  .panes {
    flex: 1; display: grid; gap: .75rem; padding: .375rem; min-height: 0; background: var(--night);
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 50fr) minmax(0, 10fr) minmax(0, 40fr);
    grid-template-areas: "note add" "machines add" "machines devices";
  }
  /* Tiled: each pane where app.tsx's sheet puts it (--x, --y, --w, --h as
     fractions), and only the current workspace's shown. */
  .panes[data-tiled] { display: block; position: relative; }
  /* --tabs: how many tab strips sit on its top edge, each --strip tall. */
  .panes { --strip: 2rem; }
  .panes[data-tiled] > .pane {
    display: none; position: absolute; box-sizing: border-box;
    left: calc(var(--x) * 100% + .375rem); top: calc(var(--y) * 100% + .375rem + var(--tabs, 0) * var(--strip));
    width: calc(var(--w) * 100% - .75rem); height: calc(var(--h) * 100% - .75rem - var(--tabs, 0) * var(--strip));
  }
  /* A container as tabs (SYS-18): its strip across its top, one tab a pane. */
  .panes > .tabstrip { display: none; }
  .panes[data-tiled] > .tabstrip {
    position: absolute; box-sizing: border-box; align-items: flex-end; gap: .125rem; overflow-x: auto; scrollbar-width: none;
    left: calc(var(--x) * 100% + .375rem); top: calc(var(--y) * 100% + .375rem + var(--tabs, 0) * var(--strip));
    width: calc(var(--w) * 100% - .75rem); height: var(--strip); padding-bottom: .125rem;
  }
  .tabstrip .tab {
    display: inline-flex; align-items: center; min-width: 0; max-width: 14rem; flex: 0 1 auto; height: 1.75rem;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--background); color: var(--muted-foreground);
  }
  .tabstrip .tab[aria-current] { color: var(--foreground); background: var(--card); }
  .tabstrip .tab[aria-current][data-focused] { border-color: var(--ring); }
  .tabstrip button { border: 0; background: none; color: inherit; font: inherit; font-size: .8125rem; cursor: pointer; height: 100%; }
  .tabstrip .tab-go { padding: 0 .25rem 0 .625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .tabstrip .tab-close { padding: 0 .5rem; opacity: .6; }
  .tabstrip .tab-close:hover, .tabstrip .tab-close:focus-visible { opacity: 1; }
  .tabstrip .tab-add { flex: none; width: 1.75rem; height: 1.75rem; border: 1px dashed var(--border); border-radius: calc(var(--radius) - 4px); color: var(--muted-foreground); }
  /* Between two panes, a border to drag (SYS-19), as wide as the gap. */
  .panes > .gutter { display: none; }
  .panes[data-tiled] > .gutter { position: absolute; z-index: 5; touch-action: none; }
  .panes[data-tiled] > .gutter[data-dir="h"] {
    width: .75rem; cursor: col-resize;
    left: calc((var(--x) + var(--at) * var(--w)) * 100% - .375rem); top: calc(var(--y) * 100% + .375rem + var(--tabs, 0) * var(--strip));
    height: calc(var(--h) * 100% - .75rem - var(--tabs, 0) * var(--strip));
  }
  .panes[data-tiled] > .gutter[data-dir="v"] {
    height: .75rem; cursor: row-resize;
    top: calc((var(--y) + var(--at) * var(--h)) * 100% - .375rem); left: calc(var(--x) * 100% + .375rem); width: calc(var(--w) * 100% - .75rem);
  }
  .panes[data-tiled] > .gutter:hover, .panes[data-tiled] > .gutter[data-dragging] { background: color-mix(in srgb, var(--ring) 35%, transparent); border-radius: 999px; }
  @media (pointer: coarse) {
    .panes[data-tiled] > .gutter[data-dir="h"] { width: 1.25rem; margin-left: -.25rem; }
    .panes[data-tiled] > .gutter[data-dir="v"] { height: 1.25rem; margin-top: -.25rem; }
  }
  /* A pane's zoom (SYS-21): its content drawn that much larger; the
     terminal sets its own font size instead, so its cells stay crisp. */
  .pane > .ui-card-content, .pane > iframe { zoom: var(--zoom, 1); }
  .chrome .zoomed {
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: none; color: var(--muted-foreground);
    font: 500 .6875rem/1 var(--font-sans); padding: .25rem .375rem; cursor: pointer;
  }
  .pane { outline: none; }
  .panes[data-tiled] > .pane[data-focused] { border-color: var(--brand); }
  .panes > .empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 1rem; color: var(--muted-foreground); font-size: .875rem; }

  /* The workspaces in the bar, the panes of this one, and two menus. */
  .spaces { display: inline-flex; gap: .25rem; }
  .spaces button, .more .nums button {
    min-width: 1.75rem; height: 1.75rem; padding: 0 .375rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
    background: var(--background); color: var(--muted-foreground); font: 500 .8125rem/1 var(--font-sans); cursor: pointer;
  }
  .spaces button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: var(--brand-foreground); }
  .strip { display: inline-flex; flex-wrap: wrap; gap: .125rem .75rem; margin-right: auto; min-width: 0; }
  .strip button { border: 0; background: none; padding: .125rem 0; font: inherit; font-size: .8125rem; color: var(--muted-foreground); cursor: pointer; text-underline-offset: 4px; }
  .strip button[aria-current] { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--ring); }
  details.more { position: relative; }
  details.more > summary {
    list-style: none; cursor: pointer; font-size: .8125rem; color: var(--muted-foreground); padding: .125rem .5rem;
    border-radius: calc(var(--radius) - 4px);
  }
  details.more > summary::-webkit-details-marker { display: none; }
  details.more > summary:hover, details.more[open] > summary { color: var(--foreground); background: var(--muted); }
  details.more > .menu {
    position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20; min-width: 13rem; display: grid; gap: .125rem; padding: .375rem;
    background: var(--popover, var(--card)); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md, var(--shadow-xs));
    text-transform: none; letter-spacing: normal; font-weight: 400;
  }
  .more .menu > button {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0; background: none; padding: .3rem .5rem;
    font: inherit; font-size: .8125rem; color: var(--foreground); text-align: left; border-radius: calc(var(--radius) - 4px); cursor: pointer;
  }
  .more .menu > button:hover, .more .menu > button:focus-visible { background: var(--muted); }
  .more .menu .to { font-size: .75rem; color: var(--muted-foreground); padding: .25rem .5rem 0; }
  .more .nums { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0 .5rem .25rem; }
  details.keys-menu > .menu { width: 24rem; max-width: calc(100vw - 2rem); padding: .75rem; gap: .5rem; }
  .keys-menu dl { display: grid; grid-template-columns: auto 1fr; gap: .375rem .75rem; margin: 0; font-size: .8125rem; }
  .keys-menu dd { margin: 0; color: var(--muted-foreground); }
  .chrome { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
  .chrome .ui-kbd, .more .ui-kbd { margin-left: .375rem; font-size: .6875rem; }
  .pane .ui-card-action { flex-wrap: wrap; justify-content: flex-end; }
  /* The pane's own items: in its header when it is wide, else only in its
     ⋯ menu, so a small pane's header stays one line. */
  .pane { container-type: inline-size; }
  .more .menu > button.own { display: none; }
  @container (max-width: 40rem) {
    .chrome > .own { display: none; }
    .more .menu > button.own { display: flex; }
    .chrome > .ui-button .ui-kbd { display: none; }
  }
  @media (hover: none) { .chrome .ui-kbd, .more .menu > button .ui-kbd { display: none; } }
  .pane { gap: 1rem; padding: 1rem 0; overflow: auto; min-width: 0; box-shadow: var(--shadow-xs); }
  .pane .ui-card-header { padding: 0 1rem; align-items: center; }
  .pane .ui-card-content { padding: 0 1rem; }
  .pane .ui-card-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); font-weight: 600; }
  .pane .ui-card-action { grid-row: 1; }
  .stack { display: grid; gap: .5rem; align-content: start; }
  .note { grid-area: note; }
  .add { grid-area: add; }
  .devices { grid-area: devices; }
  .machines { grid-area: machines; }
  /* The whole line shows, wrapped: what is run on a machine is read first. */
  .install > code { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; padding: .25rem 0; }
  .install { align-items: flex-start; }
  .lives { font-size: .75rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
  .lives b { color: var(--foreground); font-weight: 500; }

  .note-wrap { flex: 1; display: flex; }
  .note-body { flex: 1; outline: none; max-width: 68ch; border-radius: calc(var(--radius) - 4px); }
  .note-body h1 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; margin: .25rem 0 .75rem; }
  .note-body p { margin: 0 0 .75rem; }
  .note-body:focus-visible { box-shadow: inset 2px 0 0 var(--ring); }

  /* Devices and machines: a row each, its name, its badges, its key. */
  .devlist { list-style: none; margin: 0; padding: 0; }
  .devlist li { display: flex; gap: .5rem .75rem; align-items: center; flex-wrap: wrap; padding: .5rem 0; border-bottom: 1px solid var(--border); }
  .devlist li:last-child { border-bottom: 0; }
  .devlist .mono { margin-left: auto; }
  .devlist .actions { display: inline-flex; gap: .375rem; }
  .devlist .via { font-size: .75rem; color: var(--muted-foreground); }

  /* Files: a folder in columns, its stars beside each name. */
  .files { list-style: none; margin: .5rem 0 0; padding: 0; columns: 16em; column-gap: 1.5rem; font-size: .875rem; }
  .files li { display: flex; align-items: baseline; gap: .25rem; break-inside: avoid; padding: .1rem 0; }
  .files li > button:first-child { flex: 0 1 auto; min-width: 0; }
  .files button:not(.star), .crumbs button.go, .starred li > button.go {
    border: 0; background: none; padding: 0; font: inherit; color: var(--foreground); text-align: left; overflow-wrap: anywhere; cursor: pointer;
    text-underline-offset: 3px;
  }
  .files button:not(.star):hover, .crumbs button.go:hover, .starred li > button.go:hover { text-decoration: underline; }
  .files button.dir { font-weight: 500; }
  .files button.other { color: var(--muted-foreground); }
  /* Stars whisper: an outline until pressed, then the brand. */
  button.star { border: 0; background: none; padding: 0 .25rem; color: var(--muted-foreground); opacity: .45; font-size: .8125rem; line-height: 1; cursor: pointer; }
  button.star:hover, button.star:focus-visible { opacity: 1; }
  button.star[aria-pressed="true"] { color: var(--brand-text); opacity: 1; }
  .starred { margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
  .starred h3 { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); margin: 0 0 .25rem; }
  .starred ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  .starred li { display: flex; align-items: baseline; gap: .375rem; padding: .2rem 0; min-width: 0; }
  .starred li > button.go { display: flex; flex-direction: column; min-width: 0; font-size: .875rem; }
  .starred li > button.go .where { font-size: .75rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
  .starred li[data-state="away"] > button.go, .starred li[data-state="reaching"] > button.go { color: var(--muted-foreground); }
  .starred li[data-state="gone"] > button.go { color: var(--muted-foreground); text-decoration: line-through; cursor: default; }
  .starred .gone { font-size: .75rem; color: var(--muted-foreground); }
  button.link { border: 0; padding: 0; background: none; font: inherit; color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .375rem; margin: .75rem 0 0; font-size: .8125rem; }
  .crumbs button.go { color: var(--muted-foreground); }
  .crumbs [aria-current] { color: var(--foreground); font-weight: 500; }
  .crumbs .sep { color: var(--muted-foreground); opacity: .6; }
  .file {
    background: var(--code-bg); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .5rem .75rem; margin: .5rem 0 0;
    max-height: 50vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .8125rem/1.5 var(--font-mono);
  }

  /* The tools: a header, and the rest of the pane theirs. Never in the grid
     before the script. */
  .editor, .desktop, .terminal { display: flex; flex-direction: column; padding: .75rem 0 0; gap: .5rem; overflow: hidden; }
  .panes:not([data-tiled]) > :is(.editor, .desktop, .terminal) { display: none; }
  .editor iframe { flex: 1; width: 100%; min-height: 0; border: 0; border-top: 1px solid var(--border); }
  /* The terminal draws its own text; its colours and font come from here. */
  .terminal .term { flex: 1; min-height: 0; padding: .25rem .5rem; background: var(--code-bg); color: var(--foreground); font-family: var(--font-mono); border-top: 1px solid var(--border); }
  /* xterm.css paints its viewport black, and the style xterm writes to match
     its theme is refused by the CSP; the pane's ground shows through instead. */
  .terminal .term .xterm-viewport { background-color: transparent !important; }
  .desktop canvas { flex: 1; width: 100%; min-height: 0; background: #000; outline: none; touch-action: none; border-radius: 0 0 calc(var(--radius) + 3px) calc(var(--radius) + 3px); }
  .noscript { padding: 1rem; }

  /* A phone's bottom bar: only on a phone's width (below). */
  .deck { display: none; }

  /* A phone (SYS-28): a deck, one pane at a time, filling the room between
     the bar and the bottom bar, the same panes as the tiles. The shell is
     held to the visual viewport (app.tsx's --vv-h), so the on-screen
     keyboard pushes the bottom bar up rather than covering it. Before the
     script, the note alone, as it will be once tiled. */
  @media (max-width: 720px) {
    .shell { position: fixed; left: 0; right: 0; top: var(--vv-top, 0); height: var(--vv-h, 100dvh); }
    .panes, .panes[data-tiled] { display: flex; flex-direction: column; padding: .375rem; gap: 0; }
    .panes:not([data-tiled]) > .pane:not(.note) { display: none; }
    .panes > .pane, .panes[data-tiled] > .pane { position: relative; left: auto; top: auto; width: auto; height: auto; flex: 1 1 0; min-height: 0; }
    .panes[data-tiled] > .pane:not([data-focused]) { display: none !important; }
    .panes[data-tiled] > :is(.tabstrip, .gutter) { display: none !important; }
    .note-body h1 { font-size: 1.25rem; }
    .devlist .mono { margin-left: 0; }

    /* The top bar: the name, the standing facts as dots, and the two menus
       a thumb needs; the workspaces and the panes are in the bottom bar. */
    .bar { flex-wrap: nowrap; gap: .5rem; padding: 0 .5rem 0 1rem; padding-top: env(safe-area-inset-top); }
    .bar > :is(.spaces, .strip, .launch, .docs) { display: none; }
    .bar .chip > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .bar .chip { min-width: 1rem; }
    .bar > [data-key-chip] { margin-left: auto; }
    .bar details.more > .menu { position: fixed; left: .5rem; right: .5rem; top: 3.25rem; width: auto; max-width: none; max-height: calc(var(--vv-h, 100dvh) - 7.5rem); overflow: auto; }

    .deck {
      display: flex; align-items: center; gap: .25rem; padding: .25rem .5rem calc(.25rem + env(safe-area-inset-bottom));
      border-top: 1px solid var(--border); background: var(--background); touch-action: none; user-select: none;
    }
    .deck > button, .deck summary {
      display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .5rem; box-sizing: border-box;
      border: 0; border-radius: calc(var(--radius) - 2px); background: none; color: var(--foreground); font: 500 1rem/1 var(--font-sans); cursor: pointer;
    }
    .deck > .deck-step { font-size: 1.5rem; }
    .deck > button:disabled { color: var(--muted-foreground); opacity: .5; cursor: default; }
    .deck > .deck-name { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .125rem; border: 1px solid var(--border); }
    .deck-name .label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
    .deck-name .count { font-size: .75rem; color: var(--muted-foreground); }
    .deck summary { border: 1px solid var(--border); }
    .deck details.more > .menu { top: auto; bottom: calc(100% + .5rem); right: 0; min-width: 0; width: max-content; max-width: calc(100vw - 1rem); }
    .deck .nums button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: var(--brand-foreground); }

    /* A pane's ⋯ menu: over the pane, as wide as it, scrolled if long. */
    .pane details.more { position: static; }
    .pane details.more > .menu { left: .5rem; right: .5rem; top: 3.25rem; width: auto; min-width: 0; max-height: calc(100% - 3.75rem); overflow: auto; }

    /* A thumb's targets, 44 px each way (SYS-28). */
    .bar .ui-button, .bar summary, .pane .ui-card-action :is(.ui-button, summary, button.zoomed),
    .more .menu > button, .more .nums button, .launch-list li { min-height: 2.75rem; min-width: 2.75rem; box-sizing: border-box; }
    .bar summary, .pane .ui-card-action summary { display: grid; place-items: center; }
    .more .menu button.link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; vertical-align: middle; }
  }

  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Hold Alt: each control shows its key, from its aria-keyshortcuts
     (app.tsx's hints, SYS-22). The key it names already is hidden meanwhile. */
  :root[data-hints] [aria-keyshortcuts] { position: relative; }
  :root[data-hints] [aria-keyshortcuts] > .ui-kbd { visibility: hidden; }
  :root[data-hints] [aria-keyshortcuts]::after {
    content: attr(aria-keyshortcuts); position: absolute; top: -.5rem; right: -.25rem; z-index: 5; pointer-events: none;
    padding: .0625rem .3125rem; border-radius: calc(var(--radius) - 6px); white-space: nowrap;
    font: 600 .6875rem/1.2 var(--font-sans); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-md);
  }

  /* The overlay layer: the launcher and the help screen (overlay.tsx). */
  .ui-dialog.layer { gap: .75rem; }
  .ui-dialog.launch { top: 15vh; translate: -50% 0; max-width: 36rem; padding: .75rem; }
  .launch-q {
    width: 100%; box-sizing: border-box; padding: .625rem .75rem; font: inherit; font-size: 1rem;
    color: var(--foreground); background: var(--background); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); outline: none;
  }
  .launch-q:focus-visible { border-color: var(--ring); }
  .launch-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
  .launch-list li { display: flex; align-items: center; gap: .5rem; padding: .4375rem .625rem; border-radius: calc(var(--radius) - 4px); cursor: pointer; font-size: .875rem; }
  .launch-list li[aria-selected="true"] { background: var(--muted); }
  .launch-list .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .launch-list .group { font-size: .75rem; color: var(--muted-foreground); }
  .launch-list .none { cursor: default; color: var(--muted-foreground); }
  .ui-dialog.help { max-width: 34rem; }
  .help-keys { display: grid; grid-template-columns: auto 1fr; gap: .4375rem .875rem; margin: 0; font-size: .875rem; }
  .help-keys dt { justify-self: start; }
  .help-keys dd { margin: 0; color: var(--muted-foreground); }
  .ui-overlay[data-backdrop="blur"] { background: oklch(0% 0 0 / 25%); backdrop-filter: blur(6px); }

  /* Pane scope: the same look, over its own pane alone, behind a scrim of
     the pane's size; the other panes stay as they are. */
  .pane:has(> .ui-dialog[data-scope="pane"])::before {
    content: ""; position: absolute; inset: 0; z-index: 9; border-radius: inherit; background: oklch(0% 0 0 / 35%);
  }
  .ui-dialog[data-scope="pane"] {
    position: absolute; z-index: 10; left: 50%; top: 1rem; translate: -50% 0;
    width: calc(100% - 1.5rem); max-width: 24rem; max-height: calc(100% - 2rem); padding: 1rem;
  }
  .field { display: grid; gap: .25rem; font-size: .8125rem; color: var(--muted-foreground); }
  .field input {
    padding: .4375rem .625rem; font: inherit; font-size: .875rem; color: var(--foreground); background: var(--background);
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); outline: none;
  }
  .field input:focus-visible { border-color: var(--ring); }

  /* On a phone the layer sits above the on-screen keyboard: the launcher
     at the top of what is seen, every layer no taller than it (SYS-28). */
  @media (max-width: 720px) {
    .ui-dialog.launch { top: calc(var(--vv-top, 0px) + .5rem); width: calc(100% - 1rem); }
    .launch-list { max-height: calc(var(--vv-h, 100dvh) - 9rem); }
    .ui-dialog.layer { max-height: calc(var(--vv-h, 100dvh) - 1rem); }
  }
}