/* ==========================================================================
   The Swatch Book. Fashion-editorial: bone paper, ink, hairlines, Bodoni.
   The only color on the page belongs to the swatches.
   ========================================================================== */

:root {
	--paper: #f4f1ea;
	--card: #fbf9f4;
	--ink: #161514;
	--ink-2: #5b5750;
	--hair: rgba(22, 21, 20, 0.16);
	--hair-strong: rgba(22, 21, 20, 0.5);
	--error: #9e2a22;
	--serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
	--sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
	--gutter: 20px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--paper: #131211;
		--card: #1b1a18;
		--ink: #efeae0;
		--ink-2: #a39d92;
		--hair: rgba(239, 234, 224, 0.14);
		--hair-strong: rgba(239, 234, 224, 0.45);
		--error: #e58a7f;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font: 300 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
h1, h2, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- type ---------- */
.kicker { font: 500 11px/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.display {
	font-family: var(--serif);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(44px, 12vw, 104px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin-top: 14px;
	text-wrap: balance;
}
.display .dot { color: var(--accent, var(--ink)); }
.lede { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 4.6vw, 23px); line-height: 1.4; color: var(--ink); max-width: 34rem; margin-top: 18px; }

/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 20; background: var(--paper); padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--hair); }
.masthead-inner { max-width: 72rem; margin: 0 auto; padding: 14px var(--gutter) 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.wordmark { font-family: var(--serif); font-size: 22px; letter-spacing: 0.01em; text-decoration: none; font-style: italic; }
.signout { background: none; border: 0; padding: 10px 0; font: 500 11px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); min-height: 44px; }
.signout:hover { color: var(--ink); }
.tabs { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.tabs a { flex-shrink: 0; padding: 10px 0 12px; font: 500 12px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

main { max-width: 72rem; margin: 0 auto; padding: 40px var(--gutter) 24px; }
@media (min-width: 720px) {
	:root { --gutter: 40px; }
	main { padding-top: 72px; }
	.masthead-inner { padding-top: 20px; }
	.wordmark { font-size: 26px; }
}

/* ---------- buttons & fields ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 0 30px;
	background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0;
	font: 500 12px var(--sans); letter-spacing: 0.22em; text-transform: uppercase;
	transition: background 0.2s, color 0.2s;
}
.btn:hover:not(:disabled) { background: transparent; color: var(--ink); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.wide { width: 100%; }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--hair-strong); }
.btn.quiet:hover:not(:disabled) { border-color: var(--ink); }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 11px; letter-spacing: 0.16em; }
.btn.danger { color: var(--error); }

.field { display: block; padding: 12px 0 10px; border-bottom: 1px solid var(--hair-strong); }
.field:focus-within { border-bottom-color: var(--ink); }
.field > span { display: block; font: 500 11px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field textarea { display: block; width: 100%; border: 0; background: none; padding: 6px 0 2px; font-size: 19px; font-weight: 400; outline: none; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-2); opacity: 0.6; }
.error { color: var(--error); font-size: 14px; min-height: 1.6em; margin: 14px 0 6px; }

/* ---------- auth ---------- */
.auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(32px + env(safe-area-inset-top)) var(--gutter) 32px; }
.auth-box { width: 100%; max-width: 27rem; }
.auth .display { font-size: clamp(48px, 15vw, 80px); }
.auth .lede { margin-bottom: 28px; }
.auth-form .btn { margin-top: 4px; }
.switch { margin-top: 22px; font-size: 15px; color: var(--ink-2); }
.switch a { color: var(--ink); }
.strip { display: grid; grid-template-columns: repeat(9, 1fr); height: 10px; margin-bottom: 34px; }
.strip span { background: var(--sw); }
.strip span:nth-child(7) { box-shadow: inset 0 0 0 1px var(--hair); }

/* ---------- paint chips ---------- */
.chip { --sw-ink: #161514; background: var(--card); border: 1px solid var(--hair); display: flex; flex-direction: column; }
.chip-color { position: relative; background: var(--sw); aspect-ratio: 1 / 1; color: var(--sw-ink); }
.chip.pale .chip-color { box-shadow: inset 0 -1px 0 var(--hair); }
.chip-no { position: absolute; left: 12px; top: 10px; font: 500 11px var(--sans); letter-spacing: 0.16em; }
.chip-label { padding: 12px 12px 14px; display: grid; gap: 2px; }
.chip-name { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.chip-hex { font: 400 11px var(--sans); letter-spacing: 0.16em; color: var(--ink-2); }
.chip-names { list-style: none; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); display: grid; gap: 3px; font-size: 15px; font-weight: 400; }
.chip-empty { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-2); }

/* ---------- my color ---------- */
.mine { display: grid; gap: 36px; }
.mine .display { font-size: clamp(64px, 20vw, 168px); }
.chip.hero { max-width: 26rem; width: 100%; }
.chip.hero .chip-color { aspect-ratio: 4 / 5; }
.chip.hero .chip-no { left: 18px; top: 16px; font-size: 12px; }
.chip.hero .chip-label { padding: 18px 18px 22px; }
.chip.hero .chip-name { font-size: 34px; }
.brief .lede { margin-top: 0; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin-top: 32px; border-top: 1px solid var(--hair-strong); }
.details > div { padding: 14px 0 16px; border-bottom: 1px solid var(--hair); }
.details dt { font: 500 11px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.details dd { font-family: var(--serif); font-size: 21px; line-height: 1.25; margin-top: 4px; overflow-wrap: anywhere; }
.ideas { margin-top: 40px; }
.ideas ol { list-style: none; counter-reset: idea; margin-top: 12px; border-top: 1px solid var(--hair-strong); }
.ideas li { counter-increment: idea; display: grid; grid-template-columns: 2.6rem 1fr; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 18px; font-weight: 400; }
.ideas li::before { content: counter(idea, lower-roman) "."; font-family: var(--serif); font-style: italic; color: var(--ink-2); }
@media (min-width: 900px) {
	.mine { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); column-gap: 72px; row-gap: 48px; align-items: start; }
	.mine-head { grid-column: 1 / -1; }
}

/* ---------- the draw: a sealed envelope ----------
   Closed: a plain envelope, flap down, ink seal on the tip.
   Open: the body slides down to make headroom (inside its own box, so nothing overlaps the text),
   the flap folds up into that headroom and the card rises out of the pocket. */
.draw { max-width: 34rem; }
.envelope { width: 100%; max-width: 26rem; margin: 40px 0 32px; container-type: inline-size; }
.env-body { position: relative; aspect-ratio: 7 / 5; margin-top: 0; transition: margin-top 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.env-body::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 7%, var(--card)); border: 1px solid var(--hair-strong); }
.env-body svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.env-body polygon { fill: var(--card); stroke: var(--hair-strong); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.env-card { --sw: var(--card); position: absolute; left: 7%; right: 7%; top: 7%; bottom: 7%; z-index: 1; background: var(--sw); border: 1px solid var(--hair); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s, background 0.08s; }
.env-pocket { z-index: 2; }
.env-flap { z-index: 3; transform-origin: 50% 0; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.env-seal { position: absolute; left: 50%; top: 53.2%; z-index: 4; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 24px; transition: opacity 0.2s, transform 0.2s; }
.envelope.open .env-body { margin-top: 40cqw; }
.envelope.open .env-flap { transform: scaleY(-1); z-index: 0; }
.envelope.open .env-seal { opacity: 0; transform: scale(0.85); }
.envelope.open .env-card { transform: translateY(-46%); }
.draw .details { margin-top: 36px; }

/* ---------- the palette ---------- */
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
@media (min-width: 560px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 960px) { .chips { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }
.waiting { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--hair-strong); max-width: 40rem; }
.waiting p { margin-top: 8px; font-family: var(--serif); font-size: 21px; line-height: 1.4; }

/* ---------- host ---------- */
.subtabs { display: flex; gap: 0; margin: 32px 0 8px; border: 1px solid var(--hair-strong); width: fit-content; max-width: 100%; }
.subtabs button { min-height: 44px; padding: 0 20px; background: none; border: 0; font: 500 11px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.subtabs button + button { border-left: 1px solid var(--hair-strong); }
.subtabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.rows { list-style: none; border-top: 1px solid var(--hair-strong); margin-top: 20px; }
.rows > li { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.guest { display: grid; gap: 12px; }
.who { display: flex; gap: 14px; align-items: center; min-width: 0; }
.who > div { min-width: 0; }
.dotchip { width: 28px; height: 28px; flex-shrink: 0; background: var(--sw); border: 1px solid var(--hair); }
.dotchip[data-empty] { border-style: dashed; border-color: var(--hair-strong); }
.name { font-weight: 400; font-size: 18px; display: flex; align-items: baseline; gap: 10px; }
.meta { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font: 500 10px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--hair-strong); padding: 1px 6px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.controls select, .color-top input, .cap input { min-height: 44px; border: 1px solid var(--hair-strong); background: var(--card); border-radius: 0; padding: 0 10px; font-size: 16px; }
.controls select { flex: 1 1 9rem; }
@media (min-width: 900px) { .guest { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .controls select { flex: 0 0 10rem; } }
.color-edit { display: grid; gap: 10px; }
.color-top { display: flex; gap: 8px; align-items: center; }
.color-top input[type="color"] { width: 52px; padding: 4px; flex-shrink: 0; }
.color-top input:not([type]) { flex: 1; min-width: 0; font-family: var(--serif); font-size: 20px; }
.cap { display: flex; align-items: center; gap: 6px; font: 500 10px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.cap input { width: 4.6rem; text-align: right; }
.color-edit textarea { width: 100%; border: 1px solid var(--hair-strong); background: var(--card); padding: 10px 12px; font-size: 15px; font-weight: 400; resize: vertical; }
.kicker.spaced { margin-top: 44px; }
.event-form { max-width: 34rem; margin-top: 12px; display: grid; gap: 6px; }
.event-form .btn { margin-top: 24px; justify-self: start; }

/* ---------- footer, toast, dialog ---------- */
.foot { max-width: 72rem; margin: 72px auto 0; padding: 22px var(--gutter) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.auth .foot { padding-left: 0; padding-right: 0; margin-top: 56px; }
.credits a { color: var(--ink); display: inline-block; padding: 6px 0; }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 50; transform: translate(-50%, 140%); opacity: 0; background: var(--ink); color: var(--paper); padding: 14px 22px; font: 400 15px var(--sans); max-width: calc(100vw - 2 * var(--gutter)); }
#toast.show { transform: translate(-50%, 0); opacity: 1; }
#toast.err { background: var(--error); color: #fff; }
dialog { border: 1px solid var(--hair-strong); border-radius: 0; padding: 28px 24px 22px; background: var(--card); color: var(--ink); width: min(24rem, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(19, 18, 17, 0.4); }
.dialog-title { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.dialog-body { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 24px; }
.dialog-actions .btn { flex: 1; padding: 0 12px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }


/* Small phones: the color editor wraps instead of running off the side */
.color-top { flex-wrap: wrap; }
.color-top input:not([type]) { flex: 1 1 8rem; }
/* Same height, same look for selects in every browser (iOS renders native ones 28px tall) */
.controls select {
	-webkit-appearance: none; appearance: none;
	padding-right: 34px;
	background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 12px center;
}

/* Black on charcoal / white on bone: every swatch gets a hairline edge */
.strip span, .chip-color { box-shadow: inset 0 0 0 1px var(--hair); }
/* Hidden toast is truly gone. Transitions switch on only once it has been used ("live"), because
   WebKit otherwise animates it from visible to hidden on first paint and a fading box flashes at load. */
#toast { visibility: hidden; }
#toast.show { visibility: visible; }
#toast.live { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s, visibility 0s 0.35s; }
#toast.live.show { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s, visibility 0s; }