/*
 * KIT PART: the ShareRing Me 3.0.5 document list in live type (About hero 4).
 * Markup and reasoning: inc/kit-app-docs.php.
 *
 * Every size is in design pixels of the Figma frame (402 wide) times --u, one
 * design pixel in container units, so the screen scales with whatever holds it
 * (a kit phone, any width) and stays crisp: it is type and vector, not a
 * raster. Colours and sizes are the Figma file's (nodes 1130:4909, 4716:11912).
 */

.srk-ad {
  --u: calc(100cqw / 402);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #F4F6FC;
  color: #141A2E;
  font-family: "Inter", "Inter Tight", system-ui, sans-serif;
  text-align: left;
  line-height: 1.2;
}

.srk-phone-screen:has(> .srk-ad) {
  container-type: inline-size;
}

/* The top: navy, the status bar, the logotype, the tabs. */
.srk-ad .srk-ad-top {
  position: relative;
  height: calc(196 * var(--u));
  padding: 0 calc(22 * var(--u));
  background: radial-gradient(120% 90% at 85% 0%, #2E3FA0 0%, rgba(46, 63, 160, 0) 60%), linear-gradient(180deg, #1C2A82 0%, #15205F 100%);
  color: #FFFFFF;
}

.srk-ad .srk-ad-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(50 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) 0;
}

.srk-ad .srk-ad-time {
  font-size: calc(17 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
}

.srk-ad .srk-ad-sys {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
}

.srk-ad .srk-ad-bars {
  display: flex;
  align-items: flex-end;
  gap: calc(2 * var(--u));
  height: calc(11 * var(--u));
}

.srk-ad .srk-ad-bars b {
  display: block;
  width: calc(3 * var(--u));
  border-radius: calc(1 * var(--u));
  background: #FFFFFF;
}

.srk-ad .srk-ad-bars b:nth-child(1) { height: 35%; }
.srk-ad .srk-ad-bars b:nth-child(2) { height: 55%; }
.srk-ad .srk-ad-bars b:nth-child(3) { height: 78%; }
.srk-ad .srk-ad-bars b:nth-child(4) { height: 100%; }

.srk-ad .srk-ad-batt {
  position: relative;
  display: block;
  width: calc(24 * var(--u));
  height: calc(11 * var(--u));
  border-radius: calc(3.5 * var(--u));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.55);
}

