/* VENDORED — do not edit. Copied verbatim from icarustoolbox/public/assets/style.css by scripts/sync-fieldguide-css.py. Edits belong upstream, in that repo, under its own design contract; an edit here is a fork and `--check` will fail. */ /* ========================================================================== Icarus Field Guide — field-terminal theme. Dark drop-pod HUD: deep space-slate panels, ICARUS orange accents, angular uppercase headings, subtle scanlines. Single stylesheet. ========================================================================== PAGE CONTRACT — every page follows this so the site reads as one system. (See CLAUDE.md for the prose version.) • Structure: page_header($title, $navKey) → content → page_footer() (inc/layout.php). Page files never emit their own /nav. • One

per page, inside .pagehead (title left, optional primary .btn right). Design exceptions: home .herostrip, auth .authbox. • Headings: .sech for sections — same size, colour and casing as a "##" inside .mdbody, so an authored heading and a generated one read as the same rank; .subhead / .subhead2 for sub-levels; .tierhead.tier-N for tier-scoped headings. • Tables: inside
; secondary columns get .col-opt so they fold away on phones. • Buttons: .btn / .btn-primary / .btn-ghost, grouped in .btnrow. Chips: .chip / .chiprow. Empty states: .empty. Muted text: .dim. • Stating a label and its value — anywhere, on any page — is .guidefacts / .fact, a rule-bounded strip of borderless cells. A mission's "Time limit", an item's "Damage", a build's "Points used" and the admin dashboard's "Views today" are all the same widget. Don't add a new box class for a number. • "Browse everything" pages render all rows once and filter client-side with state in the URL hash (items.php, tree.php, guides.php). • EVERY value comes from a :root token. Not "colour and spacing come from tokens where convenient" — every colour, every font-size, every radius and every padding/margin/gap below this block is a var(). The file used to carry 81 hex literals, 101 rgba literals, 23 font sizes, 20 radii and 31 spacing lengths against 20 tokens, which is how six copies of one gradient and a 12.5px-beside-12px-beside-13px type ramp happen. The acceptance test is a grep: after :root there must be no hex, no rgba, no font-size/border-radius/padding/margin/gap literal. Three deliberate exceptions, and nothing else: - The 33 single-use palette definitions: the .cat- item categories and the .c- and .sb-c- sticky colours. Each appears exactly once, so each is already its own single definition point. (Careful writing this comment: a literal star-slash inside a CSS comment ends it. Spelling those selectors with globs closed this block early and silently unstyled the entire site.) - Lengths above 24px, which are layout dimensions (a 230px column, a 130px art panel) rather than spacing steps. - 1px hairlines and 50% (which means "circle", not a radius step). A colour that is a variant of a token is written color-mix(in srgb, var(--token) N%, transparent) — never a fresh hex or rgba, or the variant stops following the token it came from. NB this needs Chrome 111+ / Safari 16.2+ (Mar 2023), which the file already required before the sweep. • Static styling lives here, not inline. Inline `style=` is only for per-element DATA — CSS custom properties (--accent), computed positions/sizes, progress widths — never for styling that could be a class. • ONE class per visual form. A page may not introduce a class that only it uses for appearance; page-specific classes are behaviour hooks (#itemtable, .itemsempty) or data carriers, nothing else. Collapsed in 2026-08 and kept collapsed: - .chip is the ONLY filter control, with .chip--mono (tier chips) and .chip--lg (the talent category picker) as modifiers. .chip--mono and .chip--lg were the same control with different corners and type, and survive only as aliases in .chip's selector list until every page says .chip. .tabs is NOT one of these — it switches sections rather than filtering, and stays its own thing. - .cardlist is the ONLY grid of cards. .cardlist--map and .cardlist--tight differed from it in track width alone, which is now data (--card-min), not a second rule. - .toolbar is the ONLY strip of controls above a list. .toolbar and .toolbar were two names for it on eight pages each — and resource_log.php used both, at two different gaps. - .sortlist/.sortrow is the ONE drag-to-arrange list, and the one form here that only a single page currently renders. It is not a .datatable variant: a table cannot nest, and this list's whole point is that a row contains the rows inside it. Named for the form rather than for admin_navigation.php so the next sortable reuses it instead of adding a second. • NO OFFSET DECORATION on a box or a button. Nothing that frames or accents an element may sit outside its border box — no corner brackets, offset outlines, offset drop shadows, corner ticks or bevel edges at negative top/left. A mark a pixel proud of the border it frames reads as a misaligned second edge, not a frame: the box looks nudged up and left. (That is why the HUD corner brackets came off in 2026-08 — see the note above .card/.tile/.mapcard.) Emphasis goes INSIDE the box: border-color, background, or a flush ring (box-shadow: 0 0 0 1px …, spread only, both offsets zero). Focus rings are the exception — outline/outline-offset is the platform's own affordance and is meant to be detached. • A BORDERED BOX HAS ONE BORDER WEIGHT on all four sides. The same defect comes from inside the border box when one edge is fatter than the rest (a 2px accent border-top, a 3px accent border-left) or a second rule is laid along one (inset 0 -2px under a 1px border): at the corners the heavy edge overshoots the light one and the box reads as sitting off its own outline. Carry an accent by tinting the WHOLE border — color-mix(in srgb, var(--accent) 38%, var(--line)) — as .subtree, .tiergroup and .itemtile now do. A one-sided rail is fine only with no other border to mismatch: .sech, .tierhead and .mdbody blockquote are rails on borderless text, and .tsheet's border-top is a full-bleed bar's only edge. • Mission guides render only the sections a mission has data for, so the set varies per page. Each section must therefore stand on its own without a fixed running order: .stepflow (walkthrough, numbered by CSS counter so it can't drift from row order), .difflevels (what each drop difficulty changes), .hintlist, and .gridref — the single treatment for a map cell wherever one appears. .sechnote on a .sech distinguishes the game's two difficulty axes: the facts row states how hard the mission IS ("Rated: Hard"), tables keyed by the level you PICK say "by drop difficulty". • .gridref HAS TWO FORMS AND THEY MUST NOT LOOK ALIKE: bare, it is a value; inside a.gridlink it is a control that opens that 504 m square on the interactive map. For the life of the site they rendered identically — `text-decoration: none` over the same chip — so the only thing advertising a mission guide's 23 clickable cells was a hover state and a cursor, both of which need the reader to have guessed first. The link form wears a pin inside its own border box and a tinted border/fill (never a fattened edge — see the one-border-weight rule above), and states it in WORDS too: ui_gridref() writes the title/aria-label, ui_gridref_hint() the one line above the section. Both forms are built by ui_gridref() (inc/ui.php) — a hand-written is what to grep for after any change here. ========================================================================== */ :root { --bg: #0c0f12; --bg2: #11161b; --panel: #161d24; --panel2: #1c242d; --line: #29343f; --text: #d7dee6; --dim: #8b98a5; --orange: #e8862a; --orange-hi: #ffa94d; --green: #7fc25c; --red: #e06052; --blue: #58a6d8; --t1: #8bc34a; --t2: #58a6d8; --t3: #b07fe0; --t4: #e8862a; --t5: #e0556f; --to: #ffd75e; --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* .wrap's side padding. Shared so full-bleed furniture (.pinbar) and the .topbar header can match it exactly instead of hardcoding a value that drifts at other widths. */ --wrap-pad: 18px; /* The X on the search field's clear button. A data: URI is the only way to hand ::-webkit-search-cancel-button a shape, and it is masked rather than drawn, so the colour comes from a token like everything else. */ --x-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); /* ---- surfaces and rules ------------------------------------------------ The tokens above name the six things the site is MADE of. The ones below name the things it was previously spelling out by hand: before this, the stylesheet carried 81 distinct hex literals against 20 tokens, so "the chrome is too dark" meant finding six copies of one gradient and hoping you found all six. Every literal below appeared at least twice. */ /* The chrome bar. One vertical gradient shared by .topbar, the footer, .pinbar, .usermenu-panel, .navgroup-panel and mapview's toolbar — it was written out identically in all six places. */ --bar-1: #12181f; --bar-2: #0e1318; /* Rules, lightest to strongest. --line (above) is a box's own border; --line-soft is the hairline BETWEEN rows inside a box (datatable rows, cell dividers, task lists), which is deliberately darker than the border so a table doesn't read as a grid of boxes. */ --line-soft: #1a222b; --line-faint: #2c3742; --line-hi: #384654; /* Wells — surfaces that sit BELOW the panel plane, not above it. */ --void: #05070a; /* deepest: the map canvas, icon outline shadows */ --well: #0a0d10; /* an icon's backing plate */ --well-2: #0b1015; /* talent tooltip / rank panel */ --well-3: #10151a; /* the gridded backdrop behind the tech tree */ /* Stops for the two radial "lift" glows (body backdrop, .tnode hover). */ --lift-1: #182029; --lift-2: #141c24; /* Text ramp. --text and --dim (above) are the two everyday weights; these are the step above --text (a lede) and the two below --dim (a watermark, and the grey that means "no value here"). */ --text-2: #bfcad4; --text-faint: #45525f; --text-absent: #3a4652; /* Ink ON a warm fill — the dark brown used for text sitting on --orange, on --red and on the primary button. Brown rather than black so it reads as printed on the colour instead of punched out of it. The two differ by three RGB units and are collapse candidates; kept apart here only so this pass changes no pixel. */ --ink-warm: #17110a; --ink-warm-2: #14100a; /* The primary button, which is a gradient plus a border plus a hover gradient — five literals across three rules before this. */ --btn-1: #f09a3e; --btn-2: #d9781f; --btn-line: #b4641a; --btn-1-hi: #ffb35c; --btn-2-hi: #ea8b2c; /* The talent tree's brown-gold prerequisite wiring. .edge draws it and three other rules had to match it by eye — two of them said so in a comment, which is the tell that it wanted to be a token. */ --wire: #6b5a2f; /* The sticky board is a deliberately LIGHT surface inside a dark site, so it carries its own small ramp instead of borrowing the page's. */ --board-bg: #f4f6f8; --board-line: #e2e6eb; --board-ink: #57606b; --board-dim: #9aa4b0; --ink-paper: #33302a; /* ink on a sticky note */ /* ---- type scale -------------------------------------------------------- 216 font-size declarations used to name 23 different sizes, 56 of them on a half-step (12.5px next to 12px next to 13px). Nothing chose those half-steps deliberately — they are what happens when each page picks a size by eye. Eleven steps, and a page picks the step, not a number. */ --fs-micro: 10px; /* .cardtype, tier badges, the workshop flag */ --fs-xs: 11px; /* dense table meta, chip lettering */ --fs-sm: 12px; /* captions, .dim runs — the commonest size */ --fs-md: 13px; /* dense UI default */ --fs-base: 15px; /* body copy; matches the body rule */ /* 16px is load-bearing and NOT interchangeable with --fs-base: iOS Safari zooms the viewport when a focused input's text is under 16px, which is why .searchbox/.stickyedit/.bigsearch step up to it on small screens. Keep any input at or above this. */ --fs-lg: 16px; --fs-xl: 17px; /* .card h2/h3, .list-row h3, .avatar's initial */ --fs-2xl: 20px; /* .sech, session dates, route arrows */ --fs-3xl: 26px; /* h1 */ --fs-hero: 30px; /* .pagehead h1 at wide widths */ --fs-ghost: 34px; /* placeholder glyphs: the dashed "no image" box, .avatar-lg's initial */ /* ---- radius ------------------------------------------------------------ Was 20 distinct values, including 5px beside 4px and 7px beside 6px. */ --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 16px; /* the sticky board's soft corner — its own step, because rounding it to a pill would round the board */ --r-pill: 999px; /* chips and toggles — was 11/20/22px by hand */ /* ---- spacing ----------------------------------------------------------- ~800 padding/margin/gap components named 31 different lengths. The design is really a 2px system — 6, 8, 10, 12, 14 and 16 carry 400 of those uses — with about 105 odd-numbered strays (3, 5, 7, 9, 11, 13, 15) that are just where somebody nudged a value once. The strays round up to the next step; the even ones are exact, so the site's density is unchanged. Lengths above 24px are layout dimensions rather than spacing steps and stay literal on purpose. */ --sp-px: 1px; /* hairline offsets, not a spacing step */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 10px; --sp-6: 12px; --sp-7: 14px; --sp-8: 16px; --sp-9: 18px; --sp-10: 20px; --sp-11: 24px; /* The header's line box, in WHOLE PIXELS. Everything in .topbar is centred on one line, so every box in it has to be a whole number of pixels tall or nothing in it can land on the pixel grid: body copy is 1.55, which at the bar's 12px and 13px type gives line boxes of 18.6px and 20.15px, so the bar came out 49.59px tall, its centre line fell on 24.297 and every item rounded to whichever side of it the rasteriser preferred — the avatar 0.3 up, the bell 0.27 down, and the whole thing changing with device pixel ratio. These two are the same heights to the nearest pixel (30px nav entries, a 32px Feedback button, a 38px Log in button), so the bar keeps the height it had; they are only made exact. --lh-bar-btn is the .btn one: 13px type in the .navuser button, which is what sets the logged-out bar's height. */ --lh-bar: 18px; --lh-bar-btn: 20px; /* THE BAR IS NOT AS TALL AS ITS BOX, AND CENTRING IN THE BOX IS THEREFORE NOT CENTRING. .topbar paints TWO rows below its background — the 1px border, and the 1px accent the box-shadow lays under it (`0 1px 0`, in both themes) — and it paints nothing at all above, because the bar's top edge is the top of the window. Read off the screen a column at a time, the chrome runs y0…y49 on a 49px bar: 50 painted rows, whose middle is 25, while the content box centres everything on 24. So every item in the bar sat a pixel high, and the wordmark's caps — half a pixel high inside their own box on top of that — sat 1.5px high, which is where it stops being arithmetic and starts being visible. The content goes down by half the edge's weight: one hairline, added to the padding above and taken off the padding below, so the box height, --topbar-h and the measured breakpoints are all unchanged. Kill the accent line and this becomes 0. Add a top edge and it becomes 0 too. It is half of (bottom edge − top edge), and it is measured off the PAINTED pixels, not off the box model. */ --bar-edge: 1px; /* ---- the rest of the ramp ---------------------------------------------- Six greys lived between --dim and --text-faint, in pairs one RGB unit apart (#7d8894 beside #6f7a86, #5b6670 beside #55626f, #4a5561 beside #4a5560). Nobody can see those differences; they are three steps. */ --text-3: #7d8894; --text-4: #5b6670; --text-5: #4a5560; --text-bright: #c3ccd6; --ink-light: #fff; /* text on a saturated fill */ --ink-ok: #cdeab3; --ink-err: #f0b0a8; --done: #1e7d32; /* a completed task's fill */ --map-label: #f0e6d2; /* place names burned onto map art */ /* Black and white overlays — shadows, scrims and sheens. Was 20 black alphas and 10 white ones, which is one decision ("how dark is a shadow") spelled thirty ways. */ --shade-1: rgba(0, 0, 0, .1); --shade-2: rgba(0, 0, 0, .15); --shade-3: rgba(0, 0, 0, .25); --shade-4: rgba(0, 0, 0, .35); --shade-5: rgba(0, 0, 0, .5); --shade-6: rgba(0, 0, 0, .6); --shade-7: rgba(0, 0, 0, .8); --shade-8: rgba(0, 0, 0, .95); --sheen-1: rgba(255, 255, 255, .015); --sheen-2: rgba(255, 255, 255, .04); --sheen-3: rgba(255, 255, 255, .16); --sheen-4: rgba(255, 255, 255, .35); --sheen-5: rgba(255, 255, 255, .55); --panel3: #262f39; /* between --panel2 and --line: the tier group header */ --dust: #796f57; /* the warm haze over the field-journal backdrop */ --paper: #c7c0b1; --moss: #aeb477; --sand: #c79b62; --rule: color-mix(in srgb, var(--paper) 18%, transparent); /* The site's one caret, as an image. A , item name or other unbroken text would otherwise force the column wider than the page and break every margin below it. min-width:0 lets them actually respect the column they're given. */ .twocol > * { min-width: 0; } @media (max-width: 860px) { .twocol { grid-template-columns: 1fr; } } /* Section headings read as headings: the same size, colour and casing a "##" gets inside .mdbody, so a generated section ("Objective manifest") and an authored one ("Hints & tips") on the same page look like the same rank instead of one shouting in 13px caps above the other. 24px is .mdbody h2's computed size — 1.5em of the 16px body — kept literal here because .sech sits outside .mdbody and would otherwise scale off a different parent. */ .sech { font-size: var(--fs-3xl); letter-spacing: .4px; color: var(--orange-hi); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); margin: 26px 0 var(--sp-6); } .sech::before { content: "▸ "; opacity: .75; } .tierhead { font-size: var(--fs-base); letter-spacing: 1.6px; text-transform: uppercase; border-left: 3px solid var(--orange); padding-left: var(--sp-5); margin: 26px 0 var(--sp-6); } .tierhead.tier-1 { border-color: var(--t1); } .tierhead.tier-2 { border-color: var(--t2); } .tierhead.tier-3 { border-color: var(--t3); } .tierhead.tier-4 { border-color: var(--t4); } .tierhead.tier-5 { border-color: var(--t5); } .tierhead.tier-o { border-color: var(--to); } /* The untiered set — world resources, which carry no tech tier at all. Same dim treatment tier_badge() and the tier chips already give it. */ .tierhead.tier-g { border-color: var(--dim); } /* progression.php: one tier per section, prose under the tier's own rail. No border of its own, so nothing here can mismatch a border weight — the rail on .tierhead is a left edge on borderless text, which is the case the page contract explicitly allows. */ .progtier { margin: 0 0 28px; } .progtier > p { max-width: 70ch; } /* "Generated from the game's own data — last changed " — the freshness line on item, creature, guide, map and pillar pages. A rule above it separates it from the content it is describing without boxing it. */ .updatedline { margin-top: 28px; padding-top: var(--sp-5); border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); } /* guides.php's server-rendered missions-by-planet index. The chips are plain names in volume (170+), so they get a tighter row than the default .chiprow gap, which is tuned for a handful of facets. */ .missionindex { gap: var(--sp-3); margin-bottom: var(--sp-5); } .missionindex-group { margin-bottom: var(--sp-9); } .missionindex-more > summary { display: inline-block; color: var(--orange-hi); cursor: pointer; font-size: var(--fs-sm); letter-spacing: .4px; } .missionindex-more > summary:hover { color: var(--orange); } .missionindex-more[open] > summary { margin-bottom: var(--sp-5); } /* A sub-heading has to be nearer what it heads than what it follows, or the groups it is dividing run together. It sat at 16px above and 8px below, and once the forms under it stopped paying their spacing twice (see .stackform) the gap between two SECTIONS was no bigger than the gap between two fields inside one — ten settings groups reading as one undivided column. 24px above against 8px below binds the heading to what follows it. .sech gets that for free from its own border-bottom; .subhead carries no rule, so the space is the only signal it has. */ .subhead { font-size: var(--fs-sm); letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); margin: var(--sp-11) 0 var(--sp-4); } .subhead2 { font-size: var(--fs-md); font-weight: 600; margin: var(--sp-6) 0 var(--sp-3); } .subhead2 .dim { font-weight: 400; font-size: var(--fs-sm); } .dim { color: var(--dim); } .empty { color: var(--dim); font-style: italic; padding: var(--sp-7) var(--sp-2); } .lede { font-size: var(--fs-lg); color: var(--text-2); } .spacer { flex: 1; } .flash { padding: var(--sp-5) var(--sp-7); border-radius: var(--r-sm); margin-bottom: var(--sp-7); border: 1px solid; } .flash-ok { background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 40%, transparent); color: #b9e2a3; } .flash-err { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 45%, transparent); color: var(--ink-err); } /* Positioning context for the boxes' own absolutely-placed parts (.herostrip's starfield, .modalclose). Nothing decorative hangs off it. NO OFFSET DECORATION ON A BOX OR BUTTON. This used to carry "HUD corner brackets": 2px orange Ls pinned at top:-1px/left:-1px and bottom:-1px/right:-1px, so they sat a pixel PROUD of the border they were meant to frame. At every size and zoom that reads as a second, misaligned edge — the box looks nudged up and left rather than framed — and it landed on seven different box classes at once. A box's edge is its border. Don't reintroduce brackets, offset outlines, offset shadows or corner ticks that sit outside the border box; state emphasis with border-color, background or a flush ring (box-shadow: 0 0 0 1px, spread only, no offset). */ .authbox, .herostrip, .card, .tile, .mapcard, .heropanel, .modalbox { position: relative; } /* --------------------------------------------------------------- forms */ input, select, textarea, button { font: inherit; color: var(--text); } input, select, textarea { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-5); } input:focus, select:focus, textarea:focus { outline: 1px solid var(--orange); border-color: var(--orange); } textarea { width: 100%; resize: vertical; font-family: var(--mono); font-size: var(--fs-md); } label { display: block; margin: var(--sp-5) 0 var(--sp-2); color: var(--dim); font-size: var(--fs-md); } label input, label select, label textarea { display: block; width: 100%; margin-top: var(--sp-2); color: var(--text); } label.chk { display: inline-flex; align-items: center; gap: var(--sp-3); } label.chk input { width: auto; display: inline; } .formrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-6); } .editform { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-8) var(--sp-9); } /* A list of short values being edited — one row each, numbered, with a way to add one and a way to take one away. unit.php's application builder writes the choices of a "pick one" question with it (unit.js builds the rows over the plain textarea that works without a script). NAMED FOR THE FORM rather than for that page, the call .sortlist made above: the next editor that asks somebody for a handful of lines reuses this instead of adding a second one. The numbering is not decoration — the applicant answers this question through a
`, which set display:flex ON A TABLE CELL — the cell dropped out of the table layout, so the column stopped lining up with its header and every row grew tall enough for two wrapped lines of 12px links. .btnrow is for a row of buttons in flow content; a cell that holds actions is this. */ .datatable td.rowacts { white-space: nowrap; text-align: right; vertical-align: middle; } .datatable td.rowacts > * { vertical-align: middle; } .datatable td.rowacts > * + * { margin-left: var(--sp-4); } /* The admin CSV import forms. A file input's intrinsic width is wide and doesn't shrink, so as an .inlineform (inline-flex, nowrap) the pair pushed the whole page sideways on a phone. Wrap instead. */ .csvform { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; } .csvform input[type=file] { min-width: 0; max-width: 100%; } /* ---- the sortable list (admin_navigation.php) -------------------------- A nested, drag-to-arrange list: the header nav's own shape, rendered as rows you can pick up. Not a .datatable — a table cannot nest, and the whole point here is that a row can contain the rows inside a menu. .sortrow is a bordered box, so it carries ONE border weight on all four sides, and a menu tints the WHOLE border rather than fattening one edge of it (see the contract at the top of this file). Every state below does the same: border colour, background, or a FLUSH ring (spread only, both offsets zero). Nothing sits outside a row's border box. Rows are deliberately short. The bar is fifteen entries and the list is the thing you are dragging within, so a row that reads comfortably on its own but pushes half the list below the fold is the wrong trade: at ~38px the whole nav fits one screen and a drag never has to cross the fold. touch-action: none is on the HANDLE, not the row. It has to be somewhere — without it a touch drag scrolls the page instead of firing the pointermove events navorder.js listens for — but putting it on the row would mean a phone could not scroll a list that fills the screen by dragging the only thing on it. So a mouse can drag from anywhere on a row and a finger drags from the handle, which is also why the handle grows to a 44px target on small screens. */ .sortlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } /* The indent is the nesting. Padding on BOTH sides, so a child's border sits inside its menu's rather than flush against it — two borders on the same pixel column read as one misaligned edge, which is the defect the contract at the top of this file is about. */ .sortlist--sub { margin: 0 var(--sp-2) var(--sp-2) var(--sp-9); padding: 0 var(--sp-5); gap: var(--sp-2); border-left: 1px solid var(--line-soft); min-height: 30px; justify-content: center; } .sortrow { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); } .sortrow--menu { border-color: color-mix(in srgb, var(--orange) 38%, var(--line)); background: var(--panel2); } /* Wraps rather than overflows: on a phone the row folds into two lines instead of pushing the page sideways, which is the call .csvform makes above. */ .sortline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding: var(--sp-2) var(--sp-4); cursor: grab; } .sortform.is-sorting .sortline { cursor: grabbing; } /* The handle is a real button — it is the keyboard's way in, and the whole row is the mouse's, so this only has to say "this moves" and take focus. */ .sortgrip { flex: 0 0 auto; background: none; border: 1px solid transparent; border-radius: var(--r-sm); /* --text-4, not --text-5. The ⠿ is aria-hidden decoration inside a labelled button, so it is the visual affordance of a UI component and answers to the 3:1 non-text floor rather than the 4.5:1 text one — --text-5 is 2.53:1 and misses it, --text-4 is 3.28:1. The ramp above it is untouched: row hover still lifts to --text-3 and the handle's own hover to --text. */ color: var(--text-4); font-size: var(--fs-lg); line-height: 1; padding: var(--sp-1) var(--sp-2); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; } /* A finger drags from the handle and nothing else, so on a phone the handle is a real tap target rather than a 24px glyph — and the row folds to two lines with the handle beside the name and everything else indented under it, rather than each part wrapping wherever it happens to run out of room. */ @media (max-width: 1000px) { .sortgrip { min-width: 44px; min-height: 44px; } } @media (max-width: 700px) { .sortline { row-gap: var(--sp-1); } .sortname { flex: 1 1 auto; min-width: 0; } .sortmeta { flex: 1 0 100%; padding-left: 50px; } } .sortrow:hover .sortgrip { color: var(--text-3); } .sortgrip:hover { color: var(--text); border-color: var(--line); } .sortgrip[aria-pressed="true"] { color: var(--orange); border-color: var(--orange); } .sortname { flex: 0 0 auto; min-width: 160px; font-weight: 600; font-size: var(--fs-md); display: flex; align-items: center; gap: var(--sp-3); } /* A name is editable in place, so it has to look editable without looking like a form: text until you point at the row, then a field's outline and a pencil. The pencil answers on ROW hover rather than on the name's own — a control you can only discover by happening to cross eight characters of text is a control nobody finds. Everything stays inside the border box: the resting state is a transparent border of the same weight, so nothing shifts when it appears. */ .sortrename { display: inline-flex; align-items: center; gap: var(--sp-3); background: none; border: 1px solid transparent; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-3); margin: 0 calc(var(--sp-3) * -1); color: inherit; font: inherit; cursor: text; text-align: left; } .sortrename:hover { border-color: var(--line-hi); background: var(--bg2); } .sortpen { color: var(--text-5); font-size: var(--fs-xs); opacity: 0; } .sortrow:hover .sortpen, .sortrename:focus-visible .sortpen { opacity: 1; } .sortrename:hover .sortpen { color: var(--text-3); } .sortnameinput { width: 150px; font-weight: 600; } .sortfallback input { width: 140px; } /* "menu", set as a badge so a container reads as a different kind of row than the pages inside it even before you notice the tinted border. */ .sortkind { flex: 0 0 auto; font-size: var(--fs-micro); letter-spacing: 1px; text-transform: uppercase; color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 38%, var(--line)); border-radius: var(--r-pill); padding: 0 var(--sp-3); } /* Where it points + what is true of it, as one flex item so the pair folds onto the second line together when the row is too narrow to hold them. */ .sortmeta { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-5); } .sortwhere { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sortnote { flex: 0 0 auto; font-size: var(--fs-xs); } .sortfallback { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); } /* Every row carries the controls for BOTH lists and the stylesheet picks — navorder.js moves rows between the lists without a reload, and a button rebuilt in JS is a button that can be rebuilt wrong. `.sortlist--out` or not is a question CSS cannot get wrong. */ .sorthide, .sortshow, .sortdel { flex: 0 0 auto; } .sortshow, .sortdel { display: none; } .sortlist--out .sorthide { display: none; } .sortlist--out .sortshow, .sortlist--out .sortdel { display: inline-flex; } /* A menu out of the bar is empty by construction, so its drop zone would be a container you can fill while it is nowhere. */ .sortlist--out .sortlist--sub { display: none; } /* × is a quiet control until you look at the row — the same reasoning as the rename pencil. It keeps its space either way so nothing shifts, and it is always there on touch, where there is no hover to answer. */ .sorthide { opacity: 0; } .sortrow:hover > .sortline > .sorthide, .sortrow:focus-within > .sortline > .sorthide { opacity: 1; } @media (hover: none) { .sorthide { opacity: 1; } } /* Out of the bar: still real rows you can drag, read as set aside. */ .sortlist--out { margin-bottom: var(--sp-8); } .sortlist--out > .sortrow { background: var(--bg2); border-style: dashed; } .sortlist--out .sortname, .sortlist--out .sortwhere { color: var(--dim); } /* An empty menu's drop zone. Dashed because it is a place to put something, not a thing — and it is the only dashed edge here for the same reason. */ .sortempty { color: var(--dim); font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-5); border: 1px dashed var(--line-hi); border-radius: var(--r-md); text-align: center; } /* The row being dragged, and the menu it would land in. The target matters most: geometry alone can't tell you whether you are dropping INTO Reference or next to it. */ .sortrow.is-dragging, .sortrow.is-held { border-color: var(--orange); box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 8%, var(--panel)); } .sortrow.is-drop-target { border-color: var(--orange); } .sortrow.is-drop-target > .sortline > .sortkind { background: color-mix(in srgb, var(--orange) 18%, transparent); } .sortrow.is-drop-target > .sortlist--sub { border-left-color: var(--orange); } .sortform.is-sorting { -webkit-user-select: none; user-select: none; } .sortform.is-saving { cursor: progress; } /* Rows slide to their new places rather than teleporting — navorder.js sets a transform and clears it, so this is the only rule that needs to exist for the FLIP to play. */ .sortrow { transition: transform 140ms ease, border-color 120ms ease, background 120ms ease; } @media (prefers-reduced-motion: reduce) { .sortrow { transition: none; } } /* The "New menu" form, in the .toolbar above the list rather than as a .pagehead action: it adds a row to the list below, which is what a toolbar is for, and as a 441px flex sibling of the page intro it squeezed that intro into half the column and left the other half empty under the buttons. */ .sortadd { display: flex; align-items: center; gap: var(--sp-4); } /* What just happened, for the eye and for a screen reader (role=status). Sits at the far end of that toolbar, beside the thing it is about. It keeps its height so the row doesn't shift as messages come and go. */ .sortstatus { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); min-height: 28px; font-size: var(--fs-sm); color: var(--dim); text-align: right; } /* The small print at the foot: a reading measure, because these are sentences to read rather than a row to scan. */ .sortnotes { max-width: 760px; margin: var(--sp-6) 0 0; } .sortstatus.is-ok { color: var(--green); } .sortstatus.is-err { color: var(--red); } .sortstatus .btn { padding: var(--sp-1) var(--sp-4); font-size: var(--fs-xs); } #sorthelp kbd { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0 var(--sp-2); } /* The measured bar width, filled in by navorder.js — red once the top level has outgrown the drawer breakpoint the row was measured against. */ [data-navwidth].over { color: var(--red); } /* Pointing at a row in admin_navigation.php lights the link it IS, up in the real bar. Emphasis inside the box, as everywhere: a tint and a colour, never an offset mark. */ .mainnav [data-nav-key].is-lit, .mainnav [data-nav-key].is-lit:hover { color: var(--orange); background: color-mix(in srgb, var(--orange) 16%, transparent); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-8) var(--sp-9); margin: var(--sp-7) 0; } /* A heading at the top of a box sits at the box's padding. .sech's 26px top margin exists to separate it from the content above it, and inside a panel there is none — it was simply added to the padding, so every panel opened with 42px of nothing above its own title. */ .panel > .sech:first-child { margin-top: 0; } /* inferred, not wiki-documented — set apart from the sourced bench line above it */ .benchderived { font-size: var(--fs-sm); color: var(--text-2); margin: var(--sp-5) 0 0; padding-top: var(--sp-5); border-top: 1px dashed var(--line); } /* -------------------------------------------------------------- modal */ /* Centered dialog + dimming scrim. Generic rather than named after its one current caller (index.php's post-registration welcome popup, see consume_welcome_flag() in inc/helpers.php) — any future one-shot dialog can reuse it. The orange border and panel surface are what make it read as this terminal rather than a stock browser dialog. */ .modalscrim { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--void) 75%, transparent); display: flex; align-items: center; justify-content: center; padding: var(--sp-8); } /* The authModal instance (inc/layout.php) stays permanently in the DOM and toggles via the `hidden` attribute rather than being added/removed — the unconditional `display: flex` above has equal specificity to the `[hidden]` UA rule and would otherwise win, showing the scrim even while hidden. */ .modalscrim[hidden] { display: none; } .modalbox { width: 420px; max-width: 100%; background: var(--panel); border: 1px solid var(--orange); border-radius: var(--r-lg); padding: var(--sp-11) 26px; box-shadow: 0 10px 40px var(--shade-6); } .modalbox h2 { margin: var(--sp-3) 0 var(--sp-5); letter-spacing: .5px; } .modalbox p { margin: 0 0 var(--sp-5); } .modalclose { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--dim); font-size: var(--fs-2xl); line-height: 1; cursor: pointer; padding: var(--sp-2); } .modalclose:hover { color: var(--orange-hi); } /* --------------------------------------------------------------- auth */ .authbox { max-width: 420px; margin: 8vh auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 30px; box-shadow: 0 0 40px color-mix(in srgb, var(--orange) 7%, transparent); } .feedbackbox { max-width: 760px; margin-top: 5vh; } .feedbackbox .formrow { align-items: start; } .authbox h1 { letter-spacing: 1px; } .authbox .btn { width: 100%; margin-top: var(--sp-7); padding: var(--sp-6); } .botcatch { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* File inputs, wherever they appear (feedback screenshots, account.php's avatar, admin uploads): the browser's default button is a white OS chip that reads as a foreign object on a dark terminal, so it gets .btn's shape. */ input[type=file] { padding: var(--sp-5) var(--sp-5); color: var(--dim); font-size: var(--fs-md); cursor: pointer; } input[type=file]::file-selector-button { margin-right: var(--sp-5); padding: var(--sp-3) var(--sp-6); border-radius: var(--r-sm); cursor: pointer; background: var(--panel2); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: var(--fs-sm); letter-spacing: .6px; text-transform: uppercase; } input[type=file]::file-selector-button:hover { border-color: var(--orange); color: var(--orange-hi); } /* feedback.php's picker sits outside its carries the state, which is what the caret is drawn from — no second source of truth in a class. */ .datatable th.sortable { padding: 0; } .datatable th.sortable button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; background: none; border: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; color: inherit; padding: var(--sp-4) var(--sp-5); } .datatable th.sortable button:hover { color: var(--orange-hi); } /* The caret is the same SVG the selects use, so a sorted column and a dropdown point with one mark. Hidden until the column is the sorted one, at half strength on hover so the header advertises that it is clickable. */ .datatable th.sortable button::after { content: ''; width: var(--sp-3); height: var(--sp-3); background: var(--caret-dn) center / contain no-repeat; opacity: 0; } .datatable th.sortable button:hover::after { opacity: .5; } .datatable th[aria-sort="ascending"], .datatable th[aria-sort="descending"] { color: var(--orange); } .datatable th[aria-sort="ascending"] button::after, .datatable th[aria-sort="descending"] button::after { opacity: 1; } .datatable th[aria-sort="ascending"] button::after { transform: rotate(180deg); } /* map.php spawn lists: one table per item category, name column carries the item icon so a row is scannable without reading it. */ .spawngroup { margin-bottom: 22px; } .spawncat { font-size: var(--fs-md); letter-spacing: 1.6px; text-transform: uppercase; border-left: 3px solid currentColor; padding-left: var(--sp-5); margin: var(--sp-9) 0 var(--sp-2); } .countnote { font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; } .spawntable td:first-child { width: 34%; } .spawntable td:nth-child(2) { width: 33%; } .spawnname { display: inline-flex; align-items: center; gap: var(--sp-4); } .spawnname .itemicon { flex: none; } /* Tags sit inside a cell here, so drop .tagrow's block margins. */ .spawntable .tagrow { display: inline-flex; margin: 0; } .pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-9) 0; max-width: 100%; } .pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-md); color: var(--text); border: 1px solid var(--line); } .pager a:hover { background: var(--panel); text-decoration: none; border-color: var(--orange); } .pager a.cur { background: var(--orange); border-color: var(--orange); color: var(--ink-warm-2); font-weight: 700; } .pager .pgnav { color: var(--dim); } .pager .pgnav.disabled { opacity: .35; } .pager .pgdots { border: none; color: var(--dim); min-width: auto; padding: 0 var(--sp-1); } .matrix td.hit { color: var(--green); font-size: var(--fs-sm); } .matrix td.miss { color: var(--text-absent); text-align: center; } .tierbadge { display: inline-block; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; border: 1px solid var(--line); border-radius: var(--r-xs); padding: var(--sp-px) var(--sp-4); letter-spacing: 1px; } .tierbadge.tier-1 { color: var(--t1); border-color: var(--t1); } .tierbadge.tier-2 { color: var(--t2); border-color: var(--t2); } .tierbadge.tier-3 { color: var(--t3); border-color: var(--t3); } .tierbadge.tier-4 { color: var(--t4); border-color: var(--t4); } .tierbadge.tier-5 { color: var(--t5); border-color: var(--t5); } .tierbadge.tier-o { color: var(--to); border-color: var(--to); } .tierbadge.tier-g { color: var(--dim); border-color: var(--dim); } /* --------------------------------------------------------- recipe tree */ .recipetree { font-size: var(--fs-base); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-8); } .treenode > summary { cursor: pointer; padding: var(--sp-2) 0; list-style: none; } .treenode > summary::before { content: "▸ "; color: var(--orange); } .treenode[open] > summary::before { content: "▾ "; } .treekids { margin-left: 22px; border-left: 1px dashed var(--line-faint); padding-left: var(--sp-7); } .treeleaf { padding: var(--sp-2) 0; } .qty { color: var(--orange-hi); font-family: var(--mono); } .craftmeta { color: var(--dim); font-size: var(--fs-sm); } .rawmeta { color: var(--t1); font-size: var(--fs-xs); letter-spacing: 1px; text-transform: uppercase; } .qtyform { display: flex; gap: var(--sp-4); align-items: end; } .qtyform input { width: 90px; } .foundon { margin: var(--sp-2) 0 var(--sp-6); } .wayvia { margin: -4px 0 12px; font-size: var(--fs-md); color: var(--dim); } /* ------------------------------------------------------- ways to craft One row per distinct recipe. Ingredients share a column across rows so the difference between two ways of making something is what the eye lands on; the bench column is secondary. Rows with documented inputs are links that re-drive the breakdown calculator (?recipe=). */ .recipeways { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel); } .wayrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 15em); gap: var(--sp-2) var(--sp-6); align-items: center; padding: var(--sp-6) var(--sp-7); border-top: 1px solid var(--line); color: var(--text); font-size: var(--fs-md); } .wayrow:first-child { border-top: 0; } .recipeways.single .wayrow { grid-template-columns: minmax(0, 1fr) minmax(0, 15em); } a.wayrow:hover { background: var(--panel2); text-decoration: none; } a.wayrow:hover .waymark { color: var(--orange-hi); } .wayrow.sel { background: color-mix(in srgb, var(--orange) 7%, transparent); box-shadow: inset 3px 0 0 var(--orange); } .waymark { color: var(--dim); font-size: var(--fs-md); text-align: center; } .wayrow.sel .waymark { color: var(--orange); } .wayings { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-width: 0; } .waying { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; } .waying .itemicon { border-radius: var(--r-xs); } .waying b { color: var(--orange-hi); font-family: var(--mono); font-size: var(--fs-sm); } .wayplus { color: var(--dim); font-size: var(--fs-sm); } .waynote { color: var(--dim); font-size: var(--fs-micro); letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--r-xs); padding: var(--sp-px) var(--sp-3); white-space: nowrap; } .wayrow.sel .waynote { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 50%, transparent); } .wayundoc { color: var(--dim); font-style: italic; } .waybench { color: var(--dim); font-size: var(--fs-sm); text-align: right; line-height: 1.45; } .waybn { white-space: nowrap; } /* wrap between bench names, never inside one */ .waysep { opacity: .5; } .waymore { white-space: nowrap; color: var(--text-3); border-bottom: 1px dotted var(--text-5); cursor: help; } /* inferred, never blended into the documented benches beside it (see schema.sql) */ .wayderived { display: block; color: var(--text-3); font-size: var(--fs-xs); border-top: 1px dashed var(--line); margin-top: var(--sp-2); padding-top: var(--sp-2); } .wayshint { font-size: var(--fs-sm); margin: var(--sp-4) 0 0; } @media (max-width: 700px) { /* On a phone the PRIMARY search owns its row and whatever follows it (a button, a category select) wraps beneath. Every page did this before the sweep, but only as a side effect of .treetools not carrying .filterbar's 170px input floor. Merging the two toolbars made it explicit — which is the point: it is now one rule for every page instead of a property of which toolbar class a page happened to pick. */ /* .cmpsearchwrap is the search-to-add box's positioning context, so IT is the toolbar's flex child there and the input inside it is not — the rule has to name both or compare/altbench keep their search on a shared row. */ .toolbar .searchfield, .toolbar .searchbox, .toolbar .cmpsearchwrap { flex: 1 1 100%; } .wayrow, .recipeways.single .wayrow { grid-template-columns: 22px minmax(0, 1fr); } .recipeways.single .wayrow { grid-template-columns: minmax(0, 1fr); } .waybench { grid-column: 2; text-align: left; } .recipeways.single .waybench { grid-column: 1; } } /* ------------------------------------------------- item icons / pictures */ .itemicon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: var(--r-md); overflow: hidden; background: color-mix(in srgb, currentColor 12%, var(--bg2)); border: 1px solid color-mix(in srgb, currentColor 38%, var(--line)); } .itemicon.has-img { background: var(--well); border-color: var(--line); color: inherit; } .itemicon img { width: 100%; height: 100%; object-fit: cover; display: block; } .itemcell { display: inline-flex; align-items: center; gap: var(--sp-5); color: var(--text); min-width: 0; } .itemcell:hover { text-decoration: none; } .itemcell:hover .item-link { text-decoration: underline; } .itemhero { display: flex; align-items: center; gap: var(--sp-8); } .itemhero > .itemicon { border-radius: var(--r-lg); } .itemhero h1 { margin: var(--sp-3) 0 var(--sp-3); } .itemimg-field { display: flex; align-items: center; gap: var(--sp-7); margin: var(--sp-6) 0 var(--sp-2); } .itemimg-field label { margin: 0; } /* ---------------------------------------------------------- compare */ /* Items are columns, attributes are rows. The first column (labels) and the header row (item names) both stick, so you never lose track of which stat or which item a cell belongs to while scrolling a wide comparison. */ /* The search-to-add box is a .toolbar on both its pages (the
itself carries the class), so this only has to be the positioning context the dropdown hangs off and the flex child that eats the row's slack. There used to be a page-private .cmpadd wrapper here that centred its contents, which made compare.php the one page whose controls floated in the middle of the column instead of starting at the margin — and altbench's copy immediately overrode it back to flex-start, which is the tell. */ .cmpsearchwrap { position: relative; flex: 1 1 260px; } .cmpsearchwrap .searchfield, .cmpsearchwrap input { width: 100%; } /* Live matches for the "add an item" search, dropped below the input. Each match is a real submit button (name=add_id) styled like a feed row rather than a native