/* Start:/local/components/blades/steel.catra.rating/templates/.default/style.css?178725631955152*/
.steelCatra,
.steelCatra * {
    box-sizing: border-box;
}

.steelCatra {
    --catra-ink: #282d33;
    --catra-muted: #737c86;
    --catra-line: #dfe5e1;
    --catra-line-strong: #cfd9d3;
    --catra-soft: #f5f7f6;
    --catra-green: #0f6844;
    --catra-green-dark: #0a5035;
    --catra-green-mid: #8ab9a3;
    --catra-green-soft: #edf7f1;
    --catra-amber: #c77a00;
    --catra-amber-soft: #fff8e9;
    width: 100%;
    padding: 8px 0 24px;
    color: var(--catra-ink);
    font-family: robotoregular, Roboto, Arial, sans-serif;
    container-name: steelCatra;
    container-type: inline-size;
}

.steelCatra [hidden] {
    display: none !important;
}

.steelCatra button,
.steelCatra input {
    font: inherit;
}

.steelCatra button,
.steelCatra a {
    -webkit-tap-highlight-color: transparent;
}

.steelCatra a {
    color: var(--catra-green-dark);
    text-underline-offset: 3px;
}

.steelCatra button:focus-visible,
.steelCatra a:focus-visible,
.steelCatra input:focus-visible {
    outline: 2px solid #d78a0b;
    outline-offset: 2px;
}

.steelCatra__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin: 0 0 14px;
}

.steelCatra__eyebrow {
    margin: 0 0 5px;
    color: var(--catra-green);
    font: 11px robotomedium, Roboto, Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.steelCatra__heading h1 {
    margin: 0;
    color: #15191d;
    font: clamp(30px, 2.4vw, 38px)/1.12 robotomedium, Roboto, Arial, sans-serif;
    letter-spacing: -.025em;
}

.steelCatra__heading p:last-child {
    margin: 8px 0 0;
    color: #616b65;
    font-size: 14px;
}

.steelCatra__headingMark {
    width: 38px;
    height: 38px;
    opacity: .1;
}

.steelCatra__protocol {
    display: grid;
    grid-template-columns: minmax(250px, .9fr) minmax(175px, .55fr) minmax(420px, 1.5fr);
    min-height: 64px;
    margin-bottom: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--catra-line-strong);
    border-radius: 7px;
}

.steelCatra__protocol > div {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 12px 20px;
}

.steelCatra__protocolName {
    gap: 13px;
    color: var(--catra-green-dark);
}

.steelCatra__protocolName strong {
    font: 15px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__roundIcon,
.steelCatra__outlineIcon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--catra-green-soft);
    border-radius: 50%;
}

.steelCatra__roundIcon img,
.steelCatra__outlineIcon img {
    width: 21px;
    height: 21px;
}

.steelCatra__protocolCount {
    color: #626c66;
    font-size: 14px;
    border-left: 1px solid var(--catra-line);
}

.steelCatra__protocolCount span {
    margin: 0 8px;
    color: #a2aaa5;
}

.steelCatra__protocolWarning {
    gap: 12px;
    color: #8c5703;
    font-size: 13px;
    line-height: 1.4;
    background: var(--catra-amber-soft);
    border-left: 1px solid #eadfc8;
}

.steelCatra__protocolWarning img {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
}

.steelCatra__intro {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    margin-bottom: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--catra-line-strong);
    border-radius: 7px;
}

.steelCatra__introBrand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 22px 24px;
    background: var(--catra-soft);
    border-right: 1px solid var(--catra-line);
}

.steelCatra__catraLogo {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e4e8e5;
    border-radius: 50%;
}

.steelCatra__introBrand p {
    margin: 0 0 5px;
    color: var(--catra-green);
    font: 10px robotomedium, Roboto, Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.steelCatra__introBrand h2 {
    margin: 0;
    color: #171b1f;
    font: 22px/1.12 robotomedium, Roboto, Arial, sans-serif;
    letter-spacing: -.02em;
}

.steelCatra__introContent {
    min-width: 0;
    padding: 19px 22px 0;
}

.steelCatra__introLead {
    max-width: 980px;
    margin: 0;
    color: #4c5650;
    font-size: 13px;
    line-height: 1.55;
}

.steelCatra__introLead strong {
    color: var(--catra-green-dark);
    font-family: robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__introFacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
    border-top: 1px solid var(--catra-line);
}

.steelCatra__introFacts article {
    min-width: 0;
    padding: 13px 18px 13px 0;
}

.steelCatra__introFacts article + article {
    padding-left: 18px;
    border-left: 1px solid var(--catra-line);
}

.steelCatra__introFacts h3 {
    margin: 0 0 5px;
    color: #2d3832;
    font: 12px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__introFacts p {
    margin: 0;
    color: #6a746e;
    font-size: 11px;
    line-height: 1.45;
}

.steelCatra__introFooter {
    display: grid;
    grid-template-columns: auto minmax(250px, 1fr) minmax(290px, auto);
    align-items: center;
    min-height: 48px;
    margin: 0 -22px;
    padding: 7px 12px 7px 20px;
    border-top: 1px solid var(--catra-line);
}

.steelCatra__introCount {
    color: #606b65;
    font-size: 12px;
    white-space: nowrap;
}

.steelCatra__introCount strong {
    color: var(--catra-green-dark);
    font: 14px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__introCount span {
    margin: 0 7px;
    color: #a1aaa5;
}

.steelCatra__introLinks {
    display: flex;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    padding: 0 14px;
}

.steelCatra__introLinks a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    white-space: nowrap;
}

.steelCatra__introLinks img {
    width: 12px;
    height: 12px;
}

.steelCatra__introWarning {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 8px;
    min-width: 0;
    margin: -7px -12px -7px 0;
    padding: 7px 14px;
    color: #885707;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.35;
    text-align: left;
    background: var(--catra-amber-soft);
    border: 0;
    border-left: 1px solid #eadfc8;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.steelCatra__introWarning img {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.steelCatra__introWarning u {
    font-family: robotomedium, Roboto, Arial, sans-serif;
    text-underline-offset: 3px;
}

.steelCatra__introWarning:hover,
.steelCatra__introWarning:focus-visible {
    color: #704500;
    background: #fff1d4;
    outline: none;
}

.steelCatra__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    border-bottom: 1px solid var(--catra-line);
}

.steelCatra__explorer {
    min-width: 0;
    padding-right: 24px;
}

.steelCatra__filters {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    min-height: 62px;
    margin-bottom: 10px;
}

.steelCatra__dataset {
    position: relative;
    flex: 0 0 305px;
    width: 305px;
}

.steelCatra__datasetEyebrow {
    display: block;
    margin: 0 0 5px;
    color: #68736d;
    font: 10px/12px robotomedium, Roboto, Arial, sans-serif;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.steelCatra__datasetTrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding: 0 12px 0 14px;
    color: #16231d;
    cursor: pointer;
    background: #fff;
    border: 1px solid #64746c;
    border-radius: 5px;
    outline: 0;
    box-shadow: 0 1px 2px rgba(25, 50, 38, .04);
}

.steelCatra__datasetTrigger > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.steelCatra__datasetTrigger strong {
    font: 14px/18px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__datasetTrigger small {
    margin-left: 5px;
    color: #59645e;
    font-size: 12px;
}

.steelCatra__datasetTrigger > img {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    opacity: .72;
    transform: rotate(90deg);
    transition: transform .15s ease;
}

.steelCatra__datasetTrigger[aria-expanded="true"] > img {
    transform: rotate(-90deg);
}

.steelCatra__datasetTrigger:focus-visible,
.steelCatra__datasetTrigger[aria-expanded="true"] {
    border-color: var(--catra-green-mid);
    box-shadow: 0 0 0 2px var(--catra-green-soft);
}

.steelCatra__dataset.is-loading .steelCatra__datasetTrigger {
    cursor: wait;
    opacity: .65;
}

.steelCatra__datasetMenu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 2px);
    left: 0;
    width: 395px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cbd5d0;
    border-radius: 5px;
    box-shadow: 0 12px 28px rgba(24, 51, 38, .14);
}

