/* try.css — the Try and Make sheets and the start card (try.js), on the umbrella's design system (_engines/ui/ui.css).
 * Phone first at 390 × 844: 44 px targets, no text under 13 px, the sheet from the bottom; a right-hand panel from 760 px. */
.tr-sheet { --ui-topbar-h: 8px; font-family: var(--ui-font); color: var(--ui-ink); z-index: 30; }
.tr-sheet.is-tall { max-height: calc(100dvh - 8px); }
.tr-sheet .ui-sheet__body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.tr-sheet h3.tr-step { margin: 22px 0 8px; font-size: var(--ui-t-lead); font-weight: 680; letter-spacing: -0.01em; }
/* five actions do not fit 390px: wrap instead of a hidden scroll that hid "Leave it out" */
.tr-acts { flex-wrap: wrap; overflow-x: visible; border-radius: var(--ui-r-tile); }
.tr-sheet .ui-label { margin: 14px 0 8px; font-size: var(--ui-t-meta); color: var(--ui-ink-dim); font-weight: 600; }
.tr-sheet h4.ui-label { margin-top: 20px; }
.tr-sheet .ui-hint { margin: 6px 0; font-size: var(--ui-t-meta); color: var(--ui-ink-dim); line-height: 1.4; }
.tr-sheet .ui-tabs { margin: 4px 0 6px; }
.tr-chip--2 { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 52px; padding: 6px 14px; white-space: normal; text-align: left; }
.tr-chip--2 small { font-size: 13px; color: var(--ui-ink-dim); font-weight: 400; }
.tr-field { display: grid; grid-template-columns: 1fr 120px auto; align-items: center; gap: 4px 10px; margin: 10px 0; font-size: var(--ui-t-small); }
.tr-field .ui-field { height: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.tr-field em { font-style: normal; color: var(--ui-ink-dim); min-width: 44px; }
.tr-field small { grid-column: 1 / -1; color: var(--ui-ink-faint); font-size: 13px; }
.tr-go { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin: 18px calc(-1 * var(--ui-pad)) 0; padding: 12px var(--ui-pad) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--ui-surface-solid) 30%); z-index: 2; }
.tr-go--static { position: static; background: none; margin: 18px 0 0; padding: 0; }
.tr-go .ui-btn--primary { min-height: 52px; font-size: var(--ui-t-lead); }
#tr-result, #al-result, #ws-result { scroll-margin-top: 8px; }
/* long block labels (Cement dossier…, Register the fingerprint…) wrap instead of running off a 390 px sheet */
#make-sheet .ui-btn--block, #try-sheet .ui-btn--block { white-space: normal; text-align: center; padding-block: 8px; }
.tr-warn { margin: 10px 0; padding: 10px 14px; border-radius: var(--ui-r-tile); background: rgba(255, 170, 90, 0.12); color: #7a4600; font-size: var(--ui-t-small); }

/* the lab link: instrument tests on the crystal live in the 3D lab */
body:not(.advanced) .tr-advonly { display: none; }

/* the result */
.tr-verdict { margin-top: 26px; padding: 16px 16px 14px; border-radius: var(--ui-r-card); background: var(--ui-raise); box-shadow: inset 3px 0 0 var(--ui-accent); }
.tr-verdict .tr-step { margin: 0 0 4px !important; font-size: var(--ui-t-meta) !important; color: var(--ui-ink-dim); font-weight: 600 !important; }
.tr-verdict.is-unknown { box-shadow: inset 3px 0 0 var(--ui-ink-faint); }
.tr-verdict.is-no_interaction { box-shadow: inset 3px 0 0 var(--ui-computed); }
.tr-verdict.is-bad { box-shadow: inset 3px 0 0 var(--ui-bad); }
.tr-big { margin: 0; font-size: var(--ui-t-h3); font-weight: 680; letter-spacing: -0.015em; line-height: 1.2; }
.tr-sub { margin: 4px 0 0; font-size: var(--ui-t-small); color: var(--ui-ink-dim); }
.tr-mech { margin: 12px 0; padding: 12px 14px; border-radius: var(--ui-r-tile); background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--ui-line); }
.tr-mech header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tr-mech p { margin: 8px 0 0; font-size: var(--ui-t-small); line-height: 1.5; }
.tr-mech small { display: block; margin-top: 6px; color: var(--ui-ink-faint); font-size: 13px; }
.tr-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--ui-r-pill); font-size: 13px; font-weight: 650; background: var(--ui-accent-soft); color: var(--ui-accent); }
.v-negligible .tr-pill { background: rgba(255, 255, 255, 0.08); color: var(--ui-ink-dim); }
.v-none .tr-pill { background: rgba(255, 255, 255, 0.05); color: var(--ui-ink-faint); }
.tr-rows { display: grid; gap: 2px; }
.tr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--ui-line); font-size: var(--ui-t-small); }
.tr-row .tr-k { color: var(--ui-ink-dim); min-width: 0; }
/* the value is the row's second column, its note a full-width line under it: every value lines up whatever the note */
.tr-row .tr-v { display: contents; }
.tr-row .tr-v > :not(.tr-why) { grid-column: 2; text-align: right; }
.tr-why { display: block; color: var(--ui-ink-faint); font-size: 13px; text-align: right; max-width: 260px; margin-left: auto; }
.tr-row .tr-v > .tr-why { grid-column: 1 / -1; max-width: none; text-align: left; margin: 0; }
.tr-legend { margin: 8px 0 0; font-size: 13px; color: var(--ui-ink-faint); line-height: 1.45; }
.tr-unk { margin: 6px 0; padding-left: 0; list-style: none; font-size: 13.5px; color: var(--ui-ink-dim); line-height: 1.45; }
.tr-unk li { margin: 6px 0; }
.tr-unk .ui-unknown { margin-right: 6px; height: 20px; }
.tr-laws { margin: 6px 0; padding: 0; list-style: none; }
.tr-laws li { margin: 10px 0; font-size: 13.5px; line-height: 1.45; }
.tr-laws b { font-weight: 600; margin-right: 6px; }
.tr-laws code { display: block; margin: 4px 0; padding: 8px 10px; border-radius: 8px; background: rgba(20, 30, 40, 0.07); font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; color: var(--ui-ink); }
.tr-laws small { display: block; color: var(--ui-ink-faint); font-size: 13px; }
.tr-sers { margin-bottom: 6px; }
.tr-sers .ui-chip { min-height: 36px; font-size: 13px; }
.tr-chart { display: block; width: 100%; height: auto; margin: 6px 0; }
.tr-chart text { fill: var(--ui-ink-dim); font: 12px var(--ui-font); }
.tr-chart .g { stroke: var(--ui-line); stroke-width: 1; }
.tr-chart .m { stroke: var(--ui-ink-faint); stroke-dasharray: 4 4; }
.tr-chart .ml { fill: var(--ui-ink-faint); }
.tr-chart .u { fill: var(--ui-ink-faint); }
.tr-chart .ln { fill: none; stroke: var(--ui-accent); stroke-width: 2; stroke-linejoin: round; }
.tr-tga .ln.c1 { stroke-dasharray: 4 3; opacity: 0.45; }
.tr-tga + .tr-why { text-align: left; max-width: none; margin: 4px 0 0; }
.tr-chart .band { fill: var(--ui-accent); opacity: 0.16; stroke: none; }
.tr-pic { margin: 14px 0 6px; }
.tr-pic canvas, #al-pd { display: block; width: 100%; height: auto; border-radius: var(--ui-r-tile); background: #f4f7f8; }
.tr-pic-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tr-pic-bar input[type=range] { flex: 1; accent-color: var(--ui-accent); height: 44px; }
.tr-pic-bar .num { min-width: 82px; text-align: right; font-size: 13.5px; color: var(--ui-ink-dim); font-variant-numeric: tabular-nums; }
.tr-mix { margin: 6px 0; font-size: var(--ui-t-small); color: var(--ui-ink); font-variant-numeric: tabular-nums; }
#al-p { width: 100%; height: 44px; accent-color: var(--ui-accent); }
.tr-els { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
.tr-el { flex-direction: column; justify-content: center; gap: 0; min-height: 52px; padding: 4px 4px; }
.tr-el b { font-size: 17px; font-weight: 680; }
.tr-el small { font-size: 13px; color: var(--ui-ink-dim); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tr-el.is-dim { opacity: 0.38; }
.tr-pdleg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; font-size: 13px; color: var(--ui-ink-dim); }
.tr-pdleg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tr-recipe { margin: 12px 0; padding: 12px 14px; border-radius: var(--ui-r-tile); background: var(--ui-raise); }
.tr-recipe .ui-label { margin-top: 0; }
.tr-recipe.is-bad { box-shadow: inset 3px 0 0 var(--ui-warn); }
.tr-recipe .tr-big { font-size: var(--ui-t-lead); }
.tr-recipe .ui-btn { margin-top: 8px; }
.tr-bars { display: grid; gap: 8px; margin: 6px 0 10px; }
.tr-bar { display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr auto; align-items: center; gap: 10px; font-size: var(--ui-t-small); }
.tr-track { height: 8px; border-radius: 4px; background: var(--ui-raise); overflow: hidden; }
.tr-track i { display: block; height: 100%; background: var(--ui-accent); border-radius: 4px; }
.tr-sheet details.ui-adv { margin-top: 18px; }

/* the start card: what Materia is for, the path Look → Make → Test (the dock's order), two quick tries; above the dock, never modal */
#start { position: fixed; z-index: 12; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100vw - 20px));
  padding: 16px 16px 10px; border-radius: var(--ui-r-sheet); font-family: var(--ui-font); color: var(--ui-ink); }
