/* 10-shell.css — header title strip, nav tabs, dialogs, toasts, boot. */

#ab-root { min-height: 100vh; display: flex; flex-direction: column; }
.boot { padding: 80px 20px; text-align: center; color: var(--steel); font-family: var(--font-draw); text-transform: uppercase; letter-spacing: .1em; }

/* ---- title strip: reads like a drawing header ---- */
.ab-head {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px 8px;
  background: var(--card);
  border-bottom: 2px solid var(--ink);
}
.ab-brand {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-size: 19px; padding: 0;
}
.ab-brand-mark { color: var(--blueline); font-size: 17px; line-height: 1; }
.ab-projbox { flex: 1; min-width: 0; }
.ab-projname {
  font-family: var(--font-draw); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-projmeter { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.ab-projmeter .meter { width: 180px; max-width: 34vw; }
.ab-projmeter .mono { font-size: 12px; }
.ab-flagcount { font-size: 11px; }
.ab-headright { display: flex; align-items: center; gap: 8px; }
.ab-iconbtn {
  background: none; border: 1px solid var(--hair); border-radius: var(--r-sm);
  color: var(--steel); font-size: 15px; width: 32px; height: 32px; cursor: pointer;
}
.ab-iconbtn:hover { border-color: var(--steel); color: var(--ink); }

.ab-demostrip {
  padding: 6px 18px; font-size: 13px;
  background: var(--blueline-soft); color: var(--ink);
  border-bottom: 1px solid var(--hair);
}
.ab-demostrip a { color: var(--blueline); }

/* ---- nav: quiet tabs, FIELD gets the ink ---- */
.ab-nav {
  display: flex; gap: 2px; padding: 0 14px;
  background: var(--card);
  border-bottom: 1px solid var(--hair);
  overflow-x: auto;
}
.ab-tab {
  font-family: var(--font-draw); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: 12.5px;
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--steel); padding: 9px 13px 7px; cursor: pointer; white-space: nowrap;
}
.ab-tab:hover { color: var(--ink); }
.ab-tab.active { color: var(--ink); border-bottom-color: var(--blueline); }
.ab-nav-field { margin-left: auto; color: var(--card); background: var(--ink); border-radius: 3px 3px 0 0; }
:root[data-theme="dark"] .ab-nav-field { color: #14181B; }
.ab-nav-field:hover { color: var(--card); background: var(--blueline); }
.ab-nav-field.active { border-bottom-color: var(--ink); }

#ab-main { flex: 1; padding: 16px 18px 90px; max-width: 1340px; width: 100%; margin: 0 auto; }

/* ---- phones: nav drops to the bottom, thumb-reachable ---- */
@media (max-width: 720px) {
  .ab-head { gap: 10px; padding: 8px 12px 6px; }
  .ab-projmeter .meter { width: 90px; }
  .ab-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    border-top: 2px solid var(--ink); border-bottom: 0;
    padding: 0; gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ab-tab { flex: 1; padding: 11px 2px 10px; border-bottom: 0; border-top: 3px solid transparent;
    font-size: 10px; letter-spacing: .02em; text-align: center; min-width: 0; overflow: hidden; }
  .ab-tab-settings { display: none; }  /* Setup is a desk job; phones get the field set */
  .ab-tab.active { border-top-color: var(--blueline); }
  .ab-nav-field { margin-left: 0; border-radius: 0; }
  #ab-main { padding: 12px 12px 96px; }
}

/* ---- dialogs ---- */
.ab-dialog-ov {
  position: fixed; inset: 0; z-index: 60;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ab-dialog { width: 100%; max-width: 460px; padding: 18px; max-height: 88vh; overflow: auto; }
.ab-dialog-title { font-size: 15px; margin-bottom: 12px; }
.ab-dialog-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.ab-dialog-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }

/* ---- toast ---- */
.ab-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px); z-index: 80;
  background: var(--ink); color: var(--card);
  font-family: var(--font-draw); text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px;
  padding: 9px 16px; border-radius: var(--r-sm); opacity: 0;
  transition: opacity .2s, transform .2s;
  box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .ab-toast { color: #14181B; }
.ab-toast.show { opacity: 1; transform: translate(-50%, 0); }

.btn-mini { padding: 4px 9px; font-size: 11px; }
.redline { color: var(--redline); }
.jacket { display: inline-block; width: 9px; height: 14px; border-radius: 2px; vertical-align: -2px; }