/* MyMobi360 — OFFICE TEMPLATE stylesheet (shared by every industry office).
   Cloned from Darlene's approved governing image (master-office-template-legal.jpg):
   white plate, thin rose-gold double frame, four rose-gold screw heads,
   black Playfair capitals, ASK MOBI panel, 4x4 solid rose-gold toolbox
   grid, LANGUAGE & COUNTRY panel, back link. Do not redesign per room —
   clones change only the CLONE VARIABLES noted in each room page's header
   comment (title, agent, desk line, tool emphasis). */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* iOS text boosting off (2026-11-14): Safari inflates text on its own,
   which forced the toolbox grid wider than the frame's opening on
   Darlene's iPhone — icons clipped at the right, pinch-to-see. Text
   renders at its designed size, as in her plates. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  min-height:100dvh;
  /* WHITE, never cream (Darlene, 2026-11-14 ~20:04 EST): "None of the
     documents can be cream color, everything has to be white white and
     black because that's the industry standard and the back of the app
     has to be white and black with the logo and the border that I gave
     you." Every background in the offices is pure white from here on. */
  background:#ffffff;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  color:#000;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the plate ---------- */
.plate{
  position:relative;
  max-width:600px;
  margin:18px auto 30px;
  background:#ffffff;
  border:2px solid #bf7f63;
  border-radius:30px;
  box-shadow:0 14px 38px rgba(160,100,75,.16), inset 0 1px 0 #fff;
  padding:40px 30px 30px;
}
.plate::before{ /* inner hairline of the double frame */
  content:""; position:absolute; inset:8px;
  border:1.5px solid #dda184; border-radius:23px;
  pointer-events:none;
}
@media (max-width:480px){
  .plate{margin:10px 8px 22px; padding:34px 20px 26px; border-radius:26px}
  .plate::before{inset:6px; border-radius:20px}
}