#start header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#start h2 { margin: 2px 0 0; font-size: var(--ui-t-h3); font-weight: 690; letter-spacing: -0.02em; line-height: 1.2; }
#start .ui-lede { margin: 8px 0 12px; font-size: var(--ui-t-small); color: var(--ui-ink-dim); line-height: 1.45; }
.tr-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-way { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 10px; min-height: 64px; padding: 10px 12px; border: 0; border-radius: var(--ui-r-tile);
  background: var(--ui-raise); color: var(--ui-ink); text-align: left; cursor: pointer; font: inherit; transition: background var(--ui-fast); }
.tr-way:hover { background: var(--ui-raise-hover); }
.tr-way .tr-ic { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); }
.tr-way .tr-ic svg { width: 18px; height: 18px; }
.tr-way b { font-size: var(--ui-t-small); font-weight: 650; line-height: 1.2; }
.tr-way small { font-size: 13px; color: var(--ui-ink-dim); line-height: 1.25; }
#start > .ui-btn { margin-top: 6px; }
.tr-path { grid-template-columns: 1fr; gap: 6px; }
.tr-step { min-height: 52px; padding: 8px 12px; }
.tr-step .tr-ic { font-size: 14px; font-weight: 700; }
.tr-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; white-space: nowrap; font-size: 13px; color: var(--ui-ink-dim); }
.tr-quick .ui-chip { min-height: 36px; padding: 0 12px; font-size: 13px; background: var(--ui-raise); }
body.start-on #hint, body.tr-open #hint, body.tr-open #card { opacity: 0; pointer-events: none; }
@media (max-width: 759px) {
  /* the phone: the card stays short so the material above it is still in view */
  #start { padding: 12px 12px 8px; }
  #start .ui-lede { margin: 4px 0 8px; }
  .tr-step { min-height: 46px; padding: 6px 10px; }
  .tr-step small { font-size: 12px; }
  body.start-on #title-why, body.start-on #title-src { display: none; }
  body.tr-open #dock { visibility: hidden; }
}
@media (min-width: 760px) {
  .tr-sheet { width: var(--panel-w, 400px); top: 12px; bottom: 12px; right: 12px; }
  #start { left: auto; right: 24px; transform: none; bottom: calc(96px + env(safe-area-inset-bottom)); width: 460px; }
}
/* "Test this material" under every result of Make: the next step of the work, evident */
.tr-test { margin: 14px 0 6px; display: grid; gap: 8px; }
/* the pour form inside the Test Lab's sheet (lab-panel.js pourSheet) */
#lab .pour .tr-step { margin: 12px 0 6px; }
/* several lines in one chart (the temperature inside at a few times): earlier fainter, the last one full */
.tr-chart.tr-steps .ln.c0 { opacity: 0.35; } .tr-chart.tr-steps .ln.c1 { opacity: 0.65; }
/* desktop: the Make panel takes the right --panel-w; the Ask pill re-centres in what is left instead of sitting under its edge */
@media (min-width: 760px) {
  body.tr-open #ask { left: calc((100vw - var(--panel-w) - 12px) / 2); width: min(560px, calc(100vw - var(--panel-w) - 372px)); }
}

