/* Skyline admin phone prototype
   Built against the public v161 page. Everything is scoped to #easy-editing. */

#easy-editing.admin-mobile {
  --admin-orange: #ff6a1a;
  --admin-orange-bright: #ff7a00;
  --admin-orange-deep: #df4500;
  --admin-orange-soft: rgba(255, 106, 26, .14);
  --admin-orange-line: rgba(255, 106, 26, .82);
  --admin-cream: #f6f0e8;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(320px, .72fr) minmax(600px, 1.28fr);
  gap: clamp(54px, 6.5vw, 104px);
  min-height: 900px;
  background:
    radial-gradient(circle at 78% 50%, rgba(255, 106, 26, .075), transparent 30%),
    radial-gradient(circle at 65% 16%, rgba(255, 189, 69, .035), transparent 24%),
    var(--ink);
}

#easy-editing.admin-mobile::before {
  position: absolute;
  z-index: -1;
  right: -12%;
  bottom: -45%;
  width: 720px;
  height: 720px;
  content: "";
  border: 1px solid rgba(255, 106, 26, .11);
  border-radius: 50%;
  box-shadow:
    0 0 0 85px rgba(255, 106, 26, .018),
    0 0 0 170px rgba(255, 106, 26, .012);
}

#easy-editing .admin-intro {
  position: relative;
  z-index: 2;
}

#easy-editing .admin-intro h2 {
  margin: 26px 0 28px;
}

#easy-editing .admin-intro > p:last-of-type {
  max-width: 520px;
  margin-bottom: 0;
  color: #c9cbc8;
  font-size: 16px;
  line-height: 1.75;
}

#easy-editing .admin-assurances {
  display: grid;
  gap: 0;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

#easy-editing .admin-assurances li {
  display: grid;
  grid-template-columns: 34px 108px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 55px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

#easy-editing .admin-assurances span {
  color: var(--admin-orange);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

#easy-editing .admin-assurances b {
  color: #fff;
  font-size: 12px;
}

#easy-editing .admin-assurances small {
  color: #8f9490;
  font-size: 11px;
  line-height: 1.35;
}

#easy-editing .admin-graphic.admin-phone-experience {
  position: relative;
  min-height: 720px;
  padding: 24px 24px 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255, 106, 26, .09), transparent 47%),
    #131513;
  box-shadow: 0 40px 110px rgba(0, 0, 0, .42);
}

#easy-editing .admin-phone-experience::before {
  position: absolute;
  inset: 86px 50% auto;
  width: 420px;
  height: 420px;
  content: "";
  transform: translateX(-50%);
  border: 1px solid rgba(255, 106, 26, .08);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(255, 106, 26, .06);
  pointer-events: none;
}

#easy-editing .admin-step-tabs {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

#easy-editing .admin-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 10px 9px;
  cursor: pointer;
  text-align: left;
  color: #8d918d;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

#easy-editing .admin-step:hover {
  color: #fff;
  transform: translateY(-1px);
}

#easy-editing .admin-step:focus-visible {
  outline: 2px solid var(--admin-orange-bright);
  outline-offset: 2px;
}

#easy-editing .admin-step::after {
  position: absolute;
  right: -7px;
  top: 50%;
  width: 6px;
  height: 1px;
  content: "";
  background: rgba(255, 255, 255, .18);
}

#easy-editing .admin-step:last-child::after {
  display: none;
}

#easy-editing .admin-step > span {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #aaa;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 850;
}

#easy-editing .admin-step b {
  align-self: end;
  font-size: 11px;
  line-height: 1.1;
}

#easy-editing .admin-step small {
  align-self: start;
  overflow: hidden;
  color: #6f736f;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#easy-editing .admin-step.is-active {
  color: #fff;
  border-color: rgba(255, 106, 26, .4);
  background: rgba(255, 106, 26, .09);
}

#easy-editing .admin-step.is-active > span {
  color: #111;
  border-color: var(--admin-orange-bright);
  background: var(--admin-orange-bright);
  box-shadow: 0 0 0 5px rgba(255, 106, 26, .1);
}

#easy-editing .admin-step.is-active small {
  color: #c58a6f;
}

#easy-editing .admin-phone-stage {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 594px;
  place-items: center;
  padding: 24px 0 0;
  perspective: 1200px;
}

