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

/* app.css — the port's own rules, loaded on TOP of whichever classic theme the
 * user picked (see users.look). The eight themes style body, links, h2, inputs
 * and the menu; none of them style a data table, a content box or a two-column
 * layout, because the classic does that work with HTML attributes. These do it
 * in CSS instead, so they belong here and not in any one theme.
 */

/* --- the port's own tables --------------------------------------------------
 *
 * The classic styles almost no tables, because it does that work in the HTML:
 * every page carries its own cellspacing, cellpadding, width, align and bgcolor
 * attributes, page after page. The port writes plain markup and puts the rules
 * here instead, so what follows has no counterpart in style.css — but it is
 * built out of the same palette, so a table here looks like a table there.
 *
 * They are scoped to #main on purpose, which is the box the chrome opens for a
 * page this server wrote. Two things sit inside #content but outside #main and
 * must not be touched: the banner up top, which IS a layout table straight from
 * header.php, and the whole logged-out front page, which is basketsim.php's own
 * markup and lays itself out with nested tables. A bare `table` rule, or one
 * scoped to #content, draws borders through the middle of both.
 */

#main > .border table {
	border-collapse: collapse;
	width: 100%;
	font: normal 11px Arial, Helvetica, sans-serif;
}
#main > .border table th {
	text-align: left;
	font-weight: bold;
	color: #302226;
	padding: 2px 4px;
	border-bottom: 1px solid var(--bs-rule, #5A5A5A);
	white-space: nowrap;
}
#main > .border table td {
	padding: 2px 4px;
	border-bottom: 1px solid #ddd;
}
#main > .border table tr:hover td { background: #F5DEB3; }
#main > .border table td.n, #main > .border table th.n {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
#main > .border table td.tot { font-weight: bold; }

/* The bordered box every classic page puts its content in. In the original it is
 * a <td class="border"> inside a table used for layout; here it is a div, and
 * the rule is repeated for it. */
.border, div.border {
	border: 1px solid var(--bs-accent, #990000);
	background: #fff;
	padding: 9px;
	margin-bottom: 9px;
}

/* The classic hangs its boxes off a <table cellspacing="9" width="100%">, so
 * every td.border is inset 9px from #content on all four sides. The chrome's
 * own box is the single-column case of exactly that, so it gets the same inset
 * rather than sitting flush against the column edge. */
#main > .border {
	margin: 9px;
}

/* No menu, no indent. The chrome puts .wide on #content when nobody is logged
 * in; until now the class was emitted and never defined, so the login page kept
 * the theme's margin-left (136px on theme 0, 142px on theme 7) with an empty
 * left column beside it. The classic does not hit this because its logged-out
 * pages carry a public #left of their own, out of styleF.css. */
#content.wide {
	position: static;
	width: auto;
	max-width: 658px;
	margin-left: auto;
	margin-right: auto;
}

/* Two columns inside the content area. .box is the same thing under the name
 * the message and gym pages already used; both are here so a page can say
 * either. The side column is a share and not a pixel count on purpose:
 * #content is 615px wide on theme 0 but 658px on theme 7, so a fixed 195px
 * sits at a different place in each. */
.cols, .box { display: flex; gap: 9px; align-items: flex-start; }
.cols .main, .box .main, .box .list, .box .body { flex: 1 1 auto; min-width: 0; }
.cols .side, .box .side { flex: 0 0 32%; }
.cols section, .boxes section { flex: 1 1 0; min-width: 0; }
.side h2 { margin-bottom: 4px; }
.side p { margin: 4px 0; }

/* A table wider than the column scrolls inside itself rather than pushing the
 * 755px layout sideways. */
.scroll { overflow-x: auto; }

/* Forms. The classic marks its own inputs with .inputreg and .buttonreg, which
 * are defined above; these give the same look to plain markup. */
#main > .border button, #main > .border input[type=submit] {
	border: 1px solid #505050;
	background: #FFCC66;
	font: normal 11px Arial, Helvetica, sans-serif;
	padding: 2px 9px;
	cursor: pointer;
}
#main > .border button.link {
	background: none; border: 0; padding: 0;
	color: #555; cursor: pointer; text-decoration: underline;
}
#main > .border form.inline { display: inline; }
#main > .border fieldset { border: 1px solid var(--bs-accent, #990000); margin: 0 0 9px; padding: 4px 9px 9px; }
#main > .border legend { color: #302226; font-weight: bold; padding: 0 3px; }
#main > .border label { color: #302226; }

.muted { color: #7C7C7C; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
.warn, .err { color: var(--bs-accent, #990000); font-weight: bold; }
.ok { color: #36AA3D; font-weight: bold; }
.tot { font-weight: bold; }

/* The page title. The classic's h2 is a red bar with white text, and that is
 * what a section heading looks like here too. */
h2.bar { margin-bottom: 6px; }

/* Menu counters: the red number the classic puts next to a menu item that is
 * waiting for you. Its own markup is <font color="#DF151A" size 12px>. */
.count { color: #DF151A; font-size: 12px; }

/* A menu entry, link or option the classic has and this server does not serve
 * yet. It keeps the page's shape rather than leaving a gap, but it carries no
 * href, because an unknown path lands on the ratings calculator. Greyed so it
 * does not read as clickable. */
.todo {
	color: #7C7C7C;
	cursor: default;
}

/* In the left menu it has to be an <a> and not a <span>, because that is what
 * the eight themes style — and they disagree about how: themes 0-6 draw a 9px
 * left border and 2px of padding, theme 7 pads 10px and draws no border. Copying
 * either set of numbers here would be right on one theme and wrong on the other
 * seven, which is the mistake `#right` and the column widths already cost once.
 *
 * So the entry inherits `.buttons a` whole, and only the two things that must
 * differ are set: the grey, which needs the extra class to beat `.buttons a`'s
 * own colour, and the hover, which would otherwise light up an entry that does
 * not click. */
.buttons a.todo { color: #7C7C7C; cursor: default; }
.buttons a.todo:hover { background: transparent; }

/* --- pages carried over from the classic verbatim ---------------------------
 *
 * A screen ported faithfully brings the original's markup with it, and the
 * original lays out with nested tables. The rules above must not reach it.
 *
 * That is why they are scoped to `#main > .border`, the box the chrome opens
 * for a page written here, and not to #main. A faithful page opens
 * `#main > .classic` instead, so none of them match and there is nothing to
 * undo. An earlier attempt did the opposite — it let them match and then reset
 * them inside .classic — and `background: none` on hover beat the cells' own
 * bgcolor="#ffffff", because a presentational attribute has zero specificity.
 * The white box went transparent under the cursor and the page's tiled
 * background showed through it.
 */

/* A "Yes" that spends money is a one-button form here, not the classic's link.
 * The rule makes it look like the link it replaces, INCLUDING taking its colour
 * from whatever wraps it — the fire confirmation sits inside <font
 * color="darkred"> and the button has to go dark red with it. */
/* And the same trick for the [+]/[-] pair of the multiview, whose links are
 * a.greenhilite: black, no underline. */
.classic button.asgreen {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: #000;
	text-decoration: none;
}

.classic button.aslink {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-decoration: underline;
}