/* IDNL Work — app layer on top of idnl.css (brand kit v2, copied unmodified from
   I:\accounts\idnltd\Style\idnl.css on 2026-11-09). Use the role tokens, never raw hex.
   Feature CSS goes in static/css/<app>.css, loaded via {% block extra_head %}. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--idnl-paper); color: var(--idnl-text); font-family: var(--idnl-font); font-size: var(--idnl-fs-md); line-height: 1.5; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--idnl-s4); top: var(--idnl-s2); background: var(--idnl-surface); padding: var(--idnl-s2); z-index: 10; }

.app-header { display: flex; align-items: center; gap: var(--idnl-s5); padding: var(--idnl-s2) var(--idnl-s5); background: var(--idnl-surface); border-bottom: 1px solid var(--idnl-line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--idnl-s2); text-decoration: none; }
.brand .product { font-weight: 700; color: var(--idnl-brand); font-size: var(--idnl-fs-lg); }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: inline; } }
:root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: inline; }
.main-nav, .user-nav, .space-nav { display: flex; gap: var(--idnl-s4); align-items: center; }
.user-nav { margin-left: auto; }
.user-nav form { margin: 0; }
.search input { width: 16rem; max-width: 100%; }
.linkish { background: none; border: 0; padding: 0; color: var(--idnl-steel); font: inherit; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

.space-header { display: flex; align-items: center; gap: var(--idnl-s3); padding: var(--idnl-s2) var(--idnl-s5); background: var(--idnl-surface); border-bottom: 1px solid var(--idnl-line); flex-wrap: wrap; }
.space-name { font-weight: 700; color: var(--idnl-brand); font-size: var(--idnl-fs-lg); }
.space-key { font-size: var(--idnl-fs-xs); color: var(--idnl-muted); letter-spacing: 0.08em; }
.space-nav { margin-left: var(--idnl-s5); }

.app-body { display: block; padding: var(--idnl-s5); max-width: 1400px; }
.app-body.with-sidebar { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--idnl-s5); }
.sidebar { font-size: var(--idnl-fs-sm); }
.sidebar ul { list-style: none; margin: 0; padding-left: var(--idnl-s3); }
.sidebar > ul { padding-left: 0; }
.sidebar li { margin: 2px 0; }
.sidebar a.current { font-weight: 700; color: var(--idnl-brand); }
main { min-width: 0; }
main:focus { outline: none; }

.stack > * + * { margin-top: var(--idnl-s4); }
.row { display: flex; gap: var(--idnl-s3); align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--idnl-s4); }
.narrow { max-width: 460px; margin: var(--idnl-s6) auto; }
.muted { color: var(--idnl-muted); }
.meta { color: var(--idnl-muted); font-size: var(--idnl-fs-sm); }
.page-title { display: flex; align-items: baseline; gap: var(--idnl-s3); margin-bottom: var(--idnl-s4); flex-wrap: wrap; }
.page-title .actions { margin-left: auto; display: flex; gap: var(--idnl-s2); }

form p { margin: 0 0 var(--idnl-s3); }
label { display: block; font-size: var(--idnl-fs-sm); font-weight: 700; color: var(--idnl-brand); margin-bottom: 2px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=number], select, textarea {
  font: inherit; color: var(--idnl-text); background: var(--idnl-surface); border: 1px solid var(--idnl-line); border-radius: var(--idnl-radius); padding: var(--idnl-s2); width: 100%; max-width: 40rem; }
textarea { min-height: 6rem; }
input:focus, select:focus, textarea:focus { border-color: var(--idnl-steel); outline: none; }
.helptext, .help { display: block; font-size: var(--idnl-fs-xs); color: var(--idnl-muted); }
.errorlist { list-style: none; padding: 0; margin: 2px 0; color: var(--idnl-fail); font-size: var(--idnl-fs-sm); }
input[type=checkbox] { width: auto; }
.code-input { font-family: var(--idnl-mono); letter-spacing: 0.2em; max-width: 12rem; }

.messages { list-style: none; padding: 0; margin: 0 0 var(--idnl-s4); }
.msg { padding: var(--idnl-s2) var(--idnl-s3); border-radius: var(--idnl-radius); background: var(--idnl-info-bg); color: var(--idnl-text); margin-bottom: var(--idnl-s2); border-left: 3px solid var(--idnl-info); }
.msg.success { background: var(--idnl-ok-bg); border-left-color: var(--idnl-ok); }
.msg.warning { background: var(--idnl-warn-bg); border-left-color: var(--idnl-warn); }
.msg.error { background: var(--idnl-fail-bg); border-left-color: var(--idnl-fail); }

.empty { color: var(--idnl-muted); font-style: italic; }
.secret-box { font-family: var(--idnl-mono); background: var(--idnl-row); border-left: 3px solid var(--idnl-brand); padding: var(--idnl-s2) var(--idnl-s3); word-break: break-all; }

@media (max-width: 800px) {
  .app-body { padding: var(--idnl-s3); }
  .app-body.with-sidebar { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
  .space-nav { margin-left: 0; overflow-x: auto; }
  .search input { width: 100%; }
}