/* Compact calculation and mobile assignment layouts. Load after risk-readable.css.
   The existing scroll controllers still own progress and result visibility. */
@media (max-width:599px) {
  .risk-motion-page #ra-feature-sensor .ps-story .rv-climate-stage {
    height:clamp(380px,var(--ps-stage-height,440px),520px);
    min-height:0;
    display:block;
    position:relative;
    border-radius:14px;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-field-image {
    position:absolute;
    inset:0 0 auto;
    height:36px;
    min-height:0;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-field-image>img {
    object-position:center 32%;
    opacity:.85;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-field-image figcaption {
    inset:9px auto auto 14px;
    font-size:13px;
    line-height:18px;
  }
  /* These values are already shown beside the two working sliders. */
  .risk-motion-page #ra-feature-sensor :is(.rc-photo-signal,.rv-photo-base,
    .rc-compute-head,.rc-node-label,.rc-ai-orbit,.rc-node-glint,
    .rv-scale,.rv-result-rule) {display:none}
  .risk-motion-page #ra-feature-sensor .ps-story .rv-calculation {
    height:100%;
    min-height:0;
    padding:48px 14px 10px;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    grid-template-rows:minmax(100px,1fr) 24px 50px 80px 40px;
    gap:5px 8px;
    align-content:stretch;
    background:#fdfbfe;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rc-compute-flow {
    grid-column:1;
    grid-row:1;
    width:100%;
    height:100%;
    min-height:100px;
    max-height:none;
    align-self:stretch;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rc-source {
    left:0;
    width:46%;
    max-width:none;
    height:40px;
    padding:0 6px;
    justify-content:center;
    translate:0 -50%;
    border-radius:7px;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rc-source-air {top:24.65%;bottom:auto}
  .risk-motion-page #ra-feature-sensor .ps-story .rc-source-humidity {top:75.35%;bottom:auto}
  .risk-motion-page #ra-feature-sensor .ps-story .rc-source>span {
    gap:4px;
    font-size:13px;
    line-height:20px;
    color:#65506f;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rc-source svg {width:11px;height:17px;flex-shrink:0}
  .risk-motion-page #ra-feature-sensor .ps-story .rc-source strong {display:none}
  .risk-motion-page #ra-feature-sensor .ps-story .rc-ai-node {
    left:66.35%;
    top:50%;
    width:44px;
    height:44px;
    gap:3px;
    border-radius:11px;
    box-shadow:none;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rc-ai-node>img {width:14px;height:14px}
  .risk-motion-page #ra-feature-sensor .ps-story .rc-ai-node>strong {font-size:17px;line-height:1}
  .risk-motion-page #ra-feature-sensor .ps-story .rv-climate-stage .rv-result {
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-content:flex-start;
    min-height:84px;
    margin:0;
    padding:8px 0 8px 10px;
    border-top:0;
    border-left:1px solid #e7deed;
    gap:0;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-result-number>span:first-child {
    font-size:14px;
    line-height:21px;
    margin-bottom:7px!important;
    white-space:nowrap;
    color:#67516f;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-result-number>strong {
    font-size:48px!important;
    line-height:1.08;
    letter-spacing:-.055em;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-result-number small {
    font-size:17px;
    margin-left:3px;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .ps-climate-pending {
    display:none;
    top:33px;
    font-size:19px;
    line-height:26px;
    white-space:nowrap;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rc-compute-state {
    grid-column:1/-1;
    grid-row:2;
    height:24px;
    min-height:24px;
    margin:0;
    font-size:13px;
    line-height:20px;
    color:#6e577d;
    gap:6px;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rc-state-progress {width:38px}
  .risk-motion-page #ra-feature-sensor .ps-story .rv-presets {
    grid-column:1/-1;
    grid-row:3;
    justify-self:stretch;
    align-self:stretch;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
    width:100%;
    margin:0!important;
    padding:2px;
    border-radius:9px;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-presets button {
    min-width:0;
    min-height:44px;
    padding:8px 4px;
    font-size:13px;
    line-height:20px;
    white-space:nowrap;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-inputs {
    grid-column:1/-1;
    grid-row:4;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-content:start;
    margin:0;
    padding-top:8px;
    gap:18px;
    border-top:0;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-input label {
    gap:6px;
    font-size:14px;
    line-height:26px;
    color:#65506f;
    white-space:nowrap;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-input output {font-size:20px;line-height:26px}
  .risk-motion-page #ra-feature-sensor .ps-story .rv-input output small {font-size:13px;margin-left:2px}
  .risk-motion-page #ra-feature-sensor .ps-story .rv-input input {height:44px;margin:0}
  .risk-motion-page #ra-feature-sensor .ps-story .rv-input>div {display:none}
  .risk-motion-page #ra-feature-sensor .ps-story .rv-method {
    grid-column:1/-1;
    grid-row:5;
    min-height:40px;
    margin:0;
    gap:7px;
    font-size:13px;
    line-height:19px;
    color:#706077;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-method>span {font-size:17px;flex-shrink:0}

  /* The number, proposal, and reviewable assignment each keep their own row. */
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-assignment-flow {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(98px,.9fr) 6px minmax(128px,1.1fr) 6px minmax(112px,1fr);
    gap:0;
    align-content:stretch;
    height:clamp(350px,var(--ps-stage-height,400px),440px);
    min-height:0;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] :is(.ax-condition,.ax-proposal,.ax-mission) {
    grid-column:1;
    display:grid;
    min-width:0;
    min-height:0;
    padding:8px 13px;
    column-gap:12px;
    row-gap:3px;
    align-content:start;
    align-items:start;
    border-radius:10px;
    box-shadow:none;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-step-label {
    grid-column:1/-1;
    grid-row:1;
    margin:0;
    font-size:13px;
    line-height:18px;
    color:#74627f;
    white-space:nowrap;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-condition {
    grid-template-columns:104px minmax(0,1fr);
    grid-template-rows:18px minmax(0,1fr);
    row-gap:4px;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-condition>div {
    grid-column:1;
    grid-row:2;
    float:none;
    margin:0;
    align-self:start;
    align-items:baseline;
    gap:3px;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-condition strong {font-size:42px;line-height:1.05}
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-condition>div>span {font-size:17px}
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-condition p {
    grid-column:2;
    grid-row:2;
    align-self:start;
    display:flex;
    flex-direction:column;
    gap:2px;
    margin:0;
    font-size:14px;
    line-height:20px;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-condition-source {
    font-size:13px;
    line-height:18px;
    white-space:normal;
    color:#776581;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-proposal {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:18px 22px minmax(19px,auto) 21px;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-proposal-title {gap:7px;min-width:0}
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-proposal-title strong {
    font-size:16px;
    line-height:22px;
    white-space:nowrap;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-proposal-title img {width:18px;height:18px}
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-proposal p {
    margin:0;
    font-size:13px;
    line-height:19px;
    color:#695b74;
    word-break:keep-all;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-proposal [data-ax-location] {white-space:nowrap}
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-proposal-tags {
    grid-column:1;
    gap:5px;
    flex-wrap:nowrap;
    margin:0;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-proposal-tags span {
    padding:1px 6px;
    font-size:13px;
    line-height:19px;
    white-space:nowrap;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-mission {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:18px 22px 21px 19px;
    row-gap:3px;
    background:#fbf9fd;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-mission-team {gap:7px;min-width:0}
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-mission-team strong {
    font-size:16px;
    line-height:22px;
    white-space:nowrap;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-team-icon {width:22px;height:22px;flex-shrink:0}
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-team-icon svg {width:17px;height:17px}
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-mission-task {
    margin:0;
    font-size:14px;
    line-height:21px;
    gap:6px;
    white-space:nowrap;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-review-state {
    grid-column:1;
    margin:0;
    font-size:13px;
    line-height:19px;
    white-space:nowrap;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-connector {
    grid-column:1;
    width:100%;
    height:6px;
    min-height:0;
    transform:none;
  }
  .risk-motion-page .ps-story[data-ps-story=assignment] .ax-connector b {display:none}
  .risk-motion-page .ax-assignment .ax-scope {
    width:100%;
    max-width:100%;
    padding:3px;
    gap:3px;
  }
  .risk-motion-page .ax-assignment .ax-scope button {
    flex:1 1 0;
    min-width:0;
    min-height:44px;
    padding:8px 4px;
    font-size:13px;
    line-height:20px;
    white-space:nowrap;
  }
}

@media (max-width:359px) {
  .risk-motion-page #ra-feature-sensor .ps-story .rv-result-number {
    width:100%;
    min-width:0;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-result-number>strong {
    max-width:100%;
    font-size:40px!important;
    line-height:1.1;
    white-space:nowrap;
    flex-wrap:nowrap;
  }
  .risk-motion-page #ra-feature-sensor .ps-story .rv-result-number small {
    font-size:14px;
    margin-left:2px;
    flex-shrink:0;
  }
}

/* Full calculation layout reserves intrinsic space for the enlarged result text.
   Align the two inputs to their SVG branches at every diagram height. */
@media (min-width:600px) {
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=full] .rv-calculation {
    grid-template-rows:28px minmax(148px,1fr) 28px max-content max-content max-content 28px;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=full] .rc-compute-flow {
    min-height:148px;
    max-height:none;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=full] .rc-source {
    translate:0 -50%;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=full] .rc-source-air {
    top:24.65%;
    bottom:auto;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=full] .rc-source-humidity {
    top:75.35%;
    bottom:auto;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=full] .rv-result {
    align-items:flex-start;
    min-height:max-content;
    padding-top:12px;
  }
}

/* Keep the left field photo intact when the desktop title shares the pin.
   Use actual available card height, rather than viewport height, to choose this layout. */
@media (min-width:600px) {
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-climate-stage {
    height:var(--ps-stage-height,409px);
    min-height:0;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-calculation {
    height:100%;
    min-height:0;
    padding:16px 20px 14px;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    grid-template-rows:minmax(116px,1fr) 24px 50px 80px 44px;
    gap:6px 12px;
    align-content:stretch;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] :is(.rc-compute-head,.rc-node-label,
    .rc-ai-orbit,.rc-node-glint,.rv-scale,.rv-result-rule,.ps-climate-pending) {display:none}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-compute-flow {
    grid-column:1;
    grid-row:1;
    width:100%;
    height:100%;
    min-height:116px;
    max-height:none;
    align-self:stretch;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-source {
    left:0;
    width:48%;
    max-width:150px;
    height:44px;
    padding:0 6px;
    gap:4px;
    translate:0 -50%;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-source-air {top:24.65%;bottom:auto}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-source-humidity {top:75.35%;bottom:auto}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-source>span {font-size:13px;line-height:20px;gap:4px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-source svg {width:11px;height:17px;flex-shrink:0}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-source strong {font-size:18px;line-height:22px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-source small {font-size:13px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-ai-node {
    left:66.35%;
    top:50%;
    width:52px;
    height:52px;
    gap:4px;
    border-radius:13px;
    box-shadow:none;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-ai-node>img {width:17px;height:17px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-ai-node>strong {font-size:19px;line-height:1}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-climate-stage .rv-result {
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-content:flex-start;
    min-height:96px;
    margin:0;
    padding:8px 0 8px 14px;
    border-top:0;
    border-left:1px solid #e7deed;
    gap:0;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-result-number {min-width:0;width:100%}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-result-number>span:first-child {
    margin-bottom:6px!important;
    font-size:15px;
    line-height:22px;
    white-space:nowrap;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-result-number>strong {
    max-width:100%;
    font-size:clamp(44px,4.5vw,56px)!important;
    line-height:1.1;
    letter-spacing:-.055em;
    white-space:nowrap;
    flex-wrap:nowrap;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-result-number small {font-size:19px;margin-left:3px;flex-shrink:0}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-compute-state {
    grid-column:1/-1;
    grid-row:2;
    height:24px;
    min-height:24px;
    margin:0;
    font-size:14px;
    line-height:20px;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-presets {
    grid-column:1/-1;
    grid-row:3;
    justify-self:stretch;
    align-self:stretch;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
    width:100%;
    margin:0!important;
    padding:2px;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-presets button {
    min-width:0;
    min-height:44px;
    padding:8px 6px;
    font-size:14px;
    line-height:20px;
    white-space:nowrap;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-inputs {
    grid-column:1/-1;
    grid-row:4;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-content:start;
    margin:0;
    padding-top:8px;
    gap:24px;
    border-top:0;
  }
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-input label {font-size:14px;line-height:26px;gap:6px;white-space:nowrap}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-input output {font-size:21px;line-height:26px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-input output small {font-size:13px;margin-left:2px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-input input {height:44px;margin:0}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-input>div {display:none}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-method {
    grid-column:1/-1;
    grid-row:5;
    min-height:44px;
    margin:0;
    font-size:13px;
    line-height:20px;
    gap:8px;
  }
}
@media (min-width:600px) and (max-width:899px) {
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-calculation {padding-inline:14px;column-gap:8px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-source {width:46%;justify-content:center}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-source strong {display:none}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-ai-node {width:44px;height:44px;gap:3px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-ai-node>img {width:14px;height:14px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rc-ai-node>strong {font-size:17px}
  .risk-motion-page #ra-feature-sensor .ps-story[data-ps-climate-layout=compact] .rv-climate-stage .rv-result {padding-left:10px}
}