/* PhoneFrame (js/phone.js). The screen is laid out in iPhone POINTS: the
 * screen is a size container and 1pt = 1/390 of its width, so the app's own
 * numbers from theme.ts (28pt titles, 16pt rows, 10pt button radius) are
 * written here as they are written there, and scale with the phone. */

.phone {
  position: relative;
  width: 100%;
  height: 100%;
}
.phone__frame {
  position: absolute;
  inset: 0;
  border-radius: 13.5% / 6.2%;
  padding: 3.4%;
  /* Graphite titanium: a lit rim, a darker band, the screen's black edge. */
  background: linear-gradient(145deg, #4a5059 0%, #23272d 18%, #15181c 50%, #2a2f36 82%, #50565f 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    inset 0 0 0 5px #0b0d10,
    0 40px 70px -30px rgba(12, 14, 17, 0.55),
    0 18px 30px -18px rgba(12, 14, 17, 0.5);
}
.phone__btn {
  position: absolute;
  width: 1.1%;
  background: #2a2f36;
  border-radius: 2px;
}
.phone__btn--a {
  left: -0.8%;
  top: 17%;
  height: 4%;
}
.phone__btn--b {
  left: -0.8%;
  top: 25%;
  height: 7.5%;
}
.phone__btn--c {
  right: -0.8%;
  top: 22%;
  height: 11%;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10.8% / 5%;
  overflow: hidden;
  background: var(--ci-graphite);
  container-type: size;
  color: var(--ci-on-graphite);
  font-family: var(--ci-sans);
  -webkit-font-smoothing: antialiased;
}
.phone__screen * {
  --pt: calc(100cqw / 390);
}
.phone__island {
  position: absolute;
  left: 50%;
  top: calc(var(--pt) * 11);
  width: calc(var(--pt) * 122);
  height: calc(var(--pt) * 35);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  z-index: 20;
}

.ph-view {
  position: absolute;
  inset: 0;
}
.ph-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 15;
  pointer-events: none;
}

/* ---- status bar ---- */
.ph-status {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--pt) * 54);
  padding: calc(var(--pt) * 19) calc(var(--pt) * 30) 0 calc(var(--pt) * 44);
  display: flex;
  justify-content: space-between;
  z-index: 10;
  font-size: calc(var(--pt) * 16.5);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ph-status__icons {
  display: flex;
  gap: calc(var(--pt) * 6);
  align-items: center;
}
.ph-status svg {
  fill: currentColor;
  width: auto;
  height: calc(var(--pt) * 12);
}

/* ---- camera (the system camera, as the walk-round opens it) ---- */
.ph-cam {
  background: #000;
}
.ph-cam__finder {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pt) * 104);
  height: calc(var(--pt) * 520);
  overflow: hidden;
}
.ph-cam__finder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}
.ph-cam__grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.28) 0 calc(33.33% + 0.5px), transparent 0 calc(66.66% - 0.5px), rgba(255, 255, 255, 0.28) 0 calc(66.66% + 0.5px), transparent 0),
    linear-gradient(0deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.28) 0 calc(33.33% + 0.5px), transparent 0 calc(66.66% - 0.5px), rgba(255, 255, 255, 0.28) 0 calc(66.66% + 0.5px), transparent 0);
}
.ph-cam__focus {
  position: absolute;
  left: 50%;
  top: 62%;
  width: calc(var(--pt) * 84);
  height: calc(var(--pt) * 84);
  transform: translate(-50%, -50%);
  border: 1.5px solid #ffd60a;
  opacity: 0;
}
.ph-cam__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--pt) * 220);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pt) * 22);
  padding-top: calc(var(--pt) * 18);
}
.ph-cam__mode {
  font-size: calc(var(--pt) * 13);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffd60a;
}
.ph-cam__shutter {
  position: relative;
  width: calc(var(--pt) * 74);
  height: calc(var(--pt) * 74);
  border-radius: 50%;
  border: calc(var(--pt) * 5) solid #fff;
}
.ph-cam__shutter span {
  position: absolute;
  inset: calc(var(--pt) * 4);
  border-radius: 50%;
  background: #fff;
}