.steelCatra__datasetMenu[hidden] {
    display: none;
}

.steelCatra__datasetOption {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 125px 20px;
    gap: 10px;
    align-items: center;
    min-height: 74px;
    padding: 12px 14px 11px 16px;
    color: #1d2823;
    text-decoration: none;
    border-bottom: 1px solid #dce3df;
}

.steelCatra__datasetOption:hover,
.steelCatra__datasetOption:focus-visible,
.steelCatra__datasetOption.is-selected {
    color: #173e2d;
    background: #f0f6f3;
    outline: 0;
}

.steelCatra__datasetOptionMain {
    display: grid;
    gap: 6px;
}

.steelCatra__datasetOptionMain strong {
    font: 14px/18px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__datasetOption.is-selected .steelCatra__datasetOptionMain strong {
    color: var(--catra-green);
}

.steelCatra__datasetOptionMain small {
    color: #445049;
    font-size: 12px;
}

.steelCatra__datasetOptionMain i {
    margin: 0 4px;
    color: #8a948f;
    font-style: normal;
}

.steelCatra__datasetOptionType {
    display: grid;
    gap: 3px;
    color: #78817c;
    font-size: 12px;
    line-height: 1.45;
    text-align: right;
}

.steelCatra__datasetOptionType b {
    font-weight: 400;
}

.steelCatra__datasetOptionType small {
    font-size: 10px;
    line-height: 1.3;
}

.steelCatra__datasetOptionType--warning {
    color: #b47400;
}

.steelCatra__datasetOptionCheck {
    width: 18px;
    height: 18px;
}

.steelCatra__datasetMenu > p {
    margin: 0;
    padding: 10px 16px 11px;
    color: #6e7873;
    font-size: 11px;
    line-height: 1.4;
    background: #fafbfa;
}

.steelCatra__datasetMenu > p a {
    color: #35634e;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.steelCatra__search {
    display: flex;
    align-items: center;
    width: min(315px, 31vw);
    height: 42px;
    padding: 0 13px;
    color: #768079;
    background: #fff;
    border: 1px solid #d4dbd7;
    border-radius: 5px;
}

.steelCatra__search img {
    width: 19px;
    height: 19px;
    opacity: .7;
}

.steelCatra__search input {
    width: 100%;
    min-width: 0;
    padding: 0 0 0 9px;
    color: var(--catra-ink);
    font-size: 14px;
    background: transparent;
    border: 0;
    outline: 0;
}

.steelCatra__search:focus-within {
    border-color: var(--catra-green-mid);
    box-shadow: 0 0 0 2px var(--catra-green-soft);
}

.steelCatra__hardnessFilter {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #5e6862;
    font-size: 13px;
    white-space: nowrap;
}

.steelCatra__hardnessFilter > span:first-child {
    margin-right: 3px;
}

.steelCatra__hardnessFilter input[type="number"] {
    width: 50px;
    height: 38px;
    color: #3d4540;
    text-align: center;
    background: #fff;
    border: 1px solid #d4dbd7;
    border-radius: 5px;
    appearance: textfield;
}

.steelCatra__hardnessFilter input[type="number"]::-webkit-inner-spin-button {
    display: none;
}

.steelCatra__rangePair {
    position: relative;
    width: 154px;
    height: 22px;
    margin-left: 6px;
}

.steelCatra__rangePair::before {
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    height: 2px;
    background: #d9e0dc;
    content: "";
}

.steelCatra__rangePair input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 22px;
    margin: 0;
    pointer-events: none;
    background: transparent;
    appearance: none;
}

.steelCatra__rangePair input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    pointer-events: auto;
    cursor: pointer;
    background: #fff;
    border: 2px solid var(--catra-green);
    border-radius: 50%;
    appearance: none;
}

.steelCatra__rangePair input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    pointer-events: auto;
    cursor: pointer;
    background: #fff;
    border: 2px solid var(--catra-green);
    border-radius: 50%;
}

.steelCatra__reset {
    height: 38px;
    padding: 0 15px;
    color: #4c5750;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d4dbd7;
    border-radius: 5px;
}

.steelCatra__reset:hover {
    background: var(--catra-soft);
    border-color: #aebbb4;
}

.steelCatra__chartHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #59645e;
    font: 12px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__chartHeading span:last-child {
    color: #8b948f;
    font-family: robotoregular, Roboto, Arial, sans-serif;
}

