/* qodex.css: QodeX look for the GEMATRO calculator (AGPL-3.0).
   Loaded after styles.css and only overrides it, so upstream layout logic is
   untouched. Palette and type follow qodex.academy. */

@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/heebo-hebrew.woff2') format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

:root {
	color-scheme: dark; /* matches the site; see index.html */
	--qx-bg: #07050e;
	--qx-ink: #f3f4f8;
	--qx-muted: #a79ed0;
	--qx-faint: #7a7088;
	--qx-cyan: #00d4ff;
	--qx-violet: #9b59ff;
	--qx-gold: #f0cf95;
	--qx-line: rgba(140, 150, 190, 0.22);
	--qx-panel: rgba(14, 11, 26, 0.72);

	/* upstream variables, re-pointed at the brand */
	--font-family: 'Heebo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	--global-hue: 262;
	--menu-bg-accent: rgba(12, 9, 22, 0.97);
	--menu-bg-accent2: rgba(12, 9, 22, 0.97);
	--breakdown-bg-accent: transparent;
	--btn-bg-accent: transparent;
	--btn-hover-accent: var(--qx-cyan);
	--btn-active-accent: var(--qx-cyan);
	--body-bg-accent: var(--qx-bg);
	--table-row-odd: rgba(255, 255, 255, 0.025);
	--table-row-even: transparent;
	--input-bg-accent: rgba(10, 8, 18, 0.75);
	--checkmark-accent: var(--qx-cyan);
	--font-white-1: var(--qx-ink);
	--font-white-2: var(--qx-ink);
	--font-white-3: var(--qx-muted);
	--font-white-4: var(--qx-faint);
	--border-accent: var(--qx-line);
	--border-dark-accent: var(--qx-line);
	--separator-accent: rgba(140, 150, 190, 0.35);
	--separator-accent2: rgba(140, 150, 190, 0.18);
	--focus-outline: var(--qx-cyan);
	--break-val-accent: var(--qx-muted);
	--hist-header-gradient: rgba(155, 89, 255, 0.10);
	--query-bg-accent: rgba(155, 89, 255, 0.08);
	--placeholder-color: var(--qx-faint);
}

html { background: var(--qx-bg); }
html, body { height: auto; min-height: 100%; }
body {
	margin: 0;
	color: var(--qx-ink);
	font-family: var(--font-family);
	background: var(--qx-bg);
	background: radial-gradient(ellipse 120% 60% at 50% -10%, #150b2e 0%, #0b0618 45%, #07050e 100%) fixed;
}
/* The page scrolls normally; upstream scrolled a fixed-height box, which
   fights a header and a footer. */
#calcMain { height: auto; overflow: visible; padding: 0 16px 24px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.qx-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	max-width: 1100px; margin: 0 auto; padding: 18px 20px 6px;
}
.qx-mark {
	color: var(--qx-cyan) !important; text-decoration: none; font-weight: 800;
	font-size: 20px; letter-spacing: .34em;
}
.qx-langs { display: flex; gap: 6px; }
.qx-langs button {
	background: none; border: 1px solid var(--qx-line); border-radius: 999px;
	color: #aab0c4; font: 700 12px/1 var(--font-family); letter-spacing: .08em;
	padding: 8px 13px; min-height: 36px; cursor: pointer;
}
.qx-langs button.on, .qx-langs button[aria-pressed="true"] { color: var(--qx-cyan); border-color: rgba(0, 212, 255, .5); }
.qx-langs button:focus-visible { outline: 2px solid var(--qx-cyan); outline-offset: 2px; }

.qx-title {
	margin: 22px auto 6px; text-align: center; font-weight: 800;
	font-size: clamp(26px, 5vw, 40px); letter-spacing: -.01em; color: var(--qx-ink);
}
.qx-sub { margin: 0 auto 20px; max-width: 560px; text-align: center; color: var(--qx-muted); font-size: 15px; line-height: 1.55; }

