/* TopNOTE Learning — CIA functional visual integration v0.1
   Founder-approved visual system translated onto the accepted ccb7716 functional baseline.
   Scope: presentation only. No learning logic, auth logic, candidate data, source governance,
   Mini Mock lifecycle, or database behavior is changed by this stylesheet. */

:root{
  --tn-onyx:#0f1114;
  --tn-onyx-2:#15181c;
  --tn-onyx-3:#1b1f24;
  --tn-ivory:#f4efe5;
  --tn-ivory-2:#ece4d7;
  --tn-paper:#fffdf8;
  --tn-champagne:#c49a55;
  --tn-champagne-soft:#ead6aa;
  --tn-sage:#6f8f84;
  --tn-sage-deep:#55776c;
  --tn-ink:#272a2e;
  --tn-muted:#6f706c;
  --tn-line:rgba(44,43,39,.12);
  --tn-card-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 18px 44px rgba(48,42,33,.09),
    0 3px 8px rgba(48,42,33,.045);
}

/* Global study canvas */
html,body{
  background:var(--tn-ivory);
  color:var(--tn-ink);
}
body{
  background-image:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,.72),transparent 27%),
    linear-gradient(180deg,var(--tn-ivory),var(--tn-ivory-2));
}
h1,h2,h3,h4,.brand-title,.graphite-intel-value{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--tn-ink);
}
.eyebrow,.graphite-intel-label,.topnote-brand-kicker,.kicker{
  color:var(--tn-sage-deep);
  letter-spacing:.15em;
}

/* SIGN IN — approved onyx + ivory composition, using existing functional markup */
.access-shell{
  background:
    radial-gradient(circle at 76% 10%,rgba(196,154,85,.08),transparent 28%),
    linear-gradient(135deg,#111418 0%,#171a1e 46%,#ece5d9 46%,#f5f0e7 100%);
  padding:28px;
}
#accessView .access-card{
  width:min(1120px,100%);
  min-height:620px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  grid-template-rows:auto auto 1fr;
  column-gap:54px;
  row-gap:16px;
  align-items:start;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(196,154,85,.18);
  border-radius:30px;
  padding:52px;
  background:
    linear-gradient(90deg,var(--tn-onyx) 0%,var(--tn-onyx-2) 52%,#f2ebdf 52%,#fbf8f2 100%);
  box-shadow:0 36px 90px rgba(10,12,14,.28);
}
#accessView .access-card:before{
  content:"";
  position:absolute;
  inset:0 48% 0 0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 660 620' preserveAspectRatio='none'%3E%3Cpath d='M-60 180 C110 86 214 245 377 151 C497 82 566 145 735 58' fill='none' stroke='%23c49a55' stroke-opacity='.26' stroke-width='2'/%3E%3Cpath d='M-70 246 C115 155 236 309 392 220 C522 147 598 213 755 126' fill='none' stroke='%236f8f84' stroke-opacity='.30' stroke-width='1.7'/%3E%3Cpath d='M-90 332 C90 250 238 390 410 310 C536 250 625 299 770 223' fill='none' stroke='%23f4efe5' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size:cover;
  opacity:.95;
}
#accessView .access-card>*{position:relative;z-index:1}
#accessView .access-brand-lockup{
  grid-column:1;
  grid-row:1;
  margin:0 0 8px;
}
#accessView .access-card>.lead{
  grid-column:1;
  grid-row:2;
  color:#d8d2c8;
  font-size:17px;
  max-width:480px;
}
#accessView .access-card>.principle{
  grid-column:1;
  grid-row:3;
  align-self:start;
  width:100%;
  max-width:100%;
  background:rgba(255,255,255,.055);
  color:#efe7d8;
  border:1px solid rgba(196,154,85,.22);
  box-shadow:none;
  backdrop-filter:blur(8px);
}
#accessView #emailForm,
#accessView #otpForm{
  grid-column:2;
  grid-row:1 / span 3;
  align-self:center;
  margin:0;
  padding:32px;
  border:1px solid rgba(45,42,36,.10);
  border-radius:24px;
  background:rgba(255,253,248,.88);
  box-shadow:var(--tn-card-shadow);
}
#accessView #authMessage{
  grid-column:2;
  grid-row:3;
  align-self:end;
  margin:0 30px 4px;
}
#accessView .access-brand-lockup .topnote-brand-kicker{
  color:var(--tn-champagne-soft);
  margin-bottom:2px;
}
.topnote-logo{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.topnote-logo--access{
  width:min(460px,100%);
  max-width:100%;
  height:168px;
  margin:-12px 0 -4px;
  object-fit:cover;
  object-position:left center;
  mix-blend-mode:lighten;
}
#accessView .pin-form label{
  color:#504c43;
  font-weight:750;
  margin-top:0;
}
#accessView .pin-row{
  flex-direction:column;
}
#accessView .pin-row input{
  min-height:48px;
  border-color:rgba(53,48,40,.15);
  background:#fffdfa;
}
#accessView .primary-button{
  min-height:48px;
  background:linear-gradient(180deg,#25282d,#111316);
  color:#f7efe1;
  border:1px solid rgba(196,154,85,.34);
  box-shadow:0 10px 24px rgba(20,18,15,.16);
}
#accessView .primary-button:hover{background:#080a0c}
#accessView .text-button{color:var(--tn-sage-deep)}

