/*
 * Release notes page. Brand surface: the site's cream, ink and Murs Gothic, with indigo and
 * yellow as accents. Everything under [data-internal] is the reviewer's layer and copies the
 * app's internal chrome exactly (frontend-v2 components/internal/chrome.ts):
 *   frame  rounded-xl border-2 border-dashed border-purple-300 bg-purple-50/50
 *   badge  rounded-full border border-purple-300 bg-purple-100 11px semibold uppercase purple-800
 * Purple is used nowhere else on the page, so it reads as "clients don't see this".
 *
 * Type follows the design system's report surface: this page is read in paragraphs, and Murs
 * Gothic body text at 17px tires the reader within three of them. Murs Gothic is kept for display
 * (the hero, overlines); headings and body are Inter, in solid colours (rgba on cream goes muddy).
 */

@font-face { font-family: "GRN Inter"; font-weight: 100 900; font-display: swap; src: url(fonts/inter-normal-100_900.woff2) format("woff2"); }
/* The dates were set in Ubuntu Mono, which neither site loads (they fell back to the system's
   monospace). IBM Plex Mono ships with the plugin, the same face the pictures use for labels. */
@font-face { font-family: "GRN Mono"; font-weight: 400; font-display: swap; src: url(fonts/plexmono-normal-400.woff2) format("woff2"); }
@font-face { font-family: "GRN Mono"; font-weight: 500; font-display: swap; src: url(fonts/plexmono-normal-500.woff2) format("woff2"); }

.grn {
	--grn-ink: #121212;
	--grn-cream: #f1eae0;
	--grn-paper: #f4f2ee;
	--grn-indigo: #5f6bde;
	--grn-yellow: #f4bd38;
	--grn-red: #ec5134;
	--grn-fg: #1a1a1a;
	--grn-soft: #3d3d3d;
	--grn-muted: #6b6b6b;
	--grn-text: "GRN Inter", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--grn-p300: #d8b4fe;
	--grn-p50: rgba(250, 245, 255, 0.5);
	--grn-p100: #f3e8ff;
	--grn-p500: #a855f7;
	--grn-p600: #9333ea;
	--grn-p700: #7e22ce;
	--grn-p800: #6b21a8;
	--grn-p900: #581c87;
	--grn-ui: "GRN Inter", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--grn-fg);
	font-family: var(--grn-text);
	padding-bottom: 96px;
}
.grn *, .grn *::before, .grn *::after { box-sizing: border-box; }
/* The theme styles bare h2/h3/p/li; everything here states its own face, case and spacing. */
.grn h2, .grn h3, .grn h4, .grn p, .grn li, .grn ul, .grn figure { font-family: var(--grn-text); text-transform: none; letter-spacing: normal; }
.grn-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---- hero ---- */
.grn-hero { padding: 72px 0 40px; }
.grn .grn-kicker {
	font-family: "Murs Gothic", sans-serif;
	display: inline-block; margin: 0 0 20px; padding: 6px 14px; border: 2px solid var(--grn-ink);
	border-radius: 999px; background: var(--grn-yellow); font-size: 14px; font-weight: 500;
	letter-spacing: .06em; text-transform: uppercase;
}
.grn-h1 {
	font-family: "Murs Gothic", sans-serif; color: var(--grn-ink);
	margin: 0; font-size: clamp(40px, 6.4vw, 84px); line-height: .98; font-weight: 700;
	text-transform: uppercase; letter-spacing: -.01em; max-width: 14ch;
}
.grn-lede { margin: 24px 0 0; max-width: 640px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; font-weight: 400; color: var(--grn-soft); }

