/*
 * NEXTAI brand skin — visual layer only. The news layout, components and
 * content stay in NX Core; this file supplies the brand's design tokens.
 * Channel colors remain data-driven in skin/config.php.
 */

:root {
	/* NEXTAI brand book — three voices, one role each. */
	--font-display: "Karantina", "IBM Plex Sans Hebrew", Impact, sans-serif;
	--font-site: "IBM Plex Sans Hebrew", -apple-system, "Segoe UI", Arial, sans-serif;
	/* Mono has no Hebrew glyphs; the Hebrew face is the deliberate fallback. */
	--font-data: "IBM Plex Mono", "IBM Plex Sans Hebrew", ui-monospace, monospace;

	/* Night, graphite, rule, paper — and the cursor, the only color that speaks. */
	--bg: #0A0A0B;
	--bg-plate: #0A0A0B;
	--surface: #131315;
	--surface-2: #18181B;
	--surface-3: #1F1F23;
	--border: #26262B;
	--rule-2: #3A3A40;

	--white: #F4F4F1;
	--text: #F4F4F1;
	--text-2: #CFCFC9;
	--text-4: #CFCFC9;
	--text-6: #BDBDB6;
	--soft: #BDBDB6;
	--muted: #A3A39C;

	--color-accent: #FFDA1F;
	--color-accent-2: #FFEE9A;
	--on-accent: #0A0A0B;
	/* "Now" is the cursor's job, so live state uses the signal, not a red. */
	--color-live: #FFDA1F;

	--radius: 4px;
}

/* The wordmark is drawn from skin/logo.svg (see the brand section at the end). */
.brand::before {
	display: none;
}

.brand::after {
	content: "";
	display: block;
	flex: none;
	width: 1.35em;
	height: 1.35em;
	background: url("favicon.svg") center / contain no-repeat;
}

/* Keep numerical metadata crisp without leaving Hebrew glyphs to a system font. */
.meta-info,
.entry-meta {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}

/* Verified badge follows the brand accent. */
.social-verified-badge { color: var(--accent); }

/* Balanced wrapping and neutral tracking keep Hebrew article titles natural. */
.reading-header .reading-title {
	letter-spacing: 0;
	text-wrap: balance;
}

/* Lift article metadata slightly above the dark canvas without changing layout. */
.reading-meta-bar .meta-info {
	color: #BDBDB6;
	font-weight: 500;
}

.reading-meta-bar .meta-icon {
	opacity: 0.9;
}

/* NEXTAI: full-bleed page canvas on wide screens; keep the shared editorial
   grid intact and style only the desktop RTL channel navigation. */
/* The global header is intentionally hidden when desktop rails are active;
   start the dashboard at the viewport edge instead of reserving an empty cap. */
@media (min-width: 1101px) {
	body.nx-has-rails .page-wrap {
		padding-block-start: 16px;
		--nx-layout-gutter: clamp(12px, 1.4vw, 24px);
		padding-inline: var(--nx-layout-gutter);
	}

	body.nx-has-rails .layout {
		margin-top: 0;
	}
}

@media (min-width: 1101px) {
	body.nx-has-rails .layout {
		grid-template-columns: 220px minmax(0, 1fr) 300px;
	}

	.rail-right {
		border-inline-end: 1px solid var(--border);
		padding-inline-end: 8px;
	}

	.rail-brand .search-form {
		max-width: 100%;
	}

	.ch-row {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		/* 36px floor, not a fixed height: 14px Hebrew at 1.4 needs the room
		   for its ascenders, but the rail must stay compact enough that 24
		   items clear a 1080p viewport without the page scrolling. */
		min-height: 34px;
		padding-inline: 8px;
		gap: 8px;
		border-radius: 8px;
		font-size: 13px;
	}

	.ch-group {
		padding-inline: 8px;
	}
}

/* Keep the first mobile homepage module close to the channel switcher; the
   default editorial page padding + layout offset otherwise stack needlessly. */