/* ---- the app ---- */
.ph-app {
  background: var(--ci-graphite);
  /* The app's backdrop: one soft pool of brand green at the top. */
  background-image: radial-gradient(120% 60% at 42% -8%, rgba(53, 199, 122, 0.14), rgba(53, 199, 122, 0) 64%);
}
.ph-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pt) * 58);
  height: calc(var(--pt) * 48);
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 14);
  padding: 0 calc(var(--pt) * 16);
  z-index: 6;
}
.ph-back {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pt) * 6);
  height: calc(var(--pt) * 40);
  padding: 0 calc(var(--pt) * 14) 0 calc(var(--pt) * 12);
  border-radius: 999px;
  font-size: calc(var(--pt) * 16);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.ph-back svg {
  width: calc(var(--pt) * 9);
  height: auto;
}
.ph-nav__title {
  font-size: calc(var(--pt) * 20);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ph-port {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pt) * 114);
  bottom: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--pt) * 14));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--pt) * 14));
}
.ph-scroll {
  padding: calc(var(--pt) * 8) calc(var(--pt) * 16) 0;
  will-change: transform;
}
.ph-scroll__end {
  height: calc(var(--pt) * 140);
}

/* Glass card: the portal's chrome glass, as the app draws it (glassStyle). */
.ph-card {
  position: relative;
  border-radius: calc(var(--pt) * 12);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 calc(var(--pt) * 10) calc(var(--pt) * 22) calc(var(--pt) * -12) rgba(0, 0, 0, 0.6);
  margin-bottom: calc(var(--pt) * 10);
}
.ph-eyebrow {
  font-size: calc(var(--pt) * 11);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ci-on-graphite-3);
}
.ph-eyebrow--block {
  display: block;
  position: relative;
  height: calc(var(--pt) * 16);
  margin: calc(var(--pt) * 16) 0 calc(var(--pt) * 8) calc(var(--pt) * 4);
}

