/* ==========================================================================
   WrenchUr CMMS — screen-specific styles (landing, login, hub, module host)
   ========================================================================== */

/* ---------- wordmark ---------- */
.wordmark{display:flex; align-items:center; gap:11px;}

/* The WrenchUr starburst. It is a royal-blue line drawing on transparent,
   so it sits on a light disc — which is how the logo is presented on dark
   backgrounds anyway, and keeps the brand colour untouched. */
.wm-mark{
  width:30px; height:30px; flex:none; border-radius:50%;
  background:#f2f5f8 var(--logo, none) center / 84% no-repeat;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 2px 12px rgba(3,8,20,.45);
}
.wm-text{font-size:15px; letter-spacing:.13em; font-weight:400; color:var(--muted);}
.wm-text b{color:var(--text); font-weight:750; letter-spacing:.08em;}
.wordmark.sm .wm-mark{width:23px; height:23px;}
.wordmark.sm .wm-text{font-size:12.5px;}

/* ---------- the motif ----------
   The starburst (--motif in app.css) as a mask over a flat brand colour,
   so it reads as a faint line drawing on any surface. Opacity stays
   in the 3–6% range: it is a texture, never something to look at. */
.motif{
  background-color:var(--motif-ink);
  -webkit-mask:var(--motif) center / contain no-repeat;
  mask:var(--motif) center / contain no-repeat;
  pointer-events:none;
}

/* ---------- landing ---------- */
.landing{
  position:relative; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  padding:calc(var(--sat) + 14px) 22px calc(var(--sab) + 20px);
}
.landing-glow{
  position:absolute; top:-180px; left:50%; transform:translateX(-50%);
  width:min(620px, 130vw); height:420px; pointer-events:none;
  background:radial-gradient(ellipse at center, var(--glow), transparent 68%);
  filter:blur(8px);
}
/* the mark, large and off-centre behind the hero */
.landing-motif{
  position:absolute; right:-140px; top:-40px;
  width:min(560px, 110vw); height:min(560px, 110vw); opacity:.06;
}
.landing-head,.landing-body,.landing-foot{position:relative; z-index:1;}
.landing-head{display:flex; align-items:center; min-height:36px;}
.landing-body{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  width:100%; padding:22px 0 0;
}

/* the hero: mark, wordmark, tagline, the line, the lede, the one warm button */
.hero{max-width:500px; width:100%; margin:0 auto; text-align:center;}
.hero-mark{display:block; width:74px; height:74px; margin:0 auto 16px; background-size:82%;}
.hero-title{
  font-size:clamp(28px, 7.5vw, 40px); line-height:1.1; margin:0 0 6px;
  letter-spacing:.14em; font-weight:400; color:var(--text);
}
.hero-title b{font-weight:800; letter-spacing:.1em; color:var(--accent);}
.hero-tag{
  margin:0 0 26px; font-size:14px; letter-spacing:.12em; line-height:1.5;
  font-variant:all-small-caps; color:var(--muted); text-wrap:balance;
}
.hero-line{font-size:clamp(22px, 5.5vw, 28px); letter-spacing:-.02em; margin:0 0 10px;}
.lede{color:var(--muted); font-size:16px; line-height:1.55; margin-bottom:22px;}
.hero .sub{margin:12px 0 0;}

/* the band under the hero: a light-grey section with the three feature
   rows, the way the site alternates white and grey sections. A thin
   slice-line pattern fades in from the left. */
.landing-band{
  position:relative; margin:34px -22px 0; padding:26px 22px;
  background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.landing-band::before{
  content:''; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background:repeating-linear-gradient(90deg, var(--motif-ink) 0 1px, transparent 1px 26px);
  -webkit-mask-image:linear-gradient(90deg, #000 20%, transparent 75%);
  mask-image:linear-gradient(90deg, #000 20%, transparent 75%);
}
.landing-band > *{position:relative;}
.band-in{max-width:460px; margin:0 auto;}

.feature-list{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:16px;}
.feature-list li{display:flex; gap:13px; align-items:flex-start;}
.feature-list .fi{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-dim); border:1px solid var(--accent-line);
  color:var(--accent); font-size:15px;
}
.feature-list b{display:block; font-size:14.5px; margin-bottom:2px;}
.feature-list span{color:var(--muted); font-size:13.5px; line-height:1.5;}

button.lg{min-height:52px; font-size:17px; border-radius:var(--r-btn);}
.landing-foot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; padding-top:18px; margin-top:auto;
  font-variant:all-small-caps; letter-spacing:.08em;
}
.landing-foot .mono{font-variant:normal; letter-spacing:0;}

/* ---------- login ---------- */
.login-wrap{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--sat) + 20px) 20px calc(var(--sab) + 20px); overflow-y:auto;
}
.login-card{width:100%; max-width:390px; position:relative;}
.login-card .back{position:absolute; top:12px; left:10px;}
.ts-slot{margin-top:16px; min-height:0;}
.ts-slot:not(:empty){min-height:66px;}

