/* =====================================================================
   Nexian Tools - the frame.
   =====================================================================

   Loaded on every page, before any tool's own stylesheet. It owns the site
   chrome (top bar, navigation, context bar, footer, the four frame pages) and
   the handful of rules that should hold everywhere: focus, tap targets, wide
   content that must not drag the page sideways.

   THE BRIEF, from the owner: the site is external, so it is free of the game's
   skin rules - but the theme should stay recognisably close to the game rather
   than diverge from it. So this evolves the game's visual language instead of
   replacing it. The reason is not deference: every resource and unit icon on
   this site is a Travian 3.6 sprite drawn from game-sprites.css, and those
   cannot be recoloured. A frame that fought them would look like an unfinished
   migration. Compact, bordered, information-dense - modernised in spacing,
   type, contrast and state, not in character.

   WHAT IS ASSUMED, because it was not asked before this was written:
     - Light only. The game is light and the scaffold was; dark is additive
       later, which is why every colour below is a token rather than a literal.
     - The wordmark is the identity. No logo asset exists, so "Nexian Tools"
       set in type is the whole of it. Drop one in .brand when there is one.
     - "Similar" read as a restrained refresh of the existing grey and bronze,
       not a new palette. That was already the scaffold's direction.
   Any of the three can change without touching anything but the tokens.
   ===================================================================== */