.steelCatra__chartFrame {
    position: relative;
    min-width: 0;
    height: 390px;
    padding: 18px 12px 34px 58px;
}

.steelCatra__plot {
    position: relative;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #cfd7d2;
    border-left: 1px solid #cfd7d2;
}

.steelCatra__gridLine {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.steelCatra__gridLine--horizontal {
    right: 0;
    left: 0;
    border-top: 1px dashed #dce2df;
}

.steelCatra__gridLine--vertical {
    top: 0;
    bottom: 0;
    border-left: 1px dashed #e1e6e3;
}

.steelCatra__gridLine--horizontal span {
    position: absolute;
    top: -7px;
    right: calc(100% + 13px);
    color: #68736c;
    font-size: 11px;
}

.steelCatra__gridLine--vertical span {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    color: #68736c;
    font-size: 11px;
    transform: translateX(-50%);
}

.steelCatra__activeGuide {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.steelCatra__activeGuide[hidden] {
    display: none;
}

.steelCatra__activeGuide--horizontal {
    left: 0;
    height: 0;
    border-top: 1px dashed rgba(0, 121, 78, .72);
}

.steelCatra__activeGuide--vertical {
    bottom: 0;
    width: 0;
    border-left: 1px dashed rgba(0, 121, 78, .72);
}

.steelCatra__activeGuide span {
    position: absolute;
    z-index: 1;
    min-width: 38px;
    padding: 3px 6px;
    color: #fff;
    font: 10px/1 robotomedium, Roboto, Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
    background: var(--catra-green);
    border-radius: 3px;
    box-shadow: 0 2px 7px rgba(16, 88, 54, .18);
}

.steelCatra__activeGuide--horizontal span {
    top: 0;
    right: calc(100% + 8px);
    transform: translateY(-50%);
}

.steelCatra__activeGuide--vertical span {
    top: calc(100% + 9px);
    left: 0;
    transform: translateX(-50%);
}

.steelCatra__xAxisTitle {
    position: absolute;
    right: auto;
    bottom: 4px;
    left: 50%;
    color: #68736c;
    font-size: 11px;
    transform: translateX(-50%);
}

.steelCatra__point {
    position: absolute;
    z-index: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: -18px 0 0 -18px;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.steelCatra__pointCore {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    background: #cbd3cf;
    border: 1px solid #b5c0ba;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width .15s ease, height .15s ease, background .15s ease;
}

.steelCatra__point:hover .steelCatra__pointCore,
.steelCatra__point:focus-visible .steelCatra__pointCore {
    width: 15px;
    height: 15px;
    background: var(--catra-green-mid);
    border-color: var(--catra-green);
}

.steelCatra__point.is-active .steelCatra__pointCore {
    width: 16px;
    height: 16px;
    background: var(--catra-green);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--catra-green), 0 0 0 6px rgba(0, 121, 78, .14);
}

.steelCatra__point.is-sibling .steelCatra__pointCore {
    width: 13px;
    height: 13px;
    background: #fff;
    border: 2px solid var(--catra-green-mid);
}

.steelCatra__point.is-selected:not(.is-active) .steelCatra__pointCore {
    background: var(--catra-green);
    border-color: var(--catra-green);
}

.steelCatra__point.is-muted {
    opacity: .26;
}

.steelCatra__tooltip {
    position: absolute;
    z-index: 10;
    display: grid;
    gap: 7px;
    width: 316px;
    padding: 14px 15px 13px;
    pointer-events: auto;
    background: #fff;
    border: 1px solid #adc9bc;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(27, 66, 46, .16);
    transform: translate(25px, calc(-100% - 17px));
}

.steelCatra__tooltip[hidden] {
    display: none;
}

.steelCatra__tooltip.is-left {
    transform: translate(calc(-100% - 25px), calc(-100% - 17px));
}

.steelCatra__tooltip.is-top {
    transform: translate(25px, 18px);
}

.steelCatra__tooltip.is-top.is-left {
    transform: translate(calc(-100% - 25px), 18px);
}

.steelCatra__tooltip strong {
    color: var(--catra-green-dark);
    font: 16px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__tooltipMetric {
    color: #35413a;
    font: 13px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__tooltip dl {
    display: grid;
    gap: 4px;
    padding: 8px 0 3px;
    margin: 0;
    border-top: 1px solid var(--catra-line);
}

.steelCatra__tooltip dl > div {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 8px;
}

.steelCatra__tooltip dt,
.steelCatra__tooltip dd {
    margin: 0;
    font-size: 10px;
    line-height: 1.35;
}

.steelCatra__tooltip dt {
    color: #89928d;
}

.steelCatra__tooltip dd {
    color: #414c46;
}

.steelCatra__tooltipActions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 18px;
    padding-top: 10px;
    border-top: 1px solid var(--catra-line);
}

.steelCatra__tooltipActions a,
.steelCatra__tooltipActions button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    min-height: 22px;
    padding: 0;
    color: var(--catra-green-dark);
    font: 10px robotomedium, Roboto, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.steelCatra__tooltipActions button {
    color: var(--catra-green-dark);
    background: transparent;
}

.steelCatra__tooltipActions button[aria-pressed="true"] {
    color: var(--catra-green-dark);
    background: transparent;
}

.steelCatra__tooltipActions a:hover,
.steelCatra__tooltipActions a:focus-visible,
.steelCatra__tooltipActions button:hover,
.steelCatra__tooltipActions button:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
    outline: none;
}

.steelCatra__tooltipActions img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.steelCatra__tooltipActions button img,
.steelCatra__tooltipActions button[aria-pressed="true"] img {
    filter: none;
}

.steelCatra__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    min-height: 40px;
    padding: 7px 0 10px 22px;
    color: #68726c;
    font-size: 11px;
}

.steelCatra__legend > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.steelCatra__legendDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #cfd5d2;
    border-radius: 50%;
}

.steelCatra__legendDot--selected {
    background: var(--catra-green);
}

.steelCatra__legendPair {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 10px;
}

.steelCatra__legendPair b {
    position: absolute;
    top: 2px;
    width: 7px;
    height: 7px;
    background: #fff;
    border: 1px solid var(--catra-green-mid);
    border-radius: 50%;
}

.steelCatra__legendPair b:first-child {
    left: 1px;
}