/* corner screws (CSS, in-family with her artwork's screw heads) */
.screw{
  position:absolute; width:27px; height:27px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #f7dac6, #e0a284 38%, #b76e58 72%, #8a4c36);
  box-shadow:inset 0 -2px 4px rgba(90,40,25,.45), inset 0 2px 3px rgba(255,255,255,.65), 0 2px 4px rgba(120,70,50,.35);
  z-index:3;
}
.screw::after{
  content:""; position:absolute; left:3.5px; right:3.5px; top:50%;
  height:3.5px; margin-top:-2px; border-radius:2px;
  background:linear-gradient(180deg,#7c4230,#a5684e);
  box-shadow:0 1px 1px rgba(255,255,255,.35);
}
.screw.tl{top:13px; left:13px}  .screw.tl::after{transform:rotate(38deg)}
.screw.tr{top:13px; right:13px} .screw.tr::after{transform:rotate(-52deg)}
.screw.bl{bottom:13px; left:13px}  .screw.bl::after{transform:rotate(-30deg)}
.screw.br{bottom:13px; right:13px} .screw.br::after{transform:rotate(64deg)}

/* ---------- titles (3D rose-gold Playfair capitals) ---------- */
/* Darlene's corrected law (2026-11-14 ~17:58 EST, superseding her ~17:34
   all-black word): "I don't change the title. The title was in rose gold
   as well — leave it the way it was, it was beautiful that way. The rest
   of the text can be in black, but not the titles — leave the titles in
   3D rose gold please, because I had them designed by Grok." So: the
   TITLES wear her Grok-designed raised rose-gold capitals — the .metal
   class (industry title, ASK MOBI + LANGUAGE & COUNTRY panel titles,
   toolbox title, back-link line, the guide's h1) carries the rose-gold
   gradient clipped into the letters with a soft drop shadow — and ALL
   other text is solid black Playfair. Seat/section headings inside the
   room sections also carry .metal in the markup, so the .room-sec .metal
   strip rule below renders them plain black: titles gleam, the rest
   stays black.
   NOTE (2026-11-14 ~18:0x EST restore): the exact gradient stops of the
   pre-17:36 rule were not recoverable from any file or archive (the
   all-black pass replaced the rule in place and no backup exists), so
   this gradient was REBUILT to match her artwork — sampled off the
   raised rose-gold capitals of master-office-template-legal-ACCEPTED.jpg
   (letter medians run #f2bcb2 at the crown through #eeb3a9 / #d2a197 to
   #bd9789 at the base, deep rose edges) and kept in the build's own
   rose-gold family (the seat-btn plaque gradient).
   CORRECTION (2026-11-14 ~18:1x EST): Darlene rejected that median-based
   rebuild as FADED — "Some of that rose gold is faded — that's not the
   way I give it to you." Re-sampled as a percentile profile of the
   saturation-filtered title strokes (ASK MOBI + MY MOBI DIGITAL TOOLBOX
   on the accepted plate): the deep end (#5a3228–#644437) and the rich
   mid rose (#916250 → #c98578) carry most of the stroke body, and the
   bright blush crown (#fad0c0 family) is only a top sliver. The gradient
   below is therefore deep-dominant — crown highlight confined to
   0–14%, rich mid rose through ~45–58%, deep body (#9c5a40 → #7e4530)
   to a #6e3a2c base — with weight 900 and a tighter, deeper drop shadow
   for the raised-letter depth of her samples. */
.metal{
  background:linear-gradient(180deg,#f7dbc9 0%,#f2c6b2 14%,#e2a487 30%,#cf8f76 45%,#bd7355 58%,#9c5a40 70%,#7e4530 85%,#6e3a2c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  font-weight:900;
  filter:drop-shadow(0 2px 2px rgba(90,45,32,.50));
}
.room-title{
  margin:6px 0 20px; text-align:center;
  font-size:clamp(18px,5vw,32px); font-weight:700;
  letter-spacing:.06em; line-height:1.15; white-space:nowrap;
}
/* long industry titles (CONSTRUCTION & CONTRACTING · HOME & PROPERTY
   SERVICES) step down so the whole name stays on one line in the plate */
.room-title.long{
  font-size:clamp(15px,4.2vw,26px); letter-spacing:.04em;
}
.panel-title{
  margin:0 0 6px; text-align:center;
  font-size:clamp(19px,4.6vw,27px); font-weight:700; letter-spacing:.14em;
}
.sec-title{
  margin:0 0 4px; text-align:left;
  font-size:clamp(16px,4vw,21px); font-weight:700; letter-spacing:.12em;
  color:#000;
}
/* Seat/section headings sit inside .room-sec and carry .metal in the
   markup, but they are NOT titles — Darlene's word (~17:58 EST) is the
   rest of the text stays black, so this strip rule renders every .metal
   element inside a room section solid black Playfair (no gradient, no
   transparent fill, no drop shadow). Only the face titles above the
   sections wear the 3D rose gold. */
.room-sec .metal{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:#000;
  color:#000;
  filter:none;
}

/* ---------- panels (ASK MOBI / LANGUAGE & COUNTRY) ---------- */
.panel{
  position:relative;
  border:2px solid #c98a72; border-radius:20px;
  padding:20px 18px 16px; margin:0 0 22px;
  background:#fff;
}
.panel::before{
  content:""; position:absolute; inset:5px;
  border:1px solid #e3b096; border-radius:15px; pointer-events:none;
}
.mobi-mark{display:block; height:138px; width:auto; margin:2px auto 4px}
@media (max-width:480px){ .mobi-mark{height:118px} }

/* chat bar (a design seat — wiring comes with the backend build) */
.chatbar{
  position:relative; margin-top:12px;
  border:1.5px solid #c98a72; border-radius:14px;
  padding:12px 12px 8px; background:#fff;
}
.chatbar input{
  width:100%; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:clamp(12.5px,3.4vw,15px); color:#000;
  padding:2px 2px 8px;
}
.chatbar input::placeholder{color:#000}
.chat-tools{display:flex; justify-content:flex-end; gap:14px; align-items:center}
.chat-tools button{
  border:0; background:transparent; cursor:pointer; padding:2px;
  display:inline-flex; align-items:center;
}
.chat-tools svg{width:21px; height:21px; stroke:#b26a50; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* Mobi's voice button — Darlene's microphone artwork shrunk small (2026-11-14):
   ~26px visual, in line with the bar's icons; the padding is invisible tap
   area only (negative margins keep the bar's height unchanged). No border,
   no frame — her artwork stands on its own. */
.chat-tools .mobi-mic-btn{padding:5px 10px; margin:-5px -3px}
.mobi-mic-btn img{height:26px; width:auto; display:block; transition:transform .12s ease}
.mobi-mic-btn:active img{transform:scale(.88)}
.chat-note{
  display:none; margin:10px 2px 0; font-size:13.5px; color:#000;
}
.chat-note.on{display:block}

/* ---------- toolbox grid ---------- */
.toolbox-title{
  margin:2px 0 14px; text-align:center;
  font-size:clamp(17px,4.6vw,25px); font-weight:700; letter-spacing:.13em;
}
.grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px 6px; margin:0 0 24px;
}
.tile{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  text-decoration:none; padding:2px 1px 0; border-radius:12px;
  min-width:0;
}
.tile img{height:62px; width:auto; max-width:94%; object-fit:contain;
  filter:drop-shadow(0 3px 3px rgba(140,80,55,.25))}
@media (max-width:480px){ .tile img{height:54px} }
.tile span{
  font-size:14.5px; font-weight:600; color:#000;
  text-align:center; line-height:1.18;
  max-width:100%; overflow-wrap:break-word;
}
.tile:hover span{color:#000}

/* ---------- language & country ---------- */
.lang-head{display:flex; align-items:center; justify-content:center; gap:9px}
.lang-head .panel-title{font-size:clamp(15px,4.2vw,26px); letter-spacing:.1em; white-space:nowrap}
.lang-head svg{width:21px; height:21px; stroke:#b26a50; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}
.lang-row{display:flex; gap:12px; margin-top:12px}
.lang-row select{
  flex:1; min-width:0; appearance:none; -webkit-appearance:none;
  border:1px solid #d8a58c; border-radius:9px; background:#fff;
  padding:10px 30px 10px 12px; font-family:inherit; font-size:16px; color:#000;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a85f43' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
  cursor:pointer;
}

/* ---------- change-industry door (Darlene, 2026-11-14 ~20:05 EST) ----
   A person who picked the wrong industry can go back and pick the right
   one: this small door under the office's back link returns to the
   picker in change mode (activation.html?change=1). Deliberate and
   quiet — the office never asks on its own. */
.change-industry{
  display:block; text-align:center; margin:8px 0 0;
  font-size:13.5px; color:#000; text-decoration:underline;
  text-underline-offset:3px;
}
/* NEVER BLUE (Darlene, 2026-11-14 ~20:40 EST): "Not your industry,
   change it cannot be in blue." Black in every state a link can be in. */
.change-industry:link,
.change-industry:visited,
.change-industry:hover,
.change-industry:active{color:#000}

/* ---------- back link + honest line ---------- */
.backlink{
  display:block; text-align:center; text-decoration:none;
  font-size:clamp(15px,4vw,19px); font-weight:700; letter-spacing:.12em;
  margin:4px 0 2px;
}
.back-arrow{
  width:17px; height:17px; stroke:#b26a50; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-2px; margin-right:7px;
}

/* ---------- face titles: her harvested artwork (2026-11-14 ~18:09 EST) ----------
   Darlene's final ruling: "This is exactly how it has to look. I don't
   want you to change one thing. I don't want you changing fonts. I don't
   want you changing titles. This was done by Grok one by one... It cannot
   be faded." The face titles are therefore her artwork itself — cropped
   and white-keyed from her own plates (assets/room/title-*.png), never
   re-typeset, never gradient-imitated. The .metal rule above survives
   ONLY for the activation guide's h1; no office face uses it any more.
   Widths mirror her samples: each title's width on its plate relative
   to the plate's content span (industry titles carry their own width
   inline), capped at the full column — the frame opening is the wall. */
.room-title img{display:block; margin:0 auto; height:auto; max-width:100%}
.panel-title img{display:block; margin:0 auto; height:auto; width:42%; max-width:100%}
.toolbox-title img{display:block; margin:0 auto; height:auto; width:71%; max-width:100%}
.lang-head .panel-title{flex:0 1 66%}
.lang-head .panel-title img{width:100%}
.backlink img{display:block; margin:0 auto; height:auto; width:51%; max-width:100%}
.honest{
  text-align:center; font-size:12.5px; color:#000; margin:12px 0 2px;
}

/* ---------- room interior sections ---------- */
.divider{
  display:flex; align-items:center; gap:12px; margin:26px 2px 18px;
}
.divider::before,.divider::after{
  content:""; flex:1; height:1.5px;
  background:linear-gradient(90deg,transparent,#cf8f74,transparent);
}
.divider span{font-size:13px; letter-spacing:.22em; color:#000; font-weight:700}
.room-sec{
  border:1.5px solid #dda184; border-radius:16px;
  padding:16px 16px 14px; margin:0 0 16px; background:#ffffff;
  scroll-margin-top:14px;
}
.room-sec p{margin:4px 0 10px; font-size:15px; line-height:1.45; color:#000}
.room-sec .desk{color:#000; margin-top:0}
/* Form-header logo seat (Darlene's law, 2026-11-14 ~16:50 EST): the
   minimized MyMobi360 logo sits CENTERED at the top of every form by
   default, until the customer implements their own brand in that seat.
   Whole locked artwork, display only — never cropped or redrawn. */
.form-logo-seat{
  display:block; width:150px; height:auto;
  margin:6px auto 10px; border:0;
}
/* Logo glow (Darlene, 2026-11-14 ~17:02 EST; amended ~17:24 EST):
   the form logo felt "a little dull" — she asked for a slight
   animation IN the logo, "a subtle glow, something really classy."
   The glow lives in the metal only: a whisper of brightness
   breathing on the artwork itself on a ~5s cycle, so the chrome
   and rose gold feel alive. Her background law is absolute — all
   her backgrounds are white — so there is NO colored wash behind
   the logo (an earlier behind-logo bloom was removed on her word):
   the page around the logo stays pure white at every phase of the
   breath. The logo itself is the CLEAR-BACK cutout
   (assets/mymobi360-logo-form-clear.png) — logos with white boxes
   are forbidden, it has to be a clear back. The logo never moves,
   scales, warps, or spins. The wrapper carries the exact geometry
   the img had (150px wide, same margins), so nothing shifts
   anywhere the seat appears. */
.logo-glow{
  display:block; width:150px; margin:6px auto 10px;
}
.logo-glow>.form-logo-seat{
  margin:0; width:100%;
  animation:logoSheenBreathe 5s ease-in-out infinite;
}
@keyframes logoSheenBreathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.05)}
}
@media (prefers-reduced-motion: reduce){
  .logo-glow>.form-logo-seat{animation:none}
}
.seat-row{display:flex; flex-wrap:wrap; gap:9px; margin-top:8px; justify-content:center}
.seat-btn{
  /* Darlene's label law + metal richness pass (2026-11-14): labels are
     SQUARE (crisp 6px corners, never round/pill), centered in the middle
     of their box, Playfair only, rows centered as a group. The edging
     matches the GLOSSY POLISHED rose-gold chrome of her Agriculture plate
     (chrome-reference-agriculture.jpg): a high-gloss gradient border —
     deep rose depths, pale blush, a near-white/silver flash at the light
     point, rich rose again — laid on with a bevel highlight along the top,
     a soft rose shade along the bottom, and a gentle drop lift, so each
     label sits raised off the page like a little polished metal plaque.
     The face stays essentially white (a whisper of top sheen only);
     all text black Playfair. */
  border:2px solid transparent; color:#000;
  background:
    linear-gradient(180deg,#ffffff 0%,#fffcf9 58%,#fdefe4 100%) padding-box,
    linear-gradient(155deg,#7e4530 0%,#a85f43 14%,#d89a7e 30%,#f6d9c8 44%,#fff8f2 50%,#cfd6db 55%,#eec3ab 63%,#c07a58 80%,#8a4c36 100%) border-box;
  font-family:inherit; font-size:14.5px; font-weight:600; text-align:center;
  padding:8px 15px; border-radius:6px; cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(166,95,66,.22),
    0 2px 5px rgba(140,75,50,.22),
    0 1px 1px rgba(140,75,50,.14);
}
.seat-btn:hover{
  background:
    linear-gradient(180deg,#ffffff 0%,#fff8f1 55%,#fce8d8 100%) padding-box,
    linear-gradient(155deg,#7e4530 0%,#a85f43 14%,#d89a7e 30%,#f6d9c8 44%,#fff8f2 50%,#cfd6db 55%,#eec3ab 63%,#c07a58 80%,#8a4c36 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(166,95,66,.26),
    0 4px 10px rgba(140,75,50,.28),
    0 2px 3px rgba(140,75,50,.18);
}
.empty{
  border:1px dashed #d8a58c; border-radius:10px; padding:12px 14px;
  font-size:14px; color:#000; background:#fff;
}
.search-seat{
  width:100%; border:1.5px solid #c98a72; border-radius:11px;
  padding:10px 12px; font-family:inherit; font-size:15px; color:#000;
  outline:0; margin-bottom:10px; background:#fff;
}
.search-seat::placeholder{color:#000}
.file-list{margin:8px 0 0; padding-left:18px; font-size:14px; color:#000}

/* mini calendar seat */
.cal{width:100%; border-collapse:collapse; margin-top:6px; font-size:14px}
.cal caption{font-weight:700; color:#000; letter-spacing:.08em; padding-bottom:6px; font-size:15px}
.cal th{color:#000; font-weight:700; padding:4px 0; font-size:12.5px; letter-spacing:.06em}
.cal td{text-align:center; padding:5px 0; color:#000; border-radius:8px}
.cal td.today{background:linear-gradient(180deg,#eec3ab,#d1916f); color:#000; font-weight:700}
.cal td.dim{color:#000}

/* ---------- Darlene's office frame (2026-11-14 ~17:49 EST) ----------
   THE frame for inside the offices, supplied by Darlene:
   assets/mymobi360-office-frame.jpg (1056x1872) — a polished rose-gold
   metallic rounded-rectangle frame on white, sleek band, subtle inner
   shadow lip, NO screws, NO waves. Her rule: it sits FLUSH inside every
   office — the office content meets the frame cleanly, no gaps, nothing
   past its edges. It replaces the CSS stand-in plate (the .plate double
   frame + .screw rules above, which now serve the guide page only) on
   all 15 office pages.
   The artwork is used WHOLE — never cropped, warped, stretched, or
   sliced. The wrap box carries the artwork's exact aspect (1056/1872),
   sized by contain and centered on a white stage, so the rendered frame
   is the artwork at native proportion. The content scrolls in a region
   inset EXACTLY to the frame's clear opening, measured from the artwork
   itself (pixel scan, flat-interior boundary, Gaussian-smoothed):
     opening box (artwork px): x 109..972, y 125..1760 of 1056x1872
       left 109/1056 = 10.3219%    top  125/1872 = 6.6774%
       width 863/1056 = 81.7235%   height 1635/1872 = 87.3397%
     corner radius ~77 artwork px = 7.2917% of the wrap width — the
   region wears that radius so its corners follow the opening's curve
   and nothing ever paints past the metal. The frame layer never
   scrolls; the content scrolls beneath its opening. */
.frame-stage{
  position:fixed; inset:0; background:#fff;
}
/* FULL-BLEED SEATING (Darlene, 2026-11-14 ~19:53 EST, her screenshots):
   "the border of the frame has to be stretched all the way to the top,
   all the way to the bottom, all the way to the right, all the way to
   the left because it's too small... the whole frame is flushed top to
   bottom left to right." The wrap is now the viewport itself and the
   artwork stretches to meet all four edges — no white stage around it.
   Her order supersedes the earlier native-proportion seating for the
   frame. The opening's percentage insets below scale with the box on
   both axes, so the content region still lands exactly in the opening. */
.frame-wrap{
  position:relative;
  width:100vw; width:100dvw;
  height:100vh; height:100dvh;
}
.frame-art{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:fill;
}
.office-scroll{
  position:absolute;
  /* CENTERED ON THE SCREEN (Darlene, 2026-11-14, three times tonight:
     "everything has to be centered — and I don't see it centered").
     Her frame's opening sits ~1.2% right of the box's true center
     (its left rail is the thicker one), so a content region seated
     in the opening read as off-center on her phone. The region keeps
     the opening's width and height, shifted left until its center is
     the screen's center exactly. The frame artwork is untouched. */
  left:9.1383%; top:6.6774%;
  width:81.7235%; height:87.3397%;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  border-radius:7.2917%;
  background:#fff;
  scrollbar-width:thin;
}
.office-content{padding:30px 22px 28px}
@media (min-width:481px){
  .office-content{padding:38px 30px 32px}
}
/* Phone fit inside the frame: the opening is narrower than the old
   plate was, so at phone widths the interior side spacing steps down
   (the frame's own lip supplies the visual inset) and the Ask Mobi
   hint text steps down a whisper — measured in-browser so her exact
   placeholder, "Ask Mobi anything about your business...", renders
   whole at 390px (and at 375/360) instead of clipping mid-word.
   Desktop is untouched. */
@media (max-width:480px){
  .office-content{padding-left:10px; padding-right:10px}
  .panel{padding-left:14px; padding-right:14px; min-width:0}
  .chatbar{padding-left:8px; padding-right:8px}
  /* 16px keeps iOS from auto-zooming the page when the Ask Mobi bar is
     tapped (any smaller input size triggers the zoom Darlene hit).
     The placeholder itself renders a whisper smaller so her exact line,
     "Ask Mobi anything about your business...", still fits whole. */
  .chatbar input{font-size:16px}
  .chatbar input::placeholder{font-size:13px}
  .tile span{font-size:13px}
  .lang-head,.lang-head .panel-title,.lang-row{min-width:0}
}

/* ---------- type law guard (Darlene, 2026-11-14 ~18:05 EST) ----------
   "Make sure that you're using only Playfair, no italics. I don't like
   it." Every rule above already renders upright Playfair; this guard is
   the lock on the door: no element in an office or the guide may render
   italic, and every form control inherits the house Playfair instead of
   falling back to a browser default face. */
i,em{font-style:normal}
button,input,select,textarea{font-family:inherit}