:root {
	/* Ground and paper. Warm-neutral rather than cold: the sprites are warm and
	   a blue-grey frame makes them look dirty. */
	--bg:        #f2f1ed;
	--panel:     #ffffff;
	--panel-alt: #faf9f6;

	/* Ink. Three weights is enough for a tool; more reads as decoration. */
	--ink:       #1c1a17;
	--ink-soft:  #4a463f;
	--muted:     #746f66;

	/* Lines. Two: one that separates, one that barely does. */
	--line:      #d9d5cb;
	--line-soft: #eae7e0;

	/* The bronze the scaffold already used, plus the two states it needs. */
	--accent:      #8a5608;
	--accent-weak: #f4ead7;
	--accent-line: #d9b877;

	--warn: #8a5608;
	--bad:  #8f2a2a;
	--good: #4a7a00;

	/* The two state tints the tool pages paint whole panels with. They are
	   surfaces, so every dark theme has to restate them or a success box stays
	   a pale green rectangle in the middle of a dark page. */
	--good-weak: #eaf1df;
	--bad-weak:  #fdecea;

	--focus: #d49a31;

	--radius: 3px;
	--shadow: 0 1px 2px rgba(28, 26, 23, .06);
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
a:hover { color: #6d4406; }

/* Keyboard users get a visible ring everywhere, once, here - rather than each
   tool remembering. :focus-visible so a mouse click does not draw one. */
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Straight past the navigation to the tool. First thing in the tab order and
   invisible until it is focused. */
.skip {
	position: absolute;
	inset-inline-start: -9999px;
	inset-block-start: 0;
	z-index: 100;
	padding: 10px 14px;
	background: var(--panel);
	border: 1px solid var(--accent-line);
	color: var(--ink);
	text-decoration: none;
}
.skip:focus { inset-inline-start: 8px; inset-block-start: 8px; }

/* ---------------------------------------------------------------- top bar */
.topbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
	padding: 9px 18px;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}
.brand {
	font-size: 17px;
	letter-spacing: -.01em;
	text-decoration: none;
	color: var(--ink);
}
.brand b { color: var(--accent); font-weight: 700; }
.brand:hover { color: var(--ink); }

.whoami {
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
	font-size: 13px;
	color: var(--muted);
}
.whoami .acct {
	font-weight: 600;
	color: var(--ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.topnav {
	margin-inline-start: auto;
	display: flex;
	gap: 14px;
	align-items: center;
	font-size: 13px;
}
.topnav a { text-decoration: none; }
.topnav a:hover { text-decoration: underline; }

/* Someone else driving this account is the one thing the frame must not let a
   player miss, so the badge is coloured and outlined rather than quiet. */
.badge {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 2px 7px;
	border: 1px solid currentColor;
	border-radius: 10px;
	white-space: nowrap;
}
.badge-sitting { color: var(--warn); background: var(--accent-weak); }
.badge-noclub  { color: var(--bad); }

/* ------------------------------------------------------------- tool navigation */
.toolnav {
	display: flex;
	gap: 2px;
	padding: 0 18px;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
	/* Seven tools do not fit a phone. Scrolling sideways keeps them in one row
	   and in a stable order, which wrapping into three ragged lines does not. */
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.toolnav a {
	flex: 0 0 auto;
	padding: 9px 12px;
	font-size: 13px;
	text-decoration: none;
	color: var(--muted);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.toolnav a:hover { color: var(--ink-soft); background: var(--panel-alt); }
.toolnav a.here {
	color: var(--ink);
	border-bottom-color: var(--accent);
	font-weight: 600;
}

/* -------------------------------------------------------------- context bar */
.ctxbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 7px 18px;
	background: var(--panel-alt);
	border-bottom: 1px solid var(--line);
	font-size: 13px;
}
.ctxbar label {
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 11px;
}
.ctxbar select {
	font: inherit;
	padding: 5px 7px;
	min-height: 34px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	color: var(--ink);
	max-width: min(420px, 70vw);
}
.ctxbar .fine { margin-inline-start: auto; }

/* --------------------------------------------------------------- the page */
.page {
	max-width: 940px;
	margin: 0 auto;
	padding: 24px 18px 64px;
}
body.wide .page { max-width: 1400px; }

h1 { font-size: 22px; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 19px; line-height: 1.3; margin: 0 0 6px; }
.lede { color: var(--ink-soft); margin: 0 0 18px; }
.fine { color: var(--muted); font-size: 13px; }

.notice {
	background: var(--accent-weak);
	border: 1px solid var(--accent-line);
	border-radius: var(--radius);
	padding: 10px 12px;
	margin: 0 0 16px;
}

/* ------------------------------------------------------------- tool cards */
.cards {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.cards li {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	box-shadow: var(--shadow);
}
.cards li a { text-decoration: none; font-weight: 600; }

.cta {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	padding: 10px 18px;
	min-height: 40px;
	border-radius: var(--radius);
	font-weight: 600;
}
.cta:hover { background: #6d4406; color: #fff; }

/* ------------------------------------------------------------------ footer */
.foot {
	max-width: 940px;
	margin: 0 auto;
	padding: 16px 18px 28px;
	border-top: 1px solid var(--line-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	justify-content: space-between;
	font-size: 13px;
	color: var(--muted);
}
body.wide .foot { max-width: 1400px; }

/* ===================================================================
   Rules that hold on every tool page, not just the frame.
   =================================================================== */

/* A tool's widest table must scroll inside its own box. Without this the page
   itself scrolls sideways on a phone and the navigation goes with it. The tools
   wrap their tables in .ntools-vp-logwrap already; this makes that wrapper do
   the job on every page at once rather than each remembering. */
.ntools-vp-logwrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* A row of tribe buttons is `display:flex` with no wrap in nexian-tools.css, so
   on a phone the six of them (All plus five tribes) run off the side and take
   the whole page with them - measured at 397px of content in a 375px viewport.
   Wrapping is the fix and it is wanted on every page that has them, so it is
   here rather than repeated in each tool's own stylesheet.

   It lives in this file rather than beside the rule it corrects because
   nexian-tools.css is under active work for the Training Calculator; move it
   there, into .ntools-tribe-btns itself, once that settles. */
.ntools-tribe-btns { flex-wrap: wrap; }

/* Anything a finger has to hit. 40px is the smallest that is comfortable; the
   tools set their own sizes above this where they need to. */
@media (pointer: coarse) {
	.toolnav a,
	.cta,
	.ctxbar select,
	button,
	select,
	input[type="checkbox"] + * { min-height: 40px; }
	.toolnav a { display: flex; align-items: center; }
}

/* A sortable column header is a control, so it should look like one and take a
   keyboard. The tools mark them up as <th> with a click handler; this at least
   gives them a pointer and a focus ring, and the newer pages add aria-sort. */
th[aria-sort] { cursor: pointer; user-select: none; }
th[aria-sort]:hover { background: var(--accent-weak); }

/* Respect a system setting rather than animating over it. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 700px) {
	.topbar { padding: 8px 12px; gap: 8px 10px; }
	.brand { font-size: 16px; }
	/* The account name and the sitting badge move to their own line so neither
	   is truncated to nothing beside the wordmark. */
	.whoami { order: 3; flex-basis: 100%; }
	.topnav { margin-inline-start: auto; }
	.toolnav { padding: 0 12px; }
	.ctxbar { padding: 7px 12px; }
	.ctxbar .fine { flex-basis: 100%; margin-inline-start: 0; }
	.ctxbar select { max-width: 100%; flex: 1 1 200px; }
	.page { padding: 18px 12px 56px; }
	.foot { padding: 14px 12px 24px; }
	h1 { font-size: 20px; }
}

@media (max-width: 420px) {
	.cards { grid-template-columns: 1fr; }
	.foot { flex-direction: column; gap: 8px; }
}

/* ----------------------------------------------------------------- right-to-left */
/* The shell sets dir="rtl" for Hebrew. Logical properties carry most of it;
   these are the two that do not. */
[dir="rtl"] .toolnav { direction: rtl; }
[dir="rtl"] .badge { letter-spacing: 0; }

/* ------------------------------------------------------------------ printing */
@media print {
	.topbar, .toolnav, .ctxbar, .foot, .skip { display: none; }
	.page { max-width: none; padding: 0; }
	body { background: #fff; }
}