/* ---- feed ---- */
.grn-feed { margin-top: 24px; }
.grn-week {
	display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px;
	padding: 56px 0; border-top: 2px solid var(--grn-ink);
}
.grn-week__date { position: relative; }
/* One line always; a single date ("Sep 24, 2026", about 140 px) sits well inside the column. */
.grn-week__date a {
	position: sticky; top: 110px; display: inline-block; white-space: nowrap; color: var(--grn-ink); text-decoration: none;
	font-family: "GRN Mono", ui-monospace, monospace; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
	padding: 4px 10px; border: 1.5px solid var(--grn-ink); border-radius: 999px; background: var(--grn-paper);
}
.grn-week__date a:hover { background: var(--grn-yellow); }
.grn .grn-week__title { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.018em; color: var(--grn-ink); scroll-margin-top: 110px; max-width: 26ch; }
.grn-week__intro { margin: 16px 0 0; font-size: 19px; line-height: 1.6; font-weight: 400; color: var(--grn-soft); max-width: 680px; }

/* Links in the prose, to a page of the app or the docs: the brand's indigo, a shade darker so it
   reads as text on cream (5.8:1), underlined on hover. */
.grn .grn-link { color: #4450c8; font-weight: 500; text-decoration: none; }
.grn .grn-link:hover, .grn .grn-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.grn [contenteditable="true"] .grn-link { pointer-events: none; }

.grn-hl { margin-top: 48px; }
.grn .grn-hl__title { margin: 22px 0 0; font-size: 23px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--grn-ink); }
.grn-hl__body { margin: 10px 0 0; font-size: 17px; line-height: 1.65; font-weight: 400; color: var(--grn-fg); max-width: 680px; }
.grn-hl__bullets { margin: 14px 0 0; padding: 0; list-style: none; max-width: 720px; }
.grn-hl__bullets li { position: relative; padding-left: 26px; margin: 8px 0; font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--grn-soft); }
.grn-hl__bullets li::before {
	content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 12px;
	background: var(--grn-indigo); border-radius: 3px; transform: rotate(8deg);
}

.grn-media { position: relative; margin: 0; }
/* A picture (an animation or a still) brings its own backdrop, often a brand colour: shown as a rounded card. */
.grn-media:not(.grn-media--pending) { border-radius: 16px; overflow: hidden; }
.grn-video, .grn-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--grn-paper); object-fit: cover; }
.grn-play {
	position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
	border: 2px solid var(--grn-ink); border-radius: 50%; background: var(--grn-yellow); cursor: pointer;
}
.grn-play span { display: block; margin-left: 27px; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--grn-ink); }

.grn-more { margin-top: 44px; }
.grn .grn-more__title { margin: 0 0 14px; font-family: "Murs Gothic", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--grn-ink); }
.grn-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(18, 18, 18, .18); }
.grn-list > li { padding: 14px 0 14px 28px; border-bottom: 1px solid rgba(18, 18, 18, .18); position: relative; font-size: 16px; line-height: 1.6; font-weight: 400; color: var(--grn-soft); }
.grn-list > li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 12px; height: 12px; border-radius: 50%; background: var(--grn-yellow); border: 1.5px solid var(--grn-ink); }
.grn-list--fixes > li::before { content: "✓"; top: 13px; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--grn-indigo); font-weight: 700; font-size: 15px; }
.grn-list__title { display: block; font-weight: 600; color: var(--grn-ink); }
.grn-list__body { display: block; margin-top: 2px; }
.grn-minor { margin: 22px 0 0; padding-left: 28px; position: relative; font-size: 16px; line-height: 1.6; color: var(--grn-muted); }
.grn-minor::before { content: "+"; position: absolute; left: 3px; top: -1px; font: 700 18px/1.6 var(--grn-text); color: var(--grn-indigo); }
.grn-empty { padding: 48px 0; border-top: 2px solid var(--grn-ink); font-size: 18px; color: var(--grn-soft); }
.grn-older {
	display: inline-flex; margin-top: 32px; padding: 14px 22px; border: 2px solid var(--grn-ink); border-radius: 10px;
	background: transparent; color: var(--grn-ink); font: 500 15px/1 "Murs Gothic", sans-serif; letter-spacing: .06em;
	text-transform: uppercase; cursor: pointer;
}
.grn-older:hover { background: var(--grn-ink); color: var(--grn-paper); }