@media (max-width: 1100px) {
	body.nx-has-rails .page-wrap {
		padding-block-start: 12px;
	}

	body.nx-has-rails .layout {
		margin-top: 0;
	}
}

@media (min-width: 1441px) {
	.container {
		max-width: none;
	}

	.page-wrap {
		padding-inline: clamp(24px, 2vw, 40px);
	}

	body.nx-has-rails .layout {
		grid-template-columns: 240px minmax(0, 1fr) 300px;
	}

}

@media (min-width: 1101px) {
	/* Keep the long dynamic channel labels on one readable line. */
	.ch-row-label {
		font-size: 12.5px;
	}

	.ch-row-mark {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 8px;
		height: 8px;
		border-radius: 2px;
		background: var(--ch);
	}

	.ch-row-mark .i {
		display: none;
	}

	.ch-row.is-active {
		background: color-mix(in srgb, var(--color-accent) 15%, transparent);
		box-shadow: inset -2px 0 0 var(--color-accent);
	}

	.ch-group {
		padding-inline: 10px;
		font-family: var(--font-site);
		font-size: 11.5px;
		font-weight: 600;
		/* Hebrew letterforms must not be tracked out: .06em here opened gaps
		   between letters and read as a spacing bug, not as a small-caps cue.
		   Emphasis comes from size + muted colour + the separator above it. */
		letter-spacing: 0;
		text-transform: none;
	}
}

/* The core derives its accent ramp by mixing with white; the brand book has
   exactly two yellows, so the ramp now runs signal → sig-soft only. */
:root {
	--accent-400:    color-mix(in srgb, var(--color-accent) 45%, var(--color-accent-2));
	--accent-300:    color-mix(in srgb, var(--color-accent) 70%, var(--color-accent-2));
	--accent-200:    var(--color-accent-2);
	--accent-100:    color-mix(in srgb, var(--color-accent) 88%, var(--color-accent-2));
}

/* ==========================================================================
   NEXTAI brand book → platform (visual layer only; no layout values change).
   Ratio on every screen: night 70 · graphite 15 · paper 13 · cursor 2.
   Yellow has three jobs only — where the agent writes, what matters, where
   you are — and is never set on white.
   ========================================================================== */

/* Wordmark: the official geometric NEXTAI drawn from logo.svg (never typed).
   The link keeps its text for screen readers and its original box. */
.brand::after { display: none; }
.brand-text {
	display: block;
	width: 5.2em;
	height: 1.25em;
	background: var(--logo-src, url("logo.svg")) center / contain no-repeat;
	-webkit-text-fill-color: transparent;
	color: transparent;
	overflow: hidden;
	white-space: nowrap;
	user-select: none;
}
.brand:focus-visible { outline-offset: 4px; }

/* Editorial voice: Karantina 700 for headlines and big numbers only. */
.reading-header .reading-title,
.entry-header h1{
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.08;
}
.reading-header .reading-title { font-size: clamp(38px, 5vw, 58px); }
@media (max-width: 768px) {
	.reading-header .reading-title { font-size: 36px; line-height: 1.06; }
}

