/* /use-cases/ pages. Loads after works-with.css and adds only the pieces it lacks. */

/* ── Hero lockup: Pareto plus each tool ── */
.uc-lockup{flex-wrap:wrap}
html.js .uc-lockup .ww-tile:nth-child(n+4){--from:18px;animation-delay:.16s}

/* ── Hero mock: records are long JSON lines; the inbox holds several messages ── */
.uc-main .iw-reply{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.uc-main .iw-set p+p{margin-top:6px;padding-top:6px;border-top:1px solid var(--i-line)}
/* The code pane carries the base URL line; give it the wider column on desktop. */
@media(min-width:901px){.uc-main .iw-grid{grid-template-columns:38px minmax(0,1.4fr) minmax(0,1fr)}}

/* ── Tools that do this ── */
.uc-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:0;margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.uc-tools li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.uc-tools a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;height:100%;padding:26px 24px;color:var(--ink);text-decoration:none;transition:background .2s ease}
.uc-tool-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.uc-tool-copy b{font-family:var(--mono);font-size:18px}
.uc-tool-copy>span{font-size:16px;line-height:1.55;color:var(--body)}
.uc-tool-copy em{margin-top:6px;font-family:var(--mono);font-size:13px;font-style:normal;font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px}
.uc-tools a:hover{background:var(--ink);color:var(--paper)}
.uc-tools a:hover .uc-tool-copy>span{color:rgba(255,255,255,.78)}
.uc-tools a:hover .ww-tile{border-color:var(--paper)}

/* ── Recipe variants ── */
.codes .uc-tabs{margin:0 0 22px}
.uc-variant h3{margin:0;font-family:var(--mono);font-size:17px;letter-spacing:0}
.uc-variant>p{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--body)}
.uc-variant code,.uc-points code,.tested code{padding:1px 5px;background:rgba(2,6,24,.06);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;overflow-wrap:anywhere}
.uc-points{margin:14px 0 18px;padding:0;list-style:none;border-top:1px solid var(--line)}
.uc-points li{padding:9px 0 9px 20px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--body);position:relative}
.uc-points li::before{content:"";position:absolute;top:17px;left:2px;width:7px;height:7px;background:var(--orange)}
.js .uc-variant[hidden]{display:none}
html:not(.js) .uc-variant+.uc-variant{margin-top:32px;padding-top:28px;border-top:1px solid var(--ink)}
.uc-output{margin-top:28px}
.uc-output .code{background:#0d1a14;border-color:var(--ink)}
.uc-output .code-head{border-bottom-color:#20392c;color:#9fd8bd}
.uc-output .code pre{color:#d4ffe9;white-space:pre-wrap;overflow-wrap:anywhere}
.uc-wrap pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* ── Cost ── */
.uc-cost--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.uc-cost dd{white-space:nowrap}
.uc-cost .solved{color:var(--muted)}

/* ── Use case cards (hub and related) ── */
.uc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:0;margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.uc-cards li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.uc-cards a{display:flex;flex-direction:column;gap:8px;height:100%;padding:24px;color:var(--ink);text-decoration:none;transition:background .2s ease}
.uc-card-tiles{display:flex;gap:6px}
.uc-card-tiles .ww-tile--sm{margin-bottom:6px}
.uc-cards a b{font-family:var(--mono);font-size:20px;line-height:1.25}
.uc-cards a>span:not(.uc-card-tiles){font-size:15.5px;line-height:1.5;color:var(--body)}
.uc-cards em{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:12px;font-style:normal;font-weight:700;color:var(--muted)}
.uc-cards em i{margin-left:6px;padding:2px 7px;border:1px solid var(--ink);background:var(--orange);color:var(--ink);font-style:normal}
.uc-cards a:hover{background:var(--ink);color:var(--paper)}
.uc-cards a:hover>span,.uc-cards a:hover em{color:rgba(255,255,255,.78)}
.uc-cards a:hover .ww-tile--sm{border-color:var(--paper)}
.uc-hub-tools{max-width:760px}
.uc-hub-tools code{padding:1px 5px;background:rgba(2,6,24,.06);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
.hub-top .section-intro a,.uc-main .section-intro a{color:var(--ink);text-underline-offset:3px}

@media(max-width:900px){
  .uc-cost--3{grid-template-columns:1fr}
  .uc-cost--3 div+div{border-left:0;border-top:1px solid var(--ink)}
}
@media(max-width:760px){
  .uc-tools a{padding:22px 0;grid-template-columns:auto minmax(0,1fr);gap:14px}
  .uc-tools li,.uc-cards li{border-right:0}
  .uc-tools,.uc-cards{border-left:0}
  .uc-cards a{padding:22px 0}
  .uc-tools a:hover,.uc-cards a:hover{background:none;color:var(--ink)}
  .uc-tools a:hover .uc-tool-copy>span,.uc-cards a:hover>span{color:var(--body)}
  .uc-cards a:hover em{color:var(--muted)}
  .uc-tools a:hover .ww-tile,.uc-cards a:hover .ww-tile--sm{border-color:var(--ink)}
}
.uc-more{margin:24px 0 0}