.ph-ident {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 3);
  padding: calc(var(--pt) * 14) calc(var(--pt) * 16);
}
.ph-ident__name {
  font-size: calc(var(--pt) * 22);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ph-ident__sub {
  font-size: calc(var(--pt) * 12.5);
  color: var(--ci-on-graphite-3);
}

/* Photo row: thumbnail, title, the question it answers, its status. */
.ph-photo {
  display: flex;
  gap: calc(var(--pt) * 12);
  padding: calc(var(--pt) * 10);
}
.ph-photo__thumb {
  position: relative;
  flex: none;
  width: calc(var(--pt) * 62);
  height: calc(var(--pt) * 62);
  border-radius: calc(var(--pt) * 8);
  overflow: hidden;
  background: var(--ci-graphite-raised);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ph-photo__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
  opacity: 0;
}
.ph-photo__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ci-on-graphite-3);
}
.ph-photo__empty svg {
  width: calc(var(--pt) * 22);
  height: auto;
}
.ph-photo__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: calc(var(--pt) * 2);
}
.ph-photo__title {
  font-size: calc(var(--pt) * 16);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ph-photo__desc {
  font-size: calc(var(--pt) * 12.5);
  line-height: 1.35;
  color: var(--ci-on-graphite-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ph-photo__status {
  position: relative;
  height: calc(var(--pt) * 17);
  font-size: calc(var(--pt) * 12.5);
  font-weight: 600;
}
.ph-photo__status--idle {
  color: var(--ci-on-graphite-4);
  font-weight: 500;
}
.ph-photo__status .ph-swap__a {
  color: var(--ci-copper);
}
.ph-photo__status .ph-swap__b {
  color: var(--ci-green);
}
.ph-dots {
  display: inline-block;
  width: calc(var(--pt) * 7);
  height: calc(var(--pt) * 7);
  margin-right: calc(var(--pt) * 6);
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  vertical-align: -1px;
  animation: ph-spin 0.8s linear infinite;
}
@keyframes ph-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Two states in one slot, cross-faded by the timeline. */
.ph-swap {
  position: relative;
  display: inline-block;
}
.ph-swap__a,
.ph-swap__b {
  white-space: nowrap;
}
.ph-swap__b {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/* ---- question group card (QuestionGroupCard) ---- */
.ph-group {
  padding: calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 10);
}
.ph-group__head {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  margin-bottom: calc(var(--pt) * 4);
}
.ph-group__icon {
  color: var(--ci-on-graphite-3);
  display: grid;
}
.ph-group__icon svg {
  width: calc(var(--pt) * 19);
  height: auto;
}
.ph-group__title {
  flex: 1;
  font-size: calc(var(--pt) * 15);
  font-weight: 700;
}
.ph-chip {
  font-size: calc(var(--pt) * 12);
  font-weight: 800;
}
.ph-chip .ph-swap__a,
.ph-chip .ph-swap__b {
  display: inline-block;
  padding: calc(var(--pt) * 4) calc(var(--pt) * 8);
  border-radius: calc(var(--pt) * 6);
}
.ph-chip .ph-swap__b {
  left: auto;
  right: 0;
}
.ph-chip--neutral {
  color: var(--ci-on-graphite-3);
  background: var(--ci-graphite);
}
.ph-chip--good {
  color: var(--ci-green);
  background: var(--ci-graphite-raised);
}
.ph-q {
  position: relative;
  padding: calc(var(--pt) * 9) 0;
  border-top: 0.5px solid var(--ci-graphite-hair);
}
.ph-q__flash {
  position: absolute;
  inset: 0 calc(var(--pt) * -12);
  background: linear-gradient(90deg, rgba(53, 199, 122, 0.2), rgba(53, 199, 122, 0.04));
  opacity: 0;
}
.ph-q__text {
  position: relative;
  font-size: calc(var(--pt) * 14);
}
.ph-q__controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  margin-top: calc(var(--pt) * 7);
}
.ph-state {
  position: relative;
  padding: calc(var(--pt) * 6) calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 8);
  border: 1px solid var(--ci-graphite-hair);
  background: var(--ci-graphite-surface);
  font-size: calc(var(--pt) * 13);
}
/* The answered state: segmentOn fill, a green border, bold (stateGood). */
.ph-state__on {
  position: absolute;
  inset: -1px;
  display: grid;
  place-items: center;
  border-radius: inherit;
  border: 1px solid var(--ci-green);
  background: var(--ci-graphite-segment);
  font-weight: 700;
  opacity: 0;
}
.ph-add {
  padding: calc(var(--pt) * 6) calc(var(--pt) * 10);
  font-size: calc(var(--pt) * 13);
  font-weight: 700;
  color: var(--ci-green);
}
.ph-bulk {
  display: flex;
  gap: calc(var(--pt) * 8);
  margin-top: calc(var(--pt) * 8);
  overflow: hidden;
}
.ph-btn2 {
  position: relative;
  flex: 1;
  text-align: center;
  padding: calc(var(--pt) * 10) 0;
  border-radius: calc(var(--pt) * 10);
  font-size: calc(var(--pt) * 14);
  font-weight: 600;
  background: var(--ci-graphite-surface);
  box-shadow: inset 0 0 0 1px var(--ci-graphite-edge);
}
/* The inspector's tap: copper, because it is his decision, not the app's. */
.ph-tap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px var(--ci-copper),
    0 0 calc(var(--pt) * 16) rgba(224, 160, 58, 0.45);
  background: rgba(224, 160, 58, 0.12);
  opacity: 0;
}