.steelCatra__legendPair b:last-child {
    right: 1px;
}

.steelCatra__ranking {
    min-width: 0;
    padding: 5px 0 20px 24px;
    border-left: 1px solid var(--catra-line);
}

.steelCatra__rankingHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 0 4px 12px;
}

.steelCatra__rankingHead h2 {
    margin: 0;
    color: #273029;
    font: 17px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__rankingHead > span {
    max-width: 126px;
    color: #87908b;
    font-size: 10px;
    line-height: 1.3;
    text-align: right;
}

.steelCatra__rankingColumns,
.steelCatra__rankingList button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 62px 70px;
    gap: 8px;
}

.steelCatra__rankingColumns {
    padding: 9px 10px;
    color: #89918d;
    font-size: 10px;
    border-top: 1px solid var(--catra-line);
}

.steelCatra__rankingColumns span:nth-child(n+3) {
    text-align: right;
}

.steelCatra__rankingList {
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid var(--catra-line);
}

.steelCatra__rankingList li {
    margin: 0;
    border-top: 1px solid var(--catra-line);
}

.steelCatra__rankingList li.is-active {
    background: #eef7f2;
    box-shadow: inset 4px 0 0 var(--catra-green);
}

.steelCatra__rankingList button {
    position: relative;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 8px 10px;
    color: #354039;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.steelCatra__rankingList button:hover {
    background: var(--catra-soft);
}

.steelCatra__rankingList button > span:first-child {
    font-size: 13px;
}

.steelCatra__rankSteel {
    color: var(--catra-green-dark);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.steelCatra__rankSteel small {
    display: block;
    margin-top: 3px;
    color: #89918d;
    font-size: 9px;
    text-decoration: none;
}

.steelCatra__rankingList strong {
    color: var(--catra-green-dark);
    font: 14px robotomedium, Roboto, Arial, sans-serif;
    text-align: right;
}

.steelCatra__rankingList button > span:nth-of-type(3) {
    color: #58635c;
    font-size: 11px;
    text-align: right;
}

.steelCatra__rankingList button::after {
    position: absolute;
    top: 5px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: url("/local/components/blades/steel.grade.page/templates/.default/images/steel-tests/check-circle-outline.svg") 50% 50% / contain no-repeat;
    content: "";
    opacity: 0;
}

.steelCatra__rankingList li.is-active button::after {
    opacity: 1;
}

.steelCatra__compareButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    margin-top: 26px;
    color: var(--catra-green-dark);
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--catra-green);
    border-radius: 4px;
    font-family: robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__compareButton img {
    width: 18px;
    height: 18px;
    opacity: .75;
}

.steelCatra__compareButton:hover:not(:disabled) {
    color: #fff;
    background: var(--catra-green);
}

.steelCatra__compareButton:disabled {
    color: #9cad9f;
    cursor: not-allowed;
    background: #f5f7f6;
    border-color: #ccd5d0;
}

.steelCatra__compareHint {
    margin: 10px 0 0;
    color: #8a938e;
    font-size: 11px;
    text-align: center;
}

