/* Phone and small-tablet styles for usecases. Loaded only at max-width 900px or short touch screens; the desktop view never sees this file. */

/* Overview: one persona per row, the arrow on the right like any list link. */
@media (max-width: 600px) {
  .uc-cards {
    gap: 12px
  }
  .uc-card {
    padding: 20px 70px 22px 20px;
    border-radius: 12px
  }
  .uc-card h3 {
    font-size: 19px;
    margin-bottom: 6px
  }
  .uc-card p {
    font-size: 14px;
    line-height: 1.5
  }
  .uc-card>.icon {
    left: auto;
    right: 18px;
    top: calc(50% - 18px);
    bottom: auto;
    width: 36px;
    height: 36px;
    padding: 8px;
    border: 1px solid var(--line-medium);
    border-radius: 50%
  }
  .uc-card:hover>.icon {
    transform: translateX(3px)
  }
}

/* Persona hero: job one opens in the list below, so on a phone the hero keeps to the headline and the call to action. */
.uc-hero {
  grid-template-columns: minmax(0, 1fr)
}
.uc-hero>.uc-visual {
  display: none
}
/* With the hero to itself on a tablet or a landscape phone, the headline carries it. */
@media (min-width: 601px) {
  .uc-hero h1 {
    font-size: clamp(40px, 6.6vw, 58px)
  }
}

/* The flow: the standards line wraps beside its tick, the steps read top to bottom. */
.uc-standards {
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5
}
.uc-standards .icon {
  margin-top: 1px
}
.uc-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}
.uc-steps li {
  padding: 54px 20px 20px;
  font-size: 16px
}
.uc-steps li::before {
  top: 18px;
  left: 20px
}
@media (max-width: 600px) {
  .uc-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px
  }
  /* The number sits beside its step; the pseudo-element is the first grid cell. */
  .uc-steps li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    min-height: 62px;
    padding: 14px 16px;
    font-size: 15.5px;
    line-height: 1.4
  }
  .uc-steps li::before {
    position: static
  }
}

/* What it does for you: an accordion. usecases.js moves the stage under the selected tab,
   so the open job reads as one card, the tab its header and the stage its body. */
.uc-jobs {
  grid-template-columns: minmax(0, 1fr)
}
.uc-job-list {
  --ucm-gap: 10px;
  gap: var(--ucm-gap)
}
.uc-job-list>button {
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  min-height: 62px;
  padding: 13px 14px 13px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel)
}
.uc-job-list>button strong {
  grid-column: 1;
  font-size: 16px;
  line-height: 1.35
}
.uc-job-list>button span {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.5
}
/* A chevron in a ring: the ring is ::before, the chevron ::after, both in the right-hand cell. */
.uc-job-list>button::before,.uc-job-list>button::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  transition: transform .25s, background .2s, border-color .2s
}
.uc-job-list>button::before {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-medium);
  border-radius: 50%
}
.uc-job-list>button::after {
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: solid var(--paper);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg)
}
/* Touch feedback while a closed job is pressed. */
.uc-job-list>button[aria-selected="false"]:active {
  border-color: var(--line-medium);
  background: var(--surface)
}
.uc-job-list>button[aria-selected="true"] {
  border-color: var(--line-medium);
  border-bottom-color: var(--line);
  border-radius: 12px 12px 0 0;
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--yellow)
}
.uc-job-list>button[aria-selected="true"]::before {
  border-color: var(--yellow);
  background: var(--yellow)
}
.uc-job-list>button[aria-selected="true"]::after {
  margin-top: 4px;
  border-color: var(--on-accent);
  transform: rotate(-135deg)
}
.uc-job-list>.uc-job-stage {
  position: static;
  margin-top: calc(var(--ucm-gap) * -1);
  border: 1px solid var(--line-medium);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--panel);
  overflow: hidden
}
.uc-job-list .uc-visual {
  padding: 14px 12px 16px;
  border: 0;
  border-radius: 0;
  background: none
}
/* The stage is the container: a visual lays out by the room it has, not by the screen. */
.uc-job-stage {
  container: ucv / inline-size
}

