/*
 * The join, login and edit screens.
 *
 * Same five brand colours as the public list page, same 18px floor on body
 * text, same 48px-and-up primary buttons. A parent filling this in is often on
 * a phone with a child next to them, so the fields are big and the help text
 * is not grey 12px apology text.
 */

.ng-acct {
	max-width: 620px;
	margin: 0 auto;
	padding: 28px 18px 64px;
	color: #3c3c3c;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

/**
 * 🔴 THE GLOBAL [hidden] FIX, and why it lives here instead of one selector
 * at a time.
 *
 * Found TWICE on this theme now: TODO 80 v1 found `.ng-help`'s own
 * `display: block` beating the browser's UA `[hidden] { display: none }` on
 * specificity, fixed with `.ng-help[hidden] { display: none }`. TODO 80 v2
 * (the DOB-first flow) found it AGAIN, this time on the Extra theme's own
 * structural CSS for `<section>` inside `#main-content` — specificity
 * (1,0,1), which beats `[hidden]`'s (0,1,0) even with no author rule of
 * ours involved at all. This flow alone adds 5 more hidden-toggled
 * sections (#ng-dob-screen, #ng-parent-needed, #ng-join-fields, plus the
 * Family and delete-confirm panels), and patching each one individually is
 * exactly the whack-a-mole this comment exists to end: `!important` beats
 * any specificity fight that is not ALSO `!important`, and it is the
 * correct tool here because the semantic meaning of the `hidden` attribute
 * is unconditional ("not rendered, not in the accessibility tree, not in
 * tab order") — no author rule should ever legitimately need to override
 * it. `.ng-help[hidden]` above is kept as a resolved-bug record, not
 * removed; this rule is what actually holds now.
 */
.ng-acct [hidden] {
	display: none !important;
}

/* The Extra theme zeroes margins on last-of-type paragraphs, and half the
 * paragraphs here are the last of their type inside their parent. Same trap
 * documented in armory.css. */
.ng-acct p {
	font-size: 18px;
	line-height: 1.6;
	color: #3c3c3c;
	margin: 0 0 18px !important;
}

.ng-acct .ng-acct-title {
	font-family: "NerfGunsDotNet", Inter, Impact, sans-serif;
	font-size: 38px;
	line-height: 1.1;
	color: #3c3c3c;
	margin: 0 0 14px;
}

.ng-acct .ng-acct-sub {
	font-family: "NerfGunsDotNet", Inter, Impact, sans-serif;
	font-size: 24px;
	color: #3c3c3c;
	margin: 32px 0 12px !important;
	padding-bottom: 6px;
	border-bottom: 3px solid #f97a35;
}

.ng-acct-lede {
	font-size: 20px !important;
}

/* ----------------------------------------------------------------- fields */

.ng-field {
	display: block;
	margin: 0 0 22px !important;
}

.ng-field label,
.ng-check label {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}

.ng-check label {
	font-weight: 400;
}

.ng-acct input[type="text"],
.ng-acct input[type="email"],
.ng-acct input[type="password"],
.ng-acct textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 50px;
	padding: 12px 14px;
	border: 2px solid #b0aaaa;
	border-radius: 6px;
	background: #ffffff;
	color: #3c3c3c;
	font-family: inherit;
	font-size: 18px;
	line-height: 1.4;
}

.ng-acct textarea {
	min-height: 90px;
	resize: vertical;
}

.ng-acct select {
	box-sizing: border-box;
	min-height: 50px;
	padding: 10px 12px;
	border: 2px solid #b0aaaa;
	border-radius: 6px;
	background: #ffffff;
	color: #3c3c3c;
	font-family: inherit;
	font-size: 17px;
}

/* The DOB row (TODO 80 v2, Age Gate Recomendations.docx): 3 selects, wrap
   on narrow screens rather than squeeze, so 390px stays legible. */
.ng-dob-legend {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}