/* Diagnostic keeps calm study treatment instead of inheriting the split login */
#diagnosticGate.access-shell{
  background:
    radial-gradient(circle at 8% 0%,rgba(255,255,255,.72),transparent 30%),
    linear-gradient(180deg,var(--tn-ivory),var(--tn-ivory-2));
}
#diagnosticGate .access-card{
  background:rgba(255,253,248,.97);
  border:1px solid var(--tn-line);
  box-shadow:var(--tn-card-shadow);
}

/* APP SHELL */
.app-shell{
  background:var(--tn-ivory);
}
.sidebar{
  background:
    linear-gradient(180deg,#0d0f12 0%,#15181c 62%,#101215 100%)!important;
  border-right:1px solid rgba(196,154,85,.18)!important;
  box-shadow:10px 0 30px rgba(17,18,20,.09)!important;
}
.sidebar:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.75;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 900' preserveAspectRatio='none'%3E%3Cpath d='M-40 180 C40 130 105 210 190 155 C235 126 267 136 300 104' fill='none' stroke='%23c49a55' stroke-opacity='.16' stroke-width='2'/%3E%3Cpath d='M-50 220 C35 170 103 250 192 196 C240 167 274 177 304 147' fill='none' stroke='%236f8f84' stroke-opacity='.18' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:100% auto;
  background-repeat:no-repeat;
}
.sidebar>*{position:relative;z-index:1}
.sidebar-brand{
  padding:2px 4px 20px!important;
  gap:2px!important;
}
.sidebar-brand:after{display:none!important}
.sidebar .topnote-brand-kicker{
  color:#b7c6c0!important;
  margin-left:8px;
}
.topnote-logo--sidebar{
  width:214px;
  height:82px;
  object-fit:cover;
  margin:-7px 0 -5px;
  mix-blend-mode:lighten;
}
.nav-stack{
  gap:7px!important;
}
.nav-button{
  min-height:44px;
  border:1px solid transparent!important;
  border-radius:12px!important;
  color:#cbc5bc!important;
  background:transparent!important;
}
.nav-button:hover{
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
  border-color:rgba(196,154,85,.12)!important;
}
.nav-button.active{
  color:#f8f0e2!important;
  background:linear-gradient(90deg,rgba(196,154,85,.13),rgba(111,143,132,.08))!important;
  border-color:rgba(196,154,85,.22)!important;
  box-shadow:inset 3px 0 0 var(--tn-champagne)!important;
}
.candidate-mini{
  border-top:1px solid rgba(255,255,255,.07);
  margin-top:10px;
}
.candidate-mini strong{color:#f2eadc!important}
.candidate-mini small{color:#a8aaa6!important}
.candidate-initial{
  background:rgba(111,143,132,.18)!important;
  border:1px solid rgba(111,143,132,.32)!important;
  color:#dce7e2!important;
}
.sidebar .secondary-button{
  background:rgba(255,255,255,.055)!important;
  color:#ddd6cb!important;
  border-color:rgba(255,255,255,.09)!important;
}

/* Warm atmospheric workspace */
.workspace{
  position:relative;
  background:
    linear-gradient(180deg,rgba(250,247,241,.94),rgba(239,232,220,.96));
}
.workspace:before{
  content:"";
  position:absolute;
  inset:88px 0 0;
  pointer-events:none;
  z-index:0;
  opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900' preserveAspectRatio='none'%3E%3Cpath d='M-100 250 C170 120 360 355 632 224 C867 111 1077 257 1510 68' fill='none' stroke='%23c49a55' stroke-opacity='.065' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M-80 342 C182 218 390 438 660 318 C892 214 1115 350 1500 180' fill='none' stroke='%236f8f84' stroke-opacity='.06' stroke-width='14' stroke-linecap='round'/%3E%3Cpath d='M-50 430 C214 321 422 516 700 420 C948 334 1163 442 1510 294' fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.workspace>*{position:relative;z-index:1}

/* APPROVED ONYX WORKSPACE HEADER */
.topbar{
  height:88px!important;
  overflow:hidden;
  color:#f5efe2!important;
  border-bottom:1px solid rgba(196,154,85,.30)!important;
  background:linear-gradient(100deg,#0d0f12 0%,#15181c 58%,#101215 100%)!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.035),0 8px 24px rgba(17,18,20,.14)!important;
}
.topbar:before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:min(64vw,860px);
  height:88px;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 860 88' preserveAspectRatio='none'%3E%3Cpath d='M-30 4 C125 63 234 -20 389 27 C541 73 667 4 890 42 L890 88 L-30 88 Z' fill='%23c49a55' fill-opacity='.095'/%3E%3Cpath d='M-30 27 C121 77 240 0 392 46 C548 91 680 23 890 61' fill='none' stroke='%23d9b46f' stroke-opacity='.60' stroke-width='2.2'/%3E%3Cpath d='M-30 43 C121 89 246 19 401 61 C559 103 689 43 890 76' fill='none' stroke='%237b9a8f' stroke-opacity='.46' stroke-width='1.8'/%3E%3C/svg%3E");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.topbar>*{position:relative;z-index:1}
.topbar .eyebrow{color:#d3ad6c!important}
.topbar h2{color:#f4ecdd!important;font-size:25px!important}
.topbar .status-pill{
  border-color:rgba(234,214,170,.24)!important;
  background:rgba(255,255,255,.065)!important;
  color:#dcd4c8!important;
  box-shadow:none!important;
  backdrop-filter:blur(8px);
}
.topbar .status-dot{background:#83a89a!important}

/* Dimensional surfaces */
.welcome-card,
.question-card,
.metric-card,
.content-card,
.authority-card,
.graphite-home-card,
.graphite-home-hero,
.library-hero,
.library-folder,
.library-folder-panel,
.library-source-details,
.tn-progress-section,
.mock-panel,
.mock-summary-card,
.mock-answer-card,
.deck-slide,
.v02-status-explorer,
.recall-card{
  border-color:rgba(69,61,50,.12)!important;
  box-shadow:var(--tn-card-shadow)!important;
}
.welcome-card,
.question-card,
.metric-card,
.content-card,
.authority-card,
.graphite-home-card,
.library-folder-panel,
.tn-progress-section,
.mock-answer-card{
  background:rgba(255,253,248,.94)!important;
}
.metric-card:after,
.content-card:after,
.graphite-home-card:after{
  content:"";
  position:absolute;
  left:14px;
  right:-5px;
  bottom:-6px;
  height:8px;
  border-radius:0 0 18px 18px;
  background:rgba(94,78,58,.035);
  z-index:-1;
}

/* HOME — use live data, approved visual hierarchy */
.graphite-home-view{
  background:transparent!important;
}
.graphite-home-shell{
  width:min(1180px,calc(100% - 52px))!important;
  padding:34px 0 64px!important;
}
.graphite-home-hero{
  padding:32px!important;
  border-radius:26px!important;
  background:
    linear-gradient(135deg,rgba(255,253,248,.97),rgba(244,238,227,.94))!important;
}
.graphite-home-hero:after{display:none!important}
.graphite-home-hero h1{
  color:#272a2e!important;
  font-size:clamp(38px,5vw,62px)!important;
}
.graphite-home-hero p{color:var(--tn-muted)!important}
.graphite-home-card{
  position:relative;
  border-radius:21px!important;
}
.graphite-home-card.home-focus{
  background:
    linear-gradient(145deg,rgba(255,253,248,.99),rgba(235,226,207,.88))!important;
  border-color:rgba(196,154,85,.28)!important;
}
.graphite-home-card h2,.graphite-home-card h3{color:#2b2c2f!important}
.graphite-home-metrics>div{
  background:#fffdf8!important;
  border-color:rgba(70,63,52,.11)!important;
}
.graphite-evidence-bar{background:#e7dfd2!important}
.graphite-evidence-bar span{
  background:linear-gradient(90deg,var(--tn-sage-deep),var(--tn-sage),var(--tn-champagne))!important;
}

/* JADE — keep the reasoning surface quiet */
#coachView{
  background:transparent;
}
.chat-messages{padding-top:34px!important}
.welcome-card{
  background:
    linear-gradient(145deg,rgba(255,253,248,.98),rgba(240,235,225,.94))!important;
  border-radius:22px!important;
}
.message-row.assistant .bubble{
  background:#fffdf9!important;
  border-color:rgba(67,61,53,.10)!important;
  box-shadow:0 8px 24px rgba(48,42,33,.055)!important;
}
.message-row.user .bubble{
  background:linear-gradient(135deg,#24272b,#101215)!important;
  color:#fffaf0!important;
}
.avatar.coach{
  background:linear-gradient(145deg,#dce7e2,#f1eee5)!important;
  color:var(--tn-sage-deep)!important;
  border:1px solid rgba(111,143,132,.24)!important;
}
.question-card{
  background:#fffefa!important;
  border-radius:20px!important;
}
.question-label{color:var(--tn-sage-deep)!important}
.option{
  background:#fffdf8!important;
  border-color:rgba(68,61,51,.12)!important;
}
.option:hover{
  background:#f5f0e6!important;
  border-color:rgba(111,143,132,.48)!important;
}
.confidence-btn.selected{
  background:#e0e9e5!important;
  color:var(--tn-sage-deep)!important;
  border-color:rgba(111,143,132,.44)!important;
}
.composer-wrap{
  background:linear-gradient(to top,rgba(244,239,229,.98) 76%,rgba(244,239,229,.16))!important;
}
.composer{
  background:#fffdfa!important;
  border-color:rgba(63,56,47,.13)!important;
  box-shadow:0 14px 34px rgba(48,42,33,.08)!important;
}
.quick-actions button,.inline-action{
  background:#fffdf9!important;
  border-color:rgba(64,57,48,.12)!important;
}
.quick-actions button:hover,.inline-action:hover{
  background:#f1ece2!important;
  color:var(--tn-sage-deep)!important;
  border-color:rgba(111,143,132,.36)!important;
}

/* PRIMARY ACTIONS */
.primary-button,.submit-answer,.send-button{
  background:linear-gradient(180deg,#2b2e32,#111316)!important;
  color:#fff6e8!important;
  border:1px solid rgba(196,154,85,.26)!important;
  box-shadow:0 8px 18px rgba(20,18,15,.15)!important;
}
.primary-button:hover,.submit-answer:hover,.send-button:hover{background:#090b0d!important}
.secondary-button{
  background:#f5efe5!important;
  color:#48463f!important;
  border-color:rgba(66,59,49,.13)!important;
}

/* PROGRESS */
#progressView .panel-content{
  position:relative;
  padding-top:30px!important;
}
#progressView .section-heading h3{
  color:#292b2f!important;
}
.progress-bar{background:#e5ddd0!important}
.progress-bar>span{background:linear-gradient(90deg,var(--tn-sage-deep),var(--tn-sage),var(--tn-champagne))!important}
.tn-progress-section>summary{
  background:linear-gradient(180deg,#fffdf9,#f6f0e6)!important;
}
.tn-progress-section>summary:after{color:var(--tn-champagne)!important}
.tag.ready{background:#dde8e3!important;color:var(--tn-sage-deep)!important}
.tag.retained{background:#d6e4dd!important;color:#31594e!important}

/* STUDY LIBRARY */
.library-hero{
  background:
    linear-gradient(145deg,#fffdf8,#efe8dc)!important;
  border-radius:24px!important;
}
.library-hero h3{color:#292b2e!important}
.library-folder{
  background:#fffdf8!important;
}
.library-folder:hover{
  border-color:rgba(196,154,85,.34)!important;
}
.library-folder-icon{
  background:#e2ebe7!important;
  color:var(--tn-sage-deep)!important;
}
.library-source-details{
  background:rgba(255,251,244,.90)!important;
  border-color:rgba(196,154,85,.28)!important;
}

/* MINI MOCK */
.mock-hub{display:grid;gap:18px}
.mock-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mock-stat{padding:18px!important;min-height:126px;display:grid;align-content:center;gap:4px}
.mock-stat span,.mock-stat small{color:var(--tn-muted,#737873);font-size:12px}
.mock-stat strong{font-family:var(--tn-serif,Georgia,serif);font-size:34px;line-height:1;color:var(--tn-ink,#27292c)}
.mock-builder-card{padding:22px!important}
.mock-builder-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:18px}
.mock-builder-heading h4{margin:4px 0 0;font-size:24px}
.mock-builder-heading p{max-width:520px;margin:0;color:var(--tn-muted,#737873)}
.mock-setup-inline{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(260px,1.4fr) auto auto;gap:14px;align-items:end}
.mock-setup-inline label{display:grid;gap:7px;font-weight:700}
.mock-setup-inline select{width:100%}
.mock-setup-inline .mock-toggle{display:flex;align-items:center;gap:8px;padding-bottom:14px;white-space:nowrap}
.mock-history-host{display:grid;gap:14px}
@media(max-width:980px){
  .mock-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mock-builder-heading{align-items:start;flex-direction:column}
  .mock-setup-inline{grid-template-columns:1fr 1fr}
  .mock-setup-inline .mock-toggle{padding-bottom:0}
}
@media(max-width:620px){
  .mock-stat-grid,.mock-setup-inline{grid-template-columns:1fr 1fr}
  .mock-stat{min-height:104px}
  .mock-setup-inline .primary-button{grid-column:1/-1;width:100%}
}
.mock-modal{
  background:rgba(10,12,14,.68)!important;
  backdrop-filter:blur(6px);
}
.mock-panel{
  background:
    linear-gradient(180deg,#fffdf8,#f2ece2)!important;
  border:1px solid rgba(196,154,85,.24)!important;
}
.mock-head{
  border-bottom-color:rgba(71,62,50,.11)!important;
}
.mock-summary-card{
  background:linear-gradient(145deg,#fffdf8,#f1ebe1)!important;
}
.mock-score-ring{
  border-color:rgba(111,143,132,.18)!important;
  background:#fffdf9!important;
}
.mock-summary-chips span{
  background:rgba(111,143,132,.10)!important;
}
.mock-answer-card.is-review{border-left-color:rgba(196,154,85,.72)!important}
.mock-answer-card.is-correct{border-left-color:rgba(111,143,132,.72)!important}

/* Study decks: remove historical Graphite visual label if surfaced */
.deck-toolbar:before{
  content:"TOPNOTE LEARNING · CIA CHALLENGE"!important;
  color:var(--tn-sage-deep)!important;
}
.deck-modal{
  background:
    linear-gradient(145deg,#f5efe5,#ebe3d6)!important;
}
.deck-slide{
  background:#fffdf8!important;
  border-color:rgba(196,154,85,.42)!important;
}
.deck-slide h3{color:#2d2d2f!important}
.slide-type{
  background:#e1ebe6!important;
  color:var(--tn-sage-deep)!important;
}

/* Focus + accessibility */
:where(button,input,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid rgba(196,154,85,.58)!important;
  outline-offset:3px!important;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* MOBILE — compact branded masthead + five destinations in one row */
@media(max-width:760px){
  .access-shell{padding:0;background:#111418}
  #accessView .access-card{
    min-height:100vh;
    width:100%;
    border:0;
    border-radius:0;
    padding:24px 20px 34px;
    display:block;
    background:
      linear-gradient(180deg,#101215 0,#16191d 40%,#f3ede3 40%,#fbf8f2 100%);
    box-shadow:none;
  }
  #accessView .access-card:before{
    inset:0 0 60% 0;
    background-size:cover;
  }
  #accessView .access-brand-lockup{margin:0 auto 6px}
  .topnote-logo--access{
    width:min(330px,88vw);
    height:112px;
    margin:-4px auto -10px;
  }
  #accessView .access-card>.lead{
    margin:0 auto;
    max-width:520px;
    color:#d8d2c8;
    text-align:center;
    font-size:15px;
  }
  #accessView .access-card>.principle{
    margin:16px auto 30px;
    max-width:520px;
    text-align:center;
  }
  #accessView #emailForm,#accessView #otpForm{
    margin:0 auto;
    width:min(100%,520px);
    padding:24px 20px;
    border-radius:20px;
  }
  #accessView #authMessage{margin:14px auto 0;width:min(100%,520px)}

  .app-shell:not(.hidden){
    display:block!important;
    padding-top:0!important;
  }
  .app-shell.hidden{
    display:none!important;
  }
  .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    min-height:0!important;
    height:104px!important;
    padding:7px 12px 10px!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-rows:58px 38px!important;
    gap:0!important;
    border-right:0!important;
    border-bottom:1px solid rgba(196,154,85,.22)!important;
    box-shadow:0 10px 24px rgba(17,18,20,.13)!important;
  }
  .sidebar:before{background-size:100% 160px}
  .sidebar-brand{
    display:block!important;
    padding:0!important;
    height:58px;
    overflow:hidden;
  }
  .sidebar .topnote-brand-kicker{display:none!important}
  .topnote-logo--sidebar{
    display:block!important;
    width:min(244px,78vw)!important;
    height:58px!important;
    margin:-5px auto -2px!important;
    object-fit:cover!important;
  }
  .nav-stack{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    width:100%!important;
    height:38px!important;
    gap:5px!important;
    overflow:visible!important;
  }
  .nav-button{
    min-width:0!important;
    min-height:36px!important;
    height:36px!important;
    padding:6px 3px!important;
    justify-content:center!important;
    border-radius:10px!important;
    font-size:0!important;
  }
  .nav-button{position:relative!important}
  .nav-button span{font-size:14px!important;margin:0!important}
  .nav-button:after{
    content:attr(data-mobile-label);
    font-size:8.2px!important;
    line-height:1!important;
    position:absolute;
    bottom:4px;
    left:2px;
    right:2px;
    text-align:center;
    color:inherit;
  }
  .sidebar-spacer,.candidate-mini,#switchCandidate{display:none!important}
  .workspace{
    grid-column:auto!important;
    min-height:calc(100vh - 104px)!important;
    margin-top:104px!important;
  }
  .workspace:before{inset:76px 0 0}
  .topbar{
    height:76px!important;
    padding:11px 15px!important;
    top:0!important;
  }
  .topbar:before{width:76vw;height:76px}
  .topbar h2{font-size:21px!important}
  .topbar .status-pill{padding:7px 9px!important;font-size:10px!important}
  .graphite-home-shell{
    width:calc(100% - 24px)!important;
    padding:22px 0 92px!important;
  }
  .graphite-home-hero{
    padding:24px 20px!important;
    border-radius:22px!important;
  }
  .graphite-home-hero h1{font-size:40px!important}
  .graphite-home-card{
    border-radius:18px!important;
  }
  .chat-messages{
    width:calc(100% - 24px)!important;
    padding-top:22px!important;
  }
  .composer-wrap{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .panel-content{
    width:calc(100% - 24px)!important;
    padding-top:22px!important;
  }
  .library-hero{border-radius:20px!important}
}

@media(max-width:430px){
  .app-shell:not(.hidden){padding-top:0!important}
  .app-shell.hidden{display:none!important}
  .sidebar{
    height:98px!important;
    grid-template-rows:54px 36px!important;
  }
  .sidebar-brand{height:54px}
  .topnote-logo--sidebar{
    width:min(224px,76vw)!important;
    height:54px!important;
  }
  .nav-stack{gap:4px!important;height:36px!important}
  .nav-button{
    min-height:34px!important;
    height:34px!important;
    padding:5px 2px!important;
  }
  .nav-button span{font-size:13px!important}
  .nav-button:after{font-size:7.8px!important}
  .workspace{margin-top:98px!important;min-height:calc(100vh - 98px)!important}
  .graphite-home-hero h1{font-size:36px!important}
}

@media(max-width:760px){
  #mobileLeaveSession{
    position:static!important;
    flex:0 0 auto;
    margin-left:10px!important;
    padding:8px 12px!important;
    border-radius:999px!important;
    white-space:nowrap!important;
    z-index:2!important;
  }
  .topbar>div:first-child{min-width:0}
  .topbar h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* Jade mobile reliability pass — compact controls, visible progress, clear submit prerequisites */
.typing-label{
  margin-top:7px;
  font-size:11px;
  line-height:1.35;
  color:var(--tn-muted,#737873);
}
.submit-hint{
  margin-top:10px;
  font-size:11px;
  line-height:1.4;
  color:var(--tn-muted,#737873);
}
.submit-answer:not(:disabled){opacity:1!important}

@media(max-width:760px){
  /* INC-0008 v0.3 — use the browser page as the mobile Jade scroll surface.
     Internal/nested scroll containers proved unreliable across mobile browsers.
     The page itself scrolls naturally; the composer stays sticky and reachable. */
  html,body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
  }
  .app-shell:not(.hidden){
    min-height:100dvh!important;
    height:auto!important;
    overflow:visible!important;
  }
  .workspace{
    height:auto!important;
    min-height:calc(100dvh - 98px)!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }
  #coachView.coach-layout{
    height:auto!important;
    min-height:calc(100dvh - 174px)!important;
    overflow:visible!important;
    display:block!important;
  }
  #coachView .graphite-coach-body{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  #coachView>.chat-scroll,
  #coachView .graphite-coach-body>.chat-scroll{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:visible!important;
    -webkit-overflow-scrolling:auto;
    touch-action:auto!important;
  }
  #coachView .chat-messages{
    padding-top:16px!important;
    padding-bottom:18px!important;
  }
  #coachView>.composer-wrap,
  #coachView .composer-wrap{
    position:sticky!important;
    bottom:0!important;
    z-index:35!important;
    width:100%!important;
    min-width:0!important;
    padding:7px 12px calc(9px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(to top,rgba(244,239,229,1) 86%,rgba(244,239,229,.97))!important;
    border-top:1px solid rgba(63,56,47,.08);
    box-shadow:0 -8px 22px rgba(28,24,19,.08);
  }
  #coachView .quick-actions{
    width:100%!important;
    margin:0 auto 6px!important;
    gap:6px!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:1px 0 3px!important;
  }
  #coachView .quick-actions::-webkit-scrollbar{display:none}
  #coachView .quick-actions button{
    flex:0 0 auto!important;
    padding:7px 9px!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    min-height:32px!important;
  }
  #coachView .composer{
    width:100%!important;
    border-radius:15px!important;
    padding:7px 7px 7px 12px!important;
  }
  #coachView .composer textarea{
    min-height:34px!important;
    max-height:92px!important;
    font-size:16px!important;
  }
  #coachView .send-button{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
  }
  #coachView .composer-note{display:none!important}
  #coachView .message-row{margin-bottom:16px!important}
  #coachView .bubble{
    max-width:94%!important;
    padding:12px 13px!important;
    font-size:14px!important;
  }
  #coachView .question-card{
    margin-left:0!important;
    padding:15px!important;
    border-radius:17px!important;
  }
  #coachView .confidence-row{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    align-items:stretch!important;
  }
  #coachView .confidence-row>span{
    grid-column:1/-1;
    margin:0!important;
    font-weight:700;
  }
  #coachView .confidence-btn{
    width:100%!important;
    min-height:40px!important;
  }
  #coachView .submit-hint{
    margin-top:9px!important;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(196,154,85,.08);
  }
  #coachView .question-actions{
    margin-top:8px!important;
  }
  #coachView .submit-answer{
    width:100%!important;
    min-height:44px!important;
    border-radius:12px!important;
  }
}

@media(max-width:430px){
  #coachView.coach-layout{height:auto!important;min-height:calc(100dvh - 168px)!important}
}


/* Beta reviewer mode + in-app feedback */
.topbar-actions{display:flex;align-items:center;gap:9px}
.beta-feedback-button{
  border:1px solid rgba(198,146,62,.28);
  background:rgba(198,146,62,.08);
  color:#7f5a1f;
  border-radius:999px;
  padding:8px 11px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.beta-feedback-button:hover{background:rgba(198,146,62,.14)}
.reviewer-mode-banner{
  margin:14px 18px 0;
  border:1px solid rgba(125,138,112,.28);
  background:linear-gradient(135deg,rgba(225,233,219,.92),rgba(248,244,235,.96));
  color:#4f5a49;
  border-radius:14px;
  padding:11px 14px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  line-height:1.45;
}
.reviewer-mode-banner strong{
  flex:0 0 auto;
  color:#3f5040;
  letter-spacing:.03em;
}
.beta-feedback-modal{
  position:fixed;
  inset:0;
  z-index:1500;
  background:rgba(12,14,12,.68);
  backdrop-filter:blur(4px);
  display:grid;
  place-items:center;
  padding:18px;
}
.beta-feedback-panel{
  width:min(640px,100%);
  max-height:min(88vh,760px);
  overflow:auto;
  border-radius:22px;
  background:#fbf7ef;
  border:1px solid #e3d7c0;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
  padding:24px;
}
.beta-feedback-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:8px;
}
.beta-feedback-head h3{
  margin:5px 0 0;
  font-size:25px;
  line-height:1.15;
}
.beta-feedback-note{
  margin:0 0 18px;
  border-radius:12px;
  padding:10px 12px;
  background:#f0eadf;
  color:#6b6256;
  font-size:11px;
  line-height:1.5;
}
#betaFeedbackForm{display:grid;gap:12px}
#betaFeedbackForm label{
  display:grid;
  gap:6px;
  font-size:12px;
  font-weight:750;
  color:#4b453d;
}
#betaFeedbackForm label span{font-weight:500;color:#847b6f}
#betaFeedbackForm input,
#betaFeedbackForm textarea,
#betaFeedbackForm select{
  width:100%;
  border:1px solid #ded3c1;
  border-radius:11px;
  background:white;
  color:#29251f;
  padding:11px 12px;
  font:inherit;
}
#betaFeedbackForm textarea{resize:vertical}
.beta-feedback-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.beta-feedback-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:2px;
}
.beta-feedback-status{
  min-height:20px;
  font-size:12px;
  font-weight:700;
  color:#6f675a;
}
.beta-feedback-status.error{color:#9b4b43}
.beta-feedback-status.success{color:#526b54}

@media(max-width:620px){
  .topbar-actions{gap:6px}
  .beta-feedback-button{
    padding:7px 9px;
    font-size:10px;
    white-space:nowrap;
  }
  .reviewer-mode-banner{
    margin:10px 10px 0;
    flex-direction:column;
    gap:4px;
    font-size:11px;
  }
  .beta-feedback-modal{padding:10px;align-items:end}
  .beta-feedback-panel{
    max-height:90dvh;
    border-radius:20px 20px 12px 12px;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .beta-feedback-grid{grid-template-columns:1fr 1fr}
  .beta-feedback-actions>*{flex:1}
}

/* Navigation isolation: hidden must override mobile coach display rules. */
#coachView.hidden{display:none!important}

/* TopNOTE Helpdesk v0.1 */
.beta-feedback-blocking{
  grid-template-columns:auto 1fr!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:11px 12px;
  border:1px solid #ded3c1;
  border-radius:12px;
  background:#fffdf8;
}
.beta-feedback-blocking input{
  width:auto!important;
  margin:3px 0 0!important;
}
.beta-feedback-blocking span{
  display:grid;
  gap:2px;
}
.beta-feedback-blocking small{
  font-weight:500;
  color:#847b6f;
}
.beta-feedback-preview{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.beta-feedback-preview figure{
  width:92px;
  margin:0;
  display:grid;
  gap:4px;
}
.beta-feedback-preview img{
  width:92px;
  height:68px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #ded3c1;
  background:#eee7dc;
}
.beta-feedback-preview figcaption{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  color:#786f62;
}
.beta-support-history{
  border-top:1px solid #e4d9c6;
  margin-top:22px;
  padding-top:18px;
}
.beta-support-history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.beta-support-history h4{
  margin:4px 0 0;
  font-size:17px;
}
.beta-support-list{
  display:grid;
  gap:8px;
}
.beta-support-item{
  display:grid;
  gap:6px;
  padding:11px 12px;
  border:1px solid #e4dac8;
  border-radius:12px;
  background:rgba(255,255,255,.7);
}
.beta-support-item-head{
  display:flex;
  justify-content:space-between;
  gap:9px;
  align-items:center;
}
.beta-support-ticket{
  color:#76531d;
  font-weight:900;
  font-size:11px;
  letter-spacing:.05em;
}
.beta-support-status{
  padding:4px 7px;
  border-radius:999px;
  background:#edf1ec;
  color:#53614f;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.beta-support-item strong{
  font-size:12px;
  color:#363029;
}
.beta-support-item small{
  color:#81786b;
  line-height:1.45;
}
.beta-support-item-actions{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}
.beta-support-item-actions button{
  font-size:10px;
}
.beta-support-hq{
  color:#526b54!important;
  font-weight:750;
}
.beta-support-pending{
  color:#8a6422!important;
  font-weight:750;
}\n
.beta-support-resolution{
  margin-top:2px;
  padding:9px 10px;
  border-radius:10px;
  background:#f2f6f1;
  border:1px solid #d7e3d5;
  color:#4d6250;
  font-size:10px;
  line-height:1.5;
}
.beta-support-resolution span{
  color:#66756a;
}