/* Visuals, narrow by default: windows full width, their tables below. */
.uc-visual .uc-split {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px
}
.uc-visual .ucw-bar .doc-badge {
  font-size: 11px
}
/* Document pages show whole, fitted to the window, rather than cropped. */
.uc-visual .ucw-pdf .ucw-body,.uc-visual .ucw-docx .ucw-body {
  max-height: none
}
.uc-visual .ucw-body:has(>.ucw-page) {
  justify-self: center
}
.uc-visual .ucw-body>.ucw-page {
  width: auto;
  height: 250px;
  aspect-ratio: 1445 / 1870;
  margin-inline: auto
}
/* Highlights keep to the same lines of the calculation page: positions are fractions of the page inside the 12px padding. */
.uc-visual .uc-mark {
  left: calc(12px + (100% - 24px) * .06);
  width: calc((100% - 24px) * .88)
}
.uc-visual .uc-mark-1 {
  top: calc(12px + (100% - 24px) * .083);
  height: calc((100% - 24px) * .147)
}
.uc-visual .uc-mark-2 {
  top: calc(12px + (100% - 24px) * .29);
  height: calc((100% - 24px) * .112)
}
.uc-visual .uc-mark-3 {
  top: calc(12px + (100% - 24px) * .463);
  height: calc((100% - 24px) * .138)
}

/* Rows of a table: the label may wrap, values stay on one line. */
.uc-visual .uc-table {
  gap: 6px
}
.uc-visual .uc-table>div {
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px
}
.uc-visual .uc-table>div>span {
  flex: 1 1 auto;
  min-width: 0
}
.uc-visual .uc-table em {
  margin-right: 8px;
  padding: 2px 6px;
  font-size: 11px;
  white-space: nowrap
}
.uc-visual .uc-table strong {
  font-size: 12.5px
}
.uc-visual .uc-table sub {
  font-size: 11px
}
/* On the smallest phones a clause, its check and the result no longer share a line: the result drops under the clause. */
@container ucv (max-width: 299px) {
  .uc-visual .uc-calc>div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px
  }
  .uc-visual .uc-calc>div>strong {
    grid-row: 2
  }
  .uc-visual .uc-calc>div>b {
    grid-column: 2;
    grid-row: 1 / span 2
  }
}
/* Extracted fields: a grid of label-over-value cells. */
.uc-visual .uc-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}
.uc-visual .uc-fields>div {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 3px;
  padding: 9px 11px
}
.uc-visual .uc-fields span {
  font-size: 12px
}
.uc-visual .uc-fields strong {
  text-align: left
}

/* Code search: the question wraps. */
.uc-visual .uc-search {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px
}
.uc-visual .uc-query {
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5
}
/* The desktop types by widening one line, which cannot wrap; without the script the question simply shows.
   The desktop rule reaches every span in the question, so the cells the script adds are reset too. */
.uc-visual .uc-query span {
  display: inline;
  max-width: none;
  overflow: visible;
  white-space: normal;
  vertical-align: baseline;
  border-right: 0;
  animation: none
}
/* With the script, each character is a cell on one shared clock (--ucm-t, seconds into the 9 s loop):
   typed over the first 2.7 s like the desktop, held, then erased from the end. */
@property --ucm-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 5
}
.uc-visual .uc-query>span.ucm-typing {
  animation: ucm-clock 9s linear infinite
}
@keyframes ucm-clock {
  from {
    --ucm-t: 0
  }
  to {
    --ucm-t: 9
  }
}
.uc-visual .uc-query .ucm-spoken {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}
.ucm-char {
  --s: calc(.2 + var(--c) * 2.5 / var(--n));
  --e: calc(8.1 + (var(--n) - var(--c)) * .8 / var(--n));
  position: relative;
  font-style: normal;
  opacity: clamp(0, min((var(--ucm-t) - var(--s)) * 50, (var(--e) - var(--ucm-t)) * 50), 1)
}
/* The caret rides the last character shown: while it is being typed, or while erasing has reached it. */
.ucm-char::after {
  content: "";
  position: absolute;
  top: .15em;
  right: -1px;
  bottom: .1em;
  border-right: 2px solid var(--accent-ink);
  opacity: max(clamp(0, min((var(--ucm-t) - var(--s)) * 50, (var(--s) + 2.5 / var(--n) - var(--ucm-t)) * 50), 1), clamp(0, min((var(--ucm-t) - var(--e) + .8 / var(--n)) * 50, (var(--e) - var(--ucm-t)) * 50), 1))
}
.ucm-char.ucm-last::after {
  opacity: clamp(0, min((var(--ucm-t) - var(--s)) * 50, (var(--e) - var(--ucm-t)) * 50), 1)
}
.uc-visual .uc-answer p {
  font-size: 15px;
  line-height: 1.55
}
.uc-visual .uc-cites span {
  padding: 5px 10px;
  font-size: 12px
}

/* GAD review: a comment wraps beside its pin number, not under it. */
.uc-visual .uc-comments>div>span {
  display: flex;
  align-items: baseline;
  line-height: 1.4
}
.uc-visual .uc-comments em {
  flex: none
}