.ng-dob-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ng-dob-row select {
	flex: 1 1 100px;
	min-width: 90px;
}

/* The child/family panels (TODO 80 v2 + delete/archive). Reuse the same
   card shape as .ng-acct-warn's neighbours rather than invent a new one. */
.ng-family-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin: 0 0 10px;
}

.ng-family-avatar {
	font-size: 28px;
	line-height: 1;
}

.ng-family-meta {
	flex: 1 1 auto;
	min-width: 0;
}

.ng-family-name {
	font-weight: 700;
	display: block;
}

.ng-avatar-pick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 4px;
}

.ng-avatar-pick button {
	font-size: 22px;
	line-height: 1;
	padding: 8px 10px;
	border-radius: 8px;
	border: 2px solid #b0aaaa;
	background: #fff;
	cursor: pointer;
}

.ng-avatar-pick button[aria-pressed="true"] {
	border-color: #2d4ef4;
	background: #eef1ff;
}

/* Delete-account, a deliberately unquiet button: red, not the site's usual
   blue/quiet button pattern, because a destructive action should not read
   the same as "Copy the link." */
.ng-acct-btn-danger {
	background: #b32d2e;
	border-color: #b32d2e;
	color: #fff;
}

.ng-acct-btn-danger:hover,
.ng-acct-btn-danger:focus {
	background: #8f2323;
}

.ng-acct input:focus,
.ng-acct textarea:focus {
	border-color: #2d4ef4;
	outline: 3px solid #f97a35;
	outline-offset: 1px;
}

.ng-help {
	display: block;
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.5;
	color: #3c3c3c;
}

/**
 * TODO 80, found by the browser check, not by reading the code: `.ng-help`'s
 * own `display: block` ties the UA stylesheet's `[hidden] { display: none }`
 * on specificity, and the author rule loads later, so it wins. Every OTHER
 * hidden-toggled element on this form uses a class with no `display`
 * declaration of its own (.ng-acct-warn, .ng-acct-ok, .ng-acct-error), so
 * nothing fought the attribute until #ng-age-13to17-note became the first
 * .ng-help ever toggled via `hidden`. Same bug SHAPE already on record in
 * CLAUDE.md for Extra's button contrast fix: an !important needs a prefix
 * AND the !important, and a tie needs an explicit winner, not an assumption
 * that the browser default applies.
 */
.ng-help[hidden] {
	display: none;
}

.ng-help-ok {
	color: #007017;
	font-weight: 700;
}

.ng-help-bad {
	color: #b32d2e;
	font-weight: 700;
}

/* The slug field reads as part of the address it will become. */
.ng-slugline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	font-size: 16px;
	color: #3c3c3c;
	word-break: break-all;
}

.ng-slugline input {
	flex: 1 1 160px;
	min-width: 140px;
	margin: 0 2px;
}

.ng-check {
	margin: 0 0 26px !important;
	padding: 14px 16px;
	background: #eeeeee;
	border-radius: 6px;
}

.ng-check input {
	margin-right: 8px;
	transform: scale(1.3);
}

/* The honeypot. Off screen, not display:none, and never reachable by keyboard
 * or by a screen reader. */
.ng-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- buttons */

.ng-acct .ng-acct-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 56px;
	margin: 0 0 14px;
	padding: 16px 22px;
	border: 0;
	border-radius: 6px;
	background: #2d4ef4;
	color: #eeeeee;
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.ng-acct .ng-acct-btn:hover,
.ng-acct .ng-acct-btn:focus {
	background: #3c3c3c;
	color: #eeeeee;
}

.ng-acct .ng-acct-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.ng-acct .ng-acct-btn-quiet {
	width: auto;
	min-height: 46px;
	margin-right: 10px;
	padding: 11px 18px;
	background: #ffffff;
	color: #2d4ef4;
	border: 2px solid #2d4ef4;
	font-size: 17px;
}