/* ── Menus ──────────────────────────────────────────────────────────────── */
#calcOptionsPanel { margin-bottom: 8px; }
.dropbtn {
	color: var(--qx-ink); border: 1px solid var(--qx-line) !important; border-radius: 999px;
	padding: .55em 1.2em; margin: 0 3px; font-weight: 600; letter-spacing: .02em;
	background: rgba(255, 255, 255, .03);
}
.dropdown:hover .dropbtn { color: var(--qx-cyan); border-color: rgba(0, 212, 255, .55) !important; background: rgba(0, 212, 255, .06); }
.dropdown-content, .dropdown-content-opt {
	border-radius: 16px; border-color: rgba(255, 255, 255, .12) !important;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55); backdrop-filter: blur(14px);
	margin-top: 4px;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.inputheading { color: var(--qx-muted); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
#phraseBox, #highlightBox {
	border-radius: 14px; border: 1px solid rgba(248, 245, 238, .16) !important;
	padding: .5em .8em; transition: border-color .15s, box-shadow .15s;
}
#phraseBox:focus, #highlightBox:focus {
	outline: none; border-color: rgba(0, 212, 255, .55) !important;
	box-shadow: 0 0 0 3px rgba(0, 212, 255, .14);
}
#enterPhraseBtn, #queryDBbtn, .intBtn, .intBtn2, .intBtn3, .intBtnResetDate, .ciphEditBtn {
	border-radius: 999px !important;
}
#enterPhraseBtn, #queryDBbtn { background: var(--qx-cyan) !important; color: #03010d !important; border-color: var(--qx-cyan) !important; font-weight: 800; }

.intBtn:hover, .intBtn2:hover, .ciphEditBtn:hover, .intBtn3:hover, .intBtnResetDate:hover,
#queryDBbtn:hover, #enterPhraseBtn:hover, .queryPageBtn:hover {
	border-color: var(--qx-cyan) !important; color: var(--qx-cyan) !important; background: rgba(0, 212, 255, .08) !important;
}
#enterPhraseBtn:hover, #queryDBbtn:hover { color: #03010d !important; background: #5fe6ff !important; }

/* ── Results ────────────────────────────────────────────────────────────── */
.phraseGemContainer, .HistoryTable, #QueryTable, .BreakTable, .borderClassGemCard {
	border-color: var(--qx-line) !important;
}
.HistoryTable { border-radius: 12px; overflow: hidden; background: var(--qx-panel); }
.HistoryTable tr, .HistoryTable td { border-color: rgba(140, 150, 190, .14) !important; }
#ChartSpot, #BreakdownDetails { border-radius: 16px; }
/* Long charts scroll sideways on phones instead of running off the page. */
#ChartSpotScroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#capsNameChartBtn.qx-nocase { cursor: default; }

