/*
 * Copyright © 2026 Spinium Property Management OÜ - All rights reserved.
 * Author: Timo J. Rinne <tri@iki.fi>
 *
 * Unreleased and unlicensed. Any use is explicitly prohibited without a prior
 * written license from Spinium Property Management OÜ (https://spinium.com).
 * See COPYING.
 */

/* Spinium Bank Simulator's own console pages.
 *
 * The SHELL — the palette, the rail, the cards, the tables, the forms and the
 * footer mark — is `bsim-utils/console.css`, linked before this one and shared
 * with the identity simulator's console (ROADMAP.md §59). What is here is what
 * only this console has: the bank chooser, the bank detail page, the token
 * editor and its colour picker, the code sheet, and money in the ledger.
 */

/* The bank chooser at the root of the net-bank host. It is the simulator's own
   page, not a bank's, so it wears the simulator's plain styling — the banks
   themselves are where the visual variety belongs. */
.chooser { list-style: none; margin: 0; padding: 0; }
.chooser-item { margin: 0; border-bottom: 1px solid var(--line-soft); }
.chooser-item:last-child { border-bottom: 0; }
.chooser-item a {
	display: flex; align-items: center; gap: 14px;
	padding: 12px 4px; text-decoration: none; color: inherit;
}
.chooser-item a:hover { background: var(--line-soft); }
.chooser-mark { line-height: 0; }
.chooser-mark svg { display: block; border-radius: 4px; }
.chooser-text { display: flex; flex-direction: column; }
.chooser-name { font-weight: 600; }
.chooser-meta { font-size: 13px; color: var(--muted); }

.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; }
.fieldnote { font-size: 12px; color: var(--muted); margin: -8px 0 12px 0; }
.fieldnote code { font-size: 12px; }
.banklist-mark { line-height: 0; }
.banklist-mark svg { display: block; border-radius: 4px; }

/* -- bank detail page ---------------------------------------------------- */

.bankhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.button-link {
	display: inline-block; padding: 8px 14px; background: transparent;
	color: var(--accent); border: 1px solid var(--accent); border-radius: 6px;
	text-decoration: none; font-size: 14px;
}
.button-link:hover { background: var(--accent); color: #fff; }

textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--line);
	border-radius: 6px; margin-bottom: 12px; background: var(--bg); color: inherit;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--line-soft); border: 1px solid var(--line);
	border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 13px;
}
.chip button {
	all: unset; cursor: pointer; line-height: 1; padding: 0 4px;
	color: var(--muted); font-size: 15px;
}
.chip button:hover { color: var(--danger); }
.chip button:disabled { opacity: .3; cursor: not-allowed; }
.chipcheck {
	display: inline-flex; align-items: center; gap: 5px; margin: 0 10px 6px 0;
	font-size: 13px; color: inherit;
}
.chipcheck input { width: auto; margin: 0; }
/* What an AISP is told about a counterparty (ROADMAP.md §99): a labelled pair
   of switches under the consent period, set apart from the notes above it. */
.obcounterparty { margin-top: 14px; }
.obcounterparty .obcaps { margin-top: 6px; }
.obcounterparty .fieldnote { margin-top: 2px; }

/* The token editor. A swatch beside each colour, because a hex value is not
   something anyone can picture. */
.tokengrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.tokenrow label { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.tokeninput { display: flex; align-items: center; gap: 8px; }
.tokeninput input { flex: 1; font-size: 13px; }
.swatch {
	width: 26px; height: 26px; flex: 0 0 26px; border-radius: 5px;
	border: 1px solid var(--line); margin-bottom: 12px;
	padding: 0; cursor: pointer;
	transition: transform 90ms ease, box-shadow 90ms ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The colour picker (ROADMAP.md §28.12). Everything here is inside a dialog
   from modal.js, so there is nothing about stacking, backdrops or dismissal —
   that is all the dialog's, which is the reason to have used it. */
.cp-now {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 14px 0; font-size: 13px;
}
.cp-nowlabel { color: var(--muted); }
.cp-nowchip {
	width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line);
}
.cp-grid {
	display: grid; grid-template-columns: repeat(12, 1fr);
	gap: 6px; margin-bottom: 12px;
}
.cp-greys {
	display: grid; grid-template-columns: repeat(10, 1fr);
	gap: 6px; margin-bottom: 14px;
}
.cp-swatch {
	height: 30px; width: 100%; padding: 0;
	border: 1px solid rgba(0, 0, 0, .16); border-radius: 5px;
	cursor: pointer; background-clip: padding-box;
	transition: transform 90ms ease;
}
.cp-swatch:hover { transform: scale(1.14); z-index: 1; }
.cp-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
/* A ring rather than a tick: a tick has to be legible against eighty-two
   backgrounds, and half of them are its own colour.
   `outline` rather than `box-shadow`, and this is the second attempt: a shadow
   ring is drawn INSIDE the grid gap, so at 4px of gap the neighbours covered
   two thirds of it and the current colour looked no different from the rest.
   An outline sits above them, and the raised stacking context keeps it there. */
.cp-current {
	position: relative; z-index: 2;
	outline: 3px solid var(--accent); outline-offset: 2px;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
.cp-any {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; color: var(--muted);
}
.cp-any input[type="color"] {
	width: 46px; height: 30px; padding: 2px; cursor: pointer;
	border: 1px solid var(--line); border-radius: 5px; background: var(--surface);
}

/* Collapsible sections on the bank page (ROADMAP.md §37.1).
 *
 * `<details>`, like the rail's group and the colour picker's dialog: the
 * element the web already has for this, open and shut with no script, and
 * keyboard-operable with nothing wired. A card IS the details, so a shut
 * section is a heading and nothing else. */
.section { padding: 0; }
.section-head {
	list-style: none; cursor: pointer; user-select: none;
	display: flex; align-items: center; gap: 12px;
	padding: 16px 20px;
}
.section-head::-webkit-details-marker { display: none; }
.section-head::marker { content: ""; }
.section-head h1, .section-head h2 { margin: 0; }
.section[open] > .section-head { padding-bottom: 6px; }
.section-head:hover { background: var(--hover, rgba(0, 0, 0, .02)); }
.section-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.section-body { padding: 0 20px 20px 20px; }

/* Top right, which is where the control for a whole section belongs — the
 * heading owns the left. */
.section-head .ico-caret {
	margin-left: auto; width: 16px; height: 16px; flex: 0 0 16px;
	fill: none; stroke: currentColor; stroke-width: 1.6;
	stroke-linecap: round; stroke-linejoin: round;
	color: var(--muted); transition: transform 120ms ease;
}
.section[open] > .section-head .ico-caret,
.subsection[open] > .section-head .ico-caret { transform: rotate(180deg); }

/* The preview, collapsible on its own inside Appearance. */
.subsection { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.subsection > .section-head { padding: 10px 14px; }
.subsection > .muted, .subsection > .preview { margin-left: 14px; margin-right: 14px; }
.subsection > .preview { width: calc(100% - 28px); margin-bottom: 14px; }

.preview {
	width: 100%; height: 560px; border: 1px solid var(--line);
	border-radius: 8px; background: #fff; display: block; margin-bottom: 8px;
}

.samples { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.samples code { font-size: 13px; }

.mediarow { min-height: 44px; display: flex; align-items: center; margin-bottom: 8px; }
.mediaprev {
	max-height: 40px; max-width: 180px; border: 1px solid var(--line);
	border-radius: 4px; background: #fff; padding: 2px;
}
input[type="file"] { font-size: 13px; padding: 6px 0; border: 0; background: none; }

.inline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.inline input, .inline select { margin-bottom: 0; }

/* An identifier belonging to a country that has none is kept and shown struck
   through rather than destroyed (ROADMAP.md §23.5). */
input.struck { text-decoration: line-through; opacity: .7; }

/* The code sheet, shown once at issue. Laid out to be printed. */
.codegrid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 6px;
}
.codecell {
	display: flex; align-items: baseline; gap: 8px; padding: 5px 8px;
	border: 1px solid var(--line); border-radius: 5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
}
.codepos { color: var(--muted); font-size: 11px; min-width: 2em; text-align: right; }
@media print {
	.sidenav, .sidenav-scrim, .buttonrow, form { display: none !important; }
	body.has-nav { padding-left: 0; }
	.card { border: 0; }
}

/* Money in the ledger explorer: the sign is the point, so it carries colour as
   well as a minus — and the figures line up, which is what tabular numerals are
   for. */
td.num code { font-variant-numeric: tabular-nums; }
td.neg code { color: var(--danger); }
td.pos code { color: #1e7d43; }
@media (prefers-color-scheme: dark) { td.pos code { color: #5bbd84; } }

/* Alpine islands (banks, people, and the two detail pages) render their
 * conditional parts only once the island is alive; without this the markup
 * flashes on screen first. */
[x-cloak] { display: none !important; }

/* The Mobile app page hides what is no longer usable until a section's toggle
   asks for it (ROADMAP.md §84.4): a spent code, a redeemed invitation, a
   revoked device. The rows are there; the attribute says whether they show. */
.pastable[data-past-hidden="1"] tr.past { display: none; }
.pastable .only-when-hidden { display: none; }
.pastable.all-past[data-past-hidden="1"] .only-when-hidden { display: block; }
.pastable.all-past[data-past-hidden="1"] .tablewrap { display: none; }
.past-toggle { margin: 6px 0 0; }
.past-toggle button.linkbutton { font-size: 13px; text-decoration: none; }
.past-toggle button.linkbutton:hover { text-decoration: underline; }

/* What the register form says about the chosen surface (ROADMAP.md §105). */
.endpoints { font-size: 13px; margin: 0 0 14px; }
.endpoints p { margin: 6px 0; }
.endpoints ul { list-style: none; margin: 6px 0 0; padding: 0; }
.endpoints li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
				padding: 4px 0; border-top: 1px solid var(--line-soft); }
.endpoints li:last-child { border-bottom: 1px solid var(--line-soft); }
.endpoints code { overflow-wrap: anywhere; }
.endpoints code.method { min-width: 3.5em; font-weight: 600; }