.ng-acct .ng-acct-btn-quiet:hover,
.ng-acct .ng-acct-btn-quiet:focus {
	background: #2d4ef4;
	color: #ffffff;
}

/* --------------------------------------------------------------- messages */

.ng-acct-error,
.ng-acct-ok,
.ng-acct-warn {
	padding: 14px 16px;
	border-radius: 6px;
	font-weight: 600;
}

.ng-acct-error {
	background: #fdecec;
	border-left: 6px solid #b32d2e;
}

.ng-acct-ok {
	background: #eaf6ec;
	border-left: 6px solid #007017;
}

.ng-acct-warn {
	background: #eeeeee;
	border-left: 6px solid #f97a35;
}

.ng-acct-alt {
	font-size: 17px !important;
}

/* ---------------------------------------------------------------- basket */

.ng-acct-basket,
.ng-acct-merge {
	margin: 0 0 26px;
	padding: 16px 18px;
	background: #eeeeee;
	border: 2px solid #b0aaaa;
	border-radius: 8px;
}

.ng-basket-head {
	font-weight: 700;
	margin-bottom: 10px !important;
}

.ng-basket-list {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
}

.ng-basket-list li {
	padding: 8px 0;
	border-bottom: 1px solid #b0aaaa;
	font-size: 17px;
}

.ng-basket-list li:last-child {
	border-bottom: 0;
}

.ng-basket-label {
	display: block;
	font-weight: 700;
}

.ng-basket-comp {
	display: block;
	font-size: 15px;
	opacity: 0.85;
}

/* ----------------------------------------------------------------- share */

.ng-share {
	margin: 0 0 26px;
	padding: 18px 20px;
	background: #ffffff;
	border: 3px solid #2d4ef4;
	border-radius: 8px;
}

.ng-share-label {
	font-weight: 700;
	margin-bottom: 4px !important;
}

.ng-share-url {
	font-size: 21px !important;
	font-weight: 700;
	word-break: break-all;
	margin-bottom: 14px !important;
}

.ng-share-hint {
	font-size: 16px !important;
	margin: 12px 0 0 !important;
}

/* ------------------------------------------------------------------ edit */

.ng-edit-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.ng-edit-item {
	padding: 16px 0 18px;
	border-bottom: 2px solid #eeeeee;
}

.ng-edit-head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
}

.ng-edit-label {
	font-size: 19px;
	flex: 1 1 200px;
}