#easy-editing .admin-phone {
  position: relative;
  z-index: 3;
  width: min(302px, 54%);
  aspect-ratio: 9 / 18.7;
  padding: 8px;
  transform: rotateY(-10deg) rotateZ(-1.2deg);
  transform-origin: 50% 52%;
  transform-style: preserve-3d;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 42px;
  background: linear-gradient(145deg, #555a57 0%, #1e201f 12%, #070807 62%, #353936 100%);
  box-shadow:
    5px 1px 0 #404542,
    12px 3px 0 #171917,
    18px 8px 26px rgba(0, 0, 0, .46),
    0 35px 80px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(0, 0, 0, .8),
    inset 0 0 0 1px rgba(255, 255, 255, .13);
}

#easy-editing .admin-phone::before,
#easy-editing .admin-phone::after {
  position: absolute;
  left: -3px;
  width: 3px;
  content: "";
  border-radius: 3px 0 0 3px;
  background: #353936;
}

#easy-editing .admin-phone::before {
  top: 112px;
  height: 55px;
  box-shadow: 0 69px 0 #353936;
}

#easy-editing .admin-phone::after {
  right: -3px;
  left: auto;
  top: 152px;
  height: 78px;
  border-radius: 0 3px 3px 0;
}

#easy-editing .admin-phone-hardware {
  position: absolute;
  z-index: 20;
  top: 17px;
  left: 50%;
  display: flex;
  width: 92px;
  height: 23px;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  background: #050605;
}

#easy-editing .admin-phone-hardware i {
  width: 29px;
  height: 4px;
  border-radius: 999px;
  background: #171a18;
}

#easy-editing .admin-phone-hardware span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #101b21;
  box-shadow: inset 0 0 2px #477182;
}

#easy-editing .admin-phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  color: #f7f4ef;
  border-radius: 35px;
  background: #111310;
}

#easy-editing .admin-phone-status {
  position: absolute;
  z-index: 18;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  color: rgba(255, 255, 255, .7);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .03em;
}

#easy-editing .admin-phone-status > span:last-child {
  display: flex;
  align-items: end;
  gap: 2px;
}

#easy-editing .admin-phone-status i {
  width: 8px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 2px;
}

#easy-editing .admin-phone-status i:first-child {
  width: 2px;
  height: 3px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .65);
  box-shadow: 3px -1px 0 rgba(255, 255, 255, .65), 6px -3px 0 rgba(255, 255, 255, .65);
}

#easy-editing .admin-phone-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: admin-panel-in .42s cubic-bezier(.2, .75, .25, 1) both;
}

#easy-editing .admin-phone-panel[hidden] {
  display: none !important;
}

@keyframes admin-panel-in {
  from { opacity: 0; transform: translateX(12px) scale(.99); }
  to { opacity: 1; transform: none; }
}

#easy-editing .login-panel {
  display: grid;
  place-items: center;
  padding: 42px 18px 18px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 106, 26, .15), transparent 35%),
    linear-gradient(160deg, #191b17, #0d0f0d 72%);
}

#easy-editing .phone-login-glow {
  position: absolute;
  top: 62px;
  left: 50%;
  width: 185px;
  height: 185px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 106, 26, .13);
  border-radius: 50%;
  box-shadow: 0 0 55px rgba(255, 106, 26, .08), 0 0 0 32px rgba(255, 106, 26, .018);
}

#easy-editing .phone-login-card,
#easy-editing .phone-logout-card {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 25px 19px 22px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 21px;
  background: rgba(39, 38, 32, .92);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .48);
}

#easy-editing .phone-admin-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--admin-orange-bright);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

#easy-editing .phone-admin-kicker::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: var(--admin-orange-bright);
  box-shadow: 0 0 0 4px rgba(255, 106, 26, .12);
}

#easy-editing .phone-login-card h3,
#easy-editing .phone-logout-card h3 {
  margin: 13px 0 9px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}

#easy-editing .phone-login-card p,
#easy-editing .phone-logout-card p {
  margin: 0;
  color: #aaa79f;
  font-size: 9px;
  line-height: 1.55;
}

#easy-editing .phone-login-card p b {
  color: #e8e4dc;
}

#easy-editing .phone-login-button,
#easy-editing .phone-view-button {
  display: flex;
  min-height: 38px;
  margin: 19px 0 13px;
  align-items: center;
  justify-content: center;
  color: #140b05;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--admin-orange), #ff8c18);
  box-shadow: 0 9px 24px rgba(255, 106, 26, .16);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
}

#easy-editing .phone-login-card > small {
  display: block;
  color: #777a75;
  font-size: 7px;
  text-align: center;
}

