/* Tablet app look. Layout and tap size only.
   Colors stay with the host theme. Logos stay as they are. */

html.tablet-app {
  --tap: 48px;
  --app-radius: 22px;
  --app-shadow: 0 12px 32px rgba(10, 22, 40, .10);
  --mrs-home-h: 48px;
}

html.tablet-app body {
  -webkit-tap-highlight-color: transparent;
}

html.tablet-app:not([data-pa-field]) body:not(.theme-pa):not([class*="home-theme-"]) {
  background:
    radial-gradient(900px 420px at 0% -10%, rgba(223, 84, 47, .10), transparent 55%),
    radial-gradient(700px 360px at 100% 0%, rgba(35, 56, 129, .08), transparent 50%),
    var(--paper, #f4f6f8);
}

html.tablet-app .mrs-home {
  min-height: var(--tap);
  font-size: 1.05rem;
}

html.tablet-app .btn,
html.tablet-app .mrs-btn,
html.tablet-app .hw-btn,
html.tablet-app .bc-filter,
html.tablet-app .bc-cta,
html.tablet-app .nav a,
html.tablet-app .tabs a,
html.tablet-app .subtabs a,
html.tablet-app .theme-sw button,
html.tablet-app button,
html.tablet-app .header-phone {
  min-height: var(--tap);
  border-radius: 16px;
}

html.tablet-app .btn,
html.tablet-app .mrs-btn,
html.tablet-app button.btn,
html.tablet-app .bc-cta {
  padding: .7rem 1.15rem;
  font-size: 1.05rem;
}

html.tablet-app .btn.small {
  min-height: var(--tap);
  padding: .6rem 1rem;
  font-size: 1rem;
}

html.tablet-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
html.tablet-app select {
  min-height: var(--tap);
  border-radius: 14px;
  font-size: 1.05rem;
  width: 100%;
  box-sizing: border-box;
}

html.tablet-app .header-inner > .mrs-btn-primary {
  flex: none;
  background: #fff;
  color: #0A1628 !important;
  border: 2px solid #fff;
  white-space: nowrap;
}

html.tablet-app .card,
html.tablet-app .tile,
html.tablet-app .easy-tile,
html.tablet-app .bc-item,
html.tablet-app .bc-empty,
html.tablet-app .tool-card,
html.tablet-app .drop-photos,
html.tablet-app .notice,
html.tablet-app .jf-next,
html.tablet-app .mytasks {
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

/* Public home: the hero is the front door. A chosen home theme still sets its own order. */
html.tablet-app body:not([class*="home-theme-"]) > header { order: 1; }
html.tablet-app body:not([class*="home-theme-"]) > .hero { order: 2; }
html.tablet-app body:not([class*="home-theme-"]) > .theme-widgets { order: 3; }
html.tablet-app body:not([class*="home-theme-"]) > main { order: 4; }
html.tablet-app body:not([class*="home-theme-"]) > .mrs-tc { order: 5; }
html.tablet-app body:not([class*="home-theme-"]) > .site-footer { order: 6; }

html.tablet-app body:not([class*="home-theme-"]) .hero {
  padding: 2.2rem 0 1.8rem;
}

html.tablet-app body:not([class*="home-theme-"]) .hero h1 {
  font-size: clamp(3rem, 8vw, 5.2rem);
  max-width: 16ch;
}

html.tablet-app .hero-note {
  margin: .35rem 0 0;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
}

html.tablet-app .front-doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 1rem 0 1.15rem;
}

html.tablet-app .door {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.75rem;
  padding: .5rem 1rem;
  border-radius: var(--app-radius);
  background: #fff;
  color: var(--ink, #0A1628);
  text-decoration: none;
  box-shadow: var(--app-shadow);
}

html.tablet-app .door-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-family: var(--display, inherit);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .02em;
  line-height: 1.05;
  text-align: center;
}

@media (min-width: 720px) {
  html.tablet-app .front-doors {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Public home: app tiles. The wide tile is the one next step. */
html.tablet-app .easy-row {
  grid-template-columns: 1fr;
  gap: 14px;
}

html.tablet-app .easy-tile {
  min-height: 7.5rem;
  padding: 1.15rem 1.2rem 1.15rem;
  border-radius: var(--app-radius);
  gap: .35rem;
}

html.tablet-app .easy-title {
  font-size: 1.45rem;
}

html.tablet-app .easy-desc {
  font-size: .98rem;
}

html.tablet-app .easy-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: .35rem;
  font-size: 1.05rem;
}

html.tablet-app .easy-tile-wide {
  min-height: 8.5rem;
  border-width: 2px;
}

html.tablet-app .drop-photos {
  border-radius: var(--app-radius);
}

html.tablet-app .drop-photos button,
html.tablet-app .hw-big a,
html.tablet-app .hw-actions a {
  min-height: var(--tap);
  border-radius: 16px;
}

html.tablet-app .drop-photos button {
  font-size: 1.1rem;
  padding: .8rem 1rem;
}

html.tablet-app .header-inner .mrs-btn,
html.tablet-app .hero-actions .btn {
  min-height: 56px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 720px) {
  html.tablet-app .easy-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  html.tablet-app .easy-tile-wide {
    grid-column: 1 / -1;
  }
}

/* Bid board: each bid is a card. The quote button is the next step. */
html.tablet-app .bc-list {
  gap: 14px;
}

html.tablet-app .bc-item {
  border-radius: var(--app-radius);
  padding: 1rem 1.05rem;
}

html.tablet-app .bc-date {
  border-radius: 16px;
  min-height: 4.5rem;
}

html.tablet-app .bc-filter {
  padding: .55rem 1rem;
}

html.tablet-app .bc-cta,
html.tablet-app .hero-actions .btn-primary {
  min-height: 56px;
  font-size: 1.08rem;
}

@media (max-width: 720px) {
  html.tablet-app .bc-item {
    grid-template-columns: 5.2rem minmax(0, 1fr);
  }
  html.tablet-app .bc-cta,
  html.tablet-app .hero-actions .btn,
  html.tablet-app .nav {
    width: 100%;
  }
  html.tablet-app .hero-actions {
    display: grid;
    gap: 10px;
  }
  html.tablet-app .nav a {
    display: flex;
    align-items: center;
  }
}

/* Trade desk: tools are tiles. The main button fills the row. */
html.tablet-app [data-tools] .tool-market ul,
html.tablet-app [data-tools] > ul,
html.tablet-app .tool-market ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

html.tablet-app .tool-card {
  min-height: 7.25rem;
  padding: 1.1rem 1.15rem;
  border-radius: var(--app-radius);
  background: var(--card, #fff);
}

html.tablet-app .tool-card h3 {
  margin: 0;
  font-size: 1.35rem;
}

html.tablet-app .tool-card h3 a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration: none;
}

html.tablet-app form .btn[type="submit"]:not(.ghost) {
  width: 100%;
  min-height: 56px;
  font-size: 1.12rem;
  border-radius: 16px;
}

@media (min-width: 720px) {
  html.tablet-app [data-tools] .tool-market ul,
  html.tablet-app .tool-market ul {
    grid-template-columns: 1fr 1fr;
  }
}

/* CRM home tiles and My Tasks. */
html.tablet-app .tiles {
  gap: 12px;
}

html.tablet-app .tiles .tile {
  min-height: 7.25rem;
  border-radius: var(--app-radius);
  padding: 1.05rem 1.1rem;
}

html.tablet-app .tiles .tile span {
  font-size: 2.2rem;
}

html.tablet-app .home-tile-hint {
  margin: 0 0 10px;
  color: var(--muted, #5c6b7a);
}

html.tablet-app .home-tile-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
}

html.tablet-app .home-tile-bar .btn {
  min-height: 56px;
  width: 100%;
  font-size: 1.2rem;
  border-radius: 16px;
}

html.tablet-app .home-tile-status {
  min-height: 1.2rem;
  margin: 0;
}

html.tablet-app .tiles.is-editing .tile {
  animation: home-jiggle .32s ease-in-out infinite;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

html.tablet-app .tiles.is-editing .tile:nth-child(2n) {
  animation-delay: .12s;
}

html.tablet-app .tiles .tile.is-dragging {
  animation: none;
  transform: scale(1.03);
  z-index: 3;
  cursor: grabbing;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}

@keyframes home-jiggle {
  0%, 100% { transform: rotate(-1.15deg); }
  50% { transform: rotate(1.15deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.tablet-app .tiles.is-editing .tile {
    animation: none;
    outline: 3px solid #1f4e79;
  }
}

html.tablet-app .mytasks ul {
  display: grid;
  gap: 10px;
}

html.tablet-app .mytasks li {
  border: 0;
  border-radius: 18px;
  padding: .9rem .85rem;
  margin: 0;
  min-height: var(--tap);
  gap: .8rem;
}

html.tablet-app .mytasks li:not(.urgent) {
  box-shadow: 0 8px 20px rgba(10, 22, 40, .06);
}

html.tablet-app .mytasks .mt-t {
  font-size: 1.2rem;
}

html.tablet-app .mytasks .mt-done {
  min-height: var(--tap);
  min-width: 5.5rem;
  border-radius: 14px;
}

@media (max-width: 640px) {
  html.tablet-app .mytasks li {
    align-items: stretch;
  }
  html.tablet-app .mytasks .mt-done {
    width: 100%;
  }
  html.tablet-app .tiles {
    grid-template-columns: 1fr 1fr;
  }
}

/* Job page: one big next step. */
html.tablet-app .jf-next {
  border-radius: var(--app-radius);
  padding: 1rem 1.05rem 1.1rem;
}

html.tablet-app .jf-next b {
  font-size: 1.45rem;
}

html.tablet-app .jf-next .btn {
  width: 100%;
  min-height: 56px;
  margin-top: .35rem;
  font-size: 1.15rem;
  border-radius: 16px;
}

html.tablet-app .quick {
  gap: 10px;
}

html.tablet-app .quick .btn {
  min-height: var(--tap);
}

@media (max-width: 720px) {
  html.tablet-app .grid2,
  html.tablet-app .grid3,
  html.tablet-app .grid3s {
    grid-template-columns: 1fr;
  }
  html.tablet-app .top h1 {
    font-size: 2rem;
  }
}

/* CRM home counts. No card fill, so the host color (including PA gold) stays. */
html.tablet-app .numcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 1rem;
}

html.tablet-app .numcard {
  min-width: 0;
  text-align: center;
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: .9rem .5rem .85rem;
  color: inherit;
}

html.tablet-app .numcard b {
  display: block;
  color: inherit;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
}

html.tablet-app .numcard span {
  display: block;
  margin-top: .35rem;
  font-size: 1rem;
  line-height: 1.15;
}

html.tablet-app .numcard i {
  display: block;
  color: inherit;
  opacity: .72;
  font-style: normal;
  font-size: .8rem;
  margin-top: .15rem;
}

@media (max-width: 720px) {
  html.tablet-app .numcards {
    grid-template-columns: 1fr 1fr;
  }
}

/* Company calendar. Colors follow the host. */
html.tablet-app .co-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html.tablet-app .co-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

html.tablet-app .co-day {
  min-width: 0;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 16px;
  padding: .45rem;
}

html.tablet-app .co-day b {
  display: block;
  margin-bottom: .25rem;
}

html.tablet-app .co-out {
  opacity: .55;
}

html.tablet-app .co-chip {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: var(--tap);
  margin-top: .3rem;
  padding: .35rem .55rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

html.tablet-app .co-chip span {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html.tablet-app .co-form {
  margin-top: 1rem;
}

html.tablet-app .co-form label,
html.tablet-app .co-check {
  display: block;
  margin: .7rem 0 0;
  font-weight: 700;
}

html.tablet-app .co-add {
  margin-top: 1rem;
  min-height: 56px;
  font-size: 1.2rem;
}

html.tablet-app .bc-bid {
  flex-direction: column;
  align-items: stretch;
  border-left: 4px solid var(--rc, currentColor);
}

html.tablet-app .bc-bid b {
  font-size: .95rem;
  line-height: 1.25;
}

html.tablet-app .co-day .bc-cta {
  width: 100%;
  white-space: normal;
  text-align: center;
}

@media (max-width: 720px) {
  html.tablet-app .co-grid {
    grid-template-columns: 1fr;
  }
}

/* Phone link: keep the 48px tap target, but center the number and drop the
   rounded bottom border that drew an empty pill under it on phones. */
html.tablet-app .header-phone {
  display: inline-flex;
  align-items: center;
  border-bottom: 0;
  border-radius: 0;
}

html.tablet-app .crmbar {
  background: #111827;
  color: #fff;
  border-radius: 16px;
  padding: .7rem;
}
html.tablet-app .crmbar a,
html.tablet-app .crmbar summary {
  color: #fff;
}
html.tablet-app .crmbar input,
html.tablet-app .crmbar select {
  background: #fff;
  color: #111827;
}
html.tablet-app .crm-five {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
}
html.tablet-app .crm-five .crm-tab,
html.tablet-app .crm-five summary.crm-tab {
  min-height: 48px;
  border-radius: 12px;
  padding: .55rem 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  background: transparent;
  color: #fff;
  text-decoration: none;
}
html.tablet-app .crm-five a[aria-current="page"],
html.tablet-app .crm-more-list a[aria-current="page"] {
  background: #fff;
  color: #111827;
}
@media (min-width: 801px) {
  html.tablet-app .crmbar {
    position: static;
    width: auto;
    border-radius: 16px;
    margin: 0 0 1rem;
  }
  html.tablet-app .site-header,
  html.tablet-app main {
    margin-left: 0;
  }
  html.tablet-app .crm-five {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
html.tablet-app .crm-more-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .45rem 0 0;
}
html.tablet-app .crm-more-list a {
  min-height: 48px;
  border-radius: 14px;
  padding: .4rem .85rem;
  display: inline-flex;
  align-items: center;
}
html.tablet-app .card,
html.tablet-app .rfq-form,
html.tablet-app .drop-photos,
html.tablet-app .bc-item,
html.tablet-app .named-login {
  border-radius: var(--app-radius);
}
html.tablet-app .rfq-form input,
html.tablet-app .rfq-form select,
html.tablet-app .rfq-form textarea,
html.tablet-app .drop-photos input,
html.tablet-app .drop-photos select,
html.tablet-app .named-login input {
  min-height: 48px;
}
html.tablet-app .job-next .btn {
  min-height: 56px;
  font-size: 1.15rem;
}

/* Status colors. Amber = due today. Green = done. Red = overdue. Neutral = open. */
html.tablet-app .tone {
  display: inline-block;
  font-weight: 700;
  border-radius: 999px;
  padding: .12rem .55rem;
  font-size: .85rem;
  line-height: 1.3;
}
html.tablet-app .tone-today { background: #f5b942; color: #1a1404; }
html.tablet-app .tone-done { background: #1f7a4d; color: #fff; }
html.tablet-app .tone-overdue { background: #b42318; color: #fff; }
html.tablet-app .tone-open { background: #e5e7eb; color: #1f2937; }
html.tablet-app .fu li.td { background: #f8e3b0; }
html.tablet-app .fu li.od { background: #f8d4d0; }
html.tablet-app .tl li.done { background: #e5f6ec; }

html.tablet-app .mon-col {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
html.tablet-app .mon-card {
  background: #fff;
  border: 1px solid #d5d8de;
  border-radius: 16px;
  padding: 1rem;
}
html.tablet-app .mon-card h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
html.tablet-app .mon-card h3 { margin: .8rem 0 .25rem; font-size: 1rem; }
html.tablet-app .mon-card ul { margin: 0; padding-left: 1.1rem; }

html.tablet-app .calc-pick { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: 0 0 1rem; }
html.tablet-app .calc-pick select { min-height: 48px; }
html.tablet-app .calc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
html.tablet-app .calc-in,
html.tablet-app .calc-out {
  background: #fff;
  border: 1px solid #d5d8de;
  border-radius: 16px;
  padding: 1rem;
}
html.tablet-app .calc-in label,
html.tablet-app .calc-out p { display: block; margin: .45rem 0; }
html.tablet-app .calc-in input,
html.tablet-app .calc-in select { min-height: 48px; width: 100%; }
html.tablet-app .calc-flag { font-weight: 700; background: #f5b942; color: #1a1404; border-radius: 12px; padding: .45rem .7rem; }
html.tablet-app .calc-missing { margin: 0; padding-left: 1.1rem; }
html.tablet-app #pipe-wheel .pw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
@media (max-width: 800px) {
  html.tablet-app .calc-split,
  html.tablet-app #pipe-wheel .pw-layout { grid-template-columns: 1fr; }
}

html.tablet-app .brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .75rem;
}
html.tablet-app .brand-card {
  background: #fff;
  border: 1px solid #d5d8de;
  border-radius: 16px;
  padding: .9rem;
}
html.tablet-app .brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
}
html.tablet-app .brand-card h2 { margin: .55rem 0 .2rem; font-size: 1.05rem; }
html.tablet-app .brand-price { margin: 0; font-weight: 700; }

/* Phone fixes: every pill on the dark CRM bar shows dark text on its white fill. */
html.tablet-app .crmbar .crm-more-list a,
html.tablet-app .crmbar a.btn.ghost,
html.tablet-app .crmbar button.btn.ghost,
html.tablet-app .crmbar .subtabs a {
  color: #111827;
}
html.tablet-app .crmbar .crm-five > a.crm-tab,
html.tablet-app .crmbar .crm-five summary.crm-tab {
  color: #fff;
}
html.tablet-app .crmbar .crm-five > a.crm-tab[aria-current="page"] {
  color: #111827;
}
html.tablet-app .crmbar .btn.alt,
html.tablet-app .crmbar .btn:not(.ghost) {
  color: #fff;
}
/* Phone width: nothing may push the page wider than the screen. */
@media (max-width: 640px) {
  html.tablet-app, html.tablet-app body { max-width: 100%; overflow-x: hidden; }
  html.tablet-app .header-inner { flex-wrap: wrap; }
  html.tablet-app .hdr-brand { flex-wrap: wrap; row-gap: .5rem; max-width: 100%; }
  html.tablet-app .brand { min-width: 0; flex: 1 1 12rem; }
  html.tablet-app .brand-name { font-size: 1rem; overflow-wrap: anywhere; }
  html.tablet-app .tabs, html.tablet-app .crm-more-list { max-width: 100%; }
  html.tablet-app .crmbar { max-width: 100%; box-sizing: border-box; }
  html.tablet-app .crmbar .gsearch { display: flex; gap: .4rem; width: 100%; }
  html.tablet-app .crmbar .gsearch input { min-width: 0; flex: 1 1 auto; }
  html.tablet-app .crmbar .whob { max-width: 100%; }
}

/* Phone: the same clean white look as the phone home. Header, fonts and accents stay with each site's theme
   (Upstate navy and orange, Pittsburgh black and gold). Few colors, thin borders, no heavy shadows. */
@media (max-width: 640px) {
  html.tablet-app body,
  html.tablet-app body.theme-pa,
  html.tablet-app:not([data-pa-field]) body:not(.theme-pa):not([class*="home-theme-"]) {
    background: #fff !important;
    background-image: none !important;
    color: #111827;
  }
  html.tablet-app { --paper: #fff; }
  html.tablet-app main { padding-top: 1.2rem; }
  html.tablet-app .card, html.tablet-app .tile { box-shadow: none; border: 1px solid rgba(10, 22, 40, .12); }
  /* Pittsburgh pages were black: keep the gold and black accents, but on white with dark readable text. */
  html.tablet-app body.theme-pa .sub,
  html.tablet-app body.theme-pa .muted,
  html.tablet-app body.theme-pa .small { color: #444; }
  html.tablet-app body.theme-pa a:not(.btn):not(.app) { color: #6b520b; }
  html.tablet-app body.theme-pa .kicker { color: #6b520b; }
  html.tablet-app body.theme-pa .site-footer { color: #444; border-top-color: rgba(17, 17, 17, .14); }
  html.tablet-app body.theme-pa .tabs a, html.tablet-app body.theme-pa .tabs details.office-tab > summary { background: #fff; color: #111; border-color: #F6C445; }
  html.tablet-app body.theme-pa .tabs a[aria-current="page"], html.tablet-app body.theme-pa .tabs details.office-tab[open] > summary { background: #F6C445; color: #111; border-color: #F6C445; }
}

/* Phone, iPhone-style pages: large title, rounded grouped cards, 44px taps, light bar. Layout and color only; no data or access changes. */
@media (max-width: 640px) {
  html.tablet-app body { font-size: 1rem; line-height: 1.45; }
  html.tablet-app main > .wrap > .top h1,
  html.tablet-app main h1 { font-family: var(--font); text-transform: none; font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; margin: .2rem 0 .3rem; }
  html.tablet-app main h2 { font-family: var(--font); text-transform: none; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }
  html.tablet-app main .top { gap: .6rem; margin-bottom: .8rem; }
  html.tablet-app .kicker { text-transform: none; letter-spacing: 0; font-size: .9rem; }
  html.tablet-app .card, html.tablet-app .tile, html.tablet-app section.card { border-radius: 18px; padding: 1rem 1.05rem; margin: 0 0 .9rem; background: #fff; }
  html.tablet-app .mrs-home { background: #fff; color: #111827; border-bottom: 1px solid rgba(10, 22, 40, .1); font-weight: 700; min-height: 44px; display: flex; align-items: center; padding-inline: 1rem; text-decoration: none; }
  html.tablet-app body.theme-pa .mrs-home { background: #fff; color: #111; border-bottom-color: #F6C445; }
  html.tablet-app .btn, html.tablet-app button, html.tablet-app select, html.tablet-app input:not([type=checkbox]):not([type=radio]) { min-height: 44px; }
  html.tablet-app input, html.tablet-app select, html.tablet-app textarea { font-size: 16px; border-radius: 12px; }
  html.tablet-app .btn { background: #C4411F; border-color: #C4411F; color: #fff; border-radius: 12px; }
  html.tablet-app .btn.ghost, html.tablet-app .btn.alt { background: #fff; color: #111827; border-color: rgba(10, 22, 40, .2); }
  html.tablet-app .btn.alt { background: #0A1628; color: #fff; border-color: #0A1628; }
  html.tablet-app body.theme-pa .btn { background: #F6C445; border-color: #F6C445; color: #111; }
  html.tablet-app body.theme-pa .btn.ghost { background: #fff; color: #111; border-color: #C99A1B; }
  html.tablet-app body.theme-pa .btn.alt { background: #111; color: #F6C445; border-color: #111; }
  /* Tables and wide blocks scroll inside their card, never the page. */
  html.tablet-app main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.tablet-app main img, html.tablet-app main pre { max-width: 100%; }
  html.tablet-app main pre { overflow-x: auto; }
  /* Top section bar: one swipeable row, like iPhone segments. */
  html.tablet-app .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .2rem; scrollbar-width: none; }
  html.tablet-app .tabs::-webkit-scrollbar { width: 0; height: 0; }
  html.tablet-app .tabs a, html.tablet-app .tabs details.office-tab > summary { flex: none; min-height: 44px; display: inline-flex; align-items: center; }
  /* CRM section list: light grouped panel instead of the dark desktop sidebar. */
  html.tablet-app .crmbar { background: #f4f6f9; border: 1px solid rgba(10, 22, 40, .1); border-radius: 18px; }
  html.tablet-app .crmbar a, html.tablet-app .crmbar summary { color: #111827; }
  html.tablet-app .crmbar .crm-five > a.crm-tab, html.tablet-app .crmbar .crm-five summary.crm-tab { color: #111827; background: #fff; border: 1px solid rgba(10, 22, 40, .1); }
  html.tablet-app .crmbar .crm-five > a.crm-tab[aria-current="page"] { background: #0A1628; color: #fff; border-color: #0A1628; }
  html.tablet-app body.theme-pa .crmbar .crm-five > a.crm-tab[aria-current="page"] { background: #F6C445; color: #111; border-color: #F6C445; }
  html.tablet-app .crmbar .crm-more-list a { background: #fff; border: 1px solid rgba(10, 22, 40, .1); color: #111827; }
  html.tablet-app .crmbar .btn.alt { color: #fff; }
  html.tablet-app .crmbar .btn.ghost, html.tablet-app .crmbar a.btn.ghost { color: #111827; background: #fff; }
  html.tablet-app .site-footer { font-size: .8rem; }
}

/* Phone: selected tab / pressed button always readable (dark pill with light text; PA is gold with black text). */
@media (max-width: 640px) {
  html.tablet-app main :is([class$="tabs"], [class*="-tabs "], nav) a[aria-current="page"] { background: #0A1628; color: #fff; border-color: #0A1628; }
  html.tablet-app body.theme-pa main :is([class$="tabs"], [class*="-tabs "], nav) a[aria-current="page"] { background: #F6C445; color: #111; border-color: #F6C445; }
  html.tablet-app main a[aria-current="page"] .cnt { background: rgba(255,255,255,.22); color: inherit; }
  html.tablet-app body.theme-pa main a[aria-current="page"] .cnt { background: rgba(0,0,0,.12); }
  html.tablet-app .btn[aria-pressed="true"] { background: #0A1628; color: #fff; border-color: #0A1628; }
  html.tablet-app body.theme-pa .btn[aria-pressed="true"] { background: #111; color: #F6C445; border-color: #111; }
}

/* Phone: compact white header, section tabs as one scrolling row (iPhone segmented-row look). */
@media (max-width: 640px) {
  html.tablet-app .site-header { background: #fff; border-bottom: 1px solid rgba(10,22,40,.08); box-shadow: none; }
  html.tablet-app .site-header .header-inner { padding: .5rem 1rem; gap: .5rem; flex-wrap: nowrap; align-items: center; }
  html.tablet-app .site-header .brand-name { color: #0A1628; font-size: 1rem; line-height: 1.1; }
  html.tablet-app .site-header .brand-sub { color: #5b6573; font-size: .78rem; }
  html.tablet-app body.theme-pa .site-header .brand-name { color: #111; }
  html.tablet-app .site-header .brand-logo-plate { background: transparent; padding: 0; }
  html.tablet-app .site-header .steamdesk-mark { position: static; width: auto; height: auto; overflow: visible; opacity: 1; }
  html.tablet-app .site-header .steamdesk-mark img { width: 44px; height: 44px; }
  html.tablet-app #staff-guide-open { background: #f4f6f9; color: #0A1628; border: 0; border-radius: 999px; min-height: 36px; padding: .3rem .8rem; font-size: .85rem; box-shadow: none; }
  html.tablet-app .crmbar { background: transparent; border: 0; padding: 0; margin: .3rem 0 .6rem; }
  html.tablet-app .crmbar .crm-five { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; gap: .4rem; padding: 0 0 .3rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.tablet-app .crmbar .crm-five::-webkit-scrollbar { width: 0; height: 0; }
  html.tablet-app .crmbar .crm-five > a.crm-tab, html.tablet-app .crmbar .crm-five > details { flex: none; }
  html.tablet-app .crmbar .crm-five > a.crm-tab, html.tablet-app .crmbar .crm-five summary.crm-tab { min-height: 44px; border-radius: 999px; padding: .4rem 1.1rem; background: #f4f6f9; border: 0; }
  html.tablet-app .crmbar .crm-more[open] { flex: none; }
  html.tablet-app .crmbar .crm-more-list { position: fixed; left: 12px; right: 12px; top: 30%; max-height: 55vh; overflow: auto; background: #fff; border-radius: 18px; padding: .6rem; z-index: 60; display: grid; gap: .4rem; border: 1px solid rgba(10,22,40,.1); }
}

/* ---- Phone app pages: the home screen's white look, one Back to Home bar, no nav chips ----
   Every destination the old chips and More list reached is a home-screen icon or sits in a folder
   (Jobs, Money, Sales, Tools, Team, Admin), so the dark panel and chips are tucked out of sight here.
   The markup stays (screen readers, desktop sidebar); on phones it is clipped to nothing. */
@media (max-width: 800px) {
  html.tablet-app body .crmbar .crm-five,
  html.tablet-app body .crmbar .gsearch,
  html.tablet-app body .crmbar .whob,
  html.tablet-app body > nav.tabs,
  html.tablet-app body .wrap > nav.tabs {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html.tablet-app body .crmbar {
    background: transparent !important;
    color: #0A1628 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-height: 0;
  }
  html.tablet-app body .crmbar .zone-toggle { margin: .2rem 0 .6rem; }
  html.tablet-app .site-header {
    background: #fff !important;
    color: #0A1628 !important;
    border-bottom: 1px solid rgba(10, 22, 40, .08) !important;
    box-shadow: none !important;
  }
  html.tablet-app .site-header a,
  html.tablet-app .site-header .brand { color: #0A1628 !important; }
  html.tablet-app main .card,
  html.tablet-app main .box,
  html.tablet-app main section.card {
    border-radius: 16px;
    border: 1px solid rgba(10, 22, 40, .08);
    box-shadow: 0 1px 2px rgba(10, 22, 40, .04);
    background: #fff;
  }
  /* Floating helpers shrink to a small round button above the home bar. */
  html.tablet-app .boss-dock {
    right: .6rem !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(18rem, calc(100vw - 1.2rem));
    max-height: 40vh;
    font-size: .85rem;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(10, 22, 40, .18);
  }
  html.tablet-app .boss-dock.is-min { padding: .3rem .6rem; border-radius: 999px; opacity: .92; }
  html.tablet-app .wk-panel { left: .6rem !important; bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; font-size: .78rem; }
  html.tablet-app .wk-panel > button { padding: .3rem .6rem; background: #fff !important; color: #0A1628 !important; border: 1px solid rgba(10, 22, 40, .18) !important; box-shadow: 0 2px 8px rgba(10, 22, 40, .15); }
}
/* Desktop sidebar keeps its layout; same white theme as the home. */
@media (min-width: 801px) {
  html.tablet-app .crmbar { background: #fff !important; color: #0A1628 !important; border-right: 1px solid rgba(10, 22, 40, .1); }
  html.tablet-app .crmbar a, html.tablet-app .crmbar summary { color: #0A1628 !important; }
  html.tablet-app .crm-five .crm-tab, html.tablet-app .crm-five summary.crm-tab { color: #0A1628; }
  html.tablet-app .crm-five a[aria-current="page"], html.tablet-app .crm-more-list a[aria-current="page"] { background: #0A1628 !important; color: #fff !important; }
}
@media (max-width: 800px) {
  html.tablet-app .mrs-home { background: #fff !important; color: #0A1628 !important; border-bottom: 1px solid rgba(10, 22, 40, .1) !important; box-shadow: none !important; font-size: .9rem; }
  html.tablet-app .mrs-home:hover, html.tablet-app .mrs-home:focus-visible { background: #f4f6f9 !important; color: #0A1628 !important; text-decoration: none; }
  html.tablet-app .mrs-back { color: #0A1628; min-width: 64px; }
}
/* Clean pass: one calm white surface, more space, extras tucked away on phones. */
@media (max-width: 800px) {
  html.tablet-app main { padding-top: .5rem; }
  html.tablet-app main .wrap { padding-left: 1rem; padding-right: 1rem; }
  html.tablet-app main h1 { font-size: 1.9rem; letter-spacing: -.02em; margin: .6rem 0 1rem; color: #0A1628; }
  html.tablet-app main h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }
  html.tablet-app main .card, html.tablet-app main section.card { padding: 1rem 1.1rem; margin: 0 0 1rem; }
  html.tablet-app main .kicker, html.tablet-app main .top .sub + p { color: #6b7280; }
  html.tablet-app main .notice[data-viewer-note] { background: #f4f6f9; border: 0; color: #6b7280; font-size: .8rem; padding: .5rem .8rem; border-radius: 12px; }
  html.tablet-app main .btn { border-radius: 12px; min-height: 44px; font-weight: 600; }
  html.tablet-app main .btn.ghost, html.tablet-app main .btn.alt { background: #f4f6f9; border: 0; color: #0A1628; }
  html.tablet-app .site-footer { font-size: .72rem; color: #6b7280; padding: 1.5rem 1rem 4rem; background: #fff !important; border: 0 !important; }
  html.tablet-app .site-footer a { color: #6b7280 !important; }
}

/* One shared surface: white, with the MRS gears faint behind the content (all widths). */
html.tablet-app body {
  background-color: #fff !important;
  background-image: linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)), url("/brand/bg-gear-top.png"), url("/brand/bg-gear-bottom.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, right -1rem top 7rem, right -1rem bottom 0 !important;
  background-size: 100% 100%, min(600px, 88vw) auto, min(600px, 88vw) auto !important;
  background-attachment: fixed !important;
}
html.tablet-app .sd-tagline { text-align: center; color: #6b7280; font-size: .75rem; letter-spacing: .04em; margin: 1.5rem 0 0; }
@media (max-width: 800px) {
  html.tablet-app body .crmbar .btn, html.tablet-app body .crmbar .btn.alt { background: #f4f6f9 !important; color: #0A1628 !important; }
}
@media (max-width: 800px) {
  html.tablet-app .site-header, html.tablet-app .site-header .hdr-brand, html.tablet-app .site-header .hdr-brand *, html.tablet-app .site-header .hdr-right * { color: #0A1628 !important; }
}