/* MAYHAW PC/Mac desktop workspace preview.
   Every layout override is isolated above 900px so the phone/tablet field UI is unchanged. */
@media (min-width: 901px) {
  :root {
    --desktop-navy: #06182a;
    --desktop-navy-2: #0b2238;
    --desktop-wine: #8b1647;
    --desktop-wine-dark: #690d35;
    --desktop-gold: #ffb400;
    --desktop-cream: #f7f2ea;
    --desktop-ink: #0d2944;
    --desktop-line: rgba(255, 180, 0, .28);
  }

  html { background: var(--desktop-navy); }
  body {
    min-width: 901px;
    min-height: 100vh;
    background:
      linear-gradient(90deg, rgba(6, 24, 42, .96) 0 300px, rgba(6, 24, 42, .08) 300px),
      url("/images/mayhaw-desktop-lightning-tree.webp?v=preview-v18") center / cover fixed no-repeat;
  }

  /* Desktop sign-in and setup remain the real MAYHAW flows, presented as a wide workspace. */
  body:not(.mayhaw-desktop-app) .shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 56px 64px 56px 364px !important;
  }
  body:not(.mayhaw-desktop-app) .shell > header.top-header {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 4;
    display: flex;
    width: 300px !important;
    max-width: 300px !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 88px 28px 34px !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #fff;
    background: linear-gradient(180deg, rgba(4, 20, 36, .99), rgba(5, 29, 49, .99));
    border: 0;
    border-right: 1px solid rgba(255,255,255,.10);
    border-radius: 0;
    box-shadow: 16px 0 42px rgba(0,0,0,.20);
  }
  body:not(.mayhaw-desktop-app) .top-header .brand-block {
    width: 100%;
    padding: 112px 0 28px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  body:not(.mayhaw-desktop-app) .desktop-brand-tree {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 22px;
  }
  body:not(.mayhaw-desktop-app) .top-header h1 {
    margin: 0;
    color: #fff;
    font: 800 2.05rem/1.05 Georgia, "Times New Roman", serif;
    letter-spacing: .06em;
  }
  body:not(.mayhaw-desktop-app) .top-header .brand-subtitle {
    margin-top: 12px;
    color: var(--desktop-gold);
    font-size: .72rem;
    line-height: 1.4;
    letter-spacing: .11em;
  }
  body:not(.mayhaw-desktop-app) .top-header .tagline {
    margin-top: 14px;
    color: #c9d7e2;
    line-height: 1.55;
  }
  body:not(.mayhaw-desktop-app) .top-header .header-actions { width: 100%; margin-top: 26px; }
  body:not(.mayhaw-desktop-app) .top-header .language-toggle {
    width: 100%;
    min-height: 48px;
    color: var(--desktop-gold);
    background: rgba(255, 180, 0, .08);
    border: 1px solid rgba(255, 180, 0, .55);
    border-radius: 12px;
  }
  body:not(.mayhaw-desktop-app) .top-header .powered-by-ledoux { display: none; }
  body:not(.mayhaw-desktop-app) .auth-card {
    width: min(610px, calc(100vw - 430px));
    max-width: 610px;
    margin: 28px 0 48px !important;
    padding: 30px;
    color: var(--desktop-ink);
    background: rgba(250, 247, 242, .97);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 22px;
    box-shadow: 0 28px 78px rgba(0,0,0,.32);
  }
  body:not(.mayhaw-desktop-app) .auth-card h2,
  body:not(.mayhaw-desktop-app) .auth-card h3,
  body:not(.mayhaw-desktop-app) .auth-card label { color: var(--desktop-ink); }
  body:not(.mayhaw-desktop-app) .auth-card .muted { color: #5d6d7d; }
  body:not(.mayhaw-desktop-app) .auth-card input,
  body:not(.mayhaw-desktop-app) .auth-card select,
  body:not(.mayhaw-desktop-app) .auth-card textarea {
    color: #12273a;
    background: #fff;
    border-color: #cbd4dc;
  }
  body:not(.mayhaw-desktop-app) .auth-card .primary {
    color: #fff;
    background: linear-gradient(135deg, var(--desktop-wine), var(--desktop-wine-dark));
    border-color: #a82d5c;
  }
  body:not(.mayhaw-desktop-app) .auth-card .quiet-button {
    color: var(--desktop-ink);
    background: #fff;
    border-color: #bdc9d2;
  }
  body:not(.mayhaw-desktop-app) footer { display: none; }

  /* Signed-in desktop application frame. */
  body.mayhaw-desktop-app {
    background: var(--desktop-navy);
    overflow: auto;
  }
  body.mayhaw-desktop-app .shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.mayhaw-desktop-app .shell > header.top-header,
  body.mayhaw-desktop-app .shell > footer { display: none !important; }
  body.mayhaw-desktop-app .shell > main { width: 100% !important; max-width: none !important; }

  #appView:not(.hidden) {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-height: 100vh;
    color: #fff;
    background: var(--desktop-navy);
  }
  #appView > #speechNotice { grid-column: 2; }
  #appView > #homeInstallBtn { display: none !important; }

  .desktop-navigation {
    display: flex;
    grid-column: 1;
    grid-row: 1 / span 40;
    position: sticky;
    top: 0;
    z-index: 3;
    height: 100vh;
    min-height: 720px;
    padding: 30px 20px 22px;
    flex-direction: column;
    overflow-y: auto;
    color: #fff;
    background: linear-gradient(180deg, #041426 0%, #061c31 100%);
    border-right: 1px solid rgba(255,255,255,.11);
    box-shadow: 14px 0 38px rgba(0,0,0,.18);
  }
  .desktop-nav-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 4px 28px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.11);
  }
  .desktop-nav-brand img { width: 68px; height: 68px; border-radius: 16px; }
  .desktop-nav-brand strong,
  .desktop-nav-brand span { display: block; }
  .desktop-nav-brand strong {
    color: #fff;
    font: 800 1.35rem/1.1 Georgia, "Times New Roman", serif;
    letter-spacing: .08em;
  }
  .desktop-nav-brand span { margin-top: 6px; color: #d0d9e1; font-size: .75rem; }
  .desktop-navigation nav { display: grid; gap: 8px; }
  .desktop-navigation nav button {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 5px 12px;
    color: var(--desktop-gold);
    background: transparent;
    border: 0;
    border-radius: 12px;
    font-size: .98rem;
    font-weight: 800;
    text-align: left;
  }
  .desktop-navigation nav button > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--desktop-gold);
    background: rgba(255, 180, 0, .05);
    border: 1px solid rgba(255, 180, 0, .28);
    border-radius: 9px;
  }
  .desktop-navigation nav button:hover,
  .desktop-navigation nav button:focus-visible {
    background: rgba(255, 180, 0, .09);
    outline: 1px solid rgba(255, 180, 0, .42);
  }
  .desktop-navigation nav button.active {
    color: #ffd359;
    background: linear-gradient(90deg, #a51f51, #87123f);
    box-shadow: 0 8px 20px rgba(73, 7, 35, .28);
  }
  .desktop-navigation nav button[data-desktop-go="troubleshoot"] {
    display: none !important;
  }
  .desktop-navigation nav button[data-desktop-go="home"]:not([data-desktop-focus]) {
    display: none !important;
  }
  .desktop-navigation nav button[data-desktop-action="weather"],
  .desktop-navigation nav button[data-desktop-action="more"] {
    display: none !important;
  }
  .desktop-nav-account {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    margin-top: auto;
    padding: 18px 8px 12px;
    border-top: 1px solid rgba(255,255,255,.11);
  }
  .desktop-user-initial {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    background: #88d34c;
    border-radius: 50%;
    font-weight: 900;
  }
  .desktop-nav-account strong,
  .desktop-nav-account span { display: block; }
  .desktop-nav-account strong { color: #fff; font-size: .95rem; }
  .desktop-nav-account div span { margin-top: 3px; color: var(--desktop-gold); font-size: .76rem; }
  .desktop-nav-plan {
    display: grid;
    gap: 5px;
    margin-top: 4px;
    padding: 14px 16px;
    color: #fff;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
  }
  .desktop-nav-plan strong { color: #fff; font-size: .88rem; }
  .desktop-nav-plan span { color: #d5dde4; font-size: .72rem; }
  #appView > .screen {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 42px 52px;
    background:
      linear-gradient(130deg, rgba(8, 28, 46, .93), rgba(7, 22, 37, .88)),
      url("/images/mayhaw-desktop-lightning-tree.webp?v=preview-v18") center / cover fixed no-repeat;
  }
  #appView > #home {
    position: relative;
    padding: clamp(52px, 6vh, 82px) clamp(44px, 4.8vw, 76px) 50px;
    background:
      linear-gradient(90deg, rgba(8, 32, 55, .12), rgba(8, 32, 55, .03)),
      url("/images/mayhaw-desktop-lightning-tree.webp?v=preview-v18") center / cover fixed no-repeat;
  }
  #appView .card {
    border-color: rgba(255, 180, 0, .20);
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
  }
  #appView .primary {
    color: #fff;
    background: linear-gradient(135deg, var(--desktop-wine), var(--desktop-wine-dark));
    border-color: #a82d5c;
  }
  #appView .primary:hover { background: #a31c50; }

  .desktop-home-heading {
    display: flex;
    min-height: 92px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 30px;
  }
  .desktop-home-heading h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.7rem, 4vw, 4rem);
    line-height: .98;
    letter-spacing: -.045em;
    text-shadow: 0 2px 18px rgba(0,0,0,.22);
  }
  .desktop-home-heading p {
    margin: 12px 0 0;
    color: #f1f4f7;
    font-size: 1.08rem;
    text-shadow: 0 2px 14px rgba(0,0,0,.34);
  }
  .desktop-home-heading-actions { display: flex; gap: 10px; align-items: center; }
  .desktop-home-heading-actions button {
    width: auto;
    min-width: 118px;
    min-height: 48px;
    padding: 10px 16px;
    color: #fff;
    background: rgba(7, 24, 41, .88);
    border: 1px solid rgba(255, 180, 0, .24);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    font-weight: 800;
  }
  .desktop-home-heading-actions button:last-child { color: var(--desktop-gold); }
  .desktop-home-heading-actions button:hover,
  .desktop-home-heading-actions button:focus-visible { border-color: var(--desktop-gold); }

  #home .home-status-strip,
  #home .foreman-avatar,
  #home #personalGreeting,
  #home .field-question-helper,
  #home .mode-heading,
  #home .main-actions,
  #home .power-learning-entry,
  #home .more-button,
  #home .more-tools,
  #home .ai-voice-disclosure,
  #home .ask-back-to-tools { display: none !important; }

  #home .home-ai-workspace {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 26px 28px 24px;
    color: var(--desktop-ink);
    background: rgba(250, 247, 242, .97);
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(0,0,0,.28);
  }
  #home .foreman-welcome,
  #home .welcome-copy { display: block !important; width: 100%; }
  #home .welcome-copy::before {
    content: attr(data-desktop-ask-helper);
    display: block;
    margin-bottom: 15px;
    color: var(--desktop-ink);
    font-size: 1.02rem;
    font-weight: 900;
  }
  #home .desktop-question-compose {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,.62);
    border: 1px solid #d8d2ca;
    border-radius: 14px;
  }
  #home #question {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 98px;
    margin: 0;
    padding: 4px 6px;
    color: #27394c;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    resize: vertical;
  }
  #home #question:focus { border: 0; box-shadow: none; outline: 0; }
  #home #photoQuestionBar {
    display: flex;
    grid-column: 1;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
  }
  #home #photoHelpBtnInline {
    width: 46px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    background: #f6f5f2;
    border: 0;
    border-radius: 10px;
    font-size: 0;
  }
  #home #photoHelpBtnInline::before { content: "📎"; color: #53677c; font-size: 1.25rem; }
  #home #photoAttachedStatus { color: #68798a; font-size: .72rem; }
  #home #askBtn {
    grid-column: 2;
    width: 112px;
    min-height: 46px;
    margin: 0;
    padding: 0 16px;
    color: transparent;
    font-size: 0;
    border-radius: 11px;
  }
  #home #askBtn::before { content: attr(data-desktop-ask-send); color: #fff; font-size: .95rem; font-weight: 900; }
  #home #photoPreview,
  #home #photoOptions { grid-column: 1 / -1; }
  #home #photoConfirmationPanel,
  #home #askedQuestion,
  #home #answer,
  #home #showMoreAnswer,
  #home #askFieldControls,
  #home #answerFeedback,
  #home #newQuestionBtn { margin-top: 14px; }
  #home #answer,
  #home #askedQuestion,
  #home #photoConfirmationPanel {
    color: #1f3347;
    background: #fff;
    border-color: #d9d2c8;
  }
  #home #answer h1,
  #home #answer h2,
  #home #answer h3,
  #home #answer strong { color: #142b42; }
  #home .field-controls button,
  #home .quick-feedback button,
  #home #showMoreAnswer,
  #home #newQuestionBtn {
    color: var(--desktop-ink);
    background: #fff;
    border-color: #bdc8d1;
  }

  /* Full PC/Mac workspace design. The real mobile markup and behavior stay intact;
     these rules only reshape every signed-in tool above the desktop breakpoint. */
  #appView > .screen:not(#home) {
    --desktop-surface: rgba(250, 247, 242, .975);
    --desktop-surface-strong: #fff;
    --desktop-soft: #f3eee7;
    --desktop-border: #d9d2c8;
    --desktop-muted: #607181;
    color: var(--desktop-ink);
    padding: 34px clamp(34px, 4vw, 64px) 64px;
    background:
      linear-gradient(115deg, rgba(8, 31, 52, .54), rgba(8, 31, 52, .13)),
      url("/images/mayhaw-desktop-lightning-tree.webp?v=preview-v18") center / cover fixed no-repeat;
  }
  #appView > .screen:not(#home) > .back-home {
    display: flex;
    width: min(1340px, 100%);
    min-height: 42px;
    margin: 0 auto 12px;
    padding: 9px 14px;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: rgba(5, 24, 41, .86);
    border: 1px solid rgba(255, 180, 0, .38);
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    font-size: .9rem;
  }
  #appView > .screen:not(#home) > .back-home:hover,
  #appView > .screen:not(#home) > .back-home:focus-visible {
    color: var(--desktop-gold);
    border-color: var(--desktop-gold);
  }
  #appView > .screen:not(#home) > .card {
    width: min(1340px, 100%);
    max-width: 1340px !important;
    margin: 0 auto 22px;
    padding: clamp(26px, 3vw, 42px) !important;
    color: var(--desktop-ink) !important;
    background: var(--desktop-surface) !important;
    border: 1px solid rgba(255,255,255,.88) !important;
    border-top: 4px solid var(--desktop-gold) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 62px rgba(0,0,0,.34) !important;
  }
  #appView > .screen:not(#home) > .card > small:first-child {
    display: block;
    margin-bottom: 6px;
    color: var(--desktop-wine);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .13em;
  }
  #appView > .screen:not(#home) > .card > h2 {
    margin: 0 0 9px;
    color: var(--desktop-ink);
    font-size: clamp(2rem, 2.8vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.035em;
  }
  #appView > .screen:not(#home) h1,
  #appView > .screen:not(#home) h2,
  #appView > .screen:not(#home) h3,
  #appView > .screen:not(#home) h4,
  #appView > .screen:not(#home) label,
  #appView > .screen:not(#home) strong { color: var(--desktop-ink); }
  #appView > .screen:not(#home) .muted,
  #appView > .screen:not(#home) small,
  #appView > .screen:not(#home) .field-suffix { color: var(--desktop-muted); }
  #appView > .screen:not(#home) a { color: var(--desktop-wine); }
  #appView > .screen:not(#home) input,
  #appView > .screen:not(#home) select,
  #appView > .screen:not(#home) textarea {
    color: #172d42;
    background: #fff;
    border: 1px solid #b9c6d0;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(12, 34, 51, .06);
  }
  #appView > .screen:not(#home) input:focus,
  #appView > .screen:not(#home) select:focus,
  #appView > .screen:not(#home) textarea:focus {
    border-color: var(--desktop-wine);
    box-shadow: 0 0 0 3px rgba(139, 22, 71, .13);
    outline: 0;
  }
  #appView > .screen:not(#home) .primary {
    color: #fff;
    background: linear-gradient(135deg, var(--desktop-wine), var(--desktop-wine-dark));
    border-color: #a82d5c;
    box-shadow: 0 8px 18px rgba(105, 13, 53, .16);
  }
  #appView > .screen:not(#home) .quiet-button,
  #appView > .screen:not(#home) .field-back-button {
    color: var(--desktop-ink);
    background: #fff;
    border-color: #b9c6d0;
  }
  #appView > .screen:not(#home) .quiet-button:hover,
  #appView > .screen:not(#home) .field-back-button:hover {
    color: var(--desktop-wine);
    border-color: var(--desktop-wine);
  }
  #appView > .screen:not(#home) .answer,
  #appView > .screen:not(#home) .result-card,
  #appView > .screen:not(#home) .detail-box,
  #appView > .screen:not(#home) .asked-question {
    color: var(--desktop-ink);
    background: #fff;
    border-color: var(--desktop-gold);
  }
  #appView > .screen:not(#home) .answer h2,
  #appView > .screen:not(#home) .answer h3,
  #appView > .screen:not(#home) .answer strong,
  #appView > .screen:not(#home) .result-card strong { color: var(--desktop-ink); }
  /* Dark answer callouts must not inherit the light desktop card's ink. */
  :is(#home #answer, #appView > .screen:not(#home)) :is(.answer-section.safety, .answer-section.tip, .nec-reference-box) {
    color: #f7fbfd;
  }
  :is(#home #answer, #appView > .screen:not(#home)) :is(.answer-section.safety, .answer-section.tip, .nec-reference-box) :is(p, strong, h2, h3, h4, li) {
    color: inherit;
  }
  :is(#home #answer, #appView > .screen:not(#home)) .answer-label {
    color: #805000;
  }
  :is(#home #answer, #appView > .screen:not(#home)) :is(.answer-section.safety, .answer-section.tip) .answer-label,
  :is(#home #answer, #appView > .screen:not(#home)) .nec-reference-box > strong {
    color: #ffd260;
  }
  :is(#home #answer, #appView > .screen:not(#home)) .nec-reference-box .nec-citation-warning strong {
    color: #ffb7b7;
  }
  :is(#home #answer, #appView > .screen:not(#home)) :is(.answer-section.safety, .answer-section.tip, .nec-reference-box) a {
    color: #ffd260;
    text-decoration: underline;
  }
  #appView > .screen:not(#home) details {
    color: var(--desktop-ink);
    background: var(--desktop-soft);
    border: 1px solid var(--desktop-border);
  }
  #appView > .screen:not(#home) summary { color: var(--desktop-ink); }
  #appView > .screen:not(#home) .field-purpose-line {
    color: var(--desktop-wine);
    font-weight: 900;
  }
  #appView > .screen:not(#home) .button-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
  #appView > .screen:not(#home) .button-row button { width: 100%; }
  #appView > .screen:not(#home) .field-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--desktop-soft);
    border-color: var(--desktop-border);
  }
  #appView > .screen:not(#home) .field-controls button {
    color: var(--desktop-ink);
    background: #fff;
    border-color: #bbc6cf;
  }
  #appView > .screen:not(#home) .field-controls .primary,
  #appView > .screen:not(#home) .field-controls .stop-control { color: #fff; }
  #appView > .screen:not(#home) .progress {
    background: #ddd7cf;
    border: 0;
  }

  /* Power Learning */
  #powerLearning .power-learning-card { max-width: 1340px; }
  #powerLearning .learning-dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0 12px;
  }
  #powerLearning .learning-stat {
    min-height: 122px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--desktop-border);
    border-top: 3px solid var(--desktop-gold);
    box-shadow: 0 8px 18px rgba(13, 41, 68, .06);
  }
  #powerLearning .learning-stat small { color: var(--desktop-wine); }
  #powerLearning .learning-stat strong { color: var(--desktop-ink); }
  #powerLearning .learning-stat span { color: var(--desktop-muted); }
  #powerLearning .learning-progress-track {
    height: 9px;
    background: #ded8d0;
    border: 0;
  }
  #powerLearning .learning-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
  #powerLearning .learning-license-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #powerLearning .learning-tile,
  #powerLearning .learning-choice,
  #powerLearning .topic-row {
    min-height: 116px;
    color: var(--desktop-ink);
    background: #fff !important;
    border: 1px solid var(--desktop-border);
    border-radius: 13px;
    box-shadow: 0 8px 18px rgba(13, 41, 68, .055);
    text-align: left;
  }
  #powerLearning .learning-tile:hover,
  #powerLearning .learning-tile:focus-visible,
  #powerLearning .learning-tile.active-learning {
    background: #fff8e8 !important;
    border-color: var(--desktop-gold);
    transform: translateY(-2px);
  }
  #powerLearning .learning-tile > span { color: var(--desktop-wine); font-size: 1.7rem; }
  #powerLearning .learning-tile strong { color: var(--desktop-ink); }
  #powerLearning .learning-tile small { color: var(--desktop-muted); }
  #powerLearning .learning-section-heading {
    margin-top: 26px;
    padding: 18px 0 10px;
    border-color: var(--desktop-border);
  }
  #powerLearning .learning-exam-note,
  #powerLearning .learning-lesson,
  #powerLearning .learning-result,
  #powerLearning .progress-subjects div {
    color: var(--desktop-ink);
    background: #fff8e8;
    border-color: #e7ca7a;
  }

  /* Photo AI */
  #aiVision .ai-vision-card { max-width: 1340px; }
  #aiVision .vision-safety,
  #aiVision .vision-empty,
  #aiVision .vision-preview-panel,
  #aiVision .vision-pipeline-status,
  #aiVision .vision-request-summary {
    color: var(--desktop-ink);
    background: #fff;
    border-color: var(--desktop-border);
  }
  #aiVision .vision-safety { border-left: 4px solid var(--desktop-gold); }
  #aiVision .vision-primary-actions,
  #aiVision .vision-selected-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #aiVision .vision-primary-actions button,
  #aiVision .vision-selected-actions button { width: 100%; }
  #aiVision .vision-analysis-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }
  #aiVision .vision-analysis-actions button {
    min-height: 112px;
    color: var(--desktop-ink);
    background: #fff;
    border-color: var(--desktop-border);
    box-shadow: 0 8px 18px rgba(13, 41, 68, .055);
  }
  #aiVision .vision-analysis-actions button:hover,
  #aiVision .vision-analysis-actions button.selected {
    background: #fff8e8;
    border-color: var(--desktop-gold);
  }
  #aiVision .vision-analysis-actions button small { color: var(--desktop-muted); }

  /* Guided Troubleshooting */
  #troubleshoot .choice-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  #troubleshoot .choice-list button,
  #troubleshoot .trouble-result-actions button {
    min-height: 82px;
    color: var(--desktop-ink);
    background: #fff;
    border-color: var(--desktop-border);
    box-shadow: 0 7px 16px rgba(13, 41, 68, .05);
  }
  #troubleshoot .choice-list button:hover { background: #fff8e8; border-color: var(--desktop-gold); }
  #troubleshoot .choice-list span { color: var(--desktop-muted); }
  #troubleshoot .trouble-context-details,
  #troubleshoot .meter-coach,
  #troubleshoot .trouble-readings,
  #troubleshoot .reading-feedback { background: var(--desktop-soft); border-color: var(--desktop-border); }
  #troubleshoot .safety-checkpoint { color: var(--desktop-ink); background: #fff8e8; border-color: #d7a62b; }
  #troubleshoot .meter-grid > div { background: #fff; border: 1px solid var(--desktop-border); }

  /* Electrical Calculations */
  #calculators #calculatorMenu,
  #calculators #calculatorWorkspace { max-width: 1340px; }
  #calculators .calculator-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0;
  }
  #calculators .calculator-menu button {
    min-height: 150px;
    color: var(--desktop-ink);
    background: #fff;
    border: 1px solid var(--desktop-border);
    border-top: 3px solid var(--desktop-gold);
    box-shadow: 0 10px 22px rgba(13, 41, 68, .07);
  }
  #calculators .calculator-menu button:hover {
    color: var(--desktop-ink);
    background: #fff8e8;
    border-color: var(--desktop-gold);
    transform: translateY(-2px);
  }
  #calculators .calculator-menu button strong { color: var(--desktop-ink); }
  #calculators .calculator-menu button small { color: var(--desktop-muted); }
  #calculators .more-calculators button { min-height: 92px; }
  #calculators #calcFields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 18px;
    margin: 18px 0;
  }
  #calculators #calcFields > .quick-choice,
  #calculators #calcFields > .conductor-row,
  #calculators #calcFields > .different-wires,
  #calculators #calcFields > button { grid-column: 1 / -1; }
  #calculators .quick-choice,
  #calculators .conductor-row {
    color: var(--desktop-ink);
    background: var(--desktop-soft);
    border-color: var(--desktop-border);
  }
  #calculators .choice-buttons button {
    color: var(--desktop-ink);
    background: #fff;
    border-color: #b9c6d0;
  }
  #calculators .choice-buttons button.selected { color: #fff; background: var(--desktop-wine); border-color: var(--desktop-wine); }
  #calculators #calcBtn { width: min(280px, 100%); }
  #calculators #calcResult .bend-visual-guide {
    color: #f5f8fa;
    background: #102d3a;
    border-color: rgba(255, 180, 0, .72);
  }
  #calculators #calcResult .bend-visual-guide h3,
  #calculators #calcResult .bend-visual-guide strong {
    color: #fff !important;
  }
  #calculators #calcResult .bend-guide-intro,
  #calculators #calcResult .bend-reference-card p,
  #calculators #calcResult .bend-mark-key small,
  #calculators #calcResult .bend-step-list,
  #calculators #calcResult .bend-manufacturer-warning {
    color: #dce8ed !important;
  }
  #calculators #calcResult .bend-mark-key > div,
  #calculators #calcResult .bend-reference-card {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
  }

  /* Field Notes */
  #notes .quick-note-card { max-width: 1340px; }
  #notes .quick-note-card .quick-note-body textarea { min-height: 260px; }
  #notes .quick-note-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  #notes .spanish-text-button {
    color: #fff;
    background: var(--desktop-wine);
    border-color: var(--desktop-wine-dark);
  }
  #notes .note-translation-panel,
  #notes .saved-notes-panel {
    margin-top: 22px;
    padding: 20px;
    color: var(--desktop-ink);
    background: var(--desktop-soft);
    border: 1px solid var(--desktop-border);
    border-radius: 14px;
  }
  #notes .note-translation-panel > summary { color: var(--desktop-wine); }
  #notes .translation-controls,
  #notes .translation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
  }
  #notes .saved-note-item {
    color: var(--desktop-ink);
    background: #fff;
    border-color: var(--desktop-border);
  }
  #notes .delete-note-button { color: #8b1e2b !important; background: #fff !important; }

  /* Safety, NEC knowledge, and code settings */
  #safetyTip .safety-tip-card,
  #knowledge .nec-simple-card,
  #codeStatus .focused-card { max-width: 1340px; }
  #safetyTip .safety-tip-detail,
  #knowledge .nec-inline-status,
  #knowledge .nec-examples,
  #knowledge .article100-panel,
  #codeStatus .nec-status-banner,
  #codeStatus .code-policy-box {
    color: var(--desktop-ink);
    background: #fff;
    border-color: var(--desktop-border);
  }
  #knowledge .nec-inline-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--desktop-border);
    border-radius: 13px;
  }
  #knowledge .nec-example-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #knowledge .nec-example-grid button,
  #knowledge .article100-examples button,
  #knowledge #dailyTermBtn,
  #knowledge #clearKnowledgeBtn,
  #knowledge #reportKnowledgeIssueBtn {
    color: var(--desktop-ink);
    background: #fff;
    border-color: #b9c6d0;
  }
  #knowledge .article100-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #knowledge .article100-panel > * { grid-column: 1 / -1; }
  #knowledge .article100-examples { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #codeStatus .nec-status-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #codeStatus .result-metrics > div,
  #profile .result-metrics > div {
    min-height: 105px;
    padding: 17px;
    background: #fff;
    border: 1px solid var(--desktop-border);
    border-top: 3px solid var(--desktop-gold);
  }
  #codeStatus .result-metrics span,
  #profile .result-metrics span { color: var(--desktop-muted); }
  #codeStatus .code-settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px;
    padding: 22px;
    background: var(--desktop-soft);
    border-color: var(--desktop-border);
  }
  #codeStatus .code-settings-form legend { color: var(--desktop-wine); }
  #codeStatus .code-settings-form textarea,
  #codeStatus .code-settings-form .nec-alert,
  #codeStatus .code-settings-form .answer { grid-column: 1 / -1; }
  #codeStatus .code-settings-form .primary { grid-column: 1 / -1; width: min(320px, 100%); }
  #codeStatus .official-source-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  #codeStatus .official-source-list a {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--desktop-border);
    border-radius: 9px;
  }

  /* Jobs */
  #jobs > .card { max-width: 1340px; }
  #jobs > .card > .grid.two {
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
    gap: 28px;
    margin-top: 22px;
  }
  #jobs > .card > .grid.two > div {
    padding: 22px;
    background: var(--desktop-soft);
    border: 1px solid var(--desktop-border);
    border-radius: 14px;
  }
  #jobs .job {
    color: var(--desktop-ink);
    background: #fff;
    border-color: var(--desktop-border);
  }
  #jobs #saveJobBtn { width: min(300px, 100%); margin-top: 10px; }

  /* Voice, profile, subscriptions, deletion, and feedback */
  #voiceSettings .focused-card,
  #profile .focused-card,
  #commercialAccount .commercial-account-card,
  #accountDeletion .account-deletion-card,
  #feedback > .card { max-width: 1160px; }
  #voiceSettings .ai-voice-notice,
  #voiceSettings .voice-prefetch-option,
  #voiceSettings .voice-advanced,
  #accountDeletion .account-deletion-status,
  #feedback .feedback-diagnostics {
    color: var(--desktop-ink);
    background: var(--desktop-soft);
    border-color: var(--desktop-border);
  }
  #voiceSettings .voice-prefetch-option { display: flex !important; }
  #voiceSettings .button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #profile .commercial-profile-metrics,
  #commercialAccount .commercial-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #profile #saveProfileBtn { width: min(280px, 100%); }
  #commercialAccount .commercial-status-grid > div {
    min-height: 100px;
    padding: 17px;
    background: #fff;
    border-color: var(--desktop-border);
    border-top: 3px solid var(--desktop-gold);
  }
  #commercialAccount .commercial-status-grid span { color: var(--desktop-muted); }
  #commercialAccount .apple-subscription-panel {
    margin-top: 20px;
    padding: 26px;
    background: linear-gradient(135deg, #fff, #fff7e2);
    border: 1px solid #e1c36e;
    border-radius: 16px;
  }
  #commercialAccount .apple-subscription-panel .primary,
  #commercialAccount .apple-subscription-panel .quiet-button { width: min(340px, 100%); margin-right: 8px; }
  #commercialAccount .account-action-row { padding-top: 18px; border-top: 1px solid var(--desktop-border); }
  #commercialAccount .danger-button,
  #accountDeletion .danger-button {
    color: #fff;
    background: #8b1e2b;
    border-color: #a83a45;
  }
  #accountDeletion .account-deletion-warning {
    color: #6b1721;
    background: #fff0f1;
    border-color: #c45560;
  }
  #accountDeletion .account-deletion-warning strong { color: #8b1e2b; }
  #accountDeletion .authorization-check { color: var(--desktop-ink); background: var(--desktop-soft); border-color: var(--desktop-border); }
  #feedback .feedback-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #feedback #feedbackBtn { width: min(320px, 100%); }

  /* About, field-use notice, legal, and diagnostics */
  #aboutApp .about-card,
  #aboutApp .field-disclaimer-card,
  #termsOfUse .legal-card,
  #privacyPolicy .legal-card,
  #diagnostics > .card { max-width: 1200px; }
  #aboutApp .about-app-brand,
  #aboutApp .commercial-auth-panel {
    color: var(--desktop-ink);
    background: #fff;
    border-color: var(--desktop-border);
  }
  #aboutApp .about-app-brand span { color: var(--desktop-muted); }
  #aboutApp .about-legal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #aboutApp .field-disclaimer-card {
    background: linear-gradient(135deg, rgba(255, 248, 226, .98), rgba(250, 247, 242, .98));
    border: 1px solid #dcb74e;
    border-top: 4px solid var(--desktop-gold);
  }
  #aboutApp .disclaimer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #aboutApp .disclaimer-item {
    color: var(--desktop-ink);
    background: #fff;
    border-color: #dfcf9e;
  }
  #aboutApp .disclaimer-item span { color: var(--desktop-muted); }
  #aboutApp .disclaimer-stop { color: #6b1721; background: #fff0f1; border-color: #c45560; }
  #termsOfUse .legal-card,
  #privacyPolicy .legal-card { max-width: 1080px; }
  #termsOfUse .legal-callout,
  #privacyPolicy .legal-callout {
    color: var(--desktop-ink);
    background: #fff8e8;
    border-color: #e0bd55;
  }
  #termsOfUse .legal-copy,
  #privacyPolicy .legal-copy {
    padding: 8px 6px;
    color: #273b4e;
    font-size: 1rem;
    line-height: 1.72;
  }
  #termsOfUse .legal-copy h3,
  #privacyPolicy .legal-copy h3 {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--desktop-border);
  }
  #diagnostics #loadReportBtn { width: min(320px, 100%); }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #appView:not(.hidden) { grid-template-columns: 256px minmax(0,1fr); }
  .desktop-navigation { padding-left: 14px; padding-right: 14px; }
  #appView > #home { padding-left: 34px; padding-right: 34px; }
  .desktop-home-heading { align-items: flex-start; flex-direction: column; }
  #powerLearning .learning-grid,
  #powerLearning .learning-license-grid,
  #aiVision .vision-analysis-actions,
  #calculators .calculator-menu { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #powerLearning .learning-dashboard,
  #codeStatus .nec-status-metrics,
  #profile .commercial-profile-metrics,
  #commercialAccount .commercial-status-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #troubleshoot .choice-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #notes .quick-note-actions { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #aboutApp .disclaimer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #jobs > .card > .grid.two { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .desktop-question-compose { display: contents; }
  .desktop-brand-tree,
  .desktop-navigation,
  .desktop-home-heading { display: none !important; }
}