#easy-editing .edit-panel {
  background: #2d292d;
}

#easy-editing .phone-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14, 10, 15, .45), rgba(25, 20, 28, .86)),
    radial-gradient(circle at 82% 36%, rgba(255, 106, 26, .18), transparent 30%),
    #28232b;
}

#easy-editing .phone-page-top {
  position: absolute;
  z-index: 4;
  top: 42px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#easy-editing .phone-page-top > span {
  color: #f6f1e9;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#easy-editing .phone-page-top > b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  color: var(--admin-orange-bright);
  border: 1px solid rgba(255, 106, 26, .5);
  border-radius: 999px;
  background: rgba(12, 12, 11, .72);
  font-size: 6px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#easy-editing .phone-page-top > b::before {
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--admin-orange-bright);
  box-shadow: 0 0 0 3px rgba(255, 106, 26, .13);
}

#easy-editing .phone-page-copy {
  position: relative;
  z-index: 3;
  padding: 92px 14px 0;
}

#easy-editing .phone-page-copy > small {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 4px 6px;
  color: #fff;
  border: 1px dashed var(--admin-orange-line);
  border-radius: 5px;
  font-size: 6px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#easy-editing .phone-editable {
  position: relative;
  border: 1.5px dashed var(--admin-orange-line);
  border-radius: 7px;
  box-shadow: 0 0 0 2px rgba(255, 106, 26, .035);
}

#easy-editing h3.phone-editable {
  margin: 0 0 9px;
  padding: 10px 29px 10px 8px;
  color: #fff7ee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .98;
}

#easy-editing p.phone-editable {
  margin: 0;
  padding: 8px 26px 8px 8px;
  color: #d8d2ca;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  line-height: 1.55;
}

#easy-editing .phone-editable i {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  color: #140b05;
  border-radius: 5px;
  background: var(--admin-orange-bright);
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-style: normal;
}

#easy-editing .phone-page-image {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
  top: 273px;
  height: 157px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(160deg, transparent 50%, rgba(0, 0, 0, .28) 51%),
    linear-gradient(135deg, #d45a20, #6c2526 35%, #1c2430 72%);
}

#easy-editing .phone-page-image i {
  position: absolute;
  top: 24px;
  right: 29px;
  width: 69px;
  height: 69px;
  border: 18px solid rgba(255, 187, 82, .78);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255, 127, 32, .36);
}

#easy-editing .phone-page-image span {
  position: absolute;
  left: -20px;
  bottom: -50px;
  width: 230px;
  height: 122px;
  transform: rotate(-9deg);
  border-radius: 50%;
  background: #11171a;
  box-shadow: 65px -22px 0 rgba(73, 30, 34, .65);
}

#easy-editing .phone-save-toast {
  position: absolute;
  z-index: 8;
  right: 13px;
  bottom: 78px;
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 7px;
  width: 164px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 106, 26, .38);
  border-radius: 10px;
  background: rgba(13, 15, 13, .94);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .42);
}

#easy-editing .phone-save-toast > span {
  grid-row: 1 / 3;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #130b05;
  border-radius: 50%;
  background: var(--admin-orange-bright);
  font-size: 11px;
  font-weight: 950;
}

#easy-editing .phone-save-toast b {
  color: #fff;
  font-size: 7px;
}

#easy-editing .phone-save-toast small {
  color: #8f928d;
  font-size: 6px;
}

#easy-editing .phone-admin-bar {
  position: absolute;
  z-index: 9;
  right: 7px;
  bottom: 8px;
  left: 7px;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(255, 106, 26, .33);
  border-radius: 17px;
  background: rgba(16, 17, 15, .97);
  box-shadow: 0 15px 30px rgba(0, 0, 0, .5);
}

#easy-editing .phone-admin-bar > span:not(.phone-admin-state) {
  flex: 1;
  padding: 8px 2px;
  color: #e6e2da;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: 5px;
  font-weight: 750;
  text-align: center;
  text-transform: uppercase;
}

#easy-editing .phone-admin-state {
  display: grid;
  grid-template-columns: 9px 1fr;
  min-width: 65px;
  color: #fff;
}

#easy-editing .phone-admin-state i {
  grid-row: 1 / 3;
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--admin-orange-bright);
  box-shadow: 0 0 0 4px rgba(255, 106, 26, .13);
}

#easy-editing .phone-admin-state small {
  color: #9c9f99;
  font-size: 5px;
}

