/* ===========================================================================
   DEMO SKIN
   ---------------------------------------------------------------------------
   Everything that belongs to the public demo and to nothing else: the badge in
   the top bar and the look of the notice. Loaded last, so it can override.
   =========================================================================== */

/* ------------------------------------------------------------- the badge --- */

.demobadge {
  align-self: center;
  margin-left: 12px;
  padding: 3px 9px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-soft, #fbf6df);
  color: var(--navy-ink, #0b2545);
  font: 700 10.5px/1.4 inherit;
  letter-spacing: 1.2px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s ease, transform .15s ease;
}
.demobadge:hover  { background: var(--gold, #fac314); }
.demobadge:active { transform: translateY(1px); }
.demobadge:focus-visible { outline: 2px solid var(--navy, #1c4568); outline-offset: 2px; }

/* The badge is an aside, never part of the printed document. */
@media print { .demobadge { display: none !important; } }

/* ------------------------------------------------------------- the notice --- */

.demo-popup {
  border-radius: 10px;
  padding: 26px 26px 22px;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
.demo-popup__title {
  font-size: 22px !important;
  font-weight: 700;
  color: var(--navy-ink, #0b2545) !important;
  letter-spacing: .2px;
}
.demo-popup__html { margin: 0 !important; }

.demo-note { text-align: left; color: #30415a; font-size: 14.5px; line-height: 1.62; }

.demo-note__lead {
  margin: 0 0 14px;
  font-size: 15.5px;
  color: #1a2230;
}
.demo-note__lead strong { color: var(--navy-ink, #0b2545); }

.demo-note__list { margin: 0 0 14px; padding-left: 20px; }
.demo-note__list li { margin-bottom: 7px; }
.demo-note__list strong { color: var(--navy-ink, #0b2545); }

.demo-note__foot {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-left: 3px solid var(--gold, #fac314);
  background: #fbf6df;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
}

.demo-note__en {
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid #e3e8ef;
  color: #5b6b82;
  font-size: 13px;
}

/* ------------------------------------------------------------- the buttons --- */

.demo-popup__ok,
.demo-popup__reset {
  display: inline-block;
  margin: 16px 5px 0;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: 600 14px/1.2 inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.demo-popup__ok {
  background: var(--navy, #1c4568);
  color: #fff;
}
.demo-popup__ok:hover { background: var(--navy-deep, #14304f); }

.demo-popup__reset {
  background: #fff;
  border-color: #cfd6df;
  color: #4a5768;
}
.demo-popup__reset:hover { border-color: var(--navy, #1c4568); color: var(--navy, #1c4568); }

/* On a phone the notice should not run edge to edge. */
@media (max-width: 560px) {
  .demo-popup { padding: 20px 16px 16px; }
  .demo-note  { font-size: 13.8px; }
  .demo-popup__ok,
  .demo-popup__reset { display: block; width: 100%; margin: 8px 0 0; }
}

/* ===========================================================================
   SMALL SCREENS
   ---------------------------------------------------------------------------
   The office version of this program lives on a desktop, so the layout assumes
   room. A demo in a portfolio is opened on a phone as often as not, and the top
   bar alone used to force the page 1005px wide. These rules fold it up.
   =========================================================================== */

@media (max-width: 860px) {

  /* --- the top bar becomes four stacked rows --- */
  .topbar {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
  .topbar__brand   { order: 1; flex: 1 1 auto; }
  .demobadge       { order: 2; margin-left: auto; }
  .doctabs         { order: 3; width: 100%; }
  .doctabs__tab    { flex: 1 1 0; justify-content: center; }
  .topbar__center  { order: 4; width: 100%; margin-left: 0; justify-content: space-between; }
  .topbar__actions { order: 5; width: 100%; flex-wrap: wrap; gap: 8px; }
  .topbar__actions .btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    padding: 9px 10px;
  }

  /* --- fields go one per row --- */
  .grid--2,
  .grid--3       { grid-template-columns: minmax(0, 1fr); }
  .grid--city    { grid-template-columns: 1.4fr .9fr; }

  /* --- an item needs two rows at this width --- */
  .items__head { display: none; }
  .item-row {
    grid-template-columns: 66px minmax(0, 1fr) 84px;
    row-gap: 8px;
    padding: 12px 12px;
    align-items: start;
  }
  .item-row > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }  /* qty         */
  .item-row > *:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }  /* description */
  .item-row > *:nth-child(5) { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
  .item-row > *:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }  /* unit price  */
  .item-row > *:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }  /* amount      */

  /* --- the editor and the sheet --- */
  .editor  { padding: 12px 12px 32px; }
  .preview { min-height: 70vh; }
}

@media (max-width: 480px) {
  .topbar__title { font-size: 14px; }
  .topbar__sub   { font-size: 10.5px; }
  .topbar__logo  { height: 28px; }
  .topbar__actions .btn { flex: 1 1 100%; }
  .grid--city { grid-template-columns: minmax(0, 1fr); }
}

/* On a phone the two panes become one long page that scrolls normally,
   instead of two panes fighting over a screen that is 100% tall. */
@media (max-width: 860px) {
  html, body   { height: auto; }
  .app         { height: auto; min-height: 100%; }
  .workspace   { display: block; }
  .editor      { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .preview     { min-height: 0; }
  .preview__scroll { overflow-x: auto; }
}