/* ============================================================
   The desktop dashboard.

   Nothing in this file touches a selector the phone uses: every
   rule is under a `dk-` class inside `#desk`, so the phone
   experience below the breakpoint cannot be changed from here.

   The desktop frame is 1440 CSS px and the phone's is 390, for
   the same drawings at 6007.87 and 1000 mockup units, so a
   metric shared by both surfaces appears here as the phone's
   own times --dk-chrome-scale. It was checked that way element
   by element against the mockup's export, not assumed.

   READING THE DIALS. Everything a designer would turn is a
   custom property and every one of this surface's is declared
   in the block below, once. The names read --<family>-<role>:
   --dk-* is the desktop's own scale machinery, --dk-size-* its
   type scale, --dk-radius-* its corners. Where a value is the
   phone's own scaled, it is written as the phone's token times
   the ratio, so the one dial moves both surfaces. Geometry —
   where a thing sits, how wide a zone is — stays a literal here
   and in js/desktop.js, because it is drawn rather than dialled.

   The feed column and the panels are in desktop_parts.css, which
   declares its own two ratios and the type scale over them. The
   two colours this surface adds to the palette are in the block
   marked PROMOTE at the top of that file.
   ============================================================ */
:root {
	/* ---- Scale machinery ---- */

	/* Desktop CSS px per phone CSS px, for the chrome: the bars, the rail, the
	   chips and the launcher are the phone's own metrics times this. Measured
	   off the mockup, not chosen — js/desktop.js derives the same ratio from
	   the two frames rather than repeating this number. */
	--dk-chrome-scale:	0.61459;

	/* Window CSS px per frame CSS px, and the left offset that centres the
	   scaled frame in the window. js/desktop.js writes both on every resize;
	   these are what they are worth before it first runs. */
	--dk:			1;
	--dox:			0px;

	/* ---- Type ---- */

	/* The app name on the top bar, which is the phone's title at this scale. */
	--dk-size-title:	calc(var(--size-display) * var(--dk-chrome-scale));

	/* ---- Corners ---- */

	--dk-radius-chip:	calc(11.7px * var(--dk-chrome-scale));	/* context chip, 11.7 on the phone */
	--dk-radius-group:	calc(7.8px * var(--dk-chrome-scale));	/* app group panel, 7.8 on the phone */
	--dk-radius-handle:	7.2px;	/* half the collapse tab's 14.4 width, which makes that end a semicircle */
}

/* The dashboard is drawn at 1440 and scaled to the window, exactly as the phone
   frame is drawn at 390 and scaled to the device. Its height is the viewport's
   divided back out of the scale, so a taller window simply shows more feed. */
#desk {
	position: relative;
	width: 1440px;
	height: calc(100vh / var(--dk, 1));
	height: calc(100dvh / var(--dk, 1));
	transform: translateX(var(--dox, 0px)) scale(var(--dk, 1));
	transform-origin: top left;
	overflow: hidden;
	background: var(--white);
}

#desk > * { position: absolute; }

/* Graystroke sits high in its em box. The phone nudges it down 3px at 21.8px,
   which is 0.1376em, and stating it in em is what carries the correction into a
   surface drawn at 0.61 of the phone's size. */
.dk-display {
	font-family: var(--font-display);
	font-size: var(--dk-size-title);
	line-height: 1;
}
.dk-display > span {
	display: inline-block;
	transform: translateY(0.1376em);
}

/* ── The cyan strip ────────────────────────────────────────── */
/* Both bars sit above the zones. The panel's zone reaches 68.8px further left
   than the plate it draws, and that strip is the app bar's right end: left in
   document order the empty zone lay over the eye and the plus, which still
   looked right and could not be clicked. */
.dk-top, .dk-appbar { z-index: 3; }

.dk-top { background: var(--cyan); }
.dk-top > * { position: absolute; }

.dk-pin { color: var(--indigo); }
.dk-pin .glyph { width: 100%; height: 100%; }

.dk-mark .art { width: 100%; height: 100%; }

/* The chip names whoever you are acting as. Three widths sharing a right edge,
   as on the phone, so it is anchored from the right and only the width changes. */
.dk-chip {
	border-radius: var(--dk-radius-chip);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; white-space: nowrap;
}
.dk-huser { width: calc(77.1px * var(--dk-chrome-scale));  background: var(--indigo); color: var(--ink-inverse, var(--white)); }
.dk-vuser { width: calc(160.1px * var(--dk-chrome-scale)); background: var(--yellow); color: var(--grey-dark); }
.dk-root  { width: calc(62.8px * var(--dk-chrome-scale));  background: var(--indigo); color: var(--ink-inverse, var(--white)); }

/* ── The app bar ───────────────────────────────────────────── */
.dk-appbar {
	background: var(--indigo);
	color: var(--ink-inverse, var(--white));
}
.dk-appbar > * { position: absolute; }
.dk-app-glyph .art { width: 100%; height: 100%; }
.dk-eye .glyph, .dk-plus .glyph { width: 100%; height: 100%; }

/* ── The rail ──────────────────────────────────────────────── */
.dk-rail {
	background: var(--indigo);
	color: var(--ink-inverse, var(--white));
	overflow: hidden;
}
.dk-rail > * { position: absolute; }

.dk-spanner .art { width: 100%; height: 100%; }

/* A group of apps sits on a cyan panel; a group the member made themselves sits
   on an orange one, which is how the board tells the two apart. */
.dk-group {
	background: var(--cyan);
	border-radius: var(--dk-radius-group);
}
.dk-group-custom { background: var(--orange); }

.dk-tile .art { width: 100%; height: 100%; }
.dk-tile-label { text-align: center; }
.dk-label-dark { color: var(--ink, var(--black)); }

/* The gesture strip, drawn in the rail's foot rather than across the window:
   the five apps a thumb reaches on the phone are the five a click reaches here. */
.dk-strip {
	background: var(--pale);
	color: var(--indigo);
}
.dk-strip button { position: absolute; }
.dk-strip button .art { width: 100%; height: 100%; }

/* ── The three zones ───────────────────────────────────────── */
/* All three zones are transparent frames around a part. The feed sits on the
   frame's own white; the panel's cyan plate is inset inside its zone and is
   drawn by the part, because the strip to its left belongs to the app bar and
   the collapse tab. A zone whose part has not arrived is empty, not filled with
   something invented — an absence should look like one. */
.dk-feed { overflow: hidden; }
.dk-panel { overflow: hidden; }
/* Composing is drawn past the foot of the window because it is longer than the
   window, so this is the one zone that scrolls. */
.dk-compose { overflow-y: auto; overflow-x: hidden; }

/* ── The collapse tabs ─────────────────────────────────────── */
/* A tab is its zone's colour with the arrow in the other one, rounded on the
   side it sticks out towards. Half its own width of radius makes that end a
   semicircle, which is what the board draws. */
.dk-handle { z-index: 2; }
.dk-handle-rail {
	background: var(--indigo);
	color: var(--cyan);
	border-radius: 0 var(--dk-radius-handle) var(--dk-radius-handle) 0;
}
.dk-handle-panel {
	background: var(--cyan);
	color: var(--indigo);
	border-radius: var(--dk-radius-handle) 0 0 var(--dk-radius-handle);
}
.dk-arrow {
	background: currentColor;
	display: block;
}
.dk-arrow-left  { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.dk-arrow-right { clip-path: polygon(0 0, 0 100%, 100% 50%); }