/* Environmental loads: the diagram, then the table. Labels are set in drawing units, so they are sized up
   to stay legible once the 330-unit-tall drawing is scaled into 310px. */
.uc-visual .uc-load {
  max-height: 310px;
  font-size: 12.5px
}
.uc-visual .uc-load-table {
  font-size: 13px
}
.uc-visual .uc-load-table th {
  padding: 0 6px 8px
}
.uc-visual .uc-load-table td {
  padding: 10px 6px
}
.uc-visual .uc-load-table td[colspan] {
  white-space: normal
}
.uc-visual .uc-load-table td span {
  font-size: 12px
}

/* Local FEA: the model on top, its legend as a strip beneath it. */
.uc-visual .uc-fea-stage {
  display: flex;
  flex-direction: column;
  height: auto
}
.uc-visual .uc-fea-canvas {
  position: relative;
  inset: auto;
  height: 230px;
  flex: none
}
.uc-visual .uc-fea-legend {
  position: static;
  gap: 4px;
  padding: 10px 12px 12px;
  border-top: 1px solid #d5dbe4;
  background: #fff;
  font-size: 11px
}
.uc-visual .uc-fea-legend strong {
  font-size: 12.5px
}
/* The peak stress reads like a probe label on the model. */
.uc-visual .uc-fea-max {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0
}
.uc-visual .uc-fea-scale {
  flex-direction: column;
  gap: 4px;
  margin-top: 4px
}
.uc-visual .uc-fea-scale i {
  width: auto;
  height: 10px;
  background: linear-gradient(to left,#ff0000 0 7.7%,#ff5900 0 15.4%,#ffb200 0 23.1%,#ffff00 0 30.8%,#b2ff00 0 38.5%,#59ff00 0 46.2%,#00ff00 0 53.8%,#00ffb2 0 61.5%,#00ffff 0 69.2%,#00b2ff 0 76.9%,#0059ff 0 84.6%,#0000ff 0)
}
.uc-visual .uc-fea-scale ol {
  flex-direction: row-reverse;
  justify-content: space-between
}
.uc-visual .uc-fea-checks {
  grid-template-columns: minmax(0, 1fr)
}

/* Vessel model in software: the 3D view on top, the feature tree docked beneath it. */
.uc-visual .ucw-cadbody {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0
}
.uc-visual .uc-cadview {
  order: -1;
  height: 230px
}
/* The feature tree becomes a row of ticked chips that wrap. */
.uc-visual .uc-tree2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border-right: 0;
  border-top: 1px solid #cfd5dd;
  font-size: 12px
}
.uc-visual .uc-tree2 li {
  gap: 5px;
  padding: 3px 9px 3px 4px;
  border: 1px solid #d5dbe4;
  border-radius: 999px;
  background: #fff;
  line-height: 1.3
}
.uc-visual .uc-tree2 li::before {
  flex: none
}
.uc-visual .uc-tree2 li:last-child {
  border-color: #bfe3c8;
  background: #e6f6ea
}
/* Vertical swipes scroll the page; sideways drags and pinches still turn and zoom the model. */
.uc-visual canvas[data-vessel] {
  touch-action: pan-y
}

/* Cost: label and value on a line, the bar beneath. */
.uc-visual .uc-cost-head {
  flex-wrap: wrap;
  gap: 4px 12px
}
.uc-visual .uc-cost-head span {
  font-size: 13px
}
.uc-visual .uc-cost-head strong {
  font-size: 26px
}
.uc-visual .uc-cost-rows {
  gap: 12px
}
.uc-visual .uc-cost-rows>div {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label value" "bar bar";
  gap: 6px 12px;
  font-size: 13px
}
.uc-visual .uc-cost-rows>div>span {
  grid-area: label
}
.uc-visual .uc-cost-rows>div>strong {
  grid-area: value;
  align-self: start
}
.uc-visual .uc-cost-rows>div>i {
  grid-area: bar;
  height: 7px
}
.uc-visual .uc-cost-rows small {
  font-size: 11.5px
}
.uc-visual .uc-foot {
  font-size: 13px
}

/* Proposal, WPS and test procedure pages: the whole page, set for a narrow window in a thinner viewer frame. */
.uc-visual .ucw-body:has(>.uc-docpage) {
  padding: 8px
}
.uc-visual .uc-docpage {
  padding: 13px 13px 12px;
  font-size: 12px
}
.uc-visual .uc-docpage header {
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px
}
.uc-visual .uc-docpage h4 {
  font-size: 14.5px
}
.uc-visual .uc-form dl>div {
  grid-template-columns: 38% minmax(0, 1fr)
}
.uc-visual .uc-form dt {
  padding: 5px 7px;
  font-size: 11px;
  line-height: 1.35
}
.uc-visual .uc-form dd {
  padding: 5px 7px;
  line-height: 1.35
}