/* Paper-on-night surfaces: translucent header/strip keep the night plate. */
.site-header,
.ch-strip-wrap { background: color-mix(in srgb, #0A0A0B 90%, transparent); }
.card-social { background: var(--surface); }
.reading-content blockquote {
	background: color-mix(in srgb, var(--color-accent) 5%, var(--surface));
}

/* Night text on the cursor, never paper — 14.4:1 (brand book 4.4). */
.skip-link,
.skip-link:focus,
.social-read-btn:hover,
.btn-submit-inline,
.btn-submit-comment,
.pagination .page-numbers.current,
.composer-avatar,
.comment-mini-avatar {
	color: var(--on-accent);
}
.btn-submit-inline:hover,
.btn-submit-comment:hover { color: var(--on-accent); }
.composer-avatar,
.comment-mini-avatar { background: var(--color-accent); }
.comment-avatar .avatar-circle {
	background: var(--surface-3);
	border-color: var(--rule-2);
	color: var(--text);
}
.brand-text{ box-shadow: none; }

/* "Where you are": active tab / channel carry a yellow underline, not a fill. */
.feed-tab.is-active { box-shadow: inset 0 -2px 0 var(--color-accent); }
.feed-tab.is-active .tab-icon { color: var(--color-accent); }
@keyframes nx-cursor { 50% { opacity: 0; } }

/* Focus ring and selection = the cursor. */
:focus-visible { outline-color: var(--color-accent); }
::selection { background: var(--color-accent); color: var(--on-accent); }

/* ==========================================================================
   BRAND PRECISION PASS — deviations 1..10 fixed to the brand book.
   Layout, grid, component order and DOM are untouched. This block only
   overrides token-level presentation values in the skin layer.
   ========================================================================== */

/* --- 1. Real font weights only --------------------------------------------
   The book ships Plex Sans Hebrew 400/500/600/700, Mono 500 and
   Karantina 700. Anything above 700 was synthetic bold; anything that
   claimed Mono 600/700 was fake. Cap every weight at its real file. */
.entry-header h1,
.feed-continue-title,
.reading-content h2,
.reading-header .reading-title,
.site-footer .f-brand,
.social-avatar,
.brand,
.comment-mini-avatar,
.composer-avatar,
.entry-meta{
	font-weight: 700;
}
.ch-group,
.a-reading-time,
.entry-meta{
	font-weight: 500;
}
/* 500 still reads as "emphasis" against 14px items. A group heading is a
   structural cue — the separator and the muted colour already mark it — so
   the weight comes down and the type stays quiet. */
.ch-group{
	font-weight: 400;
	opacity: .92;
}

/* Article title: same 56–80 band. */
.reading-header .reading-title {
	font-size: clamp(40px, 4.15vw, 56px);
	line-height: 1.04;
}
@media (max-width: 780px) {
	.reading-header .reading-title { font-size: clamp(32px, 9vw, 40px); line-height: 1.04; }
}

/* Article subheads: the book's 32–46 band in Karantina, line-height 1. */
.reading-content h2,
.reading-content h3 {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
}
@media (min-width: 781px) {
	.reading-content h2 { font-size: clamp(32px, 3.2vw, 46px); }
}

/* Body copy: 1.7, not the core's 1.84. */
.reading-content p,
.entry-content p,
.nx-quote p {
	line-height: 1.7;
}
.reading-standfirst,
.feed-continue-title{
	font-size: 20px;
	line-height: 1.7;
}
/* Two identical .ch-group size rules sat back to back here (12px, then
   13px); the second silently won. One rule now, and it steps DOWN to 11.5px:
   the group heading must read below its 14px items, not beside them. */
.ch-group{
	font-size: 11.5px;
	line-height: 1.4;
}

/* Card and compact titles: 16–18 band, no 15.5 / 17 intermediates. */
.social-text-preview h2{
	font-size: 18px;
	line-height: 1.4;
}
/* tab label is a small label (13), not a card title */
.feed-tab > span { font-size: 13px; line-height: 1.4; }
/* core ships .pagination .page-numbers (0,2,0); match its specificity */
.pagination .page-numbers { font-size: 13px; line-height: 1.4; }
.social-text-preview p,
.social-author-name {
	font-size: 16px;
	line-height: 1.7;
}
.social-avatar > span{
	font-size: 13px;
	line-height: 1.4;
}

/* Page numbers and meta rows: 12–13 band. */
.page-numbers,
.a-reading-time,
.entry-meta{
	font-size: 12px;
	line-height: 1.4;
}

/* Brand wordmark box: driven by em, so it must use a real size. */
.brand-text {
	font-size: 22px;
}

/* --- 6. Corners ------------------------------------------------------------
   4px everywhere, except the 50% circles and the 2–3px mono marks the book
   uses for tiny rules. */
.ad-demo, .btn-share, .btn-submit-inline, .comment-form-wrap,
.comment-reply-btn, .comment-toast, .comment-vote-btn, .empty-state,
.entry-embed, .featured-media, .feed-tab, .form-row textarea,
.inline-comment-form textarea, .no-comments-yet, .reaction-btn,
.reading-content .nx-embed-video, .search-form input[type="search"],
.skip-link, .social-read-btn, .ch-row,
.card-social, .social-media-wrap, .page-numbers, .next.page-numbers, .social-comment,
.social-submit, .social-input, .social-more-toggle, .feed-toolbar-tabs, .reading-content blockquote, .entry-comments, .comment, .entry-footer, .search-form, .comment-form,
.inline-comment-form, .form-row input, .form-row select, .form-row button,
.btn-submit-comment, .social-card, .social-header, .social-body,
.social-text-preview,
.nx-card, .nx-meta, .nx-tag, .nx-chip, .nx-btn, .nx-panel,
.ch-group, .ch-row-label, .ch-row-meta, .entry-meta a,
.reading-meta, .reading-tags, .author-box, .author-box-name {
	border-radius: 4px;
} .comment-mini-avatar, .social-avatar,
.ch-row-mark{
	border-radius: 50%;
}

/* --- 7. No drop shadows ---------------------------------------------------
   The book uses a 1px rule, never a shadow. */
.btn-submit-comment:hover, .card-social:hover,
.ch-story.has-new .ch-story-ring, .ch-story.is-active .ch-story-ring,
.comment-mini-avatar, .comment-toast-error, .comment-toast-success,
.form-row textarea:focus, .inline-comment-form textarea:focus, .reading-content blockquote,
.search-form input[type="search"]:focus, .social-avatar,
.social-read-btn:hover, .reaction-btn:hover, .feed-tab:hover, .btn-share:hover, .ch-row:hover {
	box-shadow: none;
}


/* The core derives its accent ramp by mixing the signal with white, which
   produced off-book yellows (#FFEB84, #FFF2B1). The book has exactly two
   yellows: #FFDA1F and its soft #FFEE9A. */
:root {
	--accent-400: #FFEE9A;
	--accent-300: #FFEE9A;
	--accent-200: #FFEE9A;
	--accent-100: color-mix(in srgb, #FFDA1F 18%, #131315);
	--accent-700: color-mix(in srgb, #FFDA1F 70%, #0A0A0B);
	--accent-600: color-mix(in srgb, #FFDA1F 85%, #0A0A0B);
	--accent-2: #FFEE9A;
}
.social-embed-frame { background: var(--color-bg); }
.nx-quote { background: var(--color-surface); }
a:hover{ color: var(--color-accent); }
.reading-content a:hover, .social-text-preview a:hover { color: var(--color-accent); } .feed-continue-title a:hover { color: var(--color-accent); }

/* --- 9. Mono is for numerals and Latin only ------------------------------
   Hebrew labels fall back to the site face, never the mono face. */
.ch-group{
	font-family: var(--font-site);
}

/* --- 10. The wordmark is an asset, never typed text -----------------------
   The footer mark becomes the real wordmark SVG; the accessible name is
   kept for screen readers. */
.site-footer .f-brand {
	display: block;
	width: 91.4px;
	height: 22px;
	background: url("logo-inverse.svg") left center / contain no-repeat;
	color: transparent;
	-webkit-text-fill-color: transparent;
	overflow: hidden;
	white-space: nowrap;
	user-select: none;
	text-indent: 0;
}
@media (max-width: 560px) {
	.site-footer .f-brand { width: 79px; height: 19px; }
}
time,
.social-timestamp,
.social-subtext,
.reaction-count,
.ch-story-name,
.social-read-btn > span,
.reactions-sub{font-size:12px;line-height:1.4;}
/* 12.5 / 13.5 / 14 -> 13 (small label) */
.ch-row-label,
.action-count,
.social-more-toggle,
.reaction-label,
.btn-share-label,
.social-text-preview,
.reactions-title,
.f-brand,
.pagination,
.page-numbers{font-size:13px;line-height:1.4;}
/* 16.5 -> 16 (body) */
.social-title > a,
.entry-content > p,
.entry-content > p > strong,
.entry-content > p > a,
.entry-content li{font-size:16px;}
/* 18.5 -> 18 (body) */
.nx-quote > p{font-size:18px;line-height:1.7;}
/* wordmark glyph box: 22px was the float sizing hack, not a type step. Hold it. */
.brand > .brand-text{font-size:22px;}
/* Rail type, measured against the 16px article body next to it.
   The label carries the reading, so it gets the 14px step; the group
   heading steps DOWN to 11.5px, not up — that inversion is what makes a
   14px nav item and an 11.5px heading sit in the right hierarchy.
   The desktop .ch-row / .ch-row-label size lives at the end of this file,
   after the brand-book size scrub that would otherwise flatten it to 13px. */
@media (min-width: 1101px) {
	.ch-row-new { font-size: 11px; line-height: 1.35; }
	.ch-filter-input { font-size: 13px; }
	.ch-more,
	.ch-less { font-size: 13px; }
}
/* 13.5 -> 13 (small label) */
.feed-tab,
.social-author-name,
.social-text,
.social-text-full a,
.social-text-full blockquote,
.tweet-box,
.entry-meta,
.site-footer,
.site-footer span,
.ch-row{font-size:13px;line-height:1.4;}
/* The brand-book scrub above flattens the whole 12.5/13.5/14 family to 13px,
   which leaves a 13px nav item identical in size to a 13px feed tab. The rail
   is read, not scanned past, so it takes the 14px step back — declared AFTER
   the scrub so it wins. The group heading goes the other way, to 11.5px, and
   that inversion (14px item / 11.5px heading) is what creates the hierarchy. */
@media (min-width: 1101px) {
	.ch-row { font-size: 14px; line-height: 1.4; }
	.ch-row .ch-row-label { font-size: 14px; line-height: 1.4; }
}
/* corners 10px / 8px -> 4px */
.social-thumbnail-link,
.social-media-wrap,
.social-embed-frame,
.social-embed-frame--linkedin,
.btn-submit-comment,
.pagination .page-numbers,
.ch-row{ -webkit-border-radius:4px;border-radius:4px;}
.meta-item.meta-views,
.meta-views{font-family:var(--font-site,system-ui,sans-serif);}
/* no negative tracking outside display headlines */
.social-title > a{letter-spacing:normal;}
/* quote surface: graphite, not a 5% yellow wash (book has no such tint) */
.entry-content > .nx-quote,
.nx-quote{background:var(--color-surface, #131315);}
/* ==========================================================================
   LIGHT MODE — paper variant of the brand (brand book: night is the identity,
   day is available). Yellow is a fill with ink on it, never text on white.
   Applied by the viewer's OS default, or by the header toggle (data-theme).
   ========================================================================== */
:root[data-theme="light"] {
	--bg: #F4F4F1; --bg-plate: #F4F4F1; --surface: #FFFFFF; --surface-2: #EDEDEA; --surface-3: #E2E2DE;
	--border: #DCDCD6; --rule-2: #BDBDB6;
	--white: #0A0A0B; --text: #0A0A0B; --text-2: #2A2A2E; --text-4: #2A2A2E; --text-6: #3A3A40;
	--soft: #3A3A40; --muted: #5A5A60;
	--on-accent: #0A0A0B;
	--accent: #FFDA1F; --accent-2: #0A0A0B; --accent-300: #0A0A0B; --accent-200: #0A0A0B;
	--accent-400: #FFDA1F; --accent-600: #F2C200; --accent-700: #E0B400;
	--accent-soft: #FFF3B0;
	--tint-0025: rgba(10,10,11,.025); --tint-003: rgba(10,10,11,.03); --tint-0035: rgba(10,10,11,.035);
	--tint-004: rgba(10,10,11,.04); --tint-0045: rgba(10,10,11,.045); --tint-005: rgba(10,10,11,.05);
	--tint-006: rgba(10,10,11,.06); --tint-007: rgba(10,10,11,.07); --tint-008: rgba(10,10,11,.08);
	--tint-01: rgba(10,10,11,.1); --tint-014: rgba(10,10,11,.14); --tint-018: rgba(10,10,11,.18);
	--plate-086: rgba(244,244,241,.86); --plate-088: rgba(244,244,241,.88); --surface-08: rgba(255,255,255,.8);
	color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]):not(:has(body.night)) {
	--bg: #F4F4F1; --bg-plate: #F4F4F1; --surface: #FFFFFF; --surface-2: #EDEDEA; --surface-3: #E2E2DE;
	--border: #DCDCD6; --rule-2: #BDBDB6;
	--white: #0A0A0B; --text: #0A0A0B; --text-2: #2A2A2E; --text-4: #2A2A2E; --text-6: #3A3A40;
	--soft: #3A3A40; --muted: #5A5A60;
	--on-accent: #0A0A0B;
	--accent: #FFDA1F; --accent-2: #0A0A0B; --accent-300: #0A0A0B; --accent-200: #0A0A0B;
	--accent-400: #FFDA1F; --accent-600: #F2C200; --accent-700: #E0B400;
	--accent-soft: #FFF3B0;
	--tint-0025: rgba(10,10,11,.025); --tint-003: rgba(10,10,11,.03); --tint-0035: rgba(10,10,11,.035);
	--tint-004: rgba(10,10,11,.04); --tint-0045: rgba(10,10,11,.045); --tint-005: rgba(10,10,11,.05);
	--tint-006: rgba(10,10,11,.06); --tint-007: rgba(10,10,11,.07); --tint-008: rgba(10,10,11,.08);
	--tint-01: rgba(10,10,11,.1); --tint-014: rgba(10,10,11,.14); --tint-018: rgba(10,10,11,.18);
	--plate-086: rgba(244,244,241,.86); --plate-088: rgba(244,244,241,.88); --surface-08: rgba(255,255,255,.8);
	color-scheme: light;
}
}
:root[data-theme="dark"] {
	--tint-0025: rgba(255,255,255,.025); --tint-003: rgba(255,255,255,.03); --tint-0035: rgba(255,255,255,.035);
	--tint-004: rgba(255,255,255,.04); --tint-0045: rgba(255,255,255,.045); --tint-005: rgba(255,255,255,.05);
	--tint-006: rgba(255,255,255,.06); --tint-007: rgba(255,255,255,.07); --tint-008: rgba(255,255,255,.08);
	--tint-01: rgba(255,255,255,.1); --tint-014: rgba(255,255,255,.14); --tint-018: rgba(255,255,255,.18);
	--plate-086: rgba(9,9,13,.86); --plate-088: rgba(9,9,13,.88); --surface-08: rgba(17,17,24,.8);
}

/* Light paper: the wordmark is drawn in ink (logo-light.svg) instead of paper. */
:root[data-theme="light"] { --logo-src: url("logo-light.svg"); }
:root[data-theme="light"] .site-footer .f-brand { background-image: url("logo-light-inverse.svg"); }

/* Light/dark switch: quiet ghost button in the header / rail. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; margin-inline-start: 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: 500 13px/1 var(--sans, sans-serif); cursor: pointer;
}
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle:hover { border-color: var(--rule-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rail-brand .theme-toggle { margin: 12px 0 0; }

/* Light paper: term labels keep their hue but darken to pass 4.5:1 on white.
 * The bright night tint stays on the swatch/border only. */
:root[data-theme="light"] .social-meta-term,
:root[data-theme="light"] .social-meta-term:hover {
  color: color-mix(in srgb, var(--term) 55%, #0A0A0B);
}
/* Active popular-tab label: ink on the paper fill, never yellow text. */
:root[data-theme="light"] .nx-pop-tab.is-active,
:root[data-theme="light"] .nx-pop-tab[aria-selected="true"] {
  color: var(--text);
}