/* ==========================================================================
   KuduDoc — authenticated app shell (dashboard, documents, prepare, registry)
   Distinct from marketing chrome: sidebar nav, no marketing footer.
   ========================================================================== */

.app-shell{ display: flex; min-height: 100vh; background: var(--surface-sunken); }

.app-sidebar{
  width: 264px; flex-shrink: 0; background: var(--white); border-right: var(--border-hairline);
  display: flex; flex-direction: column; padding: var(--space-6) var(--space-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-sidebar__logo{ padding-inline: var(--space-2); }
.app-nav{ display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-8); }
.app-nav__link{
  display: flex; align-items: center; gap: var(--space-3); padding: 0.7rem var(--space-3);
  border-radius: var(--radius-md); font-size: var(--text-small); font-weight: 600; color: var(--ink-700);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.app-nav__link svg{ width: 20px; height: 20px; flex-shrink: 0; }
.app-nav__link:hover{ background: var(--ink-50); }
.app-nav__link.is-active{ background: var(--blue-50); color: var(--blue-700); }
.app-sidebar__cta{ margin-top: var(--space-6); }
/* Stack under the primary CTA (Send + Sign) without changing shared button chrome */
.app-sidebar__cta-stack{
  margin-top: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.app-sidebar__cta-stack .app-sidebar__cta{ margin-top: 0; }
.app-sidebar__account{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
}
/* Truncate even while app-shell-live.js still dumps unnamed <p> nodes with
   inline styles (renderUser/renderGuest). That file is mid-edit elsewhere;
   when it is free, put .app-sidebar__name / .app-sidebar__email on those
   nodes and drop the dump styles. */
.app-sidebar__name,
.app-sidebar__email,
.app-sidebar__account > p{
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-sidebar__name,
.app-sidebar__account > p:first-child{
  font-size: var(--text-small); font-weight: 600;
}
.app-sidebar__email,
.app-sidebar__account > p + p{
  font-size: var(--text-micro); font-weight: 400; color: var(--text-tertiary);
}
.app-sidebar__overlay{ display: none; }

.app-main{ flex: 1; min-width: 0; }
.app-topbar{
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-7);
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-bottom: var(--border-hairline);
  position: sticky; top: 0; z-index: 20; min-height: 76px;
}
.app-topbar h1{ font-size: var(--text-h3); margin-right: auto; }
.app-topbar__actions{ display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
/* The app is a workspace, not an article — it fills the screen it's given.
   No max-width: on wide monitors the dashboard reflows into more columns
   rather than leaving a dead margin. */
.app-content{ padding: var(--space-7); }
.app-menu-toggle{ display: none; width: 40px; height: 40px; align-items: center; justify-content: center; flex-shrink: 0; }
.app-menu-toggle svg{ width: 22px; height: 22px; }

@media (max-width: 900px){
  .app-sidebar{
    position: fixed; inset: 0 auto 0 0; z-index: 100; transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out); box-shadow: var(--shadow-lg);
  }
  .app-sidebar.is-open{ transform: translateX(0); }
  .app-sidebar__overlay{
    display: none; position: fixed; inset: 0; z-index: 90; background: rgba(11,26,78,0.4);
  }
  .app-sidebar__overlay.is-open{ display: block; }
  .app-menu-toggle{ display: inline-flex; }
  .app-content{ padding: var(--space-5); }
  .app-topbar{ padding: var(--space-4) var(--space-5); }
}

.minimal-shell{ min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-sunken); }
.minimal-main{
  flex: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  min-height: calc(100vh - var(--nav-height));
}
.minimal-main__brand{
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-11) var(--space-9); position: relative; overflow: hidden;
  background: var(--gradient-hero); color: rgba(255,255,255,0.92);
}
.minimal-main__brand-inner{ max-width: 420px; margin-inline: auto; width: 100%; }
.minimal-main__form{ display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-5); }