/* Dossier: the deck keeps its shape at any width, the timeline follows. */
.uc-visual .uc-deck {
  width: 100%;
  max-width: 330px;
  min-height: 0;
  margin-inline: auto;
  aspect-ratio: 1
}
.uc-visual .uc-card2 figcaption {
  font-size: 11px
}
.uc-visual .uc-timeline {
  gap: 10px
}
.uc-visual .uc-stage {
  padding-left: 26px;
  font-size: 14px
}
.uc-visual .uc-stage::before {
  top: 2px;
  width: 12px;
  height: 12px
}

/* Wide stages (tablets, landscape phones): side by side again, close to the desktop layout. */
@container ucv (min-width: 560px) {
  .uc-job-list .uc-visual {
    padding: 22px 20px 24px
  }
  .uc-visual .uc-split {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 22px
  }
  .uc-visual .uc-split-doc {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr)
  }
  .uc-visual .uc-loads {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
  }
  .uc-visual .ucw-body>.ucw-page {
    height: 330px
  }
  .uc-visual .uc-fields {
    grid-template-columns: minmax(0, 1fr)
  }
  .uc-visual .uc-fields>div {
    flex-direction: row;
    align-items: center;
    justify-content: space-between
  }
  .uc-visual .uc-fields strong {
    text-align: right
  }
  .uc-visual .uc-fea-stage {
    display: block;
    height: 330px
  }
  .uc-visual .uc-fea-canvas {
    position: absolute;
    inset: 0;
    height: 100%
  }
  .uc-visual .uc-fea-legend {
    position: absolute;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px
  }
  .uc-visual .uc-fea-legend strong {
    font-size: 14px
  }
  .uc-visual .uc-fea-max {
    position: static;
    margin-top: 4px
  }
  .uc-visual .uc-fea-scale {
    flex-direction: row
  }
  .uc-visual .uc-fea-scale i {
    width: 14px;
    height: 150px;
    background: linear-gradient(to bottom,#ff0000 0 7.7%,#ff5900 0 15.4%,#ffb200 0 23.1%,#ffff00 0 30.8%,#b2ff00 0 38.5%,#59ff00 0 46.2%,#00ff00 0 53.8%,#00ffb2 0 61.5%,#00ffff 0 69.2%,#00b2ff 0 76.9%,#0059ff 0 84.6%,#0000ff 0)
  }
  .uc-visual .uc-fea-scale ol {
    flex-direction: column
  }
  .uc-visual .uc-fea-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .uc-visual .ucw-cadbody {
    grid-template-columns: 200px minmax(0, 1fr);
    min-height: 330px
  }
  .uc-visual .uc-cadview {
    order: 0;
    height: auto
  }
  .uc-visual .uc-tree2 {
    display: grid;
    align-content: start;
    gap: 4px;
    border-top: 0;
    border-right: 1px solid #cfd5dd;
    font-size: 12.5px
  }
  .uc-visual .uc-tree2 li {
    gap: 7px;
    padding: 5px 6px;
    border: 0;
    border-radius: 5px;
    background: none
  }
  .uc-visual .uc-tree2 li:last-child {
    background: #e6f6ea
  }
  .uc-visual .uc-cost-rows>div {
    grid-template-columns: 180px minmax(0, 1fr) 84px;
    grid-template-areas: "label bar value"
  }
  .uc-visual .uc-cost-rows>div>strong {
    align-self: center
  }
  .uc-visual .uc-deck {
    max-width: none;
    min-height: 330px;
    aspect-ratio: auto
  }
  .uc-visual .ucw-body:has(>.uc-docpage) {
    padding: 12px
  }
  .uc-visual .uc-docpage {
    padding: 18px 20px;
    font-size: 12.5px
  }
}

/* Reduced motion: hold every visual at its finished frame. */
@media (prefers-reduced-motion: reduce) {
  .uc-visual .uc-laser {
    display: none
  }
  .uc-visual .uc-mark {
    animation: none;
    opacity: 1
  }
  .uc-visual .uc-pin2 {
    animation: none;
    transform: translate(-50%, -50%)
  }
  .uc-visual .uc-coststack i,.uc-visual .uc-binder {
    animation: none
  }
  .uc-visual .uc-card2 {
    animation: none;
    transform: translateX(var(--x)) rotate(var(--r))
  }
  .uc-job-list>button::before,.uc-job-list>button::after {
    transition: none
  }
  .uc-visual .uc-query>span.ucm-typing {
    animation: none
  }
}