/* ---- the action bar and the roof-done moment ---- */
.ph-actionbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(var(--pt) * 10) calc(var(--pt) * 16) calc(var(--pt) * 34);
  background: rgba(19, 21, 25, 0.9);
  border-top: 0.5px solid var(--ci-graphite-hair);
  /* Off the bottom of the screen until the timeline brings it up (GSAP owns
     the transform; a CSS one here would fight it). */
}
.ph-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(var(--pt) * 54);
  border-radius: calc(var(--pt) * 10);
  color: var(--ci-on-green);
  background: linear-gradient(180deg, var(--ci-green-hi) 0%, var(--ci-green) 48%, var(--ci-green-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 calc(var(--pt) * 8) calc(var(--pt) * 20) calc(var(--pt) * -8) rgba(53, 199, 122, 0.55);
}
.ph-primary b {
  font-size: calc(var(--pt) * 14.5);
  font-weight: 600;
}

.ph-primary small {
  font-size: calc(var(--pt) * 10.5);
  font-weight: 500;
  color: var(--ci-on-green-soft);
}

/* ---- controller: picker rows (SectionHeader "Controller") ---- */
.ph-picks {
  padding: calc(var(--pt) * 4) calc(var(--pt) * 12);
}
.ph-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  min-height: calc(var(--pt) * 46);
  border-top: 0.5px solid var(--ci-graphite-hair);
}
.ph-pick:first-child {
  border-top: 0;
}
.ph-pick__label {
  position: relative;
  flex: 1;
  font-size: calc(var(--pt) * 14);
  color: var(--ci-on-graphite-2);
}
.ph-pick__value {
  position: relative;
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
}
.ph-pick__value .ph-swap__a {
  color: var(--ci-on-graphite-4);
}
.ph-pick__value .ph-swap__b {
  left: auto;
  right: 0;
  color: var(--ci-green);
}
.ph-pick__chev {
  position: relative;
  color: var(--ci-on-graphite-4);
  display: grid;
}
.ph-pick__chev svg {
  width: calc(var(--pt) * 7);
  height: auto;
}
.ph-picks__hint {
  display: block;
  padding: calc(var(--pt) * 10) 0 calc(var(--pt) * 2);
  border-top: 0.5px solid var(--ci-graphite-hair);
  font-size: calc(var(--pt) * 11);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ci-on-graphite-3);
}

/* ---- the data plate: its photo slot, and the details box, open ---- */
.ph-photo__status--plate > .ph-swap__a {
  color: var(--ci-on-graphite-4);
  font-weight: 500;
}
.ph-photo__status--plate > .ph-swap__b:nth-child(2) {
  color: var(--ci-copper);
}
/* Both notes in one cell, so the box is as tall as the longer one. */
.ph-plate__note {
  display: grid;
  margin: calc(var(--pt) * 2) 0 calc(var(--pt) * 6);
  font-size: calc(var(--pt) * 12);
  line-height: 1.35;
  color: var(--ci-on-graphite-3);
}
.ph-plate__note > span {
  grid-area: 1 / 1;
  position: static;
  white-space: normal;
}
.ph-pick--plate {
  min-height: calc(var(--pt) * 42);
}
.ph-pick--plate .ph-pick__value {
  font-size: calc(var(--pt) * 14.5);
}