#easy-editing .phone-admin-state b {
  color: var(--admin-orange-bright);
  font-size: 7px;
}

#easy-editing .logout-panel {
  display: grid;
  place-items: center;
  padding: 44px 18px 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 106, 26, .18), transparent 34%),
    linear-gradient(160deg, #191b17, #0d0f0d 72%);
}

#easy-editing .phone-logout-card {
  padding-top: 49px;
  text-align: center;
}

#easy-editing .phone-done-mark {
  position: absolute;
  top: -32px;
  left: 50%;
  display: grid;
  width: 64px;
  height: 64px;
  transform: translateX(-50%);
  place-items: center;
  color: #160b03;
  border: 6px solid #201b17;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff9a2e, var(--admin-orange));
  box-shadow: 0 14px 32px rgba(255, 106, 26, .2);
  font-size: 25px;
  font-weight: 950;
}

#easy-editing .phone-logout-card .phone-admin-kicker {
  justify-content: center;
}

#easy-editing .phone-view-button {
  gap: 10px;
}

#easy-editing .admin-phone-note {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 145px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 106, 26, .28);
  border-radius: 10px;
  background: rgba(18, 20, 18, .93);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
  opacity: .14;
  transition: opacity .25s ease, transform .25s ease;
}

#easy-editing .admin-phone-experience[data-active="login"] .note-login,
#easy-editing .admin-phone-experience[data-active="edit"] .note-edit,
#easy-editing .admin-phone-experience[data-active="edit"] .note-save,
#easy-editing .admin-phone-experience[data-active="logout"] .note-save {
  opacity: 1;
}

#easy-editing .admin-phone-note::after {
  position: absolute;
  content: "";
  border-top: 1px dashed var(--admin-orange-line);
}

#easy-editing .admin-phone-note b {
  color: #f0ece6;
  font-size: 8px;
  line-height: 1.25;
}

#easy-editing .admin-phone-note span {
  margin-top: 3px;
  color: #797d78;
  font-size: 7px;
  line-height: 1.25;
}

#easy-editing .note-login {
  top: 92px;
  left: 0;
}

#easy-editing .note-login::after {
  top: 50%;
  left: 100%;
  width: 44px;
  transform: rotate(7deg);
  transform-origin: left;
}

#easy-editing .note-edit {
  top: 245px;
  right: 0;
}

#easy-editing .note-edit::after {
  top: 50%;
  right: 100%;
  width: 46px;
  transform: rotate(-7deg);
  transform-origin: right;
}

#easy-editing .note-save {
  right: 8px;
  bottom: 65px;
}

#easy-editing .note-save::after {
  top: 50%;
  right: 100%;
  width: 52px;
  transform: rotate(8deg);
  transform-origin: right;
}

#easy-editing .admin-demo-caption {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 7px 0 0;
  color: #777c77;
  font-size: 9px;
  letter-spacing: .05em;
}

#easy-editing .admin-demo-caption span {
  color: var(--admin-orange-bright);
  font-size: 7px;
  box-shadow: 0 0 0 4px rgba(255, 106, 26, .09);
}

@media (max-width: 1180px) {
  #easy-editing.admin-mobile {
    grid-template-columns: minmax(290px, .64fr) minmax(540px, 1.36fr);
    gap: 44px;
  }

  #easy-editing .admin-phone-note {
    width: 126px;
  }

  #easy-editing .admin-phone {
    width: min(294px, 57%);
  }
}

@media (max-width: 1080px) {
  #easy-editing.admin-mobile {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #easy-editing .admin-intro {
    max-width: 760px;
  }

  #easy-editing .admin-graphic.admin-phone-experience {
    min-height: 720px;
  }

  #easy-editing .admin-phone {
    width: min(302px, 44%);
  }
}

@media (max-width: 760px) {
  #easy-editing.admin-mobile {
    gap: 44px;
  }

  #easy-editing .admin-intro > p:last-of-type {
    font-size: 15px;
    line-height: 1.7;
  }

  #easy-editing .admin-assurances li {
    grid-template-columns: 28px 98px 1fr;
  }

  #easy-editing .admin-graphic.admin-phone-experience {
    min-height: 0;
    padding: 14px 10px 16px;
    border-radius: 22px;
  }

  #easy-editing .admin-step-tabs {
    gap: 3px;
  }

  #easy-editing .admin-step {
    grid-template-columns: 24px 1fr;
    column-gap: 6px;
    padding: 8px 5px;
  }

  #easy-editing .admin-step > span {
    width: 24px;
    height: 24px;
  }

  #easy-editing .admin-step small {
    display: none;
  }

  #easy-editing .admin-step b {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 9px;
  }

  #easy-editing .admin-phone-stage {
    min-height: 586px;
    padding-top: 20px;
  }

  #easy-editing .admin-phone {
    width: min(296px, 86%);
    transform: rotateY(-7deg) rotateZ(-.75deg);
  }

  #easy-editing .admin-phone-note {
    display: none;
  }

  #easy-editing .admin-demo-caption {
    padding: 0 10px;
    font-size: 8px;
    text-align: center;
  }
}