.brand-value-list{ display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
/* Full white, not 0.92. At 14px this needs 4.5:1, and 0.92 alpha over the
   LIGHTEST stop of --gradient-hero lands on 4.42:1 — a real AA failure that
   only shows up if you score the gradient rather than the page behind it.
   Against that same stop, opaque white is 5.0:1. The alpha was buying a
   hierarchy nobody can see: composited it moves 255 to 239 on a blue this
   light. Size and weight already separate this list from the heading. */
.brand-value-list li{ display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-small); color: var(--white); line-height: 1.5; }
.brand-value-list li svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--white); }
.brand-signature-preview{ margin-top: var(--space-9); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.18); }
.brand-signature-preview__label{ font-size: var(--text-micro); color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: 700; }

@media (max-width: 960px){
  .minimal-main{ grid-template-columns: minmax(0,1fr); }
  .minimal-main__brand{ display: none; }
}

/* ==========================================================================
   Sidebar grouping + roadmap badges — shared by every app page, so they
   must live here rather than in a page-specific stylesheet.
   ========================================================================== */
/* ---- Sidebar grouping + "Soon" badges ---- */
.app-nav__group{
  margin: var(--space-5) 0 var(--space-2); padding-left: var(--space-3);
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary);
}
.app-nav__group:first-of-type{ margin-top: var(--space-6); }
.app-nav__soon,
.quick-action__soon{
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: var(--radius-full); background: var(--blue-50); color: var(--blue-700);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  vertical-align: middle;
}

/* ==========================================================================
   Workspace switcher — the top of the sidebar.
   One person is often several parties. Which one you are acting as decides
   where a document is filed and which identity a share goes out under, so the
   control is prominent rather than tucked into settings.
   ========================================================================== */
.kd-ws{ position: relative; padding: var(--space-3) var(--space-4) 0; }

.kd-ws__btn, .kd-ws__item{
  width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr) auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  border: var(--border-hairline); background: var(--white);
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.kd-ws__btn:hover{ border-color: var(--ink-300); }
.kd-ws.is-open .kd-ws__btn{ border-color: var(--blue-600); }

.kd-ws__mark{
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-100); color: var(--ink-700);
  font-size: var(--text-micro); font-weight: 800;
}
.kd-ws__mark--co{ background: var(--blue-50); color: var(--blue-700); }

.kd-ws__body{ min-width: 0; }
.kd-ws__label{
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-tertiary);
}
.kd-ws__name{
  display: block; font-size: var(--text-small); font-weight: 650; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kd-ws__sub{ display: block; font-size: var(--text-micro); color: var(--text-tertiary); }
.kd-ws__chev{
  width: 8px; height: 8px; border-right: 2px solid var(--ink-300);
  border-bottom: 2px solid var(--ink-300); transform: rotate(45deg) translateY(-2px);
}
.kd-ws.is-open .kd-ws__chev{ transform: rotate(-135deg) translateY(-2px); }

.kd-ws__menu{
  position: absolute; left: var(--space-4); right: var(--space-4); top: calc(100% - var(--space-1));
  z-index: 30; background: var(--white); border: var(--border-hairline);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2); display: flex; flex-direction: column; gap: 2px;
}
.kd-ws__menu[hidden]{ display: none; }
.kd-ws__item{ border-color: transparent; }
.kd-ws__item:hover{ background: var(--surface-sunken); }
.kd-ws__item.is-on{ background: var(--blue-50); }
.kd-ws__foot{
  margin-top: var(--space-2); padding: var(--space-3);
  border-top: var(--border-hairline);
  font-size: var(--text-micro); line-height: 1.5; color: var(--text-tertiary);
}

/* Moved from app-dashboard.css: 19 app pages use this, and it was the one
   thing keeping them linked to a 21KB stylesheet they use ~3% of. */
.app-page-intro{ margin-bottom: var(--space-6); max-width: 640px; }