/* Tool register. Colors use only semantic tokens; no external resources. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-0); color: var(--fg-1); font: var(--type-body); }
[hidden] { display: none !important; }
button, input, select, textarea { font: var(--type-ui); }
button, input, select, textarea { border: 1px solid var(--line-2); border-radius: var(--radius-1); }
button { padding: var(--space-2) var(--space-3); min-height: var(--control-md); background: var(--bg-1); color: var(--fg-2); cursor: pointer; }
button:hover { background: var(--bg-2); border-color: var(--line-3); }
button.primary { background: var(--primary); color: var(--primary-on); border-color: var(--primary); }
button.primary:hover { background: var(--primary-strong); }
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
a { color: var(--fg-link); text-underline-offset: 3px; }
a:hover { color: var(--primary-fg); }
h1 { font: var(--type-title-1); margin: 0; }
h2 { font: var(--type-title-3); margin: 0 0 var(--space-4); }
h3 { font: var(--type-body-strong); margin: var(--space-3) 0; }
p { margin: var(--space-2) 0 var(--space-4); }
code, pre, .page-number { font: var(--type-mono); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--space-3); background: var(--bg-2); border: 1px solid var(--line-1); max-width: 100%; }
.shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: auto 1fr; }
.sidebar { grid-row: 1 / 3; background: var(--chrome-bg); color: var(--chrome-fg); display: flex; flex-direction: column; border-right: 1px solid var(--chrome-line); }
.brand { padding: var(--space-4); border-bottom: 1px solid var(--chrome-line); color: var(--chrome-fg-strong); }
.brand b { font: var(--type-title-3); letter-spacing: var(--tracking-display); }
.brand small { display: block; font: var(--type-overline); letter-spacing: var(--tracking-overline); color: var(--chrome-orn); margin-top: var(--space-2); }
.sidebar nav { flex: 1; padding: var(--space-3) 0; }
.nav-group { text-transform: uppercase; letter-spacing: var(--tracking-label); font: var(--type-label); padding: var(--space-3) var(--space-4); margin: 0; }
.sidebar a, .disabled-nav { display: block; padding: var(--space-2) var(--space-4); color: var(--chrome-fg); font: var(--type-ui); text-decoration: none; }
.sidebar a:hover { background: var(--chrome-hover); }
.sidebar a[aria-current=page] { background: var(--chrome-active-bg); color: var(--chrome-active-fg); box-shadow: inset 3px 0 0 var(--chrome-orn); }
.disabled-nav { opacity: .4; }
.side-foot { display: grid; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--chrome-line); font: var(--type-caption); }
.topbar { min-height: var(--topbar); padding: var(--space-2) var(--space-4); display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--line-1); background: var(--topbar-bg); }
.crumbs { font: var(--type-ui); color: var(--fg-3); overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.workspace { min-width: 0; padding: var(--space-5) var(--space-6); max-width: var(--content-max); width: 100%; }
main { min-width: 0; }
.head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-number { color: var(--primary-fg); border: 1px solid var(--primary-line); background: var(--primary-soft); padding: var(--space-2); }
.demo { border: 1px dashed var(--warning); background: var(--bg-2); padding: var(--space-2) var(--space-3); font: var(--type-caption); margin-bottom: var(--space-4); }
.muted, small { font: var(--type-caption); color: var(--fg-3); }
.read-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); font: var(--type-caption); color: var(--fg-3); }
.split { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.split > .main-column { flex: 999 1 560px; min-width: 0; }
.split > .panel { flex: 1 1 300px; min-width: 0; }
.panel { padding: var(--space-4); background: var(--bg-1); border: 1px solid var(--line-1); box-shadow: var(--shadow-1); margin-bottom: var(--space-4); }
.panel > h2 { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-1); }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line-1); margin-bottom: var(--space-3); }
table { border-spacing: 0; width: 100%; font: var(--type-ui); font-feature-settings: var(--tabular); }
th { background: var(--head-bg); font: var(--type-label); letter-spacing: var(--tracking-label); color: var(--fg-3); text-align: left; text-transform: uppercase; }
th, td { padding: var(--space-2) var(--space-3); white-space: nowrap; border-bottom: 1px solid var(--line-1); }
tbody tr:hover { background: var(--selected-bg); }
.badge { display: inline-block; padding: var(--space-1) var(--space-2); border: 1px solid var(--line-2); border-radius: var(--radius-1); font: var(--type-caption); }
.badge.success { color: var(--success); }
.badge.warning { color: var(--warning); }
.badge.danger { color: var(--danger); }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); min-width: 0; }
label { font: var(--type-label); color: var(--fg-2); }
input, select, textarea { padding: var(--space-2); width: 100%; background: var(--bg-sunken); color: var(--fg-1); min-height: var(--control-md); }
textarea { resize: vertical; }
.filters { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.filters .field { flex: 1 1 250px; }
.filters button { margin-top: var(--space-5); }
.attachment-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; }
.notice { padding: var(--space-4); border: 1px solid var(--primary-line); background: var(--primary-soft); margin: var(--space-3) 0; overflow-wrap: anywhere; }
.notice:empty { display: none; }
.notice.warning { border-color: var(--warning); background: var(--bg-2); }
.notice.danger { border-color: var(--danger); }
.notice a { display: inline-block; margin-right: var(--space-4); }
.stale-values { opacity: .5; }
.empty { padding: var(--space-8); background: var(--bg-2); text-align: center; color: var(--fg-3); border: 1px dashed var(--line-2); }
.skeleton { height: var(--space-8); background: var(--bg-3); margin-bottom: var(--space-3); width: 100%; }
.skeleton.short { width: 60%; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.metric { display: flex; flex-direction: column; padding: var(--space-4); background: var(--bg-2); border: 1px solid var(--line-1); }
.metric span { font: var(--type-caption); color: var(--fg-3); }
.metric strong { font: var(--type-numeral); color: var(--value-fg); margin-top: var(--space-3); }
.details { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr); gap: var(--space-2) var(--space-3); font: var(--type-caption); }
dt { color: var(--fg-3); } dd { margin: 0; overflow-wrap: anywhere; font: var(--type-mono); }
.tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--line-2); padding: 0 0 var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.connection { max-width: 540px; margin: var(--space-8) auto; border-top: 3px solid var(--primary); }
dialog { width: min(700px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: var(--space-5); color: var(--fg-1); background: var(--bg-1); border: 1px solid var(--line-2); border-top: 3px solid var(--primary); box-shadow: var(--shadow-3); }
dialog::backdrop { background: var(--overlay); }
.activity { margin-top: var(--space-5); }
.menu { display: none; }
.mobile-actions { display: none; }
.state-card { padding: var(--space-4); border-left: 3px solid var(--primary); background: var(--bg-1); }
.state-card[data-write-state=applied] { border-color: var(--success); }
.state-card[data-write-state=refused], .state-card[data-write-state=conflict] { border-color: var(--danger); }
.state-card a { display: inline-block; margin: var(--space-3); }
.state-card h2 { margin: 0; }
.state-card summary { cursor: pointer; color: var(--fg-3); margin: var(--space-3) 0; }
.mail-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.metrics > section { min-width: 0; }
@media (max-width: 700px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .sidebar { display: none; grid-row: 2; }
  .sidebar.open { display: flex; }
  .topbar { grid-row: 1; flex-wrap: nowrap; padding: var(--space-2); gap: var(--space-2); }
  .topbar > .badge, .topbar > .menu { flex-shrink: 0; white-space: nowrap; }
  .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .workspace { padding: var(--space-4); grid-row: 3; }
  .menu { display: inline-block; }
  .topbar .actions { display: none; }
  .mobile-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); }
  .side-foot { display: none; }
  h1 { font: var(--type-title-2); }
  .attachment-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .attachment-row button { grid-column: 1 / 3; margin-bottom: var(--space-3); }
  .read-meta { align-items: flex-start; }
}
/* Accueil (01) : points à traiter et raccourcis, d'après la frame 01. */
.todo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-2); border: 1px solid var(--line-1); border-left: 3px solid var(--line-3); background: var(--bg-1); }
.todo b { font: var(--type-body-strong); }
.todo span { flex: 1 1 260px; color: var(--fg-2); font: var(--type-caption); overflow-wrap: anywhere; }
.todo.danger { border-left-color: var(--danger); }
.todo.warning { border-left-color: var(--warning); }
.shortcut-list { display: flex; flex-direction: column; gap: var(--space-2); }
.shortcut-list a { display: block; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-1); text-decoration: none; }
.shortcut-list a:hover { border-color: var(--primary-line); }