@media (max-width: 390px) {
  #easy-editing .admin-assurances li {
    grid-template-columns: 26px 1fr;
    padding: 8px 0;
  }

  #easy-editing .admin-assurances small {
    grid-column: 2;
  }

  #easy-editing .admin-phone-stage {
    min-height: 548px;
  }

  #easy-editing .admin-phone {
    width: min(276px, 89%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #easy-editing .admin-phone-panel {
    animation: none;
  }
}

/* ============================================================================
   PHONE FACE — GLASS REFLECTION  —  added 2026-08-27, reworked same day
   ----------------------------------------------------------------------------
   The screen read as a flat dark rectangle: the phone BODY had shaped
   lighting (linear-gradient(145deg...) on .admin-phone, highlight top-left)
   but the glass over it had none, so the face looked printed on rather than
   lit.

   ONE band, one gradient. The first version had two bands plus a separate
   top-edge wash - softer, but it read as an effect. A single sheet of light
   with a HARD leading edge is what actually looks like glass: the straight
   line is the edge of whatever is being reflected, a window or a ceiling
   panel, and eyes read that instantly as a real reflection rather than a
   gloss applied to a picture.

   THE HARD LINE is the doubled stop - .10 white and transparent both at 34%.
   Two stops at the same position with no distance between them cannot ramp,
   so the colour changes in one pixel. Everything after it is a long, slow
   fall to nothing at 96%, so the band arrives sharply and dies away down the
   screen rather than stopping somewhere definite. Sharp in, soft out.

   ANGLE. Bands run perpendicular to a gradient's axis. 115deg points
   down-and-right, so the band runs bottom-left to top-right - the mirror of
   the first attempt, as asked. Note this now leans AGAINST the body's own
   145deg highlight rather than with it; kept because it looks better on the
   rotated face, but that is a deliberate break, not an oversight.

   Brightest stop is 5.5% white over panels that are #28232b and darker (was
   10%, toned down 2026-08-27 - "we just need a touch of it"). It is
   a reflection, not a shine.

   CONFINED TO THE TOP HALF by a mask, not by moving the gradient stops.
   The band runs on a 115deg axis, so pulling its stops in would have cut
   it off along that same diagonal - a second slanted edge, and the one
   hard line is the whole point. The mask fades vertically instead: full
   strength to 26% of the height, gone by 56%. The diagonal edge and its
   long fall are untouched, they simply stop existing below the midpoint.

   z-index 19: above .admin-phone-status (18) and the panels, below
   .admin-phone-hardware (20). pointer-events:none so nothing in the phone
   stops being clickable.

   TO REVERSE: delete this block.
   ========================================================================== */

#easy-editing .admin-phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 26%,
    rgba(0, 0, 0, .38) 44%,
    transparent 56%);
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 26%,
    rgba(0, 0, 0, .38) 44%,
    transparent 56%);
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 34%,
    rgba(255, 255, 255, .055) 34%,
    rgba(255, 255, 255, .04) 50%,
    rgba(255, 255, 255, .021) 68%,
    rgba(255, 255, 255, .008) 84%,
    transparent 96%);
}