/* ---------- hub ---------- */
#screen-hub{position:relative; overflow:hidden;}
#screen-hub > .scroll{position:relative; z-index:1;}
/* a corner ornament, behind the tiles and clipped by the screen */
.hub-ornament{
  position:absolute; right:-90px; bottom:-90px; width:min(420px, 80vw); height:min(420px, 80vw);
  opacity:.05; z-index:0;
}
.hub-in{max-width:640px; margin:0 auto;}
.hub-label{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--accent); margin:6px 2px 10px;
}
.hub-foot{
  margin:30px 0 4px; text-align:center; color:var(--muted);
  font-size:13.5px; letter-spacing:.14em; font-variant:all-small-caps;
}
.hub-grid{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
/* tiles as brand cards: an icon disc tinted in the brand blue, the name, a
   line of description, and a 3px brand rule across the top on hover/focus */
.tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:18px 16px; min-height:118px; text-align:left;
  background:var(--chrome); border:1px solid var(--line); border-radius:var(--r-lg);
  position:relative; overflow:hidden;
  transition:border-color .14s, background .14s, transform .06s;
}
.tile::before{
  content:''; position:absolute; left:14px; right:14px; top:0; height:3px;
  border-radius:0 0 3px 3px; background:var(--accent); opacity:0; transition:opacity .14s;
}
/* Hover looks only where there is a pointer that hovers (owner's first phone
   test, 2026-09-08: a touched tile kept its hover look and the spinning
   badge until another tap). Keyboard focus keeps the same look everywhere. */
.tile:focus-visible{border-color:var(--accent-line); background:var(--panel);}
.tile:focus-visible::before{opacity:1;}
@media (hover:hover){
  .tile:hover{border-color:var(--accent-line); background:var(--panel);}
  .tile:hover::before{opacity:1;}
}
.tile:active{transform:scale(.98);}
.tile .ti{
  width:40px; height:40px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:19px;
  background:var(--accent-dim); border:1px solid var(--accent-line);
  transition:background .14s, border-color .14s;
}
/* the one other place the warm colour appears: the icon disc under the pointer */
.tile:focus-visible .ti{background:var(--cta-dim); border-color:var(--cta);}
@media (hover:hover){ .tile:hover .ti{background:var(--cta-dim); border-color:var(--cta);} }
/* The rotorhead badge in the disc (owner, 2026-09-04): the disc holds the
   emoji and, behind it, the WrenchUr badge (core/rotorhead-image.js). Hover
   or focus the tile: the emoji fades out, the badge fades in and spins in the
   disc. The pointer stays the hand. Reduce-motion: it appears, no turn. */
.tile .ti{position:relative; overflow:hidden; flex:0 0 auto;}
.tile .ti-emoji{display:block; transition:opacity .15s ease;}
/* The Vantage look (owner, 2026-09-04: "it sits within a circle and the
   blades rub around the edge"): the rotorhead fills the disc edge to edge,
   a touch over, so the blade tips run along the ring as it turns; the disc
   clips it round. */
.tile .ti-badge{position:absolute; left:-3%; top:-3%; width:106%; height:106%; opacity:0; pointer-events:none;
  transition:opacity .15s ease; transform-origin:50% 50%;}
.tile:focus-visible .ti-emoji{opacity:0;}
.tile:focus-visible .ti-badge{opacity:1; animation:cutspin 2.2s linear infinite;}
@media (hover:hover){
  .tile:hover .ti-emoji{opacity:0;}
  .tile:hover .ti-badge{opacity:1; animation:cutspin 2.2s linear infinite;}
}
@keyframes cutspin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .tile:hover .ti-badge, .tile:focus-visible .ti-badge{animation:none;} }
@media print{ .tile .ti-badge{display:none;} }
.tile .tn{font-size:15.5px; font-weight:650; color:var(--text);}
.tile .td{font-size:12.5px; color:var(--muted); line-height:1.4;}
.tile .badge{position:absolute; top:12px; right:12px;}

/* ---------- module host ---------- */
.modroot{flex:1; min-height:0; position:relative; display:flex; flex-direction:column;}
.modroot > *{flex:1; min-height:0;}

/* ---------- boot ---------- */
.boot{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px;
}
.spinner{
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid var(--line); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- landscape phones: tighten the landing ---------- */
@media (max-height:520px) and (orientation:landscape){
  .landing-body{padding:10px 0 0;}
  .landing-band{display:none;}
  .hero-mark{width:48px; height:48px; margin-bottom:8px;}
  .hero-tag{margin-bottom:12px;}
  .hero-line{font-size:22px;}
}

/* Who has what (queue.js): the row of names above "Out with someone". It wraps
   on a phone; a person with nothing open is dimmed, never hidden — an empty
   plate is the thing a dispatcher is looking for. */
.segs.wrapx{flex-wrap:wrap; gap:6px;}
.segs.wrapx .seg{white-space:nowrap;}
.seg.quiet:not(.on){opacity:.62;}