/* ---- the reviewer's layer (purple = internal) ---- */
.grn [data-internal] { font-family: var(--grn-ui); }
.grn-badge {
	display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--grn-p300);
	border-radius: 999px; background: var(--grn-p100); color: var(--grn-p800); font: 600 11px/1.6 var(--grn-ui);
	letter-spacing: .025em; text-transform: uppercase; white-space: nowrap;
}
.grn-eye { width: 12px; height: 12px; flex: none; }
.grn-bar, .grn-note, .grn-media--pending, .grn-details, .grn-week--draft, .grn-removed {
	border: 2px dashed var(--grn-p300); background: var(--grn-p50); border-radius: 12px;
}
.grn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px; color: var(--grn-p900); font-size: 14px; }
.grn-bar__text { margin: 0; flex: 1 1 320px; }
.grn-week--draft { padding: 28px; margin: 32px 0; border-top: 2px dashed var(--grn-p300); }
.grn-week--draft + .grn-week { border-top: 2px solid var(--grn-ink); }
.grn-review-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px dashed var(--grn-p300); color: var(--grn-p900); }
.grn-review-head__title { margin: 12px 0 4px; font: 600 18px/1.3 var(--grn-ui); color: var(--grn-p900); }
.grn-review-head__meta { margin: 0 0 14px; font-size: 13px; color: var(--grn-p800); }
.grn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.grn-actions__status { margin: 8px 0 0; min-height: 1em; font: 500 13px var(--grn-ui); color: var(--grn-p800); }
.grn-btn {
	display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--grn-p300); border-radius: 8px;
	background: #fff; color: var(--grn-p800); font: 600 13px/1.2 var(--grn-ui); cursor: pointer; text-decoration: none;
}
.grn-btn:hover { border-color: var(--grn-p600); color: var(--grn-p700); }
.grn-btn--primary, .grn-btn--save { background: var(--grn-p700); border-color: var(--grn-p700); color: #fff; }
.grn-btn--primary:hover, .grn-btn--save:hover { background: var(--grn-p800); color: #fff; }
.grn-btn--ghost { background: transparent; }
.grn-btn[disabled] { opacity: .55; cursor: wait; }
.grn-note { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; margin-top: 14px; padding: 10px 12px; color: var(--grn-p900); font-size: 13px; line-height: 1.5; }
.grn-note__label { font-weight: 600; }
.grn-srclist { margin: 0; padding: 0; list-style: none; flex-basis: 100%; }
.grn-srclist li { margin: 4px 0; font-size: 13px; line-height: 1.5; color: var(--grn-p900); }
.grn-src { display: inline-block; min-width: 110px; font-weight: 600; color: var(--grn-p800); }
.grn-links a, .grn-details a { color: var(--grn-p700); }
.grn-dim { color: var(--grn-p800); opacity: .75; }
.grn-media--pending { display: flex; flex-direction: column; justify-content: center; gap: 8px; aspect-ratio: 16 / 9; padding: 24px; color: var(--grn-p900); font-size: 14px; }
.grn-media--pending p { margin: 0; max-width: 520px; }
.grn-details { margin-top: 40px; color: var(--grn-p900); font-size: 14px; }
.grn-details summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; cursor: pointer; font-weight: 600; list-style: none; }
.grn-details summary::-webkit-details-marker { display: none; }
.grn-details summary::after { content: "+"; margin-left: auto; font-size: 18px; }
.grn-details[open] summary::after { content: "–"; }
.grn-details__body { padding: 0 16px 16px; }
.grn-details h4 { margin: 18px 0 6px; font: 600 12px var(--grn-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--grn-p800); }
.grn-details ul { margin: 0; padding-left: 18px; }
.grn-details .grn-srclist { padding-left: 0; }
.grn-pill {
	position: fixed; left: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border: 1px solid var(--grn-p300); border-radius: 999px; background: var(--grn-p100);
	color: var(--grn-p800); font: 600 12px var(--grn-ui); text-decoration: none; box-shadow: 0 4px 18px rgba(88, 28, 135, .18);
}
.grn [data-grn-field][contenteditable="true"] {
	outline: 2px dashed var(--grn-p500); outline-offset: 3px; background: #fff; border-radius: 4px; cursor: text;
}

/* The reviewer's cross, in the gutter left of each change. Hovering it outlines exactly what goes. */
.grn-removable { position: relative; }
.grn-x {
	position: absolute; left: -48px; top: 2px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px;
	padding: 0; border: 1px solid var(--grn-p300); border-radius: 999px; background: #fff; color: var(--grn-p700); cursor: pointer;
}
.grn-x svg { width: 14px; height: 14px; }
.grn-grip {
	position: absolute; left: -48px; top: 40px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px;
	padding: 0; border: 1px solid var(--grn-p300); border-radius: 8px; background: #fff; color: var(--grn-p700); cursor: grab; touch-action: none;
}
.grn-grip svg { width: 16px; height: 16px; }
.grn-grip:hover, .grn-grip:focus-visible { background: var(--grn-p100); border-color: var(--grn-p600); outline: none; }
.grn-grip:active { cursor: grabbing; }
.grn-list > li.grn-removable > .grn-grip { left: -72px; top: 11px; width: 26px; height: 26px; }
/* dragging */
.grn-ghost { opacity: .35; outline: 2px dashed var(--grn-p500); outline-offset: 6px; border-radius: 10px; background: var(--grn-p100); }
.grn-dragging { opacity: .92 !important; box-shadow: 0 12px 32px rgba(88, 28, 135, .25); background: #fff; border-radius: 12px; }
.grn-saving { pointer-events: none; opacity: .7; }
/* empty groups are drop zones for reviewers only (public pages never render them) */
[data-grn-group]:empty { min-height: 64px; border: 2px dashed var(--grn-p300); border-radius: 10px; display: grid; place-items: center; }
[data-grn-group]:empty::after { content: attr(data-grn-empty); font: 500 13px var(--grn-ui); color: var(--grn-p700); }
.grn-list[data-grn-group]:empty { border-top: 2px dashed var(--grn-p300); }
.grn-hls[data-grn-group]:empty { margin-top: 32px; }
.grn-more--empty .grn-more__title { color: var(--grn-p700); }
.grn-media--none { aspect-ratio: auto; }
.grn-x:hover, .grn-x:focus-visible { background: var(--grn-p700); border-color: var(--grn-p700); color: #fff; outline: none; }
.grn-removable:has(> .grn-x:hover), .grn-removable:has(> .grn-x:focus-visible) { outline: 2px dashed var(--grn-p500); outline-offset: 8px; border-radius: 10px; background: rgba(243, 232, 255, .35); }
.grn-list > li.grn-removable > .grn-x { left: -42px; top: 11px; width: 26px; height: 26px; }
.grn-minor-wrap > .grn-x { left: -42px; top: 18px; width: 26px; height: 26px; }
.grn-removed { margin-top: 32px; padding: 12px 16px; color: var(--grn-p900); font-size: 13px; }
.grn-removed__title { margin: 10px 0 6px; font: 600 14px/1.3 var(--grn-ui); color: var(--grn-p900); }
.grn-removed__list { margin: 0; padding: 0; list-style: none; }
.grn-removed__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; line-height: 1.5; }
.grn-btn--small { padding: 3px 10px; font-size: 12px; }

@media (max-width: 860px) {
	.grn-x, .grn-list > li.grn-removable > .grn-x, .grn-minor-wrap > .grn-x { left: auto; right: 0; top: 6px; }
	.grn-grip, .grn-list > li.grn-removable > .grn-grip { left: auto; right: 34px; top: 6px; }
	.grn-hl.grn-removable > .grn-x { right: 8px; top: 8px; }
	.grn-hl.grn-removable > .grn-grip { right: 44px; top: 8px; }
	.grn-list > li.grn-removable { padding-right: 70px; }
	.grn-minor-wrap.grn-removable { padding-right: 36px; }
	.grn-hero { padding: 48px 0 24px; }
	.grn-week { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 40px 0; }
	.grn-week__date a { position: static; }
	.grn-week--draft { padding: 18px; }
	.grn-hl { margin-top: 36px; }
	.grn-src { min-width: 0; margin-right: 6px; }
}