#calcNotification span { border-radius: 999px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.qx-foot { max-width: 760px; margin: 18px auto 0; padding: 18px 20px 40px; text-align: center; }
.qx-cta {
	display: inline-block; text-decoration: none; padding: 14px 24px; border-radius: 999px;
	background: var(--qx-cyan); color: #03010d !important; font-weight: 800; font-size: 15px;
	box-shadow: 0 0 34px rgba(0, 212, 255, .30);
}
.qx-cta:hover { background: #5fe6ff; }
.qx-legal { margin-top: 18px; font-size: 12.5px; color: var(--qx-faint); line-height: 1.7; }
.qx-legal a { color: #8a90a8 !important; }

@media (max-width: 520px) {
	.qx-head { padding: 14px 16px 4px; }
	.qx-mark { font-size: 17px; letter-spacing: .28em; }
	.dropbtn { padding: .5em .85em; margin: 0 1px; }
}

/* ── dekoda's appended theme (end of styles.css) hard-codes black and white.
      Same selectors, loaded later, so these win without touching upstream. ── */
body, #enabledCiphTable { background-color: transparent; }
html body { background: radial-gradient(ellipse 120% 60% at 50% -10%, #150b2e 0%, #0b0618 45%, #07050e 100%) fixed; }
#ChartSpotScroll *, #ChartSpot * { background: transparent !important; border-color: transparent !important; }
#ChartSpot { background: rgba(14, 11, 26, 0.55) !important; border: 1px solid rgba(140, 150, 190, .14) !important; }
#BreakTableContainer { background: transparent !important; }
.numPropTooltip, .optionElementTable { background-color: rgba(12, 9, 22, .97) !important; }
#phraseBox {
	background-color: var(--input-bg-accent); color: var(--qx-ink);
	border: 1px solid rgba(248, 245, 238, .16) !important;
	padding: 12px 14px; margin-bottom: 20px; max-width: 100%; box-sizing: border-box;
}
.dropdown:hover .dropbtn { background-color: rgba(0, 212, 255, .06); color: var(--qx-cyan); }
.dateCalcContainer { border: 1px solid var(--qx-line); border-radius: 16px; background: rgba(12, 9, 22, .9); }
.dateCalcContainer * { color: var(--qx-ink); }
.dateCalcTable2 td { background: transparent !important; }
#dateDurValues { border: 1px solid var(--qx-line); border-radius: 10px; }
input::placeholder, textarea::placeholder { color: var(--qx-faint) !important; }
.inputheading { font-size: 12px; }
a.qx-mark, a.qx-mark:link, a.qx-mark:visited { text-decoration: none; }
@media (max-width: 768px) {
	#phraseBox { width: 100%; }
}

/* Links: upstream draws a border-bottom on every link. */
.qx-head a, .qx-foot a.qx-cta { border-bottom: none !important; }
.qx-legal a { border-bottom: 1px solid rgba(138, 144, 168, .5) !important; }

/* Result cards: one even card per cipher instead of alternating squares. */
.phraseGemContainer tr:nth-child(odd), .phraseGemContainer tr:nth-child(even) { background-color: transparent; }
table.phraseGemContainer tbody { padding: 12px 0; gap: 10px; }
table.phraseGemContainer tbody tr {
	flex: 0 0 calc(25% - 10px);
	background: rgba(14, 11, 26, .55); border: 1px solid rgba(140, 150, 190, .16); border-radius: 16px;
	padding: 14px 6px 4px; box-sizing: border-box;
}
.phraseGemCiphName { font-weight: 600; letter-spacing: .01em; }

/* History header: a little air around the cipher names. */
.HistoryTable .hC { padding: 6px 8px; }
#HistoryTableArea { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
	table.phraseGemContainer tbody tr { flex: 0 0 calc(50% - 10px); margin-bottom: 0; }
}

/* An empty padding row would otherwise show as an empty card. */
table.phraseGemContainer tbody tr:not(:has(.phraseGemValueOdd, .phraseGemValueEven)) { visibility: hidden; border: none; background: none; }
/* Notifications and counts in Hebrew pick their own direction. */
#calcNotification span, .LetterCounts { unicode-bidi: plaintext; }

/* Upstream pads the card grid with a blank cell. */
table.phraseGemContainer tbody tr:has(.phraseGemCiphNameBlank) { visibility: hidden; }
/* A right-to-left chart scrolls from the right, so alef is visible first. */
#ChartSpotScroll:has(#ChartTable[dir="rtl"]) { direction: rtl; }
@media (max-width: 520px) {
	#ChartTable td { padding: 7px 3px; font-size: 16px; }
	#ChartTable td.ChartVal { font-size: 13px; padding: 5px 3px; letter-spacing: -.01em; }
	#ChartTable td#capsNameChartBtn font { font-size: 125% !important; }
}

/* ── Inside the QodeX site page: the site supplies header, title and footer ── */
html.qx-embed, html.qx-embed body { background: transparent !important; }
html.qx-embed .qx-head, html.qx-embed .qx-title, html.qx-embed .qx-sub, html.qx-embed .qx-foot { display: none; }
html.qx-embed #calcMain { padding: 0 4px 12px; }
/* The site page shows its own loading state (qodex-embed.js tells it when the
   calculator has started), so the upstream full-screen loader never shows. */
html.qx-embed #loader { display: none !important; }
/* The frame is sized to the content, so the page must not claim the frame's
   height as a minimum, and the body holds its children's margins so that its
   height is the whole content (see contentHeight in qodex-embed.js). */
html.qx-embed, html.qx-embed body { min-height: 0 !important; }
html.qx-embed body { display: flow-root; }
html.qx-embed #calcOptionsPanel { margin-top: 6px; }

/* dekoda squeezes the breakdown to 90% on phones, which cuts off a Hebrew
   breakdown table; use the full width, and scroll rather than clip if a
   breakdown is still wider than the screen. */
@media (max-width: 768px) {
	#BreakdownDetails { width: 100% !important; }
	#BreakdownSpot { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Free edition (qodex-edition.js): input, three ciphers, letter chart ──
   Everything else stays in the page, hidden, for a later full edition. */
html.qx-free #calcOptionsPanel,
html.qx-free #colorControlsMenuArea,
html.qx-free #editCiphersMenuArea,
html.qx-free #dateCalcMenuArea,
html.qx-free #queryDBbtn,
html.qx-free #highlightBox,
html.qx-free #clearFilterButton,
html.qx-free #loadPanel { display: none !important; }
/* Three cards, centred: the upstream padding cells take no space here, and the
   row centres whatever it holds (three across on wide screens, two and one on
   phones, with the last one in the middle). */
html.qx-free table.phraseGemContainer tbody { justify-content: center; }
html.qx-free table.phraseGemContainer tbody tr:has(.phraseGemCiphNameBlank),
html.qx-free table.phraseGemContainer tbody tr:not(:has(.phraseGemValueOdd, .phraseGemValueEven)) { display: none; }
html.qx-free table.phraseGemContainer tbody tr { flex: 0 0 200px; }
@media (max-width: 768px) {
	html.qx-free table.phraseGemContainer tbody tr { flex: 0 0 calc(50% - 10px); }
}