/* TractForge UI foundation. Keep this file identical in the web and map repositories.
   Screen-only adapters preserve report/print formatting and existing state colors. */
:root {
  --tf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tf-bg: #f3f5f7; --tf-surface: #fafbfd; --tf-ink: #24303d;
  --tf-muted: #596675; --tf-line: #d6dde5; --tf-accent: #37638c;
  --tf-radius: 4px;
}
@media screen {
  .tf-home, .tf-map, .tf-app { font-family:var(--tf-font); }
  :is(.tf-home,.tf-map,.tf-app) :is(button,input,select,textarea) { font-family:var(--tf-font); }
  :is(.tf-home,.tf-map,.tf-app) :focus-visible { outline:2px solid var(--tf-accent); outline-offset:3px; }
  .tf-app {
    background:var(--paper); color:var(--ink);
    --paper:var(--tf-bg); --paper-raised:var(--tf-surface); --ink:var(--tf-ink);
    --ink-soft:var(--tf-muted); --ink-faint:#667381; --rule:var(--tf-line); --rule-strong:#b6c1cd;
    --focus:var(--tf-accent); --shadow-soft:none; --grid-line:transparent;
    background-image:none; font-size:16px; line-height:1.5;
  }
  body.tf-app[data-theme="slate"] {
    --paper:var(--tf-bg); --paper-raised:var(--tf-surface); --ink:var(--tf-ink);
    --ink-soft:var(--tf-muted); --ink-faint:#667381; --rule:var(--tf-line); --rule-strong:#b6c1cd;
    --focus:var(--tf-accent); --shadow-soft:none; --grid-line:transparent;
  }
  body.tf-app[data-theme="midnight"] { --ink-faint:#a1adbb; --shadow-soft:none; --grid-line:transparent; }
  .tf-app :is(h1,h2,h3,.tab-btn,.lh-tab-btn,.tname-header-style,.auth-wordmark,.sidebar-head h2) {
    font-family:var(--tf-font); text-transform:none; letter-spacing:normal;
  }
  .tf-app :is(button,input,select) { font-size:14px; }
  .tf-app :is(.field label,.meta-field label) { font-size:13px; text-transform:none; letter-spacing:normal; color:var(--ink-soft); }
  .tf-app :is(.hint,.field .hint,.storage-status,.cell-bookpage,.cell-date,.tab-sub) { font-size:12px; }
  .tf-app textarea { font-size:15px; line-height:1.6; }
  .tf-app :is(.sidebar,.panel-head,.auth-screen) { background-image:none; }
  .tf-app :is(.panel,.card,.tract-item.active,.tab-btn,.lh-tab-btn) { box-shadow:none; border-radius:var(--tf-radius); }
  .tf-app :is(.tract-item,.sidebar-sort-btn) { font-size:14px; }
  .tf-app header.app-header { border-bottom:1px solid var(--rule-strong); }
  .tf-app .brand h1 { font-size:24px; font-weight:600; letter-spacing:-.02em; }
  .tf-app .tab-bar { border-bottom:1px solid var(--rule-strong); gap:4px; }
  .tf-app :is(.tab-btn,.lh-tab-btn) { background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; margin-bottom:-1px; padding:10px 12px; }
  .tf-app :is(.tab-btn,.lh-tab-btn).active { background:transparent; color:var(--focus); border:0; border-bottom:2px solid var(--focus); padding:10px 12px; box-shadow:none; }
  .tf-app .auth-split { max-width:440px; box-shadow:none; border:1px solid var(--rule); }
  .tf-app .auth-pad { display:none; }
  .tf-app .auth-card { padding:36px; }
  .tf-app .auth-wordmark { font-size:26px; font-weight:600; letter-spacing:-.03em; }
  .tf-app .auth-tagline { font-size:14px; text-transform:none; letter-spacing:normal; color:var(--ink-soft); }
  .tf-app .auth-card .field input { min-height:44px; padding:10px; border:1px solid var(--rule-strong); border-radius:4px; background:var(--paper-raised); color:var(--ink); }
  .tf-app .auth-submit { min-height:44px; background:var(--focus); border-color:var(--focus); color:#fff; }
  .tf-app .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
  .tf-app .auth-card .field label { font-size:14px; color:var(--ink-soft); text-transform:none; letter-spacing:normal; }
  .tf-app #appRoot :is(h1,h2,h3,.tab-btn,.lh-tab-btn,.tname-header-style) { font-family:var(--tf-font); letter-spacing:normal; text-transform:none; }
  .tf-app .auth-foot { font-size:13px; }
  .tf-app .auth-mark { width:34px; height:34px; color:var(--focus); }
  .tf-app .form-grid > * { min-width:0; }
  .tf-app :is(.layout,.app-shell) > * { min-width:0; }
  @media(max-width:860px) { .tf-app .sidebar { max-height:230px; overflow-y:auto; padding:16px 12px; } .tf-app .main-area { padding:18px 16px 48px; } }
  @media(max-width:700px) { .tf-app .form-grid .span-4 { grid-column:1 / -1; } }
}