.steelCatra__selected {
    display: grid;
    grid-template-columns: 1.1fr .8fr .65fr 1.25fr .9fr auto;
    align-items: stretch;
    margin: 16px 0;
    background: linear-gradient(105deg, #edf7f1 0%, #f7fbf8 52%, #fff 100%);
    border: 1px solid #a9cbbb;
    border-radius: 6px;
    box-shadow: inset 4px 0 0 var(--catra-green), 0 8px 22px rgba(28, 91, 58, .08);
}

.steelCatra__selected > div,
.steelCatra__selected > a {
    min-width: 0;
    padding: 14px 18px;
    border-left: 1px solid var(--catra-line);
}

.steelCatra__selected > :first-child {
    border-left: 0;
}

.steelCatra__selectedTitle {
    display: flex;
    align-items: center;
    gap: 13px;
}

.steelCatra__selected small {
    display: block;
    margin-bottom: 6px;
    color: #7b8580;
    font-size: 10px;
}

.steelCatra__selectedTitle a {
    color: var(--catra-green-dark);
    font: 18px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__activeMarker {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #bdd5c9;
    border-radius: 50%;
}

.steelCatra__activeMarker i {
    width: 13px;
    height: 13px;
    background: var(--catra-green);
    border-radius: 50%;
}

.steelCatra__selectedStat,
.steelCatra__selectedSource {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.steelCatra__selectedStat strong {
    color: #29342d;
    font: 19px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__selectedStat strong span {
    font-size: 13px;
}

.steelCatra__selectedResults {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.steelCatra__selectedResults span {
    color: #4a554e;
    font-size: 11px;
}

.steelCatra__selectedResults i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border: 1px solid var(--catra-green);
    border-radius: 50%;
}

.steelCatra__selectedSource strong {
    color: #47524b;
    font: 11px/1.35 robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__gradeLink {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    white-space: nowrap;
}

.steelCatra__gradeLink img,
.steelCatra__explanation a img {
    width: 13px;
    height: 13px;
}

.steelCatra__selectedDisclosure {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 13px 18px;
    border-top: 1px solid #e3c98f;
    background: #fff7e7;
}

.steelCatra__selectedDisclosure[hidden] {
    display: none;
}

.steelCatra__selectedDisclosure > img {
    width: 25px;
    height: 25px;
}

.steelCatra__selectedDisclosure strong {
    color: #5f4618;
    font: 12px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__selectedDisclosure p {
    margin: 3px 0 6px;
    color: #665b46;
    font-size: 11px;
    line-height: 1.5;
}

.steelCatra__selectedDisclosure a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 650;
}

.steelCatra__selectedDisclosure a img {
    width: 12px;
    height: 12px;
}

.steelCatra__explanation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "reading uncertainty"
        "sources sources";
    overflow: hidden;
    border: 1px solid var(--catra-line-strong);
    border-radius: 6px;
}

.steelCatra__explanation article {
    display: flex;
    gap: 13px;
    min-height: 100px;
    padding: 15px 16px;
    background: #fff;
    border-left: 1px solid var(--catra-line);
}

.steelCatra__explanation article:first-child {
    grid-area: reading;
    border-left: 0;
}

.steelCatra__explanation article.steelCatra__uncertainty {
    grid-area: uncertainty;
    background: var(--catra-amber-soft);
    border-color: #e9d9bb;
}

.steelCatra__outlineIcon {
    width: 31px;
    height: 31px;
    background: transparent;
    border: 1px solid #d6dfda;
}

.steelCatra__outlineIcon img {
    width: 18px;
    height: 18px;
}

.steelCatra__uncertainty .steelCatra__outlineIcon {
    border-color: #ebc47e;
}

.steelCatra__explanation h3 {
    margin: 1px 0 7px;
    color: #303a34;
    font: 13px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__explanation p {
    margin: 0;
    color: #68736c;
    font-size: 11px;
    line-height: 1.5;
}

.steelCatra__explanation a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
}

.steelCatra__sources > div {
    min-width: 0;
    width: 100%;
}

.steelCatra__explanation article.steelCatra__sources {
    grid-area: sources;
    border-top: 1px solid var(--catra-line);
    border-left: 0;
}

.steelCatra__sourceContent {
    margin-top: 11px;
}

.steelCatra__sourceContent--withDisclosure {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(360px, 3fr);
    align-items: stretch;
    gap: 7px;
}

.steelCatra__sourceDisclosure {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 13px;
    background: var(--catra-amber-soft);
    border: 1px solid #e9d9bb;
    border-left: 3px solid #d78a0b;
    border-radius: 5px;
}

.steelCatra__sourceDisclosure > img {
    width: 22px;
    height: 22px;
}

.steelCatra__sourceDisclosure strong {
    display: block;
    margin-bottom: 3px;
    color: #6d4b11;
    font: 12px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__sourceDisclosure p {
    color: #665b46;
}

.steelCatra__sourceList {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steelCatra__sourceContent--withDisclosure .steelCatra__sourceList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.steelCatra__sourceList li {
    min-width: 0;
    padding: 9px 10px;
    background: #f6f8f7;
    border: 1px solid #e0e6e2;
    border-radius: 5px;
}

.steelCatra__sourceList strong,
.steelCatra__sourceList span {
    display: block;
}

.steelCatra__sourceList strong {
    color: #344039;
    font: 11px/1.35 robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__sourceList span {
    margin-top: 4px;
    color: #7a847e;
    font-size: 9px;
    line-height: 1.35;
}

.steelCatra__sourceList a {
    margin-top: 6px;
    font-size: 10px;
}

.steelCatra__footnote {
    margin: 14px 0 0;
    padding: 10px 16px;
    color: #665f50;
    font-size: 11px;
    line-height: 1.4;
    background: var(--catra-amber-soft);
    border-left: 3px solid #d78a0b;
}

.steelCatra__registry {
    margin-top: 30px;
}

.steelCatra__registryHead {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 26px;
    margin-bottom: 13px;
}

.steelCatra__registryHead h2 {
    margin: 0;
    color: #171b1f;
    font: 24px/1.2 robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__registryHead > p {
    margin: 0 0 2px;
    color: #6e7872;
    font-size: 13px;
    white-space: nowrap;
}

.steelCatra__registryHead > p i {
    margin: 0 7px;
    color: #a5aca8;
    font-style: normal;
}

.steelCatra__selectionBar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin-bottom: 10px;
    padding: 6px 7px 6px 16px;
    background: #fff;
    border: 1px solid var(--catra-line-strong);
    border-radius: 6px;
}

.steelCatra__selectionBar > strong {
    flex: 0 0 auto;
    color: #4f5953;
    font: 12px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__selectionItems {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.steelCatra__selectionEmpty {
    color: #909994;
    font-size: 12px;
}

.steelCatra__selectionChip {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 180px;
    height: 30px;
    padding: 0 5px 0 10px;
    color: #30473b;
    font-size: 12px;
    background: #f0f5f2;
    border: 1px solid #d7e4dd;
    border-radius: 15px;
}

.steelCatra__selectionChip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.steelCatra__selectionChip button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.steelCatra__selectionChip img {
    width: 10px;
    height: 10px;
    opacity: .55;
}

.steelCatra__selectionClear,
.steelCatra__selectionCompare {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 4px;
    cursor: pointer;
}

.steelCatra__selectionClear {
    color: #657069;
    background: transparent;
    border: 0;
}

.steelCatra__selectionCompare {
    min-width: 164px;
    color: #fff;
    background: var(--catra-green);
    border: 1px solid var(--catra-green);
    font: 12px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__selectionCompare:disabled {
    color: #9ba49f;
    background: #f3f5f4;
    border-color: #d9dfdc;
    cursor: default;
}

.steelCatra__registryTableWrap {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--catra-line-strong);
    border-radius: 6px;
}

.steelCatra__registryTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.steelCatra__registryTable th {
    height: 43px;
    padding: 0 10px;
    color: #78827c;
    font: 9px robotomedium, Roboto, Arial, sans-serif;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .025em;
    background: #f7f8f7;
    border-bottom: 1px solid var(--catra-line);
}

.steelCatra__registryTable th:first-child {
    width: 47px;
}

.steelCatra__registryTable th:nth-child(2) {
    width: 43px;
}

.steelCatra__registryTable th:nth-child(3) {
    width: 16%;
}

.steelCatra__registryTable th:nth-child(4) {
    width: 130px;
}

.steelCatra__registryTable th:nth-child(5) {
    width: 112px;
}

.steelCatra__registryTable th:nth-child(6) {
    width: 160px;
}

.steelCatra__registryTable th:nth-child(7) {
    width: 20%;
}

.steelCatra__registryTable th:nth-child(8) {
    width: 142px;
}

.steelCatra__registryTable th button {
    max-width: 100%;
    padding: 4px 0;
    overflow: hidden;
    color: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}

.steelCatra__registryTable th button:hover,
.steelCatra__registryTable th button.is-active {
    color: var(--catra-green-dark);
    border-bottom-color: var(--catra-green-mid);
}

.steelCatra__registryRow {
    transition: background-color .15s ease;
}

.steelCatra__registryRow:hover {
    background: #fafcfb;
}

.steelCatra__registryRow.is-selected {
    background: var(--catra-green-soft);
}

.steelCatra__registryRow td {
    height: 49px;
    padding: 8px 10px;
    color: #4e5952;
    font-size: 12px;
    line-height: 1.35;
    vertical-align: middle;
    border-bottom: 1px solid #e6ebe8;
}

.steelCatra__registryRow:last-child td {
    border-bottom: 0;
}

.steelCatra__registrySelect {
    text-align: center;
}

.steelCatra__registryCheckbox {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px;
    cursor: pointer;
}

.steelCatra__registryCheckbox img {
    display: block;
    width: 19px;
    height: 19px;
    opacity: .55;
}

.steelCatra__registryCheckbox:hover {
    background: #edf2ef !important;
}

.steelCatra__registryCheckbox[aria-checked="true"] img {
    opacity: 1;
    filter: invert(28%) sepia(31%) saturate(1140%) hue-rotate(105deg) brightness(86%) contrast(94%);
}

.steelCatra__registryRank {
    color: #8b948f !important;
    text-align: center;
}

.steelCatra__registryGrade a {
    font: 13px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__registryDisclosure {
    margin-top: 4px;
    color: #80570e;
    font-size: 10px;
}

.steelCatra__registryDisclosure summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8a5d0e;
    font-size: 10px;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.steelCatra__registryDisclosure summary::before {
    content: "!";
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    border: 1px solid #d49a32;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
}

.steelCatra__registryDisclosure p {
    max-width: 440px;
    margin: 6px 0 4px;
    color: #665b46;
    font-size: 10px;
    line-height: 1.45;
}

.steelCatra__registryDisclosure a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #21683f;
    font: 10px robotoregular, Roboto, Arial, sans-serif;
}

.steelCatra__registryDisclosure a img {
    width: 11px;
    height: 11px;
}

.steelCatra__registryTcc {
    white-space: nowrap;
}

.steelCatra__registryTcc strong {
    color: var(--catra-green-dark);
    font: 15px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__registryResults button {
    padding: 0;
    color: #52645a;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px dotted #9ca9a2;
    cursor: pointer;
}

.steelCatra__registrySeries {
    overflow: hidden;
    text-overflow: ellipsis;
}

.steelCatra__registryPrecision.is-verified {
    color: var(--catra-green);
}

.steelCatra__registryPrecision.is-approximate {
    color: #9b650d;
}

.steelCatra__registryDetailRow > td {
    padding: 0;
    background: #fafbfa;
    border-bottom: 1px solid var(--catra-line);
}

.steelCatra__registryDetails {
    padding: 8px 18px 11px 90px;
}

.steelCatra__registryDetailsHead,
.steelCatra__registryDetail {
    display: grid;
    grid-template-columns: 130px 110px 110px minmax(220px, 1fr) 140px;
    gap: 18px;
    align-items: center;
}

.steelCatra__registryDetailsHead {
    padding: 3px 0 5px;
    color: #8a938e;
    font-size: 9px;
    text-transform: uppercase;
}

.steelCatra__registryDetail {
    min-height: 35px;
    color: #5d6761;
    font-size: 11px;
    border-top: 1px dashed #dfe5e1;
}

.steelCatra__registryDetail strong {
    color: #344039;
}

.steelCatra__registryDetail .is-verified {
    color: var(--catra-green);
}

.steelCatra__registryDetail .is-approximate {
    color: #9b650d;
}

.steelCatra__registryEmpty td {
    padding: 34px 18px;
    color: #78827c;
    font-size: 13px;
    text-align: center;
}

.steelCatra__modalBackdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgb(27 35 30 / 35%);
}

.steelCatra__modal {
    width: min(760px, 100%);
    max-height: min(680px, calc(100vh - 48px));
    overflow: auto;
    background: #fff;
    border: 1px solid #cbd7d0;
    border-radius: 8px;
    box-shadow: 0 26px 70px rgb(24 38 30 / 20%);
}

.steelCatra__modalHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px 17px;
    border-bottom: 1px solid var(--catra-line);
}

.steelCatra__modalHead h2 {
    margin: 0;
    font: 22px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__modalHead button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 8px;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--catra-line);
    border-radius: 50%;
    place-items: center;
}

.steelCatra__modalHead button img {
    width: 15px;
    height: 15px;
}

.steelCatra__comparisonTable {
    padding: 0 24px;
}

.steelCatra__comparisonRow {
    display: grid;
    grid-template-columns: 1.35fr .9fr .75fr 1fr .6fr;
    gap: 15px;
    padding: 15px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--catra-line);
}

.steelCatra__comparisonRow b {
    color: var(--catra-green-dark);
}

.steelCatra__comparisonRow--labels {
    color: #7c8680;
    font-size: 10px;
    text-transform: uppercase;
}

.steelCatra__modal > p {
    margin: 0;
    padding: 18px 24px 22px;
    color: #68736c;
    font-size: 12px;
    line-height: 1.5;
}

.steelCatra__modal--factors {
    width: min(820px, 100%);
}

.steelCatra__modal--factors .steelCatra__factorsLead {
    padding-bottom: 16px;
    color: #4f5b54;
    font-size: 13px;
}

.steelCatra__factorsGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0 24px;
    overflow: hidden;
    background: var(--catra-line);
    border: 1px solid var(--catra-line);
    border-radius: 6px;
}

.steelCatra__factorsGrid article {
    min-width: 0;
    padding: 17px 18px;
    background: #fff;
}

.steelCatra__factorsGrid h3 {
    margin: 0 0 7px;
    color: var(--catra-green-dark);
    font: 14px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__factorsGrid p {
    margin: 0;
    color: #657069;
    font-size: 12px;
    line-height: 1.55;
}

.steelCatra__modal--factors .steelCatra__factorsConclusion {
    margin: 18px 24px 22px;
    padding: 12px 14px;
    color: #70500e;
    background: var(--catra-amber-soft);
    border-left: 3px solid #d78a0b;
}

.steelCatra__empty {
    padding: 54px 28px;
    text-align: center;
    background: var(--catra-soft);
    border: 1px solid var(--catra-line);
    border-radius: 7px;
}

.steelCatra__empty h2 {
    margin: 0 0 8px;
    font: 24px robotomedium, Roboto, Arial, sans-serif;
}

.steelCatra__empty p {
    margin: 0 0 18px;
    color: var(--catra-muted);
}

.steelCatra__srOnly {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
}

@container steelCatra (max-width: 1120px) {
    .steelCatra__intro {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .steelCatra__introBrand {
        align-items: flex-start;
        padding-right: 18px;
        padding-left: 18px;
    }

    .steelCatra__catraLogo {
        width: 68px;
        height: 68px;
    }

    .steelCatra__introBrand h2 {
        font-size: 19px;
    }

    .steelCatra__introFooter {
        grid-template-columns: auto 1fr;
    }

    .steelCatra__introWarning {
        grid-column: 1 / -1;
        margin: 0 -12px -7px -20px;
        border-top: 1px solid #eadfc8;
        border-left: 0;
    }

    .steelCatra__sourceList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steelCatra__protocol {
        grid-template-columns: 1fr .6fr 1.25fr;
    }

    .steelCatra__workspace {
        grid-template-columns: minmax(0, 1fr) 330px;
    }

    .steelCatra__dataset {
        flex-basis: 270px;
        width: 270px;
    }

    .steelCatra__search {
        flex: 1 1 170px;
        width: auto;
        min-width: 170px;
    }

    .steelCatra__hardnessFilter > span:first-child {
        display: none;
    }

    .steelCatra__rangePair {
        width: 104px;
    }

    .steelCatra__selected {
        grid-template-columns: 1.2fr .8fr .7fr 1.2fr;
    }

    .steelCatra__selectedSource,
    .steelCatra__gradeLink {
        border-top: 1px solid var(--catra-line);
    }

    .steelCatra__selectedSource {
        grid-column: 1 / 4;
        border-left: 0 !important;
    }
}

@container steelCatra (max-width: 860px) {
    .steelCatra__sourceContent--withDisclosure {
        grid-template-columns: minmax(0, 1fr);
    }
    .steelCatra__headingMark {
        display: none;
    }

    .steelCatra__intro {
        display: block;
    }

    .steelCatra__introBrand {
        align-items: center;
        border-right: 0;
        border-bottom: 1px solid var(--catra-line);
    }

    .steelCatra__protocol {
        grid-template-columns: 1fr auto;
    }

    .steelCatra__protocolWarning {
        grid-column: 1 / -1;
        border-top: 1px solid #eadfc8;
        border-left: 0;
    }

    .steelCatra__workspace {
        display: block;
        border-bottom: 0;
    }

    .steelCatra__explorer {
        padding-right: 0;
    }

    .steelCatra__ranking {
        padding: 18px 0 0;
        margin-top: 18px;
        border-top: 1px solid var(--catra-line);
        border-left: 0;
    }

    .steelCatra__filters {
        flex-wrap: wrap;
    }

    .steelCatra__dataset {
        flex: 0 0 285px;
        width: 285px;
    }

    .steelCatra__search {
        flex: 1 1 220px;
        width: auto;
        min-width: 220px;
    }

    .steelCatra__hardnessFilter {
        flex: 1;
    }

    .steelCatra__chartFrame {
        height: 420px;
        overflow: hidden;
    }

    .steelCatra__selected {
        grid-template-columns: 1fr 1fr;
    }

    .steelCatra__selected > :nth-child(odd) {
        border-left: 0;
    }

    .steelCatra__selected > div,
    .steelCatra__selected > a {
        border-top: 1px solid var(--catra-line);
    }

    .steelCatra__selected > :nth-child(-n+2) {
        border-top: 0;
    }

    .steelCatra__selectedSource {
        grid-column: auto;
    }

    .steelCatra__explanation {
        grid-template-columns: 1fr;
        grid-template-areas:
            "reading"
            "uncertainty"
            "sources";
    }

    .steelCatra__explanation article {
        border-top: 1px solid var(--catra-line);
        border-left: 0;
    }

    .steelCatra__explanation article:first-child {
        border-top: 0;
    }

    .steelCatra__sourceList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container steelCatra (max-width: 560px) {
    .steelCatra {
        padding-top: 4px;
    }

    .steelCatra__heading h1 {
        font-size: 29px;
    }

    .steelCatra__heading p:last-child {
        line-height: 1.45;
    }

    .steelCatra__introBrand {
        gap: 13px;
        padding: 15px;
    }

    .steelCatra__catraLogo {
        width: 58px;
        height: 58px;
    }

    .steelCatra__introBrand h2 {
        font-size: 18px;
    }

    .steelCatra__introContent {
        padding: 15px 15px 0;
    }

    .steelCatra__introLead {
        font-size: 12px;
    }

    .steelCatra__introFacts {
        display: block;
        margin-top: 13px;
    }

    .steelCatra__introFacts article,
    .steelCatra__introFacts article + article {
        padding: 10px 0;
        border-top: 1px solid var(--catra-line);
        border-left: 0;
    }

    .steelCatra__introFacts article:first-child {
        border-top: 0;
    }

    .steelCatra__introFooter {
        display: flex;
        flex-wrap: wrap;
        gap: 9px 14px;
        margin: 0 -15px;
        padding: 10px 14px 0;
    }

    .steelCatra__introLinks {
        justify-content: flex-start;
        gap: 12px;
        padding: 0;
    }

    .steelCatra__introWarning {
        flex-basis: calc(100% + 28px);
        margin: 0 -14px;
        padding: 9px 14px;
    }

    .steelCatra__sourceList,
    .steelCatra__factorsGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .steelCatra__modalBackdrop {
        align-items: end;
        padding: 12px;
    }

    .steelCatra__modal--factors {
        max-height: calc(100vh - 24px);
    }

    .steelCatra__modal--factors .steelCatra__modalHead {
        padding: 18px 16px 14px;
    }

    .steelCatra__modal--factors .steelCatra__modalHead h2 {
        font-size: 19px;
    }

    .steelCatra__modal--factors .steelCatra__factorsLead {
        padding: 14px 16px;
    }

    .steelCatra__factorsGrid {
        margin: 0 16px;
    }

    .steelCatra__modal--factors .steelCatra__factorsConclusion {
        margin: 14px 16px 18px;
    }

    .steelCatra__protocol {
        grid-template-columns: 1fr;
    }

    .steelCatra__protocol > div {
        padding: 12px 14px;
    }

    .steelCatra__protocolCount {
        border-top: 1px solid var(--catra-line);
        border-left: 0;
    }

    .steelCatra__protocolWarning {
        grid-column: auto;
    }

    .steelCatra__filters {
        gap: 10px;
    }

    .steelCatra__dataset,
    .steelCatra__search {
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
    }

    .steelCatra__datasetMenu {
        width: 100%;
    }

    .steelCatra__datasetOption {
        grid-template-columns: minmax(0, 1fr) 20px;
    }

    .steelCatra__datasetOptionType {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
    }

    .steelCatra__datasetOptionCheck {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .steelCatra__hardnessFilter {
        width: 100%;
    }

    .steelCatra__rangePair {
        flex: 1;
        min-width: 86px;
    }

    .steelCatra__chartFrame {
        height: 390px;
        padding-left: 48px;
    }

    .steelCatra__tooltip,
    .steelCatra__tooltip.is-left,
    .steelCatra__tooltip.is-top,
    .steelCatra__tooltip.is-top.is-left {
        top: auto !important;
        right: auto;
        bottom: 12px;
        left: 50% !important;
        width: min(286px, calc(100% - 20px));
        padding: 12px;
        transform: translateX(-50%);
    }

    .steelCatra__tooltip dl > div {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .steelCatra__tooltipActions { gap: 7px 14px; }

    .steelCatra__legend {
        gap: 13px;
        padding-left: 0;
    }

    .steelCatra__rankingColumns,
    .steelCatra__rankingList button {
        grid-template-columns: 28px minmax(0, 1fr) 58px 62px;
    }

    .steelCatra__selected {
        grid-template-columns: 1fr;
    }

    .steelCatra__selected > div,
    .steelCatra__selected > a {
        border-top: 1px solid var(--catra-line);
        border-left: 0;
    }

    .steelCatra__selected > :first-child {
        border-top: 0;
    }

    .steelCatra__comparisonRow {
        grid-template-columns: 1.2fr .9fr .7fr 1fr;
    }

    .steelCatra__comparisonRow > :last-child {
        display: none;
    }
}

@container steelCatra (max-width: 900px) {
    .steelCatra__selectionBar {
        flex-wrap: wrap;
    }

    .steelCatra__selectionItems {
        order: 3;
        flex-basis: 100%;
        padding: 1px 0 3px;
    }

    .steelCatra__selectionClear {
        margin-left: auto;
    }

    .steelCatra__registryTableWrap {
        overflow-x: auto;
    }

    .steelCatra__registryTable {
        min-width: 910px;
    }
}

@container steelCatra (max-width: 640px) {
    .steelCatra__registry {
        margin-top: 24px;
    }

    .steelCatra__registryHead {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }

    .steelCatra__registryHead h2 {
        font-size: 21px;
    }

    .steelCatra__registryHead > p {
        margin: 5px 0 0;
        font-size: 11px;
    }

    .steelCatra__selectionBar {
        gap: 8px;
        padding: 10px;
    }

    .steelCatra__selectionItems {
        order: 2;
        flex-basis: 100%;
        flex-wrap: wrap;
        overflow: visible;
    }

    .steelCatra__selectionClear {
        order: 3;
        margin-left: 0;
    }

    .steelCatra__selectionCompare {
        order: 4;
        flex: 1 1 auto;
    }

    .steelCatra__registryTableWrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .steelCatra__registryTable {
        display: block;
        min-width: 0;
    }

    .steelCatra__registryTable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .steelCatra__registryTable tbody {
        display: grid;
        gap: 8px;
    }

    .steelCatra__registryRow {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        grid-template-areas:
            "select grade tcc"
            "select hrc hrc"
            "select results results"
            "select series series"
            "select precision precision";
        padding: 10px 12px 9px 8px;
        background: #fff;
        border: 1px solid var(--catra-line-strong);
        border-radius: 6px;
    }

    .steelCatra__registryRow.is-selected {
        border-color: #afd0c0;
    }

    .steelCatra__registryRow td {
        display: flex;
        align-items: center;
        min-width: 0;
        height: auto;
        padding: 5px 0;
        border-bottom: 0;
    }

    .steelCatra__registryRow td::before {
        flex: 0 0 102px;
        color: #89928d;
        font-size: 9px;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .steelCatra__registrySelect {
        grid-area: select;
        align-items: flex-start !important;
        justify-content: center;
        padding-top: 7px !important;
    }

    .steelCatra__registrySelect::before,
    .steelCatra__registryGrade::before,
    .steelCatra__registryTcc::before {
        display: none;
    }

    .steelCatra__registryRank {
        display: none !important;
    }

    .steelCatra__registryGrade {
        grid-area: grade;
        flex-wrap: wrap;
    }

    .steelCatra__registryGrade a {
        font-size: 14px;
    }

    .steelCatra__registryDisclosure {
        flex: 0 0 100%;
    }

    .steelCatra__registryDisclosure a {
        font-size: 10px;
    }

    .steelCatra__registryTcc {
        grid-area: tcc;
        justify-content: flex-end;
        padding-left: 12px !important;
    }

    .steelCatra__registryHrc {
        grid-area: hrc;
    }

    .steelCatra__registryResults {
        grid-area: results;
    }

    .steelCatra__registrySeries {
        grid-area: series;
        white-space: normal;
    }

    .steelCatra__registryPrecision {
        grid-area: precision;
    }

    .steelCatra__registryDetailRow {
        display: block;
        margin-top: -9px;
    }

    .steelCatra__registryDetailRow > td {
        display: block;
        border: 1px solid var(--catra-line);
        border-top: 0;
        border-radius: 0 0 6px 6px;
    }

    .steelCatra__registryDetails {
        padding: 8px 12px;
    }

    .steelCatra__registryDetailsHead {
        display: none;
    }

    .steelCatra__registryDetail {
        grid-template-columns: 1fr 1fr;
        gap: 5px 12px;
        padding: 8px 0;
    }

    .steelCatra__registryDetail span:nth-child(4) {
        grid-column: 1 / -1;
    }

    .steelCatra__registryEmpty {
        display: block;
        background: #fff;
        border: 1px solid var(--catra-line);
        border-radius: 6px;
    }

    .steelCatra__registryEmpty td {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .steelCatra__pointCore {
        transition: none;
    }
}

/* End */
/* /local/components/blades/steel.catra.rating/templates/.default/style.css?178725631955152 */