/* A map tool's Change Log ("This tool": what changed in the tool, newest first), sspanel/includes/tool-changelog.inc.php.
   The Server Config's Change Log pane copied line for line: its page head, its card and its log are config-engine.css's
   rules, with .tcl:is(#tcl, .tcl) standing in for .cf-tool:is(#cf, .cf-tool) (the same id-level strength, so panel v2's
   modal rules and a tool's own pane rules never repaint it) and --tcl-* tokens for --cf-*. A tool's own sheet sets the
   tokens from its palette and faces on its modal (#dialog<tool> .tcl { --tcl-text: ...; }); the faces inherit the
   tool's when it sets none. The defaults are the Server Config shell's. Loaded through the panel's file_hash. */

/* ============================================================================
   tokens (plain, so a tool's #dialog<tool> .tcl wins them)
   ============================================================================ */
.tcl {
	--tcl-plate: #1b201c; --tcl-plate2: #232a24; --tcl-edge: #0a0c0a;
	--tcl-text: #e8e3d6; --tcl-soft: #c3bdad; --tcl-muted: #8e8a7c; --tcl-dim: #64615a; --tcl-text-rgb: 232,227,214;
	--tcl-hi: rgba(var(--tcl-text-rgb),0.07); --tcl-lo: rgba(0,0,0,0.55);
	--tcl-accent-rgb: 217,150,60; --tcl-new: #f2b45f;
	--tcl-mono: Consolas, Menlo, monospace;
	/* the sizes, for a face that needs its own (a pixel face cut on a 16px grid turns to mush at 13px) */
	--tcl-h3-size: 22px; --tcl-h3-size-phone: 19px; --tcl-sub-size: 13px; --tcl-h5-size: 12px; --tcl-size: 13px; --tcl-date-size: 11.5px; --tcl-date-col: 96px;
}
.tcl:is(#tcl, .tcl) { font-family: var(--tcl-ui); }

/* ============================================================================
   the page head (config-engine.css, panes)
   ============================================================================ */
.tcl:is(#tcl, .tcl) .cf-phead { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.tcl:is(#tcl, .tcl) .cf-phead .grow { flex: 1; min-width: 0; }
.tcl:is(#tcl, .tcl) .cf-phead h3 { margin: 0; font-family: var(--tcl-display); font-size: var(--tcl-h3-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tcl-text); line-height: 1.1; }
.tcl:is(#tcl, .tcl) .cf-phead p { margin: 3px 0 0; font-size: var(--tcl-sub-size); color: var(--tcl-muted); }

/* ============================================================================
   the card and the log (config-engine.css, panes)
   ============================================================================ */
.tcl:is(#tcl, .tcl) .cf-card { background: linear-gradient(180deg, var(--tcl-plate2), var(--tcl-plate)); border: 1px solid var(--tcl-edge); border-radius: 5px; box-shadow: inset 0 1px 0 var(--tcl-hi), inset 0 -1px 0 var(--tcl-lo); margin: 0 0 14px; }
.tcl:is(#tcl, .tcl) .cf-card > h5 { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 11px 16px 9px; border: 0; background: transparent; font-family: var(--tcl-display); font-size: var(--tcl-h5-size); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tcl-text); text-align: left; }
.tcl:is(#tcl, .tcl) .cf-card > h5::after { content: ''; flex: 1; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(var(--tcl-accent-rgb),0.36), rgba(var(--tcl-accent-rgb),0.02)); }
.tcl:is(#tcl, .tcl) .cf-log { padding: 4px 16px 12px; }
.tcl:is(#tcl, .tcl) .cf-log div { display: grid; grid-template-columns: var(--tcl-date-col) minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid rgba(var(--tcl-text-rgb),0.05); font-size: var(--tcl-size); color: var(--tcl-soft); line-height: 1.5; }
.tcl:is(#tcl, .tcl) .cf-log em { font-style: normal; font-family: var(--tcl-mono); font-size: var(--tcl-date-size); color: var(--tcl-muted); padding-top: 2px; }
.tcl:is(#tcl, .tcl) .cf-log .new em { color: var(--tcl-new); }

/* the entries alone, under a heading the tool draws (a side column, a help window): the host's padding, not the card's */
.tcl.tcl-rows:is(#tcl, .tcl) .cf-log { padding: 0; }

/* ============================================================================
   phone (config-engine.css, max-width 767px)
   ============================================================================ */
@media (max-width: 767px) {
	.tcl:is(#tcl, .tcl) .cf-phead h3 { font-size: var(--tcl-h3-size-phone); }
	.tcl:is(#tcl, .tcl) .cf-phead { flex-wrap: wrap; }
}