/* Truestimo only (the hosted build links this after timeline.css): the login gate, its card, the account menu, the
   two questions (log out with unsaved changes, another account's changes) and the practice strip. Fresh Cobalt tokens
   from styles.css; light only. */

/* Until someone is logged in, Office stays hidden behind the gate; and before hosted/main.js has run at all (no
   html[data-hosted] yet), so Office's header never flashes up first. */
body[data-gate] header.top,
body[data-gate] .shell,
html:not([data-hosted]) header.top,
html:not([data-hosted]) .shell {
  display: none;
}

.ts-gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background: var(--ground);
}

.ts-gate:empty {
  display: none;
}

.ts-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 24px;
  color: var(--ink);
}

@media (max-width: 400px) {
  .ts-card {
    padding: 24px 16px;
  }
}

.ts-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.ts-brand-lockup {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
}

.ts-card h1 {
  margin: 0 0 16px;
  font-size: var(--fs-lg);
  color: var(--ink);
}

.ts-form {
  display: grid;
  gap: 14px;
}

.ts-field {
  display: grid;
  gap: 6px;
}

.ts-field label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.ts-field input {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  min-height: 44px;
  width: 100%;
  min-width: 0;
}

.ts-field input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ts-field input[aria-invalid="true"] {
  border-color: var(--bad);
}

.ts-password-row {
  display: flex;
  gap: 8px;
}

.ts-password-row input {
  flex: 1;
}

.ts-show {
  flex: none;
  min-height: 44px;
  min-width: 64px;
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ts-show[aria-pressed="true"] {
  background: var(--accent-soft);
}

.ts-field-problem,
.ts-problem {
  margin: 0;
  color: var(--bad);
  font-size: var(--fs-sm);
}

.ts-problem:empty {
  display: none;
}

.ts-submit {
  width: 100%;
  min-height: 44px;
  font-size: var(--fs-base);
}

.ts-loading {
  margin: 12px 0 0;
  color: var(--ink);
  font-weight: 600;
}

.ts-loading:empty {
  display: none;
}

.ts-small {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* The practice build's strip, above everything. */
.ts-practice {
  margin: 0;
  padding: 8px 16px;
  background: var(--warn-soft);
  color: var(--warn);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-align: center;
}

/* The account button and its menu, at the end of the quick bar. */
.ts-account {
  position: relative;
  flex: none;
}

/* A phone: the quick bar fills the header's second row, so the account button sits at the right of the first row, beside
   the brand, and the Estimator ⇄ Quote halves take a little less padding so the second row fits 375px. */
@media (max-width: 600px) {
  header.top .top-inner {
    position: relative;
  }

  header.top .brand {
    padding-right: 44px;
  }

  .ts-account {
    position: absolute;
    top: 8px;
    right: 16px;
  }
}

@media (max-width: 400px) {
  .quick-flip [data-go] {
    padding-inline: 8px;
  }
}

.ts-account-btn[aria-expanded="true"] {
  background: var(--sunk);
  color: var(--ink);
}

.ts-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: max-content;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: 0 8px 24px rgb(24 59 120 / 0.14);
}

.ts-account-menu[hidden] {
  display: none;
}

.ts-account-email {
  margin: 0 4px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ts-account-status {
  margin: 4px 4px 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.ts-account-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 10px 4px 6px;
  min-height: 40px;
  cursor: pointer;
}

.ts-account-item:hover,
.ts-account-item:focus-visible {
  background: var(--sunk);
}

/* The two questions. */
.ts-dialog {
  max-width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 20px;
  color: var(--ink);
  background: var(--surface);
}

.ts-dialog::backdrop {
  background: rgb(24 59 120 / 0.35);
}

.ts-dialog p {
  margin: 0 0 16px;
  line-height: 1.5;
}

.ts-dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Saving to Truestimo (ws-C). */

/* The practice strip's Go offline / Back online. */
.ts-practice-toggle {
  margin-left: 8px;
  vertical-align: middle;
}

/* The account button's dot: green when every change is saved, orange when not (the words are in its aria-label too). */
.ts-account-btn {
  position: relative;
}

.ts-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-sizing: content-box;
  pointer-events: none;
}

.ts-dot[data-state=""],
.ts-dot:not([data-state]) {
  display: none;
}

.ts-dot[data-state="ok"] {
  background: var(--ok-mark);
}

.ts-dot[data-state="warn"] {
  background: var(--warn);
}

/* The banner under the header: its words, then its buttons, wrapping on a phone. */
#truestimo-note:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}

#truestimo-note .ts-note-text {
  flex: 0 1 auto;
  min-width: 0;
}

/* The first-load and "Can't reach" cards. */
.ts-body {
  margin: 0 0 16px;
  color: var(--ink);
  line-height: 1.5;
}

.ts-choices {
  display: grid;
  gap: 10px;
}

.ts-choices[hidden] {
  display: none;
}

.ts-wide,
.ts-card .ts-file {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  text-align: center;
}

/* A file input's label that looks like its button; the input inside is visually hidden but keeps the focus. */
.ts-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.ts-file:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ts-help {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.ts-summary {
  display: grid;
  gap: 10px;
}

.ts-summary:empty {
  display: none;
}

.ts-summary-text {
  margin: 0 0 4px;
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ts-card .ts-problem {
  margin-top: 12px;
}

/* Settings → Backup's confirm. */
.ts-backup-confirm {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--ink);
}

.ts-backup-confirm p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

/* Log in again: the login card inside a dialog. */
.ts-login-dialog {
  padding: 0;
  width: min(400px, calc(100vw - 32px));
}

.ts-login-dialog .ts-card {
  border: 0;
}

/* Truestimo, the mascot, on the gate: waving beside the login card on a wide screen, measuring while the account loads,
   pointing on an empty account's first step. Decorative (the words say it all); a phone shows only the card. */
.ts-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 672px;
}

/* The card keeps its 400px beside him (its own width: 100% would otherwise claim the whole row). */
.ts-welcome .ts-card {
  flex: 0 1 400px;
  min-width: 0;
}

.ts-mascot {
  display: block;
  height: 320px;
  width: auto;
  flex: none;
}

@media (max-width: 899px) {
  .ts-mascot {
    display: none;
  }
}

.ts-loading-mascot {
  display: block;
  height: 140px;
  width: auto;
  margin: 4px auto 12px;
}

/* In the card's top-right corner, so the buttons below keep the card's full width. */
.ts-card:has(> .ts-first-mascot) {
  position: relative;
}

.ts-first-mascot {
  position: absolute;
  top: 16px;
  right: 16px;
  width: auto;
  height: 96px;
}

@media (max-width: 400px) {
  .ts-first-mascot {
    height: 72px;
  }
}

/* Truestimo's sorry face beside "Not saved to Truestimo" (account-bar.js). */
.ts-note-mascot {
  flex: none;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 8px;
}