/*
 * Sign-in. The mockups are a 591px square on the page's background, its four
 * edges drawn out to the viewport, and everything inside placed by the pixel;
 * this is that, with the same palette and type as the editor it opens into.
 */

@font-face {
	font-family: "Manrope";
	font-weight: 100 900;
	font-display: swap;
	src: url(manrope-medium.woff2) format("woff2");
}

:root {
	--bg:      #1E1E1E;
	--surface: #2D2D2D;
	--line:    #666666;
	--fill:    #666666;
	--good:    #0BAC00;
	--fg:      #FFFFFF;
	--fg-70:   rgba(255, 255, 255, .7);
	--fg-50:   rgba(255, 255, 255, .5);
	--fg-30:   rgba(255, 255, 255, .3);
	--side:    591px;
	--font:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { touch-action: pan-x pan-y; }   /* no pinch to zoom; the preview's pictures zoom on their own */
body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- frame -- */
/* Three by three: the square in the middle, its edges continued through the
   cells beside it. Cell borders sit on the same pixel columns and rows as the
   square's own border, so the lines are one line. */
.frame {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr min(var(--side), 100vw) 1fr;
	grid-template-rows: 1fr min(var(--side), 100vh) 1fr;
	grid-template-areas: ". n ." "w p e" ". s .";
}
.n { grid-area: n; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.s { grid-area: s; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.w { grid-area: w; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.e { grid-area: e; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.panel {
	grid-area: p;
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
}

/* Each element is placed for the states it belongs to. The panel's state hides
   everything else — hides, rather than re-displays, so each element keeps its
   own display (the icon buttons centre with flex). */
.panel[data-state="loading"]  > [data-when],
.panel[data-state="start"]    > [data-when]:not([data-when~="start"]),
.panel[data-state="password"] > [data-when]:not([data-when~="password"]),
.panel[data-state="code"]     > [data-when]:not([data-when~="code"]),
.panel[data-state="create"]   > [data-when]:not([data-when~="create"]),
.panel[data-state="projects"] > [data-when]:not([data-when~="projects"]),
.panel[data-state="starting"] > [data-when]:not([data-when~="starting"]),
.panel > [hidden] { display: none !important; }

/* ------------------------------------------------------------- controls -- */
.field, .btn, .icon-btn {
	position: absolute;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8.5px;
	background: transparent;
	color: var(--fg-70);
	font: inherit;
	letter-spacing: inherit;
	text-align: center;
}
.field::placeholder { color: var(--fg-50); opacity: 1; }
.field:focus::placeholder { color: transparent; }
.field:focus, .btn:focus-visible, .icon-btn:focus-visible { outline: none; border-color: var(--fg-50); }
.field.shown { line-height: 40px; color: var(--fg-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 14px; }

/* Passwords show as the mockup's squares: 12px glyphs on a 16px pitch. Text
   inputs, because browsers ignore the masking property on password ones. */
.secret { -webkit-text-security: square; font-size: 12px; letter-spacing: 4px; }
.secret::placeholder { font-size: 15px; letter-spacing: .02em; }

.btn { cursor: pointer; }
.btn.continue { left: 286px; top: 500px; width: 124px; background: var(--fill); border-color: var(--fill); color: var(--fg); }
.btn.continue:disabled { background: transparent; border-color: rgba(102, 102, 102, .5); color: var(--fg-30); cursor: default; }
.btn.back { left: 179px; top: 500px; width: 90px; }
/* Alone, Continue sits in the middle; beside Back, they pair as in the mockup. */
.panel[data-state="start"] .btn.continue { left: 232px; }

.icon-btn { width: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn svg { display: block; }
.icon-btn svg { fill: var(--fg-70); color: var(--fg-70); }

/* a */
.google { left: 274px; top: 221px; }
.or { position: absolute; left: 0; top: 285px; width: 100%; height: 20px; text-align: center; color: var(--fg-70); }
.or span { position: absolute; top: 9px; width: 76px; height: 1px; background: var(--line); }
.or span:first-child { left: 196px; }
.or span:last-child { left: 319px; }
.or b { font-weight: 500; line-height: 20px; }
.field.email { left: 183px; top: 327px; width: 224px; }

/* b */
.field.shown { left: 132px; top: 243px; width: 326px; }
.field.code { left: 132px; top: 305px; width: 273px; }   /* meets the resend button */
.icon-btn.resend { left: 416px; top: 305px; }

/* Cloudflare's Turnstile widget, only when the gateway has it on (app.js makes the box): unseen, or, on the rare
   visit Cloudflare wants a click, its 300px card in the square's empty middle, clear of the fields and the note —
   above Google's button while the address is still on the page (the box is made there, as a new address's code is
   asked for), where the middle holds the address field. */
.human { position: absolute; left: 0; right: 0; top: 355px; width: 300px; margin: 0 auto; }
.panel[data-state="start"] .human { top: 132px; }

/* c / d, and the one password of an existing account */
.field.one { left: 131px; top: 244px; width: 326px; }
.field.two { left: 131px; top: 303px; width: 326px; }
/* The strength meter: a track with a fill whose length and colour the script sets. */
.strength { position: absolute; left: 260px; top: 363px; width: 68px; height: 6px; border-radius: 3px; background: #3D3D3D; overflow: hidden; }
.strength::before { content: ''; display: block; height: 100%; width: var(--fill, 0%); background: var(--tone, var(--good)); border-radius: 3px; transition: width .15s, background-color .15s; }

/* (d) autofill must not paint the box: the browser's own colour is pushed out
   by an inset shadow in the surface colour, with the text colour kept. */
.field:-webkit-autofill, .field:-webkit-autofill:hover, .field:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
	-webkit-text-fill-color: var(--fg-70);
	caret-color: var(--fg-70);
	transition: background-color 999999s ease-out 0s;
}

/* projects: a heading, the list, and a name for a new one at the foot. Rows
   are the mockup's fields: 42px, a line around, the name at the left and who
   is in it at the right; the owner's rows carry an invite and a delete. */
.heading { position: absolute; left: 0; width: 100%; top: 52px; margin: 0; text-align: center; color: var(--fg-50); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.projects { position: absolute; left: 131px; top: 92px; width: 328px; max-height: 322px; margin: 0; padding: 1px; list-style: none; overflow: auto; }
.project { position: relative; display: flex; align-items: center; gap: 10px; height: 42px; margin: 0 0 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8.5px; color: var(--fg-70); cursor: pointer; }
.project:hover, .project:focus-visible { border-color: var(--fg-50); outline: none; }
.project .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project .meta { flex: none; color: var(--fg-50); font-size: 13px; }
.project .act { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--fg-30); font: inherit; font-size: 17px; line-height: 22px; text-align: center; cursor: pointer; }
.project .act:hover, .project .act:focus-visible { color: var(--fg); background: #3D3D3D; outline: none; }
.project .invite { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; font-size: 13px; letter-spacing: inherit; outline: none; }
.field.new-project { left: 131px; top: 440px; width: 226px; }
.btn.create { left: 367px; top: 440px; width: 90px; background: var(--fill); border-color: var(--fill); color: var(--fg); }
.btn.create:disabled { background: transparent; border-color: rgba(102, 102, 102, .5); color: var(--fg-30); cursor: default; }
.panel[data-state="projects"] .note { top: 500px; }

/* messages */
.note { position: absolute; left: 24px; right: 24px; top: 428px; margin: 0; text-align: center; color: var(--fg-70); font-size: 13px; }
/* A wait: the mark loading (loader.js), 160px in the middle of the square — over the words of a project
   starting (the two together in the middle), or alone while the page finds out who is here, which it
   shows only once that takes a moment. */
.progress { position: absolute; left: 24px; right: 24px; top: calc(50% + 82px); margin: 0; text-align: center; color: var(--fg-50); }
.panel > .logo-loader { display: none; position: absolute; left: calc(50% - 80px); top: calc(50% - 102px); width: 160px; color: var(--fg); }
.panel[data-state="starting"] > .logo-loader { display: block; }
.panel[data-state="loading"] > .logo-loader { display: block; top: calc(50% - 80px); animation: logo-loader-late .25s ease .5s backwards; }
.signout { position: absolute; left: 0; width: 100%; top: 540px; text-align: center; color: var(--fg-30); font-size: 13px; text-decoration: none; }
.signout:hover { color: var(--fg-70); }
/* Under the square, quiet: whose Centros is, and whose it is not. The line never
   sizes the frame's rows (min-height: 0), so the square stays centred on any
   window. Where the cell is too short for it, it is not shown rather than cut:
   in a column that wraps, after an empty first item, a line taller than the cell
   moves to a second column, outside the cell's clip. */
.s:has(> .indep) { min-height: 0; overflow: clip; display: flex; flex-flow: column wrap; }
.s:has(> .indep)::before { content: ''; width: 100%; }
.indep { flex: none; box-sizing: border-box; width: 100%; margin: 0; padding: 18px 24px 0; text-align: center; text-wrap: balance; color: var(--fg-30); font-size: 12px; line-height: 18px; }

/* ------------------------------------------------------------ invitation -- */
/* The square again, with a server's name in the middle and one button under it. */
.panel.join { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0 60px; text-align: center; }
.panel.join .join-kicker { margin: 0 0 10px; font: 500 15px var(--font); letter-spacing: .3px; color: var(--fg-50); }
.panel.join .join-name { margin: 0; font: 600 26px/34px var(--font); letter-spacing: 0; color: var(--fg); overflow-wrap: anywhere; }
.panel.join .join-name > .logo-loader { display: inline-block; width: 34px; vertical-align: top; color: var(--fg); }   /* the server's name on its way: the mark loading, a line high */
.panel.join .join-facts { margin: 12px 0 0; min-height: 20px; font: 500 13px/20px var(--font); letter-spacing: .26px; color: var(--fg-50); }
.panel.join .join-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; margin-top: 40px; padding: 0 28px; border: 1px solid var(--fill); border-radius: 8px; background: var(--fill); color: var(--fg); font: 600 15px var(--font); letter-spacing: .3px; text-decoration: none; cursor: pointer; }
.panel.join .join-btn:disabled { opacity: .5; cursor: default; }
.panel.join .join-say { margin: 14px 0 0; font: 500 13px var(--font); letter-spacing: .26px; color: #FF4101; }