/* ---- report assembly ---- */
.ph-guide {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 5);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 14);
  background: linear-gradient(160deg, rgba(53, 199, 122, 0.14), rgba(53, 199, 122, 0.05));
  box-shadow: inset 0 0 0 1px rgba(53, 199, 122, 0.28);
}
.ph-guide__title {
  font-size: calc(var(--pt) * 15);
  font-weight: 700;
}
.ph-guide__body {
  font-size: calc(var(--pt) * 12.5);
  line-height: 1.4;
  color: var(--ci-on-graphite-2);
}
.ph-switchrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--pt) * 12) calc(var(--pt) * 14);
  font-size: calc(var(--pt) * 14.5);
}
.ph-switch {
  position: relative;
  width: calc(var(--pt) * 50);
  height: calc(var(--pt) * 30);
  border-radius: 999px;
  background: var(--ci-green);
}
.ph-switch b {
  position: absolute;
  right: calc(var(--pt) * 2);
  top: calc(var(--pt) * 2);
  width: calc(var(--pt) * 26);
  height: calc(var(--pt) * 26);
  border-radius: 50%;
  background: #fff;
}
.ph-genbtn {
  position: relative;
  display: block;
  height: calc(var(--pt) * 48);
  margin: calc(var(--pt) * 4) 0 calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 10);
  background: var(--ci-graphite-surface);
  box-shadow: inset 0 0 0 1px var(--ci-graphite-edge);
  font-size: calc(var(--pt) * 14.5);
  font-weight: 600;
}
.ph-genbtn .ph-swap__a,
.ph-genbtn .ph-swap__b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.ph-report {
  opacity: 0;
}
.ph-seg {
  display: flex;
  padding: calc(var(--pt) * 3);
  border-radius: calc(var(--pt) * 9);
  background: rgba(0, 0, 0, 0.3);
  font-size: calc(var(--pt) * 12.5);
  font-weight: 600;
}
.ph-seg span {
  flex: 1;
  text-align: center;
  padding: calc(var(--pt) * 7) 0;
  border-radius: calc(var(--pt) * 7);
  color: var(--ci-on-graphite-3);
}
.ph-seg .is-on {
  background: var(--ci-graphite-segment);
  color: var(--ci-on-graphite);
}
.ph-sec {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 12);
}
.ph-sec__title {
  font-size: calc(var(--pt) * 15);
  font-weight: 700;
}
.ph-sec__label {
  font-size: calc(var(--pt) * 11);
  color: var(--ci-on-graphite-3);
}
.ph-sec__text {
  padding: calc(var(--pt) * 9) calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 8);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px var(--ci-graphite-edge);
  font-size: calc(var(--pt) * 12.5);
  line-height: 1.45;
  color: var(--ci-on-graphite-2);
}
.ph-sec__btns {
  display: flex;
  gap: calc(var(--pt) * 8);
  margin-top: calc(var(--pt) * 6);
}
.ph-btn2--sm {
  padding: calc(var(--pt) * 8) 0;
  font-size: calc(var(--pt) * 12.5);
}
.ph-sec__accept {
  position: relative;
  flex: 1;
  height: calc(var(--pt) * 34);
  font-size: calc(var(--pt) * 12.5);
  font-weight: 600;
}
.ph-sec__accept .ph-swap__a,
.ph-sec__accept .ph-swap__b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: calc(var(--pt) * 10);
}
.ph-sec__accept .ph-swap__a {
  color: var(--ci-on-green);
  background: linear-gradient(180deg, var(--ci-green-hi) 0%, var(--ci-green) 48%, var(--ci-green-lo) 100%);
}
.ph-sec__accept .ph-swap__b {
  background: var(--ci-graphite-surface);
  box-shadow: inset 0 0 0 1px var(--ci-graphite-edge);
}

/* ---- the inspection hub ---- */
.ph-hub__sub {
  display: block;
  margin: calc(var(--pt) * 2) 0 calc(var(--pt) * 10) calc(var(--pt) * 4);
  font-size: calc(var(--pt) * 12.5);
  color: var(--ci-on-graphite-3);
}
.ph-rule {
  height: calc(var(--pt) * 4);
  border-radius: 999px;
  background: var(--ci-graphite-raised);
  overflow: hidden;
  margin-bottom: calc(var(--pt) * 12);
}
.ph-rule i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ci-green);
}
.ph-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--pt) * 8);
}
.ph-kpi {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 10) calc(var(--pt) * 12);
}
.ph-kpi small {
  font-size: calc(var(--pt) * 10.5);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ci-on-graphite-3);
}
.ph-kpi b {
  font-size: calc(var(--pt) * 22);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ph-kpi b span {
  font-size: calc(var(--pt) * 14);
  color: var(--ci-on-graphite-3);
}
.ph-hublist {
  padding: 0 calc(var(--pt) * 12);
}
.ph-hubrow {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 12);
  min-height: calc(var(--pt) * 68);
  border-top: 0.5px solid var(--ci-graphite-hair);
}
.ph-hubrow:first-child {
  border-top: 0;
}
.ph-hubrow__icon {
  color: var(--ci-on-graphite-3);
  display: grid;
}
.ph-hubrow__icon svg {
  width: calc(var(--pt) * 20);
  height: auto;
}
.ph-hubrow__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 2);
}
.ph-hubrow__body b {
  font-size: calc(var(--pt) * 16);
  font-weight: 500;
}
.ph-hubrow__body small {
  font-size: calc(var(--pt) * 12.5);
  color: var(--ci-on-graphite-3);
}