.srk-ad .srk-ad-batt::after {
  content: "";
  position: absolute;
  inset: calc(2 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #FFFFFF;
}

.srk-ad .srk-ad-brand {
  height: calc(64 * var(--u));
  display: flex;
  align-items: center;
}

/* The scene kit fills every image in a phone screen (.srk-phone-screen img): the logotype keeps its own box. */
.srk-ad .srk-ad-brand img {
  position: static;
  inset: auto;
  object-fit: contain;
  display: block;
  width: auto;
  height: calc(26 * var(--u));
}

.srk-ad .srk-ad-tabs {
  display: flex;
  justify-content: space-between;
  padding: calc(18 * var(--u)) calc(8 * var(--u)) 0;
  font-size: calc(17 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

.srk-ad .srk-ad-tabs .is-on {
  position: relative;
  color: #FFFFFF;
}

.srk-ad .srk-ad-tabs .is-on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-12 * var(--u));
  width: calc(42 * var(--u));
  height: calc(4 * var(--u));
  margin-left: calc(-21 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #3E7BFA;
}

/* The white sheet the documents sit on. */
.srk-ad .srk-ad-sheetwrap {
  position: relative;
  margin-top: calc(-8 * var(--u));
  padding: calc(24 * var(--u)) calc(16 * var(--u)) 0;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background: #F4F6FC;
}

.srk-ad .srk-ad-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(12 * var(--u));
}

/* A document: the folder outline (one SVG path) with one sheet behind its lower edge. */
.srk-ad .srk-ad-doc {
  --tone: #2B5BE0;
  --tint: #E6EEFF;
  --edge: #C8D6F6;
  --tile: #E3EBFF;
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 366 / 150;
  margin: 0;
  padding: calc(44 * var(--u)) calc(16 * var(--u)) calc(13 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
}

.srk-ad .srk-ad-doc--violet { --tone: #7646DD; --tint: #F1EAFF; --edge: #DDCFFA; --tile: #EFE6FF; }
.srk-ad .srk-ad-doc--green { --tone: #1C9852; --tint: #E3F6EA; --edge: #BFE7CE; --tile: #DDF4E6; }

.srk-ad .srk-ad-folder,
.srk-ad .srk-ad-sheet {
  position: absolute;
  z-index: -1;
  overflow: visible;
}

.srk-ad .srk-ad-folder {
  inset: 0;
  width: 100%;
  height: 100%;
}

.srk-ad .srk-ad-folder path {
  fill: color-mix(in srgb, var(--tint) 42%, #FFFFFF);
  stroke: var(--edge);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.srk-ad .srk-ad-sheet {
  left: 56%;
  top: calc(-6 * var(--u));
  width: 40%;
  height: auto;
  z-index: -2;
}

.srk-ad .srk-ad-sheet path {
  fill: color-mix(in srgb, var(--tint) 70%, #FFFFFF);
  stroke: var(--edge);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.srk-ad .srk-ad-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
}

.srk-ad .srk-ad-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--tile);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--edge);
  color: var(--tone);
}

.srk-ad .srk-ad-ic svg {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}

.srk-ad .srk-ad-name {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  min-width: 0;
  padding-top: calc(4 * var(--u));
}

.srk-ad .srk-ad-name b {
  font-size: calc(17 * var(--u));
  font-weight: 650;
  color: #141A2E;
  white-space: nowrap;
}

.srk-ad .srk-ad-name span {
  font-size: calc(13 * var(--u));
  color: #5B6378;
}

.srk-ad .srk-ad-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-top: calc(2 * var(--u));
  padding: calc(4 * var(--u)) calc(9 * var(--u)) calc(4 * var(--u)) calc(7 * var(--u));
  border-radius: 999px;
  font-size: calc(11.5 * var(--u));
  font-weight: 500;
  white-space: nowrap;
}

.srk-ad .srk-ad-badge b {
  font-weight: 700;
}

.srk-ad .srk-ad-badge svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

.srk-ad .srk-ad-badge--verified { background: #E1EAFF; color: #2557D6; }
.srk-ad .srk-ad-badge--checked { background: #DDF4E6; color: #18864A; }

.srk-ad .srk-ad-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(12.5 * var(--u));
  color: #5B6378;
}

.srk-ad .srk-ad-tag {
  padding: calc(3 * var(--u)) calc(9 * var(--u));
  border-radius: calc(5 * var(--u));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #D5DAE6;
  background: #FFFFFF;
  color: #3A4258;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
}

.srk-ad .srk-ad-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  width: max-content;
  margin: calc(16 * var(--u)) auto 0;
  padding: calc(9 * var(--u)) calc(18 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #FFFFFF;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #DCE1EC;
  color: #1E55D6;
  font-size: calc(16 * var(--u));
  font-weight: 600;
}

.srk-ad .srk-ad-add svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

/* The bottom bar: a white pill, the scan button raised in its middle. */
.srk-ad .srk-ad-nav {
  position: absolute;
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  bottom: calc(22 * var(--u));
  height: calc(62 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(20, 30, 80, 0.12);
  color: #A3AABB;
}

.srk-ad .srk-ad-nav span {
  display: grid;
  place-items: center;
}

.srk-ad .srk-ad-nav svg {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

.srk-ad .srk-ad-nav .is-on {
  color: #1E55D6;
}

.srk-ad .srk-ad-nav .srk-ad-scan {
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  border-radius: 50%;
  background: #2F6BF2;
  color: #FFFFFF;
}