/* ============================================================================
   ADMIN CARD — SCALES WITH VIEWPORT HEIGHT  —  added 2026-08-27
   ----------------------------------------------------------------------------
   Every vertical measurement in this section was a fixed pixel number, tuned
   for one window: section 900px, card 720px, stage 594px, phone 302px wide by
   an 9/18.7 aspect. On a shorter laptop the card ran past the fold; on a tall
   monitor it sat in the middle of a lot of empty ink. Now they are all vh, so
   the whole assembly keeps its proportions and its relationship to the fold
   at any height.

   SCOPED TO min-width:1081px ON PURPOSE - that is exactly where the section
   stops being two columns (see the max-width:1080px block above, which sets
   grid-template-columns:1fr). So this applies for as long as the layout is
   side by side, and the moment it stacks the existing rules take over
   untouched. Mobile is not affected by any of this.

   THE NUMBERS ARE THE OLD ONES, CONVERTED, not new ones invented. Each vh
   value reproduces the previous pixel value at a 900px-tall viewport, which
   is what they were designed against:

     section  900px = 100vh      card   720px = 80vh
     stage    594px = 66vh       phone  627px tall = 69vh
                                        (302px wide x 18.7/9)
     ring     420px = 46vh       ring top 86px = 9.5vh

   So at the height it was built for nothing moves at all; it only starts
   differing as the window gets shorter or taller. Every one is clamped top
   and bottom so a very short or very tall window cannot take it somewhere
   absurd.

   THE PHONE IS NOW SIZED BY HEIGHT, not width. It has aspect-ratio 9/18.7,
   so giving it a height and width:auto lets the ratio compute the width -
   the right way round for something whose whole job is to fit vertically.
   max-width:56% is the guard: if a narrow two-column window would make the
   computed width wider than its column, the ratio pulls the height back down
   instead of letting it overflow. That guard also supersedes the
   width:min(294px,57%) in the max-width:1180px block for the 1081-1180px
   overlap, which is intended - it is the same intent expressed in vh.

   TO REVERSE: delete this block. Every pixel value above is still in place
   and takes back over.
   ========================================================================== */

@media (min-width: 1081px) {

  #easy-editing.admin-mobile {
    min-height: clamp(740px, 100vh, 1060px);
  }

  #easy-editing .admin-graphic.admin-phone-experience {
    min-height: clamp(590px, 80vh, 880px);
  }

  #easy-editing .admin-phone-stage {
    min-height: clamp(470px, 66vh, 720px);
  }

  #easy-editing .admin-phone {
    width: auto;
    max-width: 56%;
    height: clamp(470px, 69vh, 745px);
  }

  /* The glow ring is positioned against the phone, so it scales with it. */
  #easy-editing .admin-phone-experience::before {
    inset: clamp(58px, 9.5vh, 118px) 50% auto;
    width: clamp(310px, 46vh, 540px);
    height: clamp(310px, 46vh, 540px);
  }
}


/* ============================================================================
   PHONE CALLOUT NOTES — BIGGER AND BRIGHTER  —  added 2026-08-28
   ----------------------------------------------------------------------------
   The three notes pinned outside the phone ("One secure code", "Tap any
   orange outline", "Already live") were 8px/7px in a 145px box at .14 opacity
   when inactive - small enough to read as decoration rather than as the
   captions they are. They carry the actual explanation of each step, so they
   are now sized to be read.

   WHAT CHANGED: b 8 -> 12.5px, span 7 -> 10.5px with a brighter grey, box
   145 -> 185px with more padding, and the resting opacity .14 -> .22 so the
   two inactive notes stay recessed without disappearing.

   WHY THE CONNECTOR LINES SHRANK: each note is pinned to a stage edge and
   grows INWARD, toward the phone. Measured on the live page at 1507px, the
   gap between a 145px note and the phone was 92px on the left and ~74px on
   the right, of which only 44-52px was drawn as dashes. Widening to 185px
   spends 40px of that gap, so the dashes are shortened by the same amount to
   land in the same place instead of running under the phone. Left has the
   most room and keeps its 44px.

   BELOW 1080px THESE ARE display:none (see the media query above), so this is
   desktop-only work; the 1180px block just holds a proportional width.
   ========================================================================== */

#easy-editing .admin-phone-note {
  width: 185px;
  padding: 13px 14px;
  border-color: rgba(255, 106, 26, .4);
  border-radius: 12px;
  opacity: .22;
}

#easy-editing .admin-phone-note b {
  font-size: 12.5px;
  line-height: 1.3;
}

#easy-editing .admin-phone-note span {
  margin-top: 4px;
  color: #9ba19a;
  font-size: 10.5px;
  line-height: 1.35;
}

#easy-editing .note-edit::after {
  width: 40px;
}

#easy-editing .note-save::after {
  width: 34px;
}

@media (max-width: 1180px) {
  #easy-editing .admin-phone-note {
    width: 162px;
  }

  #easy-editing .note-login::after {
    width: 30px;
  }

  #easy-editing .note-edit::after {
    width: 26px;
  }

  #easy-editing .note-save::after {
    width: 22px;
  }
}