.ph-actionbar--hub {
  display: flex;
  gap: calc(var(--pt) * 10);
}
.ph-actionbar--hub .ph-primary {
  flex: 1;
}
/* Export XML: the secondary button, and its ReadyRing (readyRing.tsx). */
.ph-export {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(var(--pt) * 54);
  border-radius: calc(var(--pt) * 10);
  box-shadow: inset 0 0 0 1px var(--ci-graphite-edge);
}
.ph-export small {
  position: relative;
  font-size: calc(var(--pt) * 10.5);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ci-on-graphite-4);
}
.ph-export__label {
  position: relative;
  height: calc(var(--pt) * 18);
  font-size: calc(var(--pt) * 14.5);
  font-weight: 600;
}
.ph-export__label .ph-swap__b {
  left: 50%;
  transform: translateX(-50%);
}
/* The ring: a green beam turned behind a mask the colour of the bar, so only
 * a 2pt edge lights; a steady green at 35% keeps the edge between the lights;
 * a 900 ms flash on arrival. Off until the button is ready. */
.ph-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  background: rgba(53, 199, 122, 0.35);
}
.ph-ring__beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pt) * 420);
  height: calc(var(--pt) * 420);
  margin: calc(var(--pt) * -210) 0 0 calc(var(--pt) * -210);
  background: linear-gradient(90deg, transparent 42%, var(--ci-green-hi) 50%, transparent 58%);
}
.ph-ring__mask {
  position: absolute;
  inset: calc(var(--pt) * 2);
  border-radius: calc(var(--pt) * 8);
  background: var(--ci-graphite);
}
.ph-ring__flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: calc(var(--pt) * 3) solid var(--ci-green-hi);
  background: rgba(53, 199, 122, 0.18);
  opacity: 0;
}
.ph-export.is-ready {
  box-shadow: none;
}
.ph-export.is-ready .ph-ring {
  opacity: 1;
}
.ph-export.is-ready .ph-ring__beam {
  animation: ph-turn var(--ci-ring-ms) linear infinite;
}
.ph-export.is-ready .ph-ring__flash {
  animation: ph-flash var(--ci-flash-ms) var(--ci-ease-out-quad) both;
}
@keyframes ph-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ph-flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ---- the system alert that ends the export ---- */
.ph-alert {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
}
.ph-alert__card {
  width: calc(var(--pt) * 300);
  padding: calc(var(--pt) * 20) calc(var(--pt) * 20) calc(var(--pt) * 16);
  border-radius: calc(var(--pt) * 28);
  background: rgba(44, 46, 52, 0.96);
  box-shadow: 0 calc(var(--pt) * 20) calc(var(--pt) * 40) rgba(0, 0, 0, 0.5);  text-align: center; /* as iOS lays out an alert */
}
.ph-alert__card b {
  display: block;
  font-size: calc(var(--pt) * 17);
  font-weight: 700;
}
.ph-alert__card p {
  margin: calc(var(--pt) * 8) 0 calc(var(--pt) * 16);
  font-size: calc(var(--pt) * 13.5);
  line-height: 1.38;
  color: var(--ci-on-graphite-2);
  overflow-wrap: anywhere;
}
.ph-alert__ok {
  display: grid;
  place-items: center;
  height: calc(var(--pt) * 46);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: calc(var(--pt) * 16);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .ph-dots {
    animation: none;
  }
  /* The app's own rule: with reduced motion the ready state is a steady green
     edge. The state still shows; only the movement goes. */
  .ph-export.is-ready .ph-ring {
    background: var(--ci-green);
  }
  .ph-export.is-ready .ph-ring__beam,
  .ph-export.is-ready .ph-ring__flash {
    animation: none;
    opacity: 0;
  }
}

/* A report section read and accepted as the list scrolls past. */
.ph-secrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pt) * 8);
  padding: calc(var(--pt) * 12);
}
.ph-secrow .ph-sec__title {
  font-size: calc(var(--pt) * 13.5);
  font-weight: 600;
}
.ph-secrow__state {
  position: relative;
  flex: none;
  font-size: calc(var(--pt) * 12);
  font-weight: 700;
}
.ph-secrow__state .ph-swap__a {
  color: var(--ci-on-graphite-3);
}
.ph-secrow__state .ph-swap__b {
  left: auto;
  right: 0;
  color: var(--ci-green);
}