/* aux.type layout on top of aux.form (/form/src/aux.form.css).
   Visual language comes from the system; this file only lays out the app
   and uses --aux-* tokens. Unlayered, so it wins over aux.form's layers. */
:root {
  --tab-h: 58px;
  --top-h: 56px;
}

* { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }
body { background-attachment: fixed; }
button { touch-action: manipulation; }
h1 { margin: 0; }
[hidden] { display: none !important; }

/* top bar */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 10; border-radius: 0;
  height: calc(var(--top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--aux-space-2) 0;
  display: flex; align-items: center; gap: var(--aux-space-2); border-bottom: 1px solid var(--aux-line);
}
.title { flex: 1; min-width: 0; display: grid; gap: 3px; }
.title .label { color: var(--aux-fg-3); }
.title .h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout { font-size: var(--aux-text-xs); text-align: right; line-height: 1.4; }
.burger { flex-direction: column; gap: 4px; }
.burger i { display: block; width: 16px; height: 1px; background: var(--aux-fg); }
.burger i:nth-child(2) { width: 10px; margin-left: -6px; }

main {
  max-width: 720px; margin: 0 auto;
  padding: calc(var(--top-h) + env(safe-area-inset-top) + var(--aux-space-4)) var(--aux-space-3)
    calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--aux-space-8));
}
.view { display: none; }
.view.on { display: block; }
.view > .panel, .view > .chips, .view > .dock, .view > .style-preview, .view > .draw-head { margin-bottom: var(--aux-space-4); }

/* tab bar */
.tabbar {
  position: fixed; left: var(--aux-space-3); right: var(--aux-space-3); bottom: calc(var(--aux-space-3) + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto; height: var(--tab-h); padding: 4px; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  font: 500 var(--aux-text-xs)/1 var(--aux-font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--aux-fg-3); background: none; border: 1px solid transparent; border-radius: var(--aux-radius);
}
.tabbar button:hover { color: var(--aux-fg); }
.tabbar button[aria-selected="true"] { color: var(--aux-fg); border-color: var(--aux-line-2); background: var(--aux-surface-2); }
.tabbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: square; }

/* glyph overview */
.tester canvas { display: block; width: 100%; height: 84px; }
.tester .input { padding: 0 var(--aux-pad); border-top: 1px dashed var(--aux-line); height: 40px; }
.group { margin: var(--aux-space-6) 0 var(--aux-space-3); }
.group-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px var(--aux-space-2); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: var(--aux-space-2); }
.cell {
  position: relative; aspect-ratio: 1 / 1.2; padding: 0; display: block; cursor: pointer;
  background: var(--aux-surface); color: var(--aux-fg);
}
.cell:hover { border-color: var(--aux-line-2); }
.cell canvas { position: absolute; inset: 8px 6px 20px; width: calc(100% - 12px); height: calc(100% - 28px); }
.cell span { position: absolute; left: 7px; bottom: 5px; font: 500 var(--aux-text-sm)/1 var(--aux-font-sans); color: var(--aux-fg-2); }
.cell small { position: absolute; right: 6px; bottom: 6px; font: 400 9px/1 var(--aux-font-mono); color: var(--aux-fg-3); }
.cell.empty { background: transparent; border: 1px dashed var(--aux-line-2); }
.cell.empty::before { display: none; }
.cell.empty span, .cell.add span {
  left: 0; right: 0; bottom: 50%; transform: translateY(50%); text-align: center;
  font-size: 22px; font-weight: var(--aux-weight-thin); color: var(--aux-fg-3);
}
.cell.empty small { display: none; }

/* draw */
.draw-head { display: flex; align-items: center; gap: var(--aux-space-1); }
.draw-head .btn-icon { font-size: 22px; }
.glyph-badge {
  display: flex; align-items: baseline; gap: var(--aux-space-2); min-width: 80px; height: 40px; padding: 0 var(--aux-space-3);
  background: var(--aux-surface); color: var(--aux-fg); cursor: pointer;
}
.glyph-badge b { font: var(--aux-weight-head) 24px/1 var(--aux-font-sans); }
.glyph-badge small { font-size: var(--aux-text-xs); color: var(--aux-fg-3); }
#view-mode { margin-left: auto; }

.stage { padding: var(--aux-space-5) var(--aux-space-3) var(--aux-space-3); }
.canvas-wrap { display: flex; justify-content: center; }
#editor { touch-action: none; display: block; }
.stage-foot { display: flex; justify-content: space-between; margin-top: var(--aux-space-3); color: var(--aux-fg-3); }

.dock { display: grid; gap: var(--aux-space-3); }
.seg.tools, .seg.wide { display: flex; }
.seg.tools button, .seg.wide button { flex: 1; padding: 11px 4px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--aux-space-2); }
.chips .btn { flex: 1 0 auto; }
.chips .btn-sm { height: 32px; }

/* style */
.style-preview { position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top) + var(--aux-space-2)); z-index: 5; }
#style-canvas { display: block; width: 100%; height: 140px; }

/* form controls: fields stacked, segmented controls full width */
.controls { display: grid; gap: var(--aux-space-4); }
.controls .controls, #mode-seg + .controls { margin-top: var(--aux-space-4); }
.controls .field .seg { display: flex; }
.controls .field .seg button { flex: 1; }
.subhead { margin-top: var(--aux-space-3); padding-top: var(--aux-space-3); border-top: 1px dashed var(--aux-line); color: var(--aux-fg-3); }
.controls > .subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#type-test { font-size: 48px; min-height: 140px; line-height: 1.15; }

.buttons { display: grid; gap: var(--aux-space-2); }

/* font library sheet */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--aux-bg) 55%, transparent); }
.sheet-body {
  width: 100%; max-width: 720px; margin: 0 auto; max-height: 88vh; overflow: auto;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: env(safe-area-inset-bottom);
}
#font-list .list-title { background: none; border: 0; padding: 0; text-align: left; font: inherit; font-weight: var(--aux-weight-strong); cursor: pointer; }
#font-list .list-actions { display: flex; gap: var(--aux-space-1); }
#font-list li { border-bottom-style: dashed; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--aux-space-6) + env(safe-area-inset-bottom)); z-index: 30; background: var(--aux-z3-bg); backdrop-filter: blur(var(--aux-z3-blur)); -webkit-backdrop-filter: blur(var(--aux-z3-blur)); }
.toast .toast-msg { font: 500 var(--aux-text-xs)/1 var(--aux-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--aux-fg); white-space: nowrap; }