/* My shelf (shelf-panel.js) */
.shelf-save { margin-top: var(--ui-s5); }
.shelf-row { display: flex; gap: var(--ui-s2); flex-wrap: wrap; align-items: center; }
.shelf-row .ui-field { flex: 1 1 160px; min-height: var(--ui-control); }
.shelf-bar { display: flex; gap: var(--ui-s2); flex-wrap: wrap; margin-bottom: var(--ui-s4); }
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ui-s3); }
.shelf-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: var(--ui-s3); border-radius: var(--ui-r-tile); background: var(--ui-raise); border: 1px solid var(--ui-line); color: var(--ui-ink); font: inherit; min-height: var(--ui-touch); cursor: pointer; }
.shelf-card b { font-size: var(--ui-t-body); }
.shelf-tab { width: 100%; border-collapse: collapse; font-size: var(--ui-t-small); }
.shelf-tab th { text-align: left; font-weight: 600; color: var(--ui-ink-dim); padding: 4px 8px 4px 0; vertical-align: top; }
.shelf-tab td { padding: 4px 0; word-break: break-word; }
.shelf-prov code { font-size: var(--ui-t-meta); }
.shelf-test summary { cursor: pointer; padding: 6px 0; }
.shelf-acts { margin-top: var(--ui-s4); }