/* WorkCoach mobile appearance v1. Visual layer only; no workflow changes.
   Rollback: remove this stylesheet link from index.html. Base styles stay intact.
   Applies only below 768px and only inside the signed-in portal. */
@media (max-width:767px) {
 body:has(.mobile-bottom-nav) {
  --green:#103e30; --ink:#21372e; --muted:#718078;
  --paper:#f6f7f3; --line:#e6eae3;
  background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);
 }
 body:has(.mobile-bottom-nav) h1 {font-size:28px;line-height:1.18;letter-spacing:-.85px;font-weight:700}
 body:has(.mobile-bottom-nav) h2 {font-size:21px;line-height:1.3;letter-spacing:-.45px;font-weight:700}
 body:has(.mobile-bottom-nav) h3 {letter-spacing:-.2px}
 body:has(.mobile-bottom-nav) main {padding:24px 18px 32px;min-width:0}
 body:has(.mobile-bottom-nav) .portal-header {
  position:sticky;top:0;z-index:95;background:#103e30;color:white;
  border:0;box-shadow:0 2px 12px #122f2510;
 }
 body:has(.mobile-bottom-nav) .portal-header-inner {
  min-height:82px;padding:17px 20px;gap:14px;flex-wrap:nowrap;
 }
 body:has(.mobile-bottom-nav) .portal-brand {gap:12px;min-width:0}
 body:has(.mobile-bottom-nav) .portal-brand>span:last-child {min-width:0}
 body:has(.mobile-bottom-nav) .portal-brand b {
  font-size:16px;letter-spacing:-.3px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 136px);
 }
 body:has(.mobile-bottom-nav) .portal-brand small {font-size:11px;color:#c5d6cc;letter-spacing:.15px;margin-top:3px}
 body:has(.mobile-bottom-nav) .portal-mark {
  background:#ffffff12;border:1px solid #ffffff24;color:#f2f6e9;
  width:38px;height:40px;border-radius:12px;flex-shrink:0;font-size:22px;
 }
 body:has(.mobile-bottom-nav) .mobile-menu-toggle {
  background:#ffffff0c;border:1px solid #ffffff30;color:white;
  border-radius:13px;width:44px;height:44px;font-size:22px;
 }
 body:has(.mobile-bottom-nav) .mobile-navigation:not([hidden]) {
  top:calc(100% + 8px);left:12px;right:12px;max-height:calc(100dvh - 190px);
  border:1px solid #e2e8de;border-radius:20px;padding:12px;
  background:#fff;color:var(--ink);box-shadow:0 14px 45px #16332926;
  overscroll-behavior:contain;
 }
 body:has(.mobile-bottom-nav) .mobile-navigation-heading {padding:4px 10px 10px;color:var(--green)}
 body:has(.mobile-bottom-nav) .mobile-navigation a {padding:12px 14px;font-size:15px;border-radius:12px;min-height:46px}
 body:has(.mobile-bottom-nav) .mobile-navigation a[aria-current=page] {background:#edf3ec;color:#174c37}
 body:has(.mobile-bottom-nav) .mobile-appearance-toggle {margin:12px 5px 4px;text-align:left;font-size:12px;background:#f7f8f3;border-style:dashed;min-height:44px;flex-shrink:0}
 body:has(.mobile-bottom-nav) .mobile-bottom-nav {
  z-index:100;background:#fffffffa;border-top:1px solid #e5e9e1;
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -5px 22px #213e2906;gap:10px;
 }
 body:has(.mobile-bottom-nav) .mobile-bottom-nav a,
 body:has(.mobile-bottom-nav) .mobile-bottom-nav button {
  gap:5px;font-size:11px;font-weight:600;min-height:49px;border-radius:14px;color:#7c867e;
 }
 body:has(.mobile-bottom-nav) .mobile-bottom-nav a[aria-current=page] {background:#eef4ec;color:#164e38}
 body:has(.mobile-bottom-nav) .mobile-bottom-nav span {
  display:block;width:22px;height:22px;font-size:0;background:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
 }
 body:has(.mobile-bottom-nav) .mobile-bottom-nav a:first-child span {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 10 9-7 9 7v10H7V10m2 10v-7h6v7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 10 9-7 9 7v10H7V10m2 10v-7h6v7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 body:has(.mobile-bottom-nav) .mobile-bottom-nav a:nth-child(2) span {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H4v17h16V4h-4M8 3h8v4H8zm0 11 3 3 5-6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H4v17h16V4h-4M8 3h8v4H8zm0 11 3 3 5-6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 body:has(.mobile-bottom-nav) .mobile-bottom-nav button span {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
 }
 body:has(.mobile-bottom-nav) .primary {background:#123f31;min-height:46px;border-radius:12px;padding:12px 17px;font-size:14px;font-weight:650;white-space:normal;line-height:1.4;box-shadow:0 2px 3px #0c392909}
 body:has(.mobile-bottom-nav) .secondary {border:1px solid #d5ded3;background:#fff;border-radius:12px;min-height:44px;padding:10px 15px;font-size:14px;color:#284b3a;white-space:normal;line-height:1.4}
 body:has(.mobile-bottom-nav) .text-button {min-height:44px;color:#2b6346;font-size:13px;text-underline-offset:3px}
 body:has(.mobile-bottom-nav) button:disabled {opacity:.48;box-shadow:none}
 body:has(.mobile-bottom-nav) input:not([type=checkbox]):not([type=radio]),
 body:has(.mobile-bottom-nav) select,
 body:has(.mobile-bottom-nav) textarea {border:1px solid #dce3d8;border-radius:12px;padding:13px 14px;background:white;font-size:16px;color:#263c30;min-height:48px}
 body:has(.mobile-bottom-nav) .eyebrow {font-size:10px;letter-spacing:1.6px;color:#7a887b;margin-bottom:9px}
 body:has(.mobile-bottom-nav) .notice,
 body:has(.mobile-bottom-nav) .error {padding:15px 16px;border-radius:14px;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
 body:has(.mobile-bottom-nav) .portal-title,
 body:has(.mobile-bottom-nav) .dashboard-heading {padding:0;margin:4px 0 24px}
 body:has(.mobile-bottom-nav) .portal-title>p:last-child,
 body:has(.mobile-bottom-nav) .dashboard-heading>p:last-child {font-size:14px;color:#718078;margin-top:10px}
 body:has(.mobile-bottom-nav) .portal-actions {gap:15px}
 body:has(.mobile-bottom-nav) .portal-actions section,
 body:has(.mobile-bottom-nav) .portal-method,
 body:has(.mobile-bottom-nav) .dashboard-card {
  background:#fff;border:1px solid #e8ebe4;border-radius:19px;padding:21px;
  box-shadow:0 3px 13px #1f382306;
 }
 body:has(.mobile-bottom-nav) .portal-training-card {border-top:3px solid #316347!important;color:#213b2d}
 body:has(.mobile-bottom-nav) .portal-training-card .eyebrow {color:#58765d}
 body:has(.mobile-bottom-nav) .portal-actions h2 {font-size:24px}
 body:has(.mobile-bottom-nav) .portal-actions section>p:not(.eyebrow) {font-size:14px;color:#6a7b6d;margin:13px 0 19px}
 body:has(.mobile-bottom-nav) .portal-training-card .primary {background:#123f31;color:white;width:100%}
 body:has(.mobile-bottom-nav) .portal-card-note {font-size:12px;color:#7c867a;margin-top:12px}
 body:has(.mobile-bottom-nav) .portal-method {margin-top:20px}
 body:has(.mobile-bottom-nav) .portal-skills>div {flex-wrap:wrap;gap:8px 12px;align-items:center;border-top:1px solid #edf0e8;padding-top:15px}
 body:has(.mobile-bottom-nav) .portal-skills>div>span {width:30px;height:30px;display:grid;place-items:center;background:#eef3e9;border-radius:10px;font-size:11px;color:#477357}
 body:has(.mobile-bottom-nav) .portal-skills p {font-size:15px;flex:1;min-width:150px}
 body:has(.mobile-bottom-nav) .portal-skills .text-button {width:100%;text-align:left;margin-left:42px}
 body:has(.mobile-bottom-nav) .dashboard-nav {margin-bottom:20px;gap:8px}
 body:has(.mobile-bottom-nav) .dashboard-stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body:has(.mobile-bottom-nav) .dashboard-stats>div {background:#fff;border:1px solid #e8ebe4;border-radius:17px;padding:17px 15px;color:#637768;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
 body:has(.mobile-bottom-nav) .dashboard-stats strong {color:#1d5538;font-size:29px;line-height:1.2;min-width:0}
 body:has(.mobile-bottom-nav) .dashboard-stats span {font-size:12px;line-height:1.45}
 body:has(.mobile-bottom-nav) .dashboard-card {padding:20px 17px;margin-bottom:16px}
 body:has(.mobile-bottom-nav) .dashboard-card h2 {font-size:20px}
 body:has(.mobile-bottom-nav) .ops-page {padding-top:24px;color:#213b2d}
 body:has(.mobile-bottom-nav) .ops-heading {gap:14px;margin-bottom:20px}
 body:has(.mobile-bottom-nav) .ops-heading h1 {font-size:28px}
 body:has(.mobile-bottom-nav) .ops-heading p {font-size:14px;color:#738074;line-height:1.6}
 body:has(.mobile-bottom-nav) .ops-heading>.ops-actions {flex:1 1 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body:has(.mobile-bottom-nav) .ops-heading>.ops-actions button {font-size:12px;padding:10px;min-width:0}
 body:has(.mobile-bottom-nav) .ops-heading>.ops-actions button:last-child:nth-child(odd) {grid-column:1/-1}
 body:has(.mobile-bottom-nav) .ops-tabs {background:#e9ede5;border-radius:13px;padding:4px;gap:4px}
 body:has(.mobile-bottom-nav) .ops-tabs button {background:transparent;border:0;border-radius:10px;min-height:40px;padding:8px 5px;font-size:12px;color:#6a7a6b;box-shadow:none}
 body:has(.mobile-bottom-nav) .ops-tabs button[aria-pressed=true] {background:white;color:#1c4d32;box-shadow:0 2px 5px #273e2510}
 body:has(.mobile-bottom-nav) .ops-card {border:1px solid #e5eae0;border-radius:18px;padding:19px;margin:16px 0;box-shadow:0 3px 14px #2b3a2004}
 body:has(.mobile-bottom-nav) .ops-progress {gap:12px;font-size:14px;padding:20px}
 body:has(.mobile-bottom-nav) .ops-progress>span {color:#6d7b6a;font-size:12px}
 body:has(.mobile-bottom-nav) .ops-progress progress {height:7px;border:0;border-radius:20px;overflow:hidden;appearance:none;accent-color:#2e7949}
 body:has(.mobile-bottom-nav) progress::-webkit-progress-bar {background:#e8ede3;border-radius:20px}
 body:has(.mobile-bottom-nav) progress::-webkit-progress-value {background:#368355;border-radius:20px}
 body:has(.mobile-bottom-nav) progress::-moz-progress-bar {background:#368355;border-radius:20px}
 body:has(.mobile-bottom-nav) .ops-muted,
 body:has(.mobile-bottom-nav) .ops-card small {font-size:12px;line-height:1.65;color:#768171}
 body:has(.mobile-bottom-nav) .ops-page>p.ops-muted {padding:0 3px;line-height:1.7}
 body:has(.mobile-bottom-nav) .ops-page>.ops-card:has(.ops-run) {background:transparent;border:0;box-shadow:none;padding:0;margin-top:24px}
 body:has(.mobile-bottom-nav) .ops-page>.ops-card:has(.ops-run)>.ops-heading {padding:0 3px}
 body:has(.mobile-bottom-nav) .ops-station>h3 {font-size:12px;font-weight:700;color:#768273;text-transform:uppercase;letter-spacing:1.1px;margin:22px 4px 12px}
 body:has(.mobile-bottom-nav) .ops-run {background:#fff;border:1px solid #e4e9df;border-radius:17px;margin:12px 0;padding:18px;box-shadow:0 3px 9px #263b2004}
 body:has(.mobile-bottom-nav) .ops-run:last-child {border-bottom:1px solid #e4e9df}
 body:has(.mobile-bottom-nav) .ops-run h4 {font-size:17px;margin:13px 0 9px;letter-spacing:-.3px}
 body:has(.mobile-bottom-nav) .ops-run-status {font-size:10px;font-weight:650;padding:5px 9px;line-height:1.3;border-radius:7px;background:#f0f2ec;color:#788471}
 body:has(.mobile-bottom-nav) .ops-run.is-running {border-color:#cdb984}
 body:has(.mobile-bottom-nav) .ops-run.is-running .ops-run-status {background:#fcf1d7;color:#826226}
 body:has(.mobile-bottom-nav) .ops-run.is-done .ops-run-status {background:#e6f2df;color:#347044}
 body:has(.mobile-bottom-nav) .ops-instruction {font-size:14px;color:#64745f;margin:8px 0 14px}
 body:has(.mobile-bottom-nav) .ops-run>.ops-actions {gap:8px;margin-top:16px}
 body:has(.mobile-bottom-nav) .ops-run>.ops-actions .secondary {font-size:12px;min-height:40px}
 body:has(.mobile-bottom-nav) .ops-review-queue {border:1px solid #cdddc7;background:#fdfefa}
 body:has(.mobile-bottom-nav) .ops-review-queue>p {font-size:13px;color:#6c7c63;line-height:1.65}
 body:has(.mobile-bottom-nav) .ops-review-station {border-top-color:#e3e9dd}
 body:has(.mobile-bottom-nav) .ops-review-station>h3 {font-size:16px;margin-top:18px}
 body:has(.mobile-bottom-nav) .ops-review-item {padding:18px 0}
 body:has(.mobile-bottom-nav) .ops-review-item>p {font-size:13px;line-height:1.65}
 body:has(.mobile-bottom-nav) .ops-review-note {font-size:13px;background:#fbf3e3;border-left-width:2px;border-radius:0 10px 10px 0;padding:13px}
 body:has(.mobile-bottom-nav) .ops-review-item .ops-actions {flex-direction:row;gap:8px}
 body:has(.mobile-bottom-nav) .ops-review-item .ops-actions button {width:auto;flex:1;font-size:13px;min-width:0}
 body:has(.mobile-bottom-nav) [data-clean-review] [value=returned] {border-color:#e1bdb0;color:#a34832;background:#fffaf7}
 body:has(.mobile-bottom-nav) .ops-product>summary strong {font-size:17px}
 body:has(.mobile-bottom-nav) .ops-badge {font-size:12px;padding:7px 9px;border-radius:8px}
 body:has(.mobile-bottom-nav) .ops-allergen-details {font-size:13px}
 body:has(.mobile-bottom-nav) .project-board {padding-top:24px}
 body:has(.mobile-bottom-nav) .pf-header {background:transparent;border:0;padding:0;margin-bottom:22px}
 body:has(.mobile-bottom-nav) .pf-task {border:1px solid #e4e9df;border-radius:16px;background:white;padding:18px;box-shadow:0 3px 9px #263b2004}
 body:has(.mobile-bottom-nav) .pf-task>strong {font-size:16px;line-height:1.4}
 body:has(.mobile-bottom-nav) .pf-task-meta {font-size:12px;color:#778471}
 body:has(.mobile-bottom-nav) .pf-priority {font-size:10px;border-radius:6px}
 body:has(.mobile-bottom-nav) .pf-status {font-size:11px}
 body:has(.mobile-bottom-nav) .workspace {border:1px solid #e3e8dd;border-radius:18px;box-shadow:0 3px 14px #18382805}
 body:has(.mobile-bottom-nav) .surface {padding:22px 18px}
 body:has(.mobile-bottom-nav) .page-heading {padding:0 0 22px}
 body:has(.mobile-bottom-nav) .page-heading h1 {font-size:27px}
 body:has(.mobile-bottom-nav) .rail {background:#edf2e7;color:#345337}
 body:has(.mobile-bottom-nav) .rail-step {color:#7d8b74}
 body:has(.mobile-bottom-nav) .rail-step.active {color:#254c32}
 body:has(.mobile-bottom-nav) .rail-step.active .step-icon {background:#20533b;color:white}
 body:has(.mobile-bottom-nav) .step-icon {border-color:#c9d7bf}
 body:has(.mobile-bottom-nav) .background {background:#f4f6ef;border-radius:13px;font-size:14px;padding:16px}
 body:has(.mobile-bottom-nav) .bubble {background:#f0f3eb;border-radius:0 15px 15px 15px;font-size:15px;line-height:1.65}
 body:has(.mobile-bottom-nav) .user .bubble {background:#eaf1df;border-radius:15px 0 15px 15px}
 body:has(.mobile-bottom-nav) .speaker {font-size:11px}
 body:has(.mobile-bottom-nav) .portal-footer {border:0;padding:16px 20px calc(100px + env(safe-area-inset-bottom));font-size:11px;color:#8a9384;gap:4px}
 body:has(.mobile-bottom-nav) .portal-footer span {font-size:11px}
 @media (max-width:359px) {
  body:has(.mobile-bottom-nav) main {padding-left:13px;padding-right:13px}
  body:has(.mobile-bottom-nav) .portal-header-inner {padding-left:15px;padding-right:15px}
  body:has(.mobile-bottom-nav) .ops-progress {grid-template-columns:1fr}
 }
}