/* Formal mobile surfaces share the approved palette and control language.
   Page-specific task layouts and approved artwork remain in their own files.
   Colors below mirror design/palette.json; the regression test checks that contract. */
.mobile-site-header,.blending-brand>.mobile-brand-baseline,.community-brand>.mobile-brand-baseline{display:none}
.entry-menu-legacy{position:absolute;right:20px;top:5px;width:240px;height:99px;background:transparent;border:0}
.mobile-menu-legacy{position:absolute;right:14px;top:1px;bottom:1px;width:25%;border:0;background:transparent}
@media(max-width:640px){
  .entry-menu-legacy,.mobile-menu-legacy{display:none}
  :root{
    --page:#F6F5EF;--card:#FFFEFA;--primaryText:#252B27;--secondaryText:#59625B;
    --button:#50645D;--buttonText:#FFFFFF;--processBand:#E7ECE7;--processText:#344A42;--decorativeGold:#9F8A64;
    --paper:var(--page);--paper-strong:var(--card);--ink:var(--primaryText);--muted:var(--secondaryText);
    --primary:var(--button);--green:var(--button);--gold:var(--decorativeGold);--band:var(--processBand);--mist:var(--processBand);
    --blue:#425f80;--blue-soft:var(--secondaryText);--line:#e8e5dd;--mobile-gutter:16px;
  }
  body{font-family:"Times New Roman","Noto Serif SC","Songti SC","SimSun",serif;font-size:18px;line-height:1.65;color:var(--primaryText);background:var(--page)}
  button,input,select,textarea{font-family:inherit}
  .review-shell{color:var(--primaryText)}
  .button,.primary,.secondary,.review-shell button,.review-shell .button{border-radius:5px;min-height:44px;line-height:1.35;font-size:17px}
  .primary:not(:disabled),.review-shell button.primary:not(:disabled){background:var(--button);border-color:var(--button);color:var(--buttonText)}
  .outline,.secondary,.review-shell button:not(.primary),.review-shell .button:not(.primary){background:var(--card);border-color:#50747a;color:#134e5b}
  .wide{min-height:48px;font-size:21px}
  .card,.action-panel,.entry-panel,.task-card,.account-card,.review-shell .card{
    background:var(--card);border-color:#e8e5dd;border-radius:7px;box-shadow:none;
  }
  .account-card.secret-card{border-color:var(--button)}
  .account-shell,.review-shell{padding-inline:var(--mobile-gutter)}
  .account-shell>main,.review-shell>main{padding:0}
  .page-shell,.formal-nav,.formal-message{width:calc(100% - 2 * var(--mobile-gutter))}
  .desktop-entry-grid,.result-wrap,.site-shell>.page-body{padding-inline:var(--mobile-gutter)}
  .formal-diagnosis-nav,.formal-diagnosis-message{margin-inline:var(--mobile-gutter)}
  .formal-diagnosis-nav{justify-content:flex-start;gap:0 16px;font-size:14px;line-height:1.6}
  .formal-diagnosis-nav nav{gap:14px}
  .formal-diagnosis-nav .text-button{font-size:14px;min-height:36px;padding-block:6px}
  .result-wrap>.formal-diagnosis-nav,.result-wrap>.formal-diagnosis-message{margin-inline:0}
  .formal-nav{margin-top:8px;font-size:14px;gap:0 16px;line-height:1.6}
  .formal-nav nav{gap:14px;min-height:36px;align-items:center}
  .formal-nav button{font-size:14px;min-height:36px}
  .formal-nav+.page-shell{padding-top:20px}
  .work-topbar{gap:12px;flex-wrap:wrap}
  /* Editing must not use tiny desktop table text or disable browser zoom. */
  .formula-row input,.formula-row select,.material-fields input,.material-fields select{font-size:16px;min-height:44px}
  .formula-head,.formula-row{grid-template-columns:minmax(0,1fr) 58px 64px 38px;gap:5px}
  .formula-row input,.formula-row select{padding:6px 4px}
  .formula-row>*{min-width:0}
  .review-shell textarea,.review-shell select,.review-shell input[type=search]{background:var(--card)}
  /* Same compact masthead; the original hero photographs are untouched. */
  .blending-site-header,.community-site-header,.mobile-site-header{height:44px;min-height:44px;gap:8px;padding:0 16px 0 0;background:#fbfaf7;border-bottom:0}
  .blending-brand,.community-brand,.mobile-site-brand{flex:0 0 60.3015vw;min-width:0;line-height:0}
  .blending-brand>svg:not(.mobile-brand-baseline),.community-brand>svg:not(.mobile-brand-baseline){display:none}
  .blending-brand>.mobile-brand-baseline,.community-brand>.mobile-brand-baseline,.mobile-site-brand>svg{display:block;width:100%;height:44px}
  .blending-mobile-menu>summary,.community-mobile-menu>summary,.mobile-site-menu>summary{height:44px;min-height:44px;padding:0;gap:9px;font-size:17px;line-height:1.2;color:#143568}
  .blending-menu-mark,.community-mobile-menu summary>span,.mobile-menu-mark{
    position:relative;display:inline-block;flex:none;width:22px;height:18px;border-top:3px solid currentColor;border-bottom:3px solid currentColor;font-size:0;
  }
  .blending-menu-mark::after,.community-mobile-menu summary>span::after,.mobile-menu-mark::after{content:"";position:absolute;left:0;right:0;top:5px;border-top:3px solid currentColor}
  .blending-mobile-menu nav,.community-mobile-menu nav,.mobile-site-menu nav{background:var(--card);border-color:#e8e5dd}
  .blending-mobile-menu nav a,.community-mobile-menu nav a,.mobile-site-menu nav a{font-size:17px;min-height:44px}
  .masthead .nav-hotspot,.site-home-brand{min-height:44px}
  .masthead .nav-hotspot{left:auto;right:16px;width:65px;padding:0;font-size:17px}
  .masthead .menu-mark{flex:none}
  body[data-route]:not([data-route=converter]) .masthead{min-height:44px}
  .masthead .mobile-brand-art{height:44px}
  .mobile-site-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between}
  .mobile-site-header[data-mobile-site-header]:not([data-mobile-site-header=ready]){display:none}
  .mobile-site-header a{color:var(--primaryText);text-decoration:none}
  .mobile-site-menu>summary{display:flex;align-items:center;list-style:none;cursor:pointer}
  .mobile-site-menu>summary::-webkit-details-marker{display:none}
  .mobile-site-menu nav{position:absolute;top:100%;left:0;right:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:12px;border-block:1px solid #e8e5dd;box-shadow:0 10px 28px #2a322e14}
  .mobile-site-menu nav a{display:flex;align-items:center;justify-content:center;padding:7px 8px}
  .mobile-site-menu nav a[aria-current=page]{box-shadow:inset 0 -3px var(--button)}
  .diagnosis-mobile-nav{position:absolute;top:0;left:0;right:0}
  .diagnosis-mobile-nav>button{position:static;display:flex;align-items:center;gap:9px;width:auto;height:44px;min-height:44px;padding:0;background:transparent;border:0;color:#143568;font:inherit;font-size:17px;line-height:1.2}
  .compact-brand:has(.diagnosis-mobile-nav){min-height:44px}
  body:has([data-mobile-site-header=ready]) .account-header{display:none}
  body:has([data-mobile-site-header=ready]) .review-shell>header{border:0;padding:0;font-size:14px;min-height:36px}
  body:has([data-mobile-site-header=ready]) .review-shell>header>a,
  body:has([data-mobile-site-header=ready]) .review-shell>header nav>a:not(#identity){display:none}
}