.ng-edit-tools {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

.ng-edit-tool {
	min-height: 38px;
	padding: 7px 12px;
	border: 1px solid #b0aaaa;
	border-radius: 4px;
	background: #ffffff;
	color: #3c3c3c;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.ng-edit-tool:disabled {
	opacity: 0.4;
	cursor: default;
}

.ng-acct .ng-edit-comp {
	font-size: 15px !important;
	margin: 6px 0 10px !important;
	opacity: 0.85;
}

.ng-edit-notelabel {
	display: block;
	margin: 8px 0 4px;
	font-size: 15px;
	font-weight: 600;
}

.ng-edit-empty {
	padding: 14px 0;
	font-size: 18px;
}

@media (max-width: 560px) {
	.ng-acct {
		padding: 20px 14px 48px;
	}

	.ng-acct .ng-acct-title {
		font-size: 30px;
	}

	.ng-acct .ng-acct-btn-quiet {
		width: 100%;
		margin: 0 0 10px;
	}
}

/* The forwardable one-liner, shown exactly as it will be pasted.
 *
 * Set as a quotable block rather than described in prose, because the owner is
 * about to paste it into a text message and needs to see what they are sending.
 * Monospace would read as "code" to a non-technical parent, so it stays in the
 * body face, boxed. */
.ng-acct .ng-share-line {
	padding: 12px 14px;
	margin: 0 0 14px !important;
	background: #eeeeee;
	border-left: 6px solid #2d4ef4;
	border-radius: 4px;
	font-size: 17px !important;
	line-height: 1.5;
	word-break: break-word;
}

/* Priority selector in the item editor. */
.ng-acct .ng-edit-prio {
	display: block;
	width: 100%;
	max-width: 260px;
	box-sizing: border-box;
	min-height: 46px;
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 2px solid #b0aaaa;
	border-radius: 6px;
	background: #ffffff;
	color: #3c3c3c;
	font-family: inherit;
	font-size: 17px;
}

/* The Coming Soon panel.
 *
 * 🔴 PLAIN TEXT, NO FAKE UI. Every line here is a feature that needs an API we
 * do not have yet. A greyed out button or a disabled toggle would be a promise
 * rendered as a product, and the first person to click one learns the screen
 * lies. A list of names is honest and costs nothing to keep accurate. */
.ng-acct .ng-soon {
	margin: 32px 0 0;
	padding: 16px 18px;
	background: #eeeeee;
	border: 2px dashed #b0aaaa;
	border-radius: 8px;
}

.ng-acct .ng-soon h2 {
	font-family: "NerfGunsDotNet", Inter, Impact, sans-serif;
	font-size: 20px;
	margin: 0 0 8px !important;
	border: 0;
	padding: 0;
}

.ng-acct .ng-soon ul {
	margin: 0 0 0 1.2em;
	padding: 0;
	font-size: 16px;
}

.ng-acct .ng-soon li {
	margin-bottom: 5px;
}

.ng-acct .ng-soon p {
	font-size: 16px !important;
	margin: 10px 0 0 !important;
}

/* The list picker. Real links, one per list, current one filled in. */
.ng-listpick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

.ng-acct .ng-listpick-item,
.ng-acct .ng-listpick-item:visited {
	display: inline-block;
	padding: 9px 16px;
	border: 2px solid #2d4ef4;
	border-radius: 999px;
	background: #ffffff;
	color: #2d4ef4;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.ng-acct .ng-listpick-item:hover,
.ng-acct .ng-listpick-item:focus {
	background: #eeeeee;
	text-decoration: none;
}

.ng-acct .ng-listpick-on,
.ng-acct .ng-listpick-on:visited {
	background: #2d4ef4;
	color: #eeeeee;
}

.ng-newlist {
	margin-top: 28px;
	padding-top: 4px;
	border-top: 2px solid #eeeeee;
}

/* ---------------------------------------------------------------- qr code */

/**
 * 🔴 THE CANVAS IS DRAWN AT ~1000px AND DISPLAYED AT 200px, deliberately. The
 * point of this feature is a PRINTED birthday invitation, so the downloaded PNG
 * has to carry enough resolution for paper; the screen only ever needs enough to
 * confirm it looks like a QR code. max-width does the shrinking, and `height:
 * auto` keeps it square without the CSS having to know the module count.
 *
 * ⚠️ image-rendering: pixelated is not a style choice. Smoothing a QR code when
 * a browser scales it blurs the module edges, which is exactly the damage a
 * scanner cannot recover from. It must scale as hard squares.
 */
.ng-acct .ng-qr {
	margin-top: 28px;
	padding-top: 4px;
	border-top: 2px solid #eeeeee;
}

.ng-acct .ng-qr-canvas {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
	margin: 4px 0 14px;
	background: #ffffff;
	border: 1px solid #dddddd;
	image-rendering: pixelated;
}

.ng-acct .ng-qr-dl,
.ng-acct .ng-qr-dl:visited {
	display: inline-block;
	text-decoration: none;
}

.ng-acct .ng-qr-private {
	padding: 12px 14px;
	background: #f6f6f6;
	border-left: 4px solid #999999;
}

/**
 * The QR code prints. Everything else about this screen does not need to, but
 * somebody who wants the code on paper should be able to reach for Ctrl+P
 * instead of hunting for the downloaded file.
 */
@media print {
	.ng-acct .ng-qr-canvas {
		width: 2in;
		border: none;
	}

	.ng-acct .ng-qr-dl {
		display: none;
	}
}