/* The device frames. Three phones run their real applications in iframes
   (apps/frame.js; built by tools/<app>-exhibit from each app's own source).
   The app paints its own interface, its own status strip and its own
   home-indicator inset. What is here is only what the PHONE would draw over
   it — the time, the signal glyphs, the island, the indicator — and none of
   it takes the pointer. Scoped under .ex so it can sit inside the screen
   layer without touching the page around it. */

.dev-screen {
  overflow: hidden;
  border-radius: 44px;
  background: #0a1526;
  -webkit-font-smoothing: antialiased;
}

.ex { position: absolute; inset: 0; background: #05070b; }
.ex-app {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; background: transparent;
}

/* ---- the status bar: 59px, with the island inside it. The app's own
   strip is painted underneath at the same height, so the glyphs sit on the
   bar's material, as they do on a phone. */
.ex-status {
  position: absolute; left: 0; right: 0; top: 0; height: 59px;
  padding: 17px 30px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #e8f1fb; pointer-events: none;
}
.ex-time { letter-spacing: -.01em; }
.ex-island {
  position: absolute; left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px;
  border-radius: 20px; background: #05070b;
}
.ex-sys { display: flex; gap: 5px; align-items: center; margin-top: 2px; }
.ex-sys i { display: block; background: #e8f1fb; }
.ex-sig { width: 17px; height: 11px; clip-path: polygon(0 70%,18% 70%,18% 100%,0 100%,0 70%,27% 45%,45% 45%,45% 100%,27% 100%,27% 45%,55% 22%,73% 22%,73% 100%,55% 100%,55% 22%,82% 0,100% 0,100% 100%,82% 100%); }
.ex-wifi { width: 16px; height: 11px; border-radius: 2px; clip-path: polygon(50% 100%,0 34%,10% 24%,50% 60%,90% 24%,100% 34%); }
.ex-bat { width: 25px; height: 12px; border-radius: 3px; }

/* ---- the home indicator, inside the 34px inset the app leaves for it ---- */
.ex-home {
  position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px;
  border-radius: 3px; background: rgba(232, 241, 251, .92); pointer-events: none;
}

/* ==========================================================================
   The monitor is landscape and its corners are nearly square; a phone is
   portrait with a 44px radius. One class per device family.
   ========================================================================== */
.dev-screen--flat { border-radius: 6px; }

/* ==========================================================================
   Belle Suite — the shell, with the Waveform Generator open, on the monitor.

   Measured off the suite's own source (belle_shell.py, belle_theme.py,
   belle_widgets.py, belle_palette.py, belle_waveform_generator_v3.1.1.py):
   the 68px icon rail, the generator's 34px title bar and 4px progress strip,
   the four-tab inspector with its ruled section headers and 64px label
   column, the live-preview figure, the 78px console and the button row; the
   four palettes; and the suite's bundled type, Belle Sans / Belle Mono
   (static instances of Ubuntu Sans, Ubuntu Font Licence 1.0 — the licence
   ships beside the files). Only what the window looks like maximised on a
   16:10 display is decided here.
   ========================================================================== */
/* WOFF2 first: the same outlines, Latin + Greek + symbols, at a tenth of the
   TTF (pyftsubset --flavor=woff2, the ranges in lab/portfolio/SESSION-NOTES.md);
   the full TTF stays behind it for whatever cannot take WOFF2. */
@font-face { font-family: 'Belle Sans'; src: url('/assets/belle/fonts/BelleSans-Regular.woff2') format('woff2'), url('/assets/belle/fonts/BelleSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Belle Sans'; src: url('/assets/belle/fonts/BelleSans-Medium.woff2') format('woff2'), url('/assets/belle/fonts/BelleSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Belle Sans'; src: url('/assets/belle/fonts/BelleSans-Bold.woff2') format('woff2'), url('/assets/belle/fonts/BelleSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Belle Mono'; src: url('/assets/belle/fonts/BelleMono-Regular.woff2') format('woff2'), url('/assets/belle/fonts/BelleMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Belle Mono'; src: url('/assets/belle/fonts/BelleMono-Bold.woff2') format('woff2'), url('/assets/belle/fonts/BelleMono-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

.wg {
  /* Violet — Night, the default; the module applies the other three */
  --bg: #0A0910; --surface: #12111B; --surface2: #191825; --surface3: #211F30; --surface4: #2A2739;
  --border: #262436; --border-lt: #35324B;
  --primary: #A78BFA; --primary-dk: #6B4FCC; --primary-lt: #C4B2FF; --primary-16: rgba(167,139,250,.16); --on-primary: #0A0910;
  --cyan: #5ECFCF; --success: #4ECB71; --warning: #E8B84B; --danger: #F0616B;
  --text: #ECEAF6; --text2: #A9A5C0; --text3: #8B86A6; --text4: #55526B;
  --console-fg: #4ECB71; --console-bg: #07060C;
  --sans: 'Belle Sans', 'Ubuntu Sans', system-ui, sans-serif;
  --mono: 'Belle Mono', 'Ubuntu Sans Mono', ui-monospace, Menlo, monospace;

  position: absolute; inset: 0; display: flex;
  background: var(--bg); color: var(--text2);
  font: 400 12px/1.25 var(--sans);
  -webkit-font-smoothing: auto;
}
.wg *, .wg *::before, .wg *::after { box-sizing: border-box; }
.wg button, .wg input, .wg select, .wg textarea { font: inherit; color: inherit; }


/* ---- the rail: QFrame#belleRail, 68px, icon above caption ---- */
.wg-rail { flex: 0 0 68px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 8px 6px; gap: 4px; }
.wg-mark { height: 30px; display: flex; justify-content: center; margin-bottom: 8px; }
.wg-mark img { width: 30px; height: 30px; display: block; }
.wg-rbtn { min-height: 58px; border: 0; border-radius: 6px; background: transparent; color: var(--text3); font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 0 3px; cursor: pointer; }
.wg-rbtn img { width: 26px; height: 26px; display: block; }
.wg-rbtn:hover { background: var(--surface3); color: var(--text2); }
.wg-rbtn.is-on { background: var(--primary-16); color: var(--primary); }
.wg-rail .sp { flex: 1 1 auto; }
.wg-rsmall { min-height: 22px; font-size: 10px; border: 1px solid var(--border); color: var(--text3); background: var(--surface3); border-radius: 5px; padding: 0 4px; cursor: pointer; font-weight: 700; }
.wg-rsmall:hover { border-color: var(--primary); color: var(--primary); }

/* ---- the workspace column ---- */
.wg-main { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* a static-facsimile workspace: covers the main column, its own title bar
   with a STATIC badge, and a full-bleed canvas */
.wg-static { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); z-index: 4; }
.wg-static[hidden] { display: none; }
.wg-statbar { flex: 0 0 24px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
.wg-badge { font: 700 9px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--warning); border: 1px solid var(--warning); border-radius: 4px; padding: 3px 7px; }
.wg-statbody { flex: 1 1 auto; min-height: 0; position: relative; }
.wg-statimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; background: var(--bg); }
.wg-statimg[hidden] { display: none; }
.wg-statfig { position: absolute; inset: 0; }
.wg-statfig[hidden] { display: none; }
.wg-statfig canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wg-header { flex: 0 0 34px; display: none; align-items: center; padding-left: 8px; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 700; }
.wg-header.is-on { display: flex; }
.wg-fail { padding: 28px 24px; display: none; flex-direction: column; gap: 8px; }
.wg-fail.is-on { display: flex; }
.wg-fail h3 { margin: 0; color: var(--danger); font-size: 16px; font-weight: 700; }
.wg-fail p { margin: 0; color: var(--text2); font-size: 12px; max-width: 46ch; line-height: 1.4; }
.wg-tool { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wg-tool[hidden] { display: none; }

/* ---- the generator's title bar (QFrame#titleBar, fixed 34px) ---- */
.wg-title { flex: 0 0 34px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.wg-title .t { font-size: 14px; font-weight: 900; letter-spacing: 3px; color: var(--text); white-space: nowrap; }
.wg-title .v { font-size: 10px; letter-spacing: 1px; color: var(--text4); white-space: nowrap; }
.wg-title .sp { flex: 1 1 auto; }
.wg-title .theme { width: 112px; font-size: 9px; color: var(--text3); background: var(--surface2); height: 20px; padding: 0 18px 0 6px; }
.wg-status { font-size: 11px; font-weight: 700; color: var(--success); }
.wg-status.is-busy { color: var(--warning); }
.wg-status.is-error { color: var(--danger); }
.wg-progress { flex: 0 0 4px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
.wg-progress i { display: block; height: 100%; width: 0; background: var(--primary-dk); border-radius: 3px; transition: width .12s linear; }

/* ---- body: the splitter ---- */
.wg-body { flex: 1 1 auto; min-height: 0; display: flex; padding: 4px; }
.wg-left { flex: 0 0 300px; min-width: 300px; display: flex; flex-direction: column; min-height: 0; }
.wg-handle { flex: 0 0 6px; cursor: col-resize; }
.wg-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-left: 4px; min-height: 0; }

/* QTabWidget in document mode, as Fusion draws it: boxed tabs on the panel's
   ground, the current one lifted and joined to the page below it */
.wg-tabbar { flex: 0 0 auto; display: flex; align-items: flex-end; padding: 6px 8px 0; background: var(--bg); border-bottom: 1px solid var(--border-lt); }
.wg-tab { position: relative; top: 1px; border: 1px solid var(--border); border-bottom: 0; border-radius: 3px 3px 0 0; background: var(--surface2); padding: 5px 13px; font-size: 12px; color: var(--text2); cursor: pointer; margin-right: 1px; }
.wg-tab:hover { color: var(--text); }
.wg-tab.is-on { background: var(--surface); color: var(--text); border-color: var(--border-lt); padding-top: 7px; box-shadow: 0 1px 0 var(--surface); }
.wg-left { background: var(--surface); }
.wg-foot { flex: 0 0 auto; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.wg-lbl { font-size: 11px; color: var(--text2); }
.wg-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 8px; display: none; flex-direction: column; gap: 2px; }
.wg-page.is-on { display: flex; }
.wg-page::-webkit-scrollbar, .wg-log::-webkit-scrollbar { width: 10px; background: var(--bg); border-radius: 5px; }
.wg-page::-webkit-scrollbar-thumb, .wg-log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; min-height: 30px; }
.wg-page::-webkit-scrollbar-thumb:hover { background: var(--border-lt); }
.wg-page, .wg-log { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }

/* make_section: a ruled header, a body beneath it */
.wg-sec { display: flex; flex-direction: column; gap: 2px; }
.wg-sec[hidden] { display: none; }
.wg-sech { display: flex; align-items: center; gap: 7px; padding: 8px 0 3px; }
.wg-sech b { font: 700 9px/1 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--primary); white-space: nowrap; }
.wg-sech i { flex: 1 1 auto; height: 1px; background: var(--border); }
.wg-secb { display: flex; flex-direction: column; gap: 3px; padding: 0 2px 4px; }
.wg-inner { display: flex; flex-direction: column; gap: 3px; }
.wg-inner[hidden] { display: none; }

/* make_field_grid: two label+field columns, 64px labels, 92px minimum fields */
/* One field per row: on the narrow monitor a two-up grid squeezed the
   controls so a select's value ("RRC (α=0.35)") was cut off. Full-width
   fields never truncate; the tab pages scroll if a tab runs long. */
.wg-grid { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; row-gap: 3px; align-items: center; }
.wg-grid label { font-size: 10px; color: var(--text3); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-grid .span { grid-column: 2 / -1; }
.wg-entry, .wg-select {
  width: 100%; min-width: 0; height: 24px; padding: 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font: 400 12px/22px var(--mono); outline: 0;
}
.wg-entry:focus, .wg-select:focus, .wg-entry:focus-visible { border-color: var(--primary); }
.wg-entry::-webkit-outer-spin-button, .wg-entry::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wg-entry[type=number] { -moz-appearance: textfield; appearance: textfield; }
textarea.wg-entry { height: auto; line-height: 1.3; padding: 3px 8px; resize: none; }
.wg-select {
  -webkit-appearance: none; appearance: none; padding-right: 22px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238B86A6' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
}
.wg-select option { background: var(--surface); color: var(--text); }

.wg-cb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); cursor: pointer; padding: 1px 0; }
.wg-cb input { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); cursor: pointer; }
.wg-cb input:checked { background: var(--primary-dk); border-color: var(--primary); }
.wg-cb input:checked::after { content: ''; display: block; width: 5px; height: 9px; margin: 1px 0 0 5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wg-cb[hidden] { display: none; }

.wg-hint { font-size: 10px; color: var(--text4); padding: 0 4px; line-height: 1.35; }
.wg-info { font-size: 10px; color: var(--text4); }
.wg-info[hidden] { display: none; }
.wg-warn { font-size: 10px; color: var(--warning); padding: 2px 4px; line-height: 1.35; }
.wg-warn[hidden] { display: none; }
.wg-row { display: flex; align-items: center; gap: 6px; }
.wg-row .grow { flex: 1 1 auto; }

/* make_stat_cell */
.wg-stats { display: flex; gap: 4px; padding: 4px; background: var(--surface2); border-radius: 6px; }
.wg-stats > div { flex: 1 1 0; border-radius: 4px; padding: 6px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.wg-stats b { font: 700 16px/1.1 var(--mono); color: var(--primary); }
.wg-stats b.ok { color: var(--success); }
.wg-stats b.bad { color: var(--danger); }
.wg-stats span { font-size: 10px; letter-spacing: 1px; color: var(--text4); }
.wg-name { color: var(--text3); font: 400 11px/1.3 var(--mono); background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 4px; word-break: break-all; }
.wg-name.is-set { color: var(--primary); }

/* QPushButton with the generator's compact overrides; #primaryBtn; #dangerBtn */
.wg-btn { background: var(--surface3); border: 1px solid var(--border); border-radius: 5px; padding: 3px 10px; color: var(--text2); font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.wg-btn:hover { background: var(--border); border-color: var(--primary); color: var(--primary); }
.wg-btn:disabled { background: var(--surface3); color: var(--text4); border-color: var(--border); cursor: default; }
.wg-btn.primary { background: var(--primary); border: 2px solid var(--primary); color: var(--on-primary); font-size: 13px; padding: 5px 10px; border-radius: 6px; }
.wg-btn.primary:hover { background: var(--primary-lt); border-color: var(--primary-lt); color: var(--on-primary); }
.wg-btn.primary:disabled { background: var(--surface3); border-color: var(--surface3); color: var(--text4); }
.wg-btn.danger { background: var(--surface3); border: 1px solid var(--danger); color: var(--danger); }
.wg-btn.danger:hover { background: rgba(240,97,107,.13); }
.wg-btn.danger:disabled { color: var(--text4); border-color: var(--border); }
.wg-btn.small { font-size: 11px; padding: 3px 8px; }

/* ---- the figure, console and buttons ---- */
.wg-fig { flex: 1 1 auto; min-height: 0; position: relative; background: var(--bg); }
.wg-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wg-log { flex: 0 0 78px; overflow-y: auto; background: var(--console-bg); border: 1px solid var(--surface3); border-radius: 4px; padding: 4px; color: var(--console-fg); font: 400 11px/1.35 var(--mono); white-space: pre-wrap; word-break: break-word; }
.wg-btns { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }