/* HMG Tools · Glass look (keep identical across every HMG Tools app that uses it).
   Loaded after hmg-field.css. The textured black shell becomes a solid tint with a
   soft wash, the top bar a translucent band of the app's colour, and the side rail,
   cards and chips translucent panes on it, as in HMG Print Run. White pages (.page)
   stay paper. Type: Archivo Black titles, Barlow Semi Condensed labels (fonts.css).
   Tokens an app sets in its own css (defaults = Print Run blue): */
:root {
  --display: "Archivo", "Arial Black", Impact, sans-serif;
  --label: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --glass-tint: #0A1020;                                   /* the wall */
  --glass-wash: rgba(35, 102, 224, .4);                    /* radial wash top-right */
  --glass-bar-a: rgba(35, 102, 224, .45);                  /* top bar, top */
  --glass-bar-b: rgba(24, 69, 152, .22);                   /* top bar, bottom */
  --glass-key: #2366E0;                                    /* app colour for current tab, dots */
  --glass-pane: linear-gradient(180deg, rgba(214, 228, 255, .10), rgba(214, 228, 255, .045));
  --glass-line: rgba(200, 220, 255, .14);
  --glass-edge: rgba(255, 255, 255, .18);                  /* lit top edge */
  --glass-ink: #E8EEFF;
  --glass-dim: #9FB0D6;
  --glass-title: #9DBBFF;                                  /* card titles, keys */
  --field-ground: var(--glass-tint);
  --field-panel: rgba(214, 228, 255, .055);
  --field-panel-line: var(--glass-line);
  --field-sub: #B5C4E6;
  --top-h: 64px;
}
html { background: var(--glass-tint); }
body {
  color: var(--glass-ink);
  background: radial-gradient(1100px 620px at 80% -10%, var(--glass-wash), transparent 70%), var(--glass-tint);
  background-attachment: fixed;
}

/* ---------------------------------------------------------------- top bar */
.topbar {
  height: var(--top-h); gap: 14px; padding: 0 16px 0 20px; flex-wrap: nowrap; white-space: nowrap;
  background: linear-gradient(180deg, var(--glass-bar-a), var(--glass-bar-b)), var(--glass-tint);   /* the tint under the band: the page never shows through a sticky bar */
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.brand { gap: 12px; flex: none; }
.brand img.app-icon { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 4px 10px rgba(0, 0, 0, .35); }
.brand > span { display: flex; align-items: center; gap: 12px; }
.brand > span br { display: none; }
.brand .app-name { font-size: 22px; letter-spacing: .2px; color: #fff; }
.brand .app-sub { font-size: 11.5px; letter-spacing: 1.6px; color: var(--field-sub); overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.tabs { margin-left: auto; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 0; flex: none; }
.tab { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: #D9DFEE; font-weight: 600; font-size: 13px; letter-spacing: 1.4px; }
.tab:hover { color: #fff; border: 0; }
.tab[aria-selected="true"] { background: rgba(0, 0, 0, .4); color: #fff; border: 0; padding: 0 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.tab .badge { background: rgba(255, 255, 255, .14); color: #fff; }
.tab[aria-selected="true"] .badge { background: var(--glass-key); color: #fff; }
.top-right { margin-left: 0; gap: 10px; flex: none; }
.topbar .offline-pill { display: none; }                   /* the line moves to the side rail */
.icon-btn { width: 30px; height: 30px; background: rgba(0, 0, 0, .38); border-color: transparent; color: #fff; }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: rgba(0, 0, 0, .6); border-color: transparent; }

/* HMG Tools badge: the family mark at the right end of every app's bar, in the chips' dark glass */
.hmg-tools-badge { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px 0 9px; border-radius: 999px; color: #fff; font-family: var(--display); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .1); }
.hmg-tools-badge svg { width: 22px; height: 22px; flex: none; }
.hmg-tools-badge:hover { background: rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------- side rail */
.side { padding: 20px 18px; background: var(--glass-pane); border-right: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge); display: flex; flex-direction: column; }
.side h3 { color: var(--glass-title); letter-spacing: 2px; font-weight: 700; }
.steps .st-dot { border-color: var(--glass-line); color: var(--glass-dim); background: rgba(0, 0, 0, .3); }
.steps .st-title { color: #D9DFEE; }
.steps .st-text { color: var(--glass-dim); }
.steps li.current .st-dot { background: var(--glass-key); border-color: var(--glass-key); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--glass-key) 25%, transparent); }
.side-card { background: rgba(0, 0, 0, .25); border-color: var(--glass-line); color: var(--glass-dim); }
.side-card b { color: #fff; }
.side .offline-pill { display: inline-flex; margin-top: auto; align-self: flex-start; height: 30px; padding: 0 12px 0 10px; background: rgba(0, 0, 0, .3); border: 1px solid var(--glass-line); color: var(--glass-dim); font-size: 11px; letter-spacing: 1.2px; }
.side .offline-pill .dot { width: 7px; height: 7px; background: var(--ok); box-shadow: none; }

/* ---------------------------------------------------------------- cards + controls (not .page) */
.card:not(.page) { background: var(--glass-pane); border-color: var(--glass-line); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.card:not(.page) .card-head h2 { color: var(--glass-title); font-size: 13px; letter-spacing: 1.8px; }
.card:not(.page) .card-head .ico { background: #0B1326; border-color: var(--glass-line); color: var(--glass-title); }
.card:not(.page) .sub, .card:not(.page) .hint { color: var(--glass-dim); }
.btn { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); border: 1px solid rgba(200, 220, 255, .2); color: var(--glass-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .4); border-radius: 10px; font-family: var(--label); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)); border-color: rgba(200, 220, 255, .35); }
.btn.primary { background: linear-gradient(180deg, #F4F7FF, #CCD8F2); border-color: rgba(255, 255, 255, .5); color: #0B1D44; box-shadow: inset 0 1px 0 #fff, 0 8px 20px color-mix(in srgb, var(--glass-key) 35%, transparent); }
.btn.primary:hover { filter: brightness(1.03); }
.btn.ghost { background: none; box-shadow: none; }
.drop { background: color-mix(in srgb, var(--glass-key) 8%, transparent); border-color: color-mix(in srgb, var(--glass-key) 45%, #fff 0%); }
.drop:hover, .drop:focus { background: color-mix(in srgb, var(--glass-key) 14%, transparent); }
.drop .drop-ico { background: var(--glass-key); }
.kv, .table-wrap { background: #04060A; border-color: rgba(0, 0, 0, .6); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7); }
.xcard { background: rgba(255, 255, 255, .04); border-color: var(--glass-line); }
.xcard.primary { background: color-mix(in srgb, var(--glass-key) 18%, transparent); border-color: var(--glass-key); }
.xcard.primary .x-ico { background: var(--glass-key); border-color: var(--glass-key); }
.count-pill { background: var(--glass-key); }
.stat { background: var(--glass-pane); border-color: var(--glass-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.stat b { font-family: var(--display); font-weight: 900; font-size: 34px; }
.stat span { color: var(--glass-dim); }
.stat.alert { background: rgba(255, 74, 80, .1); border-color: var(--red); }
.paper-wrap { background: rgba(0, 0, 0, .3); border-color: var(--glass-line); }
.stop-n { background: var(--glass-tint); border-color: var(--glass-key); }

/* white pages: the fold shows the wall behind it */
.page::before { background: linear-gradient(225deg, var(--glass-tint) 0%, var(--glass-tint) 50%, #d8d8d8 50%, #d8d8d8 100%); }
.page.lead { box-shadow: 0 0 0 3px var(--glass-key), 0 24px 60px rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------- about + footer */
.modal-hero { background: linear-gradient(180deg, var(--glass-bar-a), var(--glass-bar-b)); border-bottom: 1px solid var(--glass-line); }
.modal-hero p { color: var(--field-sub); }
/* the Activate gate: glass panel, the app's icon + name + HMG Tools badge in the hero */
.modal.lic { background: var(--glass-pane), rgba(10, 10, 12, .72); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border-color: var(--glass-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 80px rgba(0, 0, 0, .6); }
.lic-scrim { background: rgba(0, 0, 0, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lic-hero .lic-id { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.lic-hero .lic-id .app-icon { width: 44px; height: 44px; margin: 0; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 4px 10px rgba(0, 0, 0, .35); }
.lic-hero .lic-id .app-name { font-family: var(--display); font-size: 24px; letter-spacing: .2px; color: #fff; }
.lic-hero .lic-id .hmg-tools-badge { margin-left: auto; pointer-events: none; }
.modal.lic .lic-key { background: rgba(0, 0, 0, .4); border-color: var(--glass-line); }
.modal.lic .lic-key:focus { border-color: var(--glass-key); }
.app-foot { color: var(--glass-dim); }

@media (max-width: 900px) { .brand .app-sub { display: none; } }
@media (max-width: 720px) {
  .topbar { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  .tabs { margin-left: 0; }
  .hmg-tools-badge span { display: none; }
  .hmg-tools-badge { padding: 0 9px; }
}