/* ============================================================
   Chrome: status bar, app header, dock.

   These three are the same on every screen, and every coordinate
   below is the mockup's own, in CSS px within the 390 frame.
   ============================================================ */

/* A glyph drawn as a mask so one extracted vector can be tinted for the
   indigo header, the pale gesture strip, or a white control. */
.glyph {
	display: block;
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* ── Status bar ────────────────────────────────────────────── */
.status-bar {
	position: absolute;
	top: 0; left: 0;
	width: var(--frame-w);
	height: var(--status-h);
	background: var(--accent-alt);
	z-index: var(--z-chrome);
}
.status-bar > * { position: absolute; }

.sb-location {
	left: 11.7px; top: 14.5px; width: 36.6px; height: 25.5px;
	color: var(--accent);
}
.sb-location .glyph { width: 100%; height: 100%; }

/* The context chip names whoever you are acting as. Its corner is 0.3 of its
   height in the mockup — a rounded rectangle, not a pill. Both widths share a
   right edge, so it is anchored from the right and only the width changes with
   the kind of identity in play.

   A huser is the verified human themselves and a vuser is a persona they act
   under. The persona's yellow here is only a default: an oxenym declares its
   own colour and app.js paints the plate with it, which is what tells two of
   them apart. The huser's indigo is not a default — a huser has no colour of
   its own to declare — and it is drawn on the capable-app screens too, where
   the visited app is told the huser and nothing else. */
.sb-context {
	top: 7.8px; height: 39px; right: 56.2px;
	border-radius: var(--radius-chip);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-size: var(--size-display);
	overflow: hidden; white-space: nowrap;
}
.sb-context .sb-label { transform: translateY(3px); }
.sb-context.huser { width:  77.1px; background: var(--accent); color: var(--ink-inverse); }
.sb-context.vuser { width: 160.1px; background: var(--yellow); color: var(--grey-dark); }

.sb-mark { left: 345.5px; top: 10.3px; width: 32.8px; height: 34px; }
.sb-mark img { width: 100%; height: 100%; }

/* ── App header ────────────────────────────────────────────── */
.app-header {
	position: absolute;
	top: var(--status-h); left: 0;
	width: var(--frame-w);
	height: var(--header-h);
	background: var(--accent);
	color: var(--ink-inverse);
	z-index: var(--z-chrome);
}
.app-header > * { position: absolute; }

/* Each app's glyph is drawn at its own size and offset in the mockup, so the
   app's record in data.js carries the box and this only positions it.

   It used to force the glyph white with `brightness(0) invert(1)`, to avoid a
   second copy of each vector. That flattened everything the mockup draws INSIDE
   the hand — the indigo strokes that separate the fingers, the pale scan tint on
   the palm, the antialiased edge — into one white silhouette, which is why the
   fingers read as too thick. The second copy is the honest answer: a header hand
   is filled white and a gesture-strip hand is not, and data.js names the variant
   it wants. It also spared Ride's icon, which is drawn in its own colours. */
.ah-glyph .art { width: 100%; height: 100%; }

.ah-title {
	left: 63.8px; top: 16.3px;
	font-family: var(--font-display); font-size: var(--size-display);
	line-height: 1;
}
.ah-title span { display: inline-block; transform: translateY(3px); }

.ah-badge .glyph { width: 100%; height: 100%; }
.ah-list { left: 220.8px; top: 13.3px; width: 33.9px; height: 28px; }
.ah-eye  { left: 278.1px; top: 15.7px; width: 32.4px; height: 23.2px; }
.ah-plus { left: 339.6px; top: 16.8px; width: 20.9px; height: 20.9px; }
.ah-btn .glyph { width: 100%; height: 100%; }

/* ── Dock: stowed sheet, then the gesture strip ────────────── */
.dock {
	position: absolute;
	left: 0; bottom: 0;
	width: var(--frame-w);
	height: var(--dock-h);
	/* No background: the indigo lip above the strip is the stowed sheet, drawn by
	   the sheet itself. Painting it here too left a copy standing still while the
	   sheet rose away from it. */
	background: transparent;
	z-index: var(--z-dock);
}

/* The dock is a grip: the browser must not claim the vertical drag for its own
   scrolling before the handler sees it. */
.dock { touch-action: none; }
/* The dock's own handle is now only a hit area for the pull; the bar you see is
   the sheet's, so that there is exactly one of them. */
.sheet-handle {
	position: absolute;
	left: 0; right: 0; top: 0; height: 23.8px;
	background: none;
}

/* The five gestures are the five apps you can reach directly. */
/* Above the sheet, so the strip is still there while the sheet slides past it;
   the sheet raised hides the dock outright. */
.gestures {
	position: absolute;
	z-index: 2;
	left: 0; top: 23.8px;
	width: var(--frame-w); height: 62.4px;
	background: var(--pale);
}
.gestures button {
	position: absolute;
	color: var(--accent);
}
.gestures button .art { width: 100%; height: 100%; }

/* ── While a text field has focus ──────────────────────────── */

/* The keyboard takes the lower half of the phone, so the dock and the stowed
   sheet stand aside and the writing surface takes the whole frame below the
   header. The mockup draws no keyboard state, so nothing it draws is
   contradicted; and nothing moves on a screen with nowhere to write, because
   app.js only enters this state when a text field has focus.

   The stowed sheet has to go with the dock. Its lip IS what the dock shows — it
   is drawn by the sheet, translated to the dock's own top edge — so hiding the
   dock alone leaves the lip standing across exactly the room being recovered.

   The screen's own rule lives here beside the two it depends on, rather than in
   screens.css where it would be a stray with nothing around it to explain it. */
#frame[data-typing="true"] .dock,
#frame[data-typing="true"] .pull-sheet { display: none; }
#frame[data-typing="true"] #screen { bottom: 0; }