/* HMG Tools · Field look (keep identical across every HMG Tools app that uses it).
   Loaded after hmg-app.css. The shell goes flat and the app wears its own icon:
   the icon sits in the top bar, and the app's css sets the tokens below to the
   icon's colours. The HMG mark moves to the footer and About.
   Tokens an app may set in its own css (defaults = black bar, red line, white tab): */
:root {
  --field-ground: #050505;                                       /* page behind everything */
  --field-top: linear-gradient(180deg, #1c1c1c 0%, #000 100%);   /* top bar */
  --field-top-line: var(--red);                                  /* line under the top bar */
  --field-top-line-w: 2px;
  --field-icon-ring: 0 0 0 1px rgba(255, 255, 255, .14);         /* edge around the app icon */
  --field-title: #fff;                                           /* app name */
  --field-sub: #9a9b9e;                                          /* line under the app name */
  --field-tab-fg: #d9cfc6;                                       /* resting tab */
  --field-tab-bg: transparent;
  --field-tab-line: #333;
  --field-tab-hover-line: #555;
  --field-tab-on-bg: #fff;                                       /* current tab */
  --field-tab-on-fg: #000;
  --field-tab-on-line: var(--red);
  --field-badge-bg: var(--red);                                  /* count on the current tab */
  --field-badge-fg: #fff;
  --field-badge-rest-bg: #242424;                                /* count on a resting tab */
  --field-badge-rest-fg: #d9cfc6;
  --field-chip-bg: #111;                                         /* round buttons in the bar */
  --field-chip-line: #333;
  --field-chip-fg: var(--text);
  --field-chip-hover-bg: #1c0a0b;
  --field-chip-hover-line: var(--red);
  --field-pill-bg: #0d0d0d;                                      /* the "offline" pill */
  --field-pill-line: #2c2c2c;
  --field-pill-fg: #cfc6bd;
  --field-panel: #111;                                           /* cards */
  --field-panel-line: #262626;
  --top-h: 64px;
}
body { background: var(--field-ground); }

/* ---------------------------------------------------------------- top bar */
.topbar { gap: 22px; padding: 0 22px; background: var(--field-top); border-bottom: var(--field-top-line-w) solid var(--field-top-line); box-shadow: none; }
.topbar::after { display: none; }
.brand img.app-icon { width: 40px; height: 40px; border-radius: 9px; box-shadow: var(--field-icon-ring); filter: none; }
.brand .divider { display: none; }
.brand .app-name { color: var(--field-title); letter-spacing: .6px; text-shadow: none; }
.brand .app-sub { color: var(--field-sub); font-size: 10.5px; letter-spacing: 1.8px; }

.tabs { gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; margin-left: 18px; }
.tab { height: 38px; padding: 0 16px; background: var(--field-tab-bg); border: 1px solid var(--field-tab-line); color: var(--field-tab-fg); }
.tab:hover { color: #fff; border-color: var(--field-tab-hover-line); }
.tab[aria-selected="true"] { background: var(--field-tab-on-bg); color: var(--field-tab-on-fg); border: 2px solid var(--field-tab-on-line); padding: 0 15px; font-weight: 600; box-shadow: none; }
.tab .badge { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; background: var(--field-badge-rest-bg); color: var(--field-badge-rest-fg); font-weight: 400; }
.tab[aria-selected="true"] .badge { background: var(--field-badge-bg); color: var(--field-badge-fg); }

.top-right { gap: 10px; }
.offline-pill { height: 34px; padding: 0 14px; gap: 8px; background: var(--field-pill-bg); border-color: var(--field-pill-line); color: var(--field-pill-fg); font-size: 11.5px; letter-spacing: 1.3px; }
.offline-pill .dot { width: 8px; height: 8px; box-shadow: none; }
.icon-btn { width: 40px; height: 40px; background: var(--field-chip-bg); border-color: var(--field-chip-line); color: var(--field-chip-fg); }
.icon-btn:hover { border-color: var(--field-chip-hover-line); background: var(--field-chip-hover-bg); }

/* ---------------------------------------------------------------- side */
.side { padding: 24px 22px; background: #0a0a0a; border-right-color: #1d1d1d; }
.side h3 { margin: 0 0 14px; letter-spacing: 2px; color: #8a8a8d; font-weight: 400; }
.steps { margin-bottom: 20px; }
.steps::before { display: none; }
.steps li { grid-template-columns: 26px 1fr; gap: 0 12px; padding: 8px 0; }
.steps .st-dot { width: 26px; height: 26px; background: none; border-color: #3a3a3a; color: #8a8a8d; font-size: 12px; }
.steps .st-title { color: #bdb5ad; letter-spacing: 1.2px; padding-top: 3px; }
.steps .st-text { color: #8f8f93; margin-top: -2px; }
.steps li:hover .st-title { color: #fff; }
.steps li.done .st-dot { background: none; border-color: var(--ok); color: var(--ok); }
.steps li.done .st-title, .steps li.current .st-title { color: #fff; }
.steps li.current .st-dot { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 4px rgba(237, 28, 36, .22); }
.side-card { padding: 14px; border-radius: 12px; border-color: var(--field-panel-line); background: var(--field-panel); color: #8f8f93; }
.side-card b { color: #fff; letter-spacing: 1.6px; margin-bottom: 8px; }
.side-card code { display: block; padding: 7px 9px; border-radius: 6px; border-color: var(--field-panel-line); font-size: 12px; }

/* ---------------------------------------------------------------- cards + controls */
.content { padding: 22px 28px 40px; }
/* jumping to a section (the Directions list) lands it below the sticky top bar */
.content section { scroll-margin-top: calc(var(--top-h) + 18px); }
.card { background: var(--field-panel); border-color: var(--field-panel-line); border-radius: 12px; box-shadow: none; }
.card.glow { border-color: var(--field-panel-line); box-shadow: none; }
.card-head .ico { background: #1c0a0b; border-color: #5a1216; }
.btn { border-radius: 999px; background: #161616; border-color: #333; }
.btn:hover { background: #1f1f1f; border-color: #555; }
.btn.primary { background: var(--red); border-color: var(--red); box-shadow: none; }
.btn.ghost { background: none; }
.btn.link { border-radius: 0; background: none; }
.drop { background: #0b0b0b; }
.drop:hover, .drop:focus { background: #100808; }
.drop .drop-ico { background: var(--red); box-shadow: none; }
.kv { background: #0c0c0c; border-color: var(--field-panel-line); }
.table-wrap { background: #0c0c0c; border-color: var(--field-panel-line); }
.xcard { background: #161616; border-color: #333; }
.xcard.primary { background: #1c0a0b; border-color: var(--red); }
.xcard.primary .x-ico { background: var(--red); border-color: var(--red); }
.count-pill { background: var(--red); }
.paper-wrap { background: #1a1a1a; border-color: var(--field-panel-line); box-shadow: none; }

/* ---------------------------------------------------------------- white pages
   A section drawn as a sheet of paper on the dark ground. Add class "page" to a
   .card (or any block); "page lead" is the main one (thicker ring, bigger fold).
   Everything inside is restyled for black ink on white. An app may set
   --page-ring / --page-lead-ring in its own css to match its icon. */
:root {
  --paper: #fff;
  --ink: #111;
  --ink-2: #5b5b5b;
  --rule: #e3e3e3;
  --paper-red: #b3131a;   /* red that stays readable as text on white */
  --paper-ok: #16703c;
  --page-ring: 0 0 0 1px #3a3a3a;
  --page-lead-ring: 0 0 0 3px var(--red), 0 24px 60px rgba(0, 0, 0, .6);
  --page-fold: 26px;
  --page-ring-w: 1px;      /* how far the ring sits outside the page, so the fold covers it */
}
.page, .card.page, .card.page.glow { position: relative; background: var(--paper); color: var(--ink); border: 0; border-radius: 14px; box-shadow: var(--page-ring); }
.card.page { padding: 16px 22px; }
/* folded corner: the page colour shows on the fold, the app's ground behind it */
.page::before { content: ""; position: absolute; top: calc(var(--page-ring-w) * -1); right: calc(var(--page-ring-w) * -1); width: calc(var(--page-fold) + var(--page-ring-w)); height: calc(var(--page-fold) + var(--page-ring-w)); background: linear-gradient(225deg, var(--field-ground) 0%, var(--field-ground) 50%, #d8d8d8 50%, #d8d8d8 100%); border-bottom-left-radius: 8px; pointer-events: none; }
.page.lead { box-shadow: var(--page-lead-ring); margin: 3px; --page-ring-w: 3px; --page-fold: 44px; }
.page.lead::before { border-bottom-left-radius: 10px; }
.page ::selection { background: var(--red); color: #fff; }
.page :focus-visible { outline-color: var(--ink); }
.page * { scrollbar-color: #b5b5b5 transparent; }
.page ::-webkit-scrollbar-thumb { background: #c4c4c4; background-clip: padding-box; }

.page > .card-head { padding-right: 26px; margin-bottom: 12px; }
.page.is-folded > .card-head { margin-bottom: 0; }
.page .card-head h2 { color: var(--ink); font-size: 15px; }
.page .card-head .ico { display: none; }
.page .card-head .sub, .page .sec-sum, .page .hint { color: var(--ink-2); }
.page a { color: var(--paper-red); }
.page code { background: #f3f3f3; border-color: #dcdcdc; color: var(--ink); }

.page .btn { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font-weight: 600; letter-spacing: 1.2px; padding: 7px 16px; }
.page .btn:hover { background: #f1f1f1; border-color: var(--ink); }
.page .btn.small { padding: 5px 13px; }
.page .btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.page .btn.primary:hover { background: #d3141c; border-color: #d3141c; filter: none; }
.page .btn.ghost { background: none; border: 1.5px solid #b5b5b5; font-weight: 500; }
.page .btn.ghost:hover { border-color: var(--ink); background: none; }
.page .btn.link { background: none; border: 0; padding: 0; color: var(--paper-red); font-weight: 400; letter-spacing: 0; }
.page .sec-toggle { width: 34px; height: 34px; border: 2px solid var(--ink); color: var(--ink); }
.page .sec-toggle:hover { background: #f1f1f1; border-color: var(--ink); color: var(--ink); }
.page .seg { border: 1.5px solid var(--ink); background: none; }
.page .seg button { color: var(--ink); }
.page .seg button + button { border-left-color: var(--ink); }
.page .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 600; }

.page input[type=text], .page input[type=number], .page input[type=email], .page textarea, .page select { background: var(--paper); border-color: #d4d4d4; color: var(--ink); }
.page input::placeholder, .page textarea::placeholder { color: #9a9a9a; }
.page input:hover, .page textarea:hover, .page select:hover { border-color: #9a9a9a; }
.page input:focus, .page textarea:focus, .page select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(237, 28, 36, .16); }
.page select:disabled { color: var(--ink); opacity: 1; background: #f6f6f6; }
.page .fields label, .page .field, .page .settings label { color: #666; }
.page .check { color: var(--ink); }
.page .switch { background: #c9c9c9; }
.page .switch::after { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.page .switch:checked { background: var(--red); }
.page .note-in { background: var(--paper); border-color: #d4d4d4; }
.page .note-in:not(:placeholder-shown) { background: #fffaf0; border-color: #c9b98f; }

.page .drop { background: #fafafa; border-color: #bdbdbd; }
.page .drop:hover, .page .drop:focus { background: #fff5f5; border-color: var(--red); }
.page .drop strong { color: var(--ink); }
.page .drop span { color: #333; }
.page .drop small { color: #6a6a6a; }
.page .kv { background: #f6f6f6; border-color: var(--rule); }
.page .kv span { color: #666; }
.page .kv b { color: var(--ink); }
.page .banner.warn { border-color: #efcf8b; background: #fff7e6; color: #6b4a00; }
.page .banner.info { border-color: #b8d3f5; background: #eef5ff; color: #1f4f8a; }
.page .banner.red { border-color: #f0b3b6; background: #fff0f0; color: #8b0000; }

.page .table-wrap { border: 0; border-radius: 0; background: none; }
.page .grid th { background: var(--paper); color: #666; letter-spacing: 1.4px; padding: 0 10px 8px; border-bottom: 2px solid var(--ink); }
.page .grid td { border-bottom: 1px solid var(--rule); }
.page .grid tr:last-child td { border-bottom: 1px solid var(--rule); }
.page .grid tbody tr:hover td { background: #fafafa; }
.page .grid .name { color: var(--ink); }
.page .grid .path { color: #6a6a6a; }
.page .tag { border-color: #c9c9c9; color: var(--ink-2); }
.page .tag.good { border-color: #9cc9ae; color: var(--paper-ok); }
.page .tag.lib { border-color: #e7b3b6; color: var(--paper-red); }
.page .tag.none { color: #8a8a8a; }

.page .xcard { background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink); }
.page .xcard:hover { border-color: var(--ink); background: #fafafa; }
.page .xcard b { color: var(--ink); }
.page .xcard small { color: var(--ink-2); }
.page .xcard .x-ico { background: var(--ink); border-color: var(--ink); color: #fff; }
.page .xcard.primary { background: var(--paper); border: 2px solid var(--red); padding: 15.5px; }
.page .xcard.primary .x-ico { background: var(--red); border-color: var(--red); }
.page .paper-wrap { background: #ececec; border-color: #d8d8d8; }
.page .paper { box-shadow: 0 6px 24px rgba(0, 0, 0, .22); }

/* headline numbers: one tile each, the one that needs action in red */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-radius: 12px; background: var(--field-panel); border: 1px solid var(--field-panel-line); min-width: 0; }
.stat b { font-family: var(--display); font-size: 40px; line-height: 1; color: #fff; font-weight: normal; white-space: nowrap; }
.stat span { font-family: var(--label); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.stat.alert { background: #140606; border: 2px solid var(--red); padding: 13px 17px; }
.stat.alert b { color: var(--red-hi); }
.stat.alert span { color: #ffb3b5; }
.stat.good b { color: var(--ok); }

/* ---------------------------------------------------------------- about + footer */
.modal-hero img.app-icon { width: 56px; height: 56px; border-radius: 13px; box-shadow: var(--field-icon-ring); margin-bottom: 14px; }
.modal-hero p { color: var(--field-sub); }
.modal-hero { background: var(--field-top); border-bottom: var(--field-top-line-w) solid var(--field-top-line); }
.app-foot { justify-content: flex-start; padding: 6px 0 0; color: #6f6f72; font-size: 11px; letter-spacing: 1.6px; }
.app-foot img { opacity: 1; }

@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .topbar { padding: 10px 14px; }
  .tabs { margin: 0; }
  .tab { padding: 0 8px; }
  .tab[aria-selected="true"] { padding: 0 7px; }
  .content { padding: 14px; }
  .stat b { font-size: 30px; }
}