.crafting{padding-top: calc(var(--sp-8) + var(--sp-1));} .craft-head{position: relative;padding-bottom: var(--sp-3);border-bottom: 1px solid var(--gold-dim);background: linear-gradient(180deg,color-mix(in srgb,var(--bg-3) 60%,transparent),transparent);} .craft-head h1{font-size: var(--fs-title-record);line-height: var(--lh-heading);color: var(--text-bright);} .craft-sub{margin: var(--sp-1) 0 var(--sp-2);max-width: min(var(--measure),52ch);font-size: var(--fs-lead);line-height: var(--lh-body,1.6);color: var(--text-body);text-wrap: pretty;} .craft-search{width: min(340px,100%);padding: var(--sp-1) var(--sp-2);font-family: var(--font-body);font-size: var(--fs-lead);color: var(--text-body);background: var(--bg-2);border: 1px solid var(--border);border-radius: var(--radius-1);transition: border-color var(--dur-instant) var(--ease-out),background-color var(--dur-instant) var(--ease-out),box-shadow var(--dur-instant) var(--ease-out);} .craft-search:hover{border-color: var(--border-bright);background-color: var(--bg-4);box-shadow: 0 0 0 1px color-mix(in srgb,var(--gold-mid) 18%,transparent);} .craft-search:focus-visible{outline: none;border-color: var(--gold-mid);background-color: var(--bg-3);box-shadow: 0 0 0 2px color-mix(in srgb,var(--gold-mid) 25%,transparent);} .craft-search:active{border-color: var(--gold-dark);} .craft-controls{display: flex;flex-wrap: wrap;align-items: center;gap: var(--sp-2) var(--sp-3);} .craft-filter-group{position: relative;display: flex;align-items: center;gap: var(--sp-2);} .craft-filter-label{flex: 0 0 auto;font-size: var(--fs-caption);color: var(--text-body);} .craft-filter{min-width: 150px;padding: var(--sp-1) var(--sp-2);padding-right: calc(var(--sp-2) + 16px);font-family: var(--font-body);font-size: var(--fs-lead);color: var(--text-body);background: var(--bg-2);border: 1px solid var(--border);border-radius: var(--radius-1);appearance: none;-webkit-appearance: none;transition: border-color var(--dur-instant) var(--ease-out),background-color var(--dur-instant) var(--ease-out),box-shadow var(--dur-instant) var(--ease-out);} .craft-filter-group::after{content: "";position: absolute;top: 50%;right: calc(var(--sp-2) + 5px);width: 7px;height: 7px;border-right: 1.5px solid var(--gold-mid);border-bottom: 1.5px solid var(--gold-mid);transform: translateY(-58%) rotate(45deg);opacity: 0.75;pointer-events: none;} .craft-filter:hover{border-color: var(--border-bright);background-color: var(--bg-3);} .craft-filter:focus-visible{outline: none;border-color: var(--gold-mid);background-color: var(--bg-3);box-shadow: 0 0 0 2px color-mix(in srgb,var(--gold-mid) 25%,transparent);} .craft-filter:active{border-color: var(--gold-dark);} .craft-notice{margin: 0 0 var(--sp-2);padding: var(--sp-1) var(--sp-3);font-size: var(--fs-caption);color: var(--parchment);background: var(--bg-3);border: 1px solid var(--gold-dim);border-radius: var(--radius-1);} .craft-notice[hidden]{display: none;} .craft-error{margin: 0 0 var(--sp-2);padding: var(--sp-1) var(--sp-3);font-size: var(--fs-lead);color: var(--parchment);background: var(--oxblood);border: 1px solid var(--parchment-dark);border-radius: var(--radius-1);} .craft-error[hidden]{display: none;} .craft-freshness{margin: 0 0 var(--sp-2);padding: 0 var(--sp-3);font-family: var(--font-body);font-size: var(--fs-caption);color: var(--text-body);} .craft-freshness[hidden]{display: block;visibility: hidden;} .craft-freshness[hidden]::before{content: "\00a0";} .craft-grid{display: grid;grid-template-columns: minmax(340px,560px) 1fr;gap: var(--sp-4);margin-top: var(--sp-1);} .craft-list-pane{background: var(--grad-panel);border: 1px solid var(--border);border-radius: var(--radius-2);box-shadow: var(--shadow-panel-rim),var(--shadow-2);padding: var(--sp-2);} .craft-detail-col{background: repeating-linear-gradient(0deg,transparent 0px,transparent 3px,color-mix(in srgb,var(--gold-mid) 14%,transparent) 3px,color-mix(in srgb,var(--gold-mid) 14%,transparent) 4px),linear-gradient(180deg,var(--bg-2) 0%,color-mix(in srgb,var(--bg-4) 72%,var(--bg-3)) 100%);border: 1px solid var(--border);border-left: 1px solid color-mix(in srgb,var(--gold-mid) 35%,var(--border));border-radius: var(--radius-2);box-shadow: var(--shadow-panel-rim),var(--shadow-2);} @media (min-width: 901px){.craft-stick{position: sticky;top: calc(var(--sp-8) + var(--sp-1));}} .craft-rows{list-style: none;margin: 0;padding: 0;} .craft-rows li{border-bottom: 1px solid var(--border);} .craft-rows li:last-child{border-bottom: 0;} .recipe-row{display: grid;grid-template-columns: 24px minmax(0,1fr) 76px 96px;width: 100%;align-items: center;gap: var(--sp-2);padding: var(--sp-1) var(--sp-2);font-family: var(--font-body);font-size: var(--fs-small);line-height: var(--lh-tight);text-align: left;color: var(--text-body);background: transparent;border: 1px solid transparent;cursor: pointer;transition: background-color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out);} .recipe-meta{display: contents;} .craft-row-alt{background-color: var(--bg-4);} .craft-rows li.craft-group{display: flex;align-items: baseline;justify-content: space-between;gap: var(--sp-2);padding: var(--sp-3) var(--sp-2) var(--sp-1);border-bottom: 1px solid var(--gold-dark);position: sticky;top: calc(var(--chrome-header-h) + var(--sp-2));z-index: 2;background-color: var(--bg-2);background-image: linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold-dark) 12%,transparent));} .craft-rows li.craft-group:first-child{padding-top: var(--sp-1);} .craft-group-name{margin: 0;font-size: var(--fs-small);font-weight: 700;line-height: var(--lh-tight);letter-spacing: var(--tr-label);text-transform: uppercase;color: var(--gold-2);} .craft-group-name::before{content: "";display: inline-block;width: 3px;height: 0.9em;margin-right: var(--sp-2);vertical-align: -1px;background-color: var(--gold-mid);} .craft-group-count{font-size: var(--fs-caption);font-variant-numeric: tabular-nums;color: var(--drab);} .recipe-row:hover{background-color: var(--bg-3);border-color: var(--border);color: var(--text-bright);} .recipe-row:focus-visible{outline: 2px solid var(--gold-mid);outline-offset: calc(-1 * 2px);} .recipe-row:active{background-color: var(--bg-4);} .recipe-row[aria-current="true"]{background-color: color-mix(in srgb,var(--gold-dark) 16%,var(--bg-2));border-color: var(--gold-dark);color: var(--text-bright);} .recipe-row[aria-current="true"]:hover{background-color: color-mix(in srgb,var(--gold-dark) 24%,var(--bg-2));} .recipe-row[aria-current="true"]:focus-visible{background-color: color-mix(in srgb,var(--gold-dark) 24%,var(--bg-2));} .recipe-name{min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: var(--fs-small);color: var(--text-bright);} .recipe-category{min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;justify-self: start;font-family: var(--font-body);font-size: var(--fs-caption);color: var(--drab);} .recipe-band{justify-self: start;} @media (max-width: 900px){.recipe-row{grid-template-columns: 24px minmax(0,1fr) 76px;} .recipe-category{display: none;} .craft-list-pane{display: flex;flex-direction: column;} .craft-list-pane > .craft-rows{order: 1;} .craft-list-pane > .craft-count{order: 2;} .craft-list-pane > .craft-pager{order: 3;}} .craft-pager{display: flex;align-items: center;gap: var(--sp-2);margin-bottom: var(--sp-1);font-family: var(--font-body);font-size: var(--fs-caption);color: var(--text-body);} .craft-pager[hidden]{display: none;} .craft-list-pane:not(:has(.craft-rows[data-state="empty"])) .craft-pager[hidden]{display: flex;visibility: hidden;} .craft-pager-status{letter-spacing: var(--tr-label);} .craft-pager-btn{display: inline-flex;align-items: center;min-height: 55px;padding: var(--sp-1) var(--sp-2);font-family: var(--font-body);font-size: var(--fs-caption);color: var(--text-body);background: var(--bg-4);border: 1px solid var(--border-bright);border-radius: var(--radius-1);cursor: pointer;transition: background-color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out);} .craft-pager-btn:hover:not(:disabled){background-color: var(--bg-4);border-color: var(--border-bright);color: var(--text-bright);} .craft-pager-btn:focus-visible:not(:disabled){background-color: var(--bg-4);border-color: var(--border-bright);color: var(--text-bright);} .craft-pager-btn:focus-visible{outline: 2px solid var(--gold-mid);outline-offset: calc(-1 * 2px);} .craft-pager-btn:active:not(:disabled){background-color: var(--bg-2);} .craft-pager-btn:disabled{color: var(--text-body);border-color: var(--border);cursor: not-allowed;} .craft-count{margin-top: var(--sp-2);font-family: var(--font-body);font-size: var(--fs-caption);color: var(--text-body);} .craft-detail{align-self: start;padding: var(--sp-4);background: linear-gradient(180deg,color-mix(in srgb,var(--bg-3) 55%,transparent),transparent 260px),var(--bg-2);border: 1px solid var(--border);border-radius: var(--radius-2);} .craft-detail h2{min-width: 0;overflow-wrap: anywhere;font-size: var(--fs-h3);line-height: var(--lh-heading);color: var(--text-bright);} .craft-detail-head{display: flex;align-items: center;gap: var(--sp-3);} .craft-detail-art{display: flex;align-items: center;justify-content: center;flex: 0 0 auto;width: var(--sp-8);height: var(--sp-8);font-family: var(--font-display);font-size: var(--fs-h3);color: var(--gold-mid);background-color: var(--bg-3);box-shadow: inset 0 0 0 1px var(--gold-dim);border-radius: var(--radius-2);} .craft-meta{display: flex;flex-wrap: wrap;align-items: center;gap: var(--sp-1) var(--sp-3);margin: var(--sp-1) 0 var(--sp-3);min-width: 0;} .craft-yields{font-family: var(--font-body);font-size: var(--fs-caption);color: var(--gold-mid);} .craft-chip{white-space: nowrap;padding: 0 var(--sp-2);font-family: var(--font-body);font-size: var(--fs-caption);letter-spacing: var(--tr-label);text-transform: uppercase;color: var(--ink-2);background: var(--bg-4);border: 1px solid var(--border-subtle);border-radius: var(--radius-1);} .craft-chip-band{color: var(--text-body);background: transparent;border-color: var(--border);} .craft-chip-band.craft-band-1{color: var(--ash);border-color: var(--border);} .craft-chip-band.craft-band-2{color: var(--parchment-dark);border-color: var(--gold-dark);} .craft-chip-band.craft-band-3{color: var(--gold-2);border-color: var(--gold-dim);} .craft-value{padding: 0 var(--sp-2);font-family: var(--font-body);font-size: var(--fs-caption);color: var(--gold-mid);border: 1px solid var(--border-bright);border-radius: var(--radius-1);} .craft-reagents-label{margin-bottom: var(--sp-1);font-family: var(--font-body);font-size: var(--fs-caption);letter-spacing: var(--tr-label);text-transform: uppercase;color: var(--text-body);} .craft-econ{margin-top: var(--sp-4);} .craft-econ-list{list-style: none;margin: 0;padding: 0;} .craft-econ-row{display: flex;justify-content: space-between;gap: var(--sp-3);padding: var(--sp-2) 0;border-bottom: 1px solid var(--border-subtle);font-size: var(--fs-small);font-variant-numeric: tabular-nums;} .craft-econ-label{color: var(--text-secondary);} .craft-econ-value{color: var(--text-bright);font-weight: 700;text-align: right;} .craft-econ-note{margin: var(--sp-2) 0 0;font-size: var(--fs-caption);color: var(--text-quiet);} .craft-reagents,.craft-tree{list-style: none;margin: 0;padding: 0;} .craft-reagents{border-top: 1px solid var(--border);} .craft-tree{padding-left: var(--sp-3);border-left: 1px solid var(--border);} .craft-reagents li,.craft-tree li{padding: var(--sp-1) 0;font-size: var(--fs-lead);} .craft-node-row{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: var(--sp-1) var(--sp-3);} .craft-reagent-name{flex: 1 1 auto;min-width: 0;} .craft-node-qty{flex: 0 0 auto;font-family: var(--font-body);} .craft-reagent-count{color: var(--gold-mid);} .craft-node-total{margin-left: var(--sp-2);color: var(--text-body);} .craft-node-tag{margin-left: var(--sp-2);font-size: var(--fs-caption);color: var(--text-dim);} .craft-node-cycle .craft-node-tag{color: var(--gold-mid);} .craft-node-cycle .craft-reagent-name{color: var(--text-body);} .craft-node-link{color: var(--gold-mid);text-decoration: underline;text-underline-offset: 2px;border-radius: var(--radius-1);transition: color var(--dur-instant) var(--ease-out);} .craft-node-link:hover{color: var(--text-bright);} .craft-node-link:focus-visible{outline: 2px solid var(--gold-mid);outline-offset: 1px;} .craft-node-link:active{color: var(--gold-bright);} .craft-related{margin-top: var(--sp-3);padding-top: var(--sp-2);border-top: 1px solid var(--border);} .craft-related-title,.craft-used-group-label,.craft-used-toggle{margin: 0 0 var(--sp-1);font-family: var(--font-body);font-size: var(--fs-caption);letter-spacing: var(--tr-label);text-transform: uppercase;color: var(--text-body);} .craft-related-list{list-style: none;margin: 0;padding: 0;} .craft-related-list li{padding: var(--sp-1) 0;font-size: var(--fs-lead);} .craft-related-count{margin-left: var(--sp-1);color: var(--gold-mid);} .craft-used-group{margin-top: var(--sp-2);} .craft-used-group:first-of-type{margin-top: var(--sp-1);} .craft-used-group-label{display: flex;align-items: baseline;justify-content: space-between;gap: var(--sp-2);margin: 0 0 var(--sp-1);padding-bottom: 2px;border-bottom: 1px solid var(--border);color: var(--text-dim);} .craft-used-group-count{flex: 0 0 auto;font-variant-numeric: tabular-nums;color: var(--gold-mid);} .craft-used-group .craft-related-list{columns: 15rem auto;column-gap: var(--sp-3);} .craft-used-group .craft-related-list li{padding: 3px 0;font-size: var(--fs-body,1rem);line-height: var(--lh-body,1.6);break-inside: avoid;} .craft-used-toggle{margin-top: var(--sp-2);padding: var(--sp-1) var(--sp-2);color: var(--gold-mid);background: transparent;border: 1px solid var(--border-bright);border-radius: var(--radius-1);cursor: pointer;transition: color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out);} .craft-used-toggle:hover{color: var(--text-bright);border-color: var(--gold-dim);} .craft-used-toggle:focus-visible{outline: 2px solid var(--gold-mid);outline-offset: 2px;} @media (max-width: 30rem){.craft-used-group .craft-related-list{columns: auto;} .craft-used-toggle{width: 100%;}} .craft-related-current{font-family: var(--font-body);font-size: var(--fs-caption);letter-spacing: var(--tr-label);text-transform: uppercase;color: var(--gold-mid);} .craft-related-shown{margin-left: var(--sp-2);font-family: var(--font-body);color: var(--text-body);} .craft-empty-note{margin: 0;font-size: var(--fs-lead);font-style: italic;color: var(--text-body);} @media (prefers-reduced-motion: reduce){.recipe-row,.craft-search,.craft-filter,.craft-pager-btn,.craft-node-link{transition: none;}} @media (max-width: 900px){.craft-grid{grid-template-columns: minmax(0,1fr);} .craft-detail{order: -1;} .craft-search{width: 100%;} .craft-filter-group{min-width: 0;flex: 1 1 auto;} .craft-filter{min-width: 0;flex: 1 1 auto;}} .crafting > .craft-band{margin: 0;padding-block: var(--sp-4);} .recipe-icon,.craft-node-icon{flex: 0 0 auto;width: 24px;height: 24px;margin-right: var(--sp-2);border-radius: var(--radius-1);background-color: var(--bg-3);box-shadow: 0 0 0 1px var(--gold-dim);} .craft-node-icon{margin-right: var(--sp-2);vertical-align: -6px;} .craft-detail-art{position: relative;overflow: hidden;} .craft-detail-icon{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: contain;background-color: var(--bg-3);} .craft-node-qty,.craft-yields,.craft-value,.craft-pager-status,.craft-count,.recipe-band,.craft-node-total,.craft-reagent-count{font-variant-numeric: tabular-nums;letter-spacing: 0;} .craft-node-qty{display: flex;align-items: baseline;gap: var(--sp-2);justify-content: flex-end;} .craft-reagent-count{min-width: 3.5rem;text-align: right;font-weight: 700;} .craft-node-total{min-width: 5.5rem;margin-left: 0;text-align: right;} .recipe-row{align-items: center;min-height: 40px;padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);} .craft-filter{min-width: 0;width: 11rem;flex: 0 0 11rem;} .craft-filter-group{flex: 0 0 auto;} .craft-rows[data-state="loading"],.craft-rows:empty:not([data-state="error"]):not([data-state="empty"]){--craft-page: 50;--craft-row: 70px;min-height: calc(var(--craft-page) * var(--craft-row));background-image: repeating-linear-gradient(180deg,var(--bg-3) 0 12px,transparent 12px var(--craft-row));background-size: 62% calc(var(--craft-page) * var(--craft-row));background-repeat: no-repeat;background-position: 0 8px;animation: craft-skeleton 1.4s var(--ease-out) infinite;} @keyframes craft-skeleton{0%,100%{opacity: 0.4;} 50%{opacity: 0.95;}} .craft-rows[data-state="empty"] .craft-empty-note{display: block;margin: var(--sp-3) 0;padding: var(--sp-3) var(--sp-4);border: 1px solid var(--border);border-radius: var(--radius-2);background: var(--bg-2);color: var(--parchment);font-style: normal;} .craft-rows[data-state="error"]{min-height: 0;padding: var(--sp-3) var(--sp-4);border: 1px solid var(--parchment-dark);border-radius: var(--radius-2);background: var(--oxblood);} .craft-freshness:not([hidden]){border-left: 3px solid var(--gold-dim);padding-left: var(--sp-3);} .craft-freshness[data-state="stale"]{color: var(--parchment);border-left-color: var(--gold-bright);} .craft-pager-btn:disabled{opacity: 0.5;filter: saturate(0.4);} @media (min-width: 64rem){.craft-pager-btn{min-height: 40px;}} @media (min-width: 56.32rem) and (max-width: 68.4rem){.craft-grid{grid-template-columns: minmax(0,20rem) 1fr;gap: var(--sp-3);} .craft-detail{padding: var(--sp-3);} .recipe-category{display: none;}} @media (max-width: 30rem){.recipe-row{align-items: flex-start;row-gap: 2px;} .recipe-name{flex: 1 1 auto;font-size: var(--fs-body);} .recipe-meta{flex-basis: 100%;padding-left: calc(24px + var(--sp-2));} .craft-search,.craft-filter{width: 100%;flex: 1 1 100%;min-height: 2.75rem;} .craft-filter-group{flex: 1 1 100%;} .craft-tree{padding-left: var(--sp-2);} .craft-node-row{row-gap: 2px;} .craft-node-qty{flex-basis: 100%;justify-content: flex-start;} .craft-reagent-count,.craft-node-total{min-width: 0;text-align: left;}} @media (prefers-reduced-motion: reduce){.craft-rows[data-state="loading"]{animation: none;opacity: 0.7;}} .craft-icon-fallback{flex: 0 0 auto;width: 28px;height: 28px;margin-right: var(--sp-2);border-radius: var(--radius-1);background-color: #2a2419;background-image: repeating-linear-gradient(135deg,var(--gold-earth-a12) 0 2px,transparent 2px 6px);box-shadow: 0 0 0 1px var(--gold-dim);} .recipe-icon,.craft-node-icon{width: 28px;height: 28px;background-color: #2a2419;} .craft-pager-btn:disabled{opacity: 1;filter: none;color: var(--text-muted);border-color: var(--border-subtle);background: var(--bg-2);cursor: not-allowed;} @media (max-width: 30rem){.recipe-category{display: none;}} @media (max-width: 30rem){.craft-filter-group{display: block;width: 100%;} .craft-filter-group label{display: block;margin-bottom: 2px;font-size: var(--fs-caption);text-transform: uppercase;letter-spacing: var(--tr-label);color: var(--parchment);} .craft-filter{width: 100%;max-width: 100%;min-height: 2.75rem;}} .craft-empty-clear{margin-top: var(--sp-3);} .recipe-icon,.craft-node-icon,.craft-icon-fallback{width: 32px;height: 32px;overflow: hidden;box-sizing: border-box;} .recipe-icon,.craft-node-icon{object-fit: contain;} .recipe-icon,.craft-icon-fallback{display: block;flex: 0 0 32px;margin-right: var(--sp-2);} #recipe-detail[data-state="empty"]{display: flex;flex-direction: column;justify-content: center;min-height: 12rem;} .craft-detail-empty-title{margin: 0 0 var(--sp-2);font-family: var(--font-display);font-size: var(--fs-lead);font-weight: var(--fw-display);font-synthesis: none;color: var(--parchment);} .craft-detail-empty-note{max-width: 46ch;margin: 0;font-size: var(--fs-small);line-height: var(--lh-normal);color: var(--ash);} .craft-icon-fallback{background-image: none;background-color: var(--bg-2);box-shadow: 0 0 0 1px var(--border-subtle);} .recipe-icon,.craft-node-icon{box-sizing: border-box;padding: 0;} .recipe-icon,.craft-node-icon,.craft-icon-fallback{border: 1px solid var(--game-hairline);border-radius: var(--radius-1);box-shadow: var(--shadow-slot-bevel);} .craft-detail-art{border: 1px solid var(--game-hairline);border-radius: var(--radius-1);box-shadow: var(--shadow-slot-bevel);}