/* ==========================================================================
   S5 · SOLID SLAB   — solidity from FLAT SOLID COLOUR
   Loads AFTER gads-sys-colour-t3/a.css.
   --------------------------------------------------------------------------
   THE DECISION:  no gradients, no blur, anywhere.

   Every other version — A included, and V07 before it — builds depth out of
   things that FADE: gradients down the rim and the blocks, blurred inner
   walls, blurred contact shadows.  Fading is how a screen imitates soft
   light, and it is also why a surface can end up looking washed rather than
   made of something.

   S5 removes every one of them.  Each part is ONE flat solid colour, and the
   depth is carried entirely by:

     a stepped tone ladder   #FFFFFF paper · #F6F8FC rim · #E4EAF2 well ·
                             #FFFFFF block — four flat plates, each a definite
                             step, nothing blending into anything.
     hard offset edges       every shadow has 0 blur.  A block sits on a 2px
                             solid dark offset; the rim's cut is 2px of solid
                             dark; the lit lips are solid #FFFFFF, not 96%.

   The result reads like screen-printed material or anodised plate rather than
   like a render — the most literally "solid" of the five, and the one that
   holds up best on a cheap or badly calibrated monitor, where soft gradients
   band and blurred shadows disappear.

   This is the version to pick if "more solid" meant SOLID COLOUR.
   ========================================================================== */

#w8-system.w8{
  --t3-rim:  #F6F8FC;                 /* flat, no gradient   */
  --t3-well: #E4EAF2;                 /* L* 92.5             */
  --t3-cut:  rgba(11,13,18,.22);
}

/* ---- the plate: a flat slab on a hard offset --------------------------- */
#w8-system .w8-area{
  box-shadow:
    inset 0 0 0 1px rgba(11,13,18,.18),
    0 2px 0 rgba(11,13,18,.10);
}

/* ---- the rim: one flat colour, cut with a solid 2px edge --------------- */
#w8-system .w8-dock{
  background: var(--t3-rim);
  border-bottom-color: var(--t3-cut);
  box-shadow: inset 0 -2px 0 #FFFFFF;
}
#w8-system .w8-tab:hover:not([aria-selected="true"]){
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(11,13,18,.12);
}

/* ---- the well: solid walls, no fade ------------------------------------ */
#w8-system .w8-canvas{
  box-shadow:
    inset 0 2px 0 rgba(11,13,18,.22),
    inset 2px 0 0 rgba(11,13,18,.12),
    inset -2px 0 0 rgba(11,13,18,.12),
    inset 0 -2px 0 #FFFFFF;
}
#w8-system .w8-tab[aria-selected="true"]{
  box-shadow:
    inset 0 2px 0 rgba(11,13,18,.22),
    inset 2px 0 0 rgba(11,13,18,.12),
    inset -2px 0 0 rgba(11,13,18,.12);
}

/* ---- a block: flat white on a hard 2px offset -------------------------- */
#w8-system .w8-step{
  box-shadow:
    inset 0 0 0 1px rgba(11,13,18,.17),
    0 2px 0 rgba(11,13,18,.13),
    0 3px 0 rgba(11,13,18,.05);
}

/* ---- every small part, flat ------------------------------------------- */
#w8-system .w8-li{
  border-top-color: rgba(11,13,18,.15);
  box-shadow: inset 0 1px 0 #FFFFFF;
}
#w8-system .w8-num s{
  background-image: linear-gradient(180deg,
    rgba(11,13,18,.20) 0 1px, #FFFFFF 1px 2px);   /* two solid bands, not a fade */
}
#w8-system .w8-num b{ box-shadow: 0 1px 0 #FFFFFF; }

#w8-system .w8-li li::before{
  background: #E4E9F1;
  box-shadow:
    inset 0 2px 0 rgba(11,13,18,.20),
    inset 0 0 0 1px rgba(11,13,18,.13),
    0 1px 0 #FFFFFF;
}
#w8-system .w8-dots i{
  background: rgba(11,13,18,.20);
  box-shadow: inset 0 1px 0 rgba(11,13,18,.26), 0 1px 0 #FFFFFF;
}
#w8-system .w8-dots i.on{
  background: var(--t3-sel);
  box-shadow: 0 1px 0 #FFFFFF;
}

/* the selected tab's inlay is a solid bar here, not a gradient */
#w8-system .w8-tab[aria-selected="true"]::before{
  background: var(--t3-sel);
  box-shadow: 0 1px 0 rgba(11,13,18,.35);
}

/* ==========================================================================
   THE PHONE
   ========================================================================== */
@media (max-width: 860px){
  #w8-system .w8-area{ box-shadow: none; }
  #w8-system .w8-canvas{
    box-shadow:
      inset 0 2px 0 rgba(11,13,18,.22),
      inset 0 -2px 0 #FFFFFF;
  }
}