/* Operations story layout. Product UI is intentionally not styled here;
   every `.op-*` component comes from assets/operations-hawk-exact.css. */
:root { --ops-navy:#071437; --ops-blue:#1e66f5; --ops-line:rgba(181,195,214,.7); --ops-muted:#5f6d80; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:#172033; background:#f5f7fa; font-family:var(--font-brand),Inter,ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
[hidden] { display:none!important; }
.site-mobile-menu:not([open])>.site-mobile-panel { display:none!important; }
.ops-page { position:relative; width:100%; overflow:clip; background:#f5f7fa; }
.ops-page::before { content:""; position:absolute; inset:0 0 auto; height:820px; pointer-events:none; background:radial-gradient(circle at 79% 11%,rgba(30,102,245,.11),transparent 31rem),radial-gradient(circle at 10% 26%,rgba(38,174,148,.07),transparent 27rem),linear-gradient(rgba(70,95,128,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(70,95,128,.032) 1px,transparent 1px); background-size:auto,auto,32px 32px,32px 32px; mask-image:linear-gradient(#000 52%,transparent); }
.ops-shell { position:relative; z-index:1; width:min(1360px,calc(100% - 64px)); margin-inline:auto; }
.ops-eyebrow { margin:0; color:#356fc4; font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }

/* Marketing intro */
.ops-hero { padding:clamp(138px,11vw,176px) 0 clamp(78px,7vw,98px); }
.ops-hero-intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.55fr); align-items:end; gap:clamp(55px,9vw,132px); }
.ops-hero h1 { max-width:900px; margin:19px 0 0; color:var(--ops-navy); font-size:clamp(59px,7vw,99px); line-height:.9; letter-spacing:-.062em; text-wrap:balance; }
.ops-hero h1 span { color:#3979b8; }
.ops-hero-copy { padding-bottom:7px; }
.ops-hero-copy>p { max-width:530px; margin:0; color:#56657a; font-size:clamp(15px,1.2vw,18px); line-height:1.7; }
.ops-signals { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:27px; }
.ops-signals span { display:inline-flex; align-items:center; gap:7px; color:#66758a; font-size:10px; }
.ops-signals i { width:6px; height:6px; border-radius:50%; background:#1e66f5; box-shadow:0 0 0 4px rgba(30,102,245,.09); }
.ops-signals span:nth-child(2) i { background:#15803d; box-shadow:0 0 0 4px rgba(21,128,61,.09); }
.ops-signals span:nth-child(3) i { background:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.09); }
.ops-product-caption { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin:clamp(60px,7vw,90px) 0 18px; }
.ops-product-caption>div { display:flex; align-items:center; gap:13px; }
.ops-product-caption>div>span,.ops-index { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border:1px solid rgba(30,102,245,.2); border-radius:10px; color:#356fc4; background:rgba(255,255,255,.82); box-shadow:inset 0 1px 0 #fff; font:800 9px/1 ui-monospace,monospace; }
.ops-product-caption p { display:grid; gap:3px; margin:0; }
.ops-product-caption strong { color:#172033; font-size:12px; }
.ops-product-caption small { color:#7a8798; font-size:10px; }
.ops-product-caption>em { display:inline-flex; align-items:center; gap:7px; color:#718198; font-size:8px; font-style:normal; font-weight:800; letter-spacing:.14em; }
.ops-product-caption>em i { width:6px; height:6px; border-radius:50%; background:#15803d; box-shadow:0 0 0 4px rgba(21,128,61,.1); animation:ops-pulse 2s ease-in-out infinite; }
.ops-product-frame { overflow:hidden; border:1px solid var(--ops-line); border-radius:26px; background:#fff; box-shadow:0 32px 86px rgba(25,43,70,.14),0 4px 16px rgba(25,43,70,.05); }
.ops-product-frame>.op-shell { border:0; border-radius:0; box-shadow:none; }
.ops-live-shell { height:440px; }
.ops-live-shell .op-side { width:100%; min-width:0; max-width:none; }
.ops-live-shell .op-side-tabs { flex-wrap:nowrap; overflow:hidden; }
.ops-live-shell .op-side-tab { min-width:0; padding-inline:8px; }
.ops-live-shell .op-side-tab-icon { display:grid; width:17px; height:17px; flex:0 0 17px; place-items:center; border:1px solid #dbe3ec; border-radius:5px; color:#53677f; background:#f7f9fc; font:700 11px/1 ui-monospace,monospace; }
.ops-live-shell .op-side-tab.is-active .op-side-tab-icon { border-color:#bcd5f4; color:#1768bd; background:#edf5ff; }
.ops-live-shell .op-side-close span { font-size:19px; line-height:1; }
.ops-live-shell .op-log-summary-icon { font:700 18px/1 ui-monospace,monospace; }
.ops-live-shell .op-trace-node { font:700 9px/1 ui-monospace,monospace; }
.ops-live-shell .op-run-row { width:100%; padding-right:16px; }
.ops-hero .ops-product-frame { margin-top:clamp(52px,5vw,72px); }
.op-ui-icon { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.op-ui-icon path[fill] { stroke:none; }
.op-btn .op-ui-icon { width:14px; height:14px; }
.op-icon-btn .op-ui-icon { width:17px; height:17px; }
.op-stat-ico .op-ui-icon { width:17px; height:17px; }
.op-side-tab-icon .op-ui-icon { width:13px; height:13px; }
.op-log-summary-icon .op-ui-icon { width:20px; height:20px; }

/* The matrix markup mirrors the compact product matrix, while its cells only
   provide demo data. All state colours still come from the op-shell tokens. */
.ops-matrix { display:grid; width:100%; min-width:650px; grid-template-columns:220px repeat(3,minmax(110px,1fr)); gap:3px; color:var(--op-ink); }
.ops-matrix-head { display:contents; }
.ops-matrix-head>span { display:flex; min-height:58px; align-items:center; padding:0 12px; border-right:2px solid color-mix(in srgb,var(--op-ink) 18%,var(--op-border)); border-bottom:1px solid var(--op-border); color:var(--op-ink-4); font-size:10px; font-weight:600; letter-spacing:.06em; }
.ops-matrix-head>button { display:flex; min-height:58px; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; border-bottom:1px solid var(--op-border); color:var(--op-ink-3); background:transparent; }
.ops-matrix-head>button b { font:600 10px/1 var(--op-mono); }
.ops-matrix-head>button small { color:var(--op-ink-4); font-size:9px; }
.ops-matrix-head .op-matrix-run-pill { display:block; width:26px; height:3px; border-radius:999px; }
.ops-matrix-row { display:contents; }
.ops-matrix-row>span { display:flex; min-height:58px; flex-direction:column; justify-content:center; gap:3px; padding:0 12px; border-right:2px solid color-mix(in srgb,var(--op-ink) 18%,var(--op-border)); border-bottom:1px solid var(--op-border-soft); }
.ops-matrix-row>span b { font-size:12px; }
.ops-matrix-row>span small { color:var(--op-ink-4); font-size:9px; letter-spacing:.04em; }
.ops-matrix-row>i { display:grid; min-height:58px; place-items:center; border-bottom:1px solid var(--op-border-soft); border-radius:4px; font:600 10px/1 var(--op-mono); font-style:normal; }
.ops-matrix-row>i.state-success { color:var(--op-success); background:color-mix(in srgb,var(--op-success) 7%,transparent); }
.ops-matrix-row>i.state-running { color:#1d4ed8; background:var(--op-accent-soft); }
.ops-matrix-row>i.state-failed { color:#b91c1c; background:color-mix(in srgb,var(--op-failed) 8%,transparent); }
.ops-matrix-row>i.state-pending { color:var(--op-ink-4); background:#fbfcfe; }

/* Section rhythm */
.ops-section { padding:clamp(86px,7.5vw,110px) 0; }
.ops-heading { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.5fr); align-items:end; gap:clamp(52px,9vw,132px); margin-bottom:clamp(38px,4vw,54px); }
.ops-heading>div { display:grid; justify-items:start; }
.ops-heading .ops-index { margin-bottom:22px; }
.ops-heading h2 { max-width:800px; margin:13px 0 0; color:var(--ops-navy); font-size:clamp(44px,5vw,72px); line-height:.97; letter-spacing:-.052em; text-wrap:balance; }
.ops-heading>p { max-width:530px; margin:0; color:#5e6d80; font-size:clamp(15px,1.15vw,17px); line-height:1.72; }

/* History — product list + product detail */
.ops-history-shell { min-height:555px; grid-template-rows:auto 1fr; }
.ops-history-work { display:grid; min-height:0; grid-template-columns:350px minmax(0,1fr); overflow:hidden; }
.ops-history-work>.op-runs { border-right:1px solid var(--op-border); }
.ops-history-work .op-run-row { height:66px; }
.ops-run-detail { min-width:0; padding:clamp(25px,3vw,40px); overflow:auto; background:#fff; }
.ops-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }
.ops-detail-head>div:first-child { display:grid; justify-items:start; gap:8px; }
.ops-detail-head>div:last-child { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.ops-detail-head h3 { margin:0; color:var(--op-ink); font-size:clamp(24px,2.2vw,31px); letter-spacing:-.035em; }
.ops-detail-head h3 small { color:var(--op-ink-4); font-size:.48em; }
.ops-detail-stats { margin-top:28px; border:1px solid var(--op-border); border-radius:8px; }
.ops-detail-tasks { margin-top:22px; padding:7px; border:1px solid var(--op-border); border-radius:8px; background:#fbfcfe; }
.ops-detail-tasks .op-task-row { min-height:45px; padding-right:12px; background:#fff; }
.ops-detail-tasks .op-task-row+.op-task-row { border-top:1px solid var(--op-border-soft); }
.ops-run-detail .op-failed-banner { margin-bottom:14px; }
.ops-run-detail .op-log-summary,.ops-run-detail .op-failed-banner { margin-top:28px; }
.action-feedback { margin:14px 0 0; padding:9px 11px; border:1px solid color-mix(in srgb,var(--op-accent) 22%,var(--op-border)); border-radius:7px; color:var(--op-accent); background:var(--op-accent-soft); font-size:11px; }

/* Diagnostics */
.ops-diagnostic { position:relative; padding:clamp(90px,8vw,118px) 0; overflow:hidden; background:var(--ops-navy); }
.ops-diagnostic::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 82% 0,rgba(30,102,245,.24),transparent 37rem),radial-gradient(circle at 1px 1px,rgba(145,171,210,.09) 1px,transparent 1.2px); background-size:auto,26px 26px; mask-image:linear-gradient(#000,transparent 95%); }
.ops-heading.is-dark h2 { color:#f4f8fc; }
.ops-heading.is-dark>p { color:#a8b7cc; }
.ops-heading.is-dark .ops-index { border-color:rgba(91,159,239,.28); color:#85baff; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.ops-diagnostic-shell { height:600px; grid-template-rows:auto 1fr; }
.ops-task-main { position:relative; overflow:auto!important; }
.ops-task-toolbar { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; border-bottom:1px solid var(--op-border); background:#fbfcfe; }
.ops-task-toolbar strong { font-size:11px; }
.ops-task-toolbar span { color:var(--op-ink-4); font-size:10px; }
.ops-task-list { padding:12px 14px 0; }
.ops-task-list .op-task-row { min-height:42px; border-bottom:1px solid var(--op-border-soft); }
.ops-log-area { margin:14px; overflow:hidden; border:1px solid var(--op-border); border-radius:8px; background:#fff; }
.ops-log-head { display:flex; min-height:42px; align-items:center; justify-content:space-between; padding:0 12px; border-bottom:1px solid var(--op-border); background:#fbfcfe; }
.ops-log-head>span { display:flex; align-items:center; gap:8px; }
.ops-log-head i { color:var(--op-accent); }
.ops-log-head strong { font-size:11px; }
.ops-log-head small { color:var(--op-ink-4); font-size:9px; }
.ops-log-area .op-log { max-height:none; min-height:190px; border:0; border-radius:0; }

/* Capacity stays in Hawk's table/stat vocabulary. */
.ops-capacity-shell { min-height:410px; grid-template-rows:auto auto 1fr; }
.ops-worker-table { min-width:900px; overflow:auto; }
.ops-worker-head,.ops-worker-row { display:grid; grid-template-columns:1.15fr .8fr 1.1fr .55fr .9fr .7fr .65fr; align-items:center; gap:12px; padding:0 18px; }
.ops-worker-head { min-height:38px; border-bottom:1px solid var(--op-border); color:var(--op-ink-4); background:#fbfcfe; font-size:9px; font-weight:700; letter-spacing:.06em; }
.ops-worker-row { min-height:64px; border-bottom:1px solid var(--op-border-soft); color:var(--op-ink-2); font-size:11px; }
.ops-worker-row:hover { background:var(--op-hover); }
.ops-worker-row>span:first-child { display:grid; gap:3px; }
.ops-worker-row small { color:var(--op-ink-4); font-size:9px; }

/* Closing */
.ops-closing { padding:clamp(78px,8vw,114px) 0; color:#fff; background:var(--ops-navy); }
.ops-closing>.ops-shell { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.52fr); align-items:end; gap:clamp(52px,9vw,132px); }
.ops-closing h2 { margin:14px 0 0; color:#fff; font-size:clamp(49px,5.7vw,80px); line-height:.94; letter-spacing:-.055em; }
.ops-closing>.ops-shell>div:last-child>p { margin:0; color:#adbbcf; font-size:16px; line-height:1.7; }
.ops-closing>.ops-shell>div:last-child>div { display:flex; flex-wrap:wrap; gap:8px; margin-top:27px; }
.ops-cta { display:inline-flex; min-height:44px; align-items:center; gap:9px; padding:0 17px; border:1px solid #fff; border-radius:8px; color:var(--ops-navy); background:#fff; font-size:10px; font-weight:800; }
.ops-cta.is-secondary { border-color:rgba(255,255,255,.18); color:#d5dfec; background:rgba(255,255,255,.06); }
.ops-page :is(button,a):focus-visible { position:relative; z-index:30; outline:2px solid #1e66f5; outline-offset:2px; }
@keyframes ops-pulse { 50% { box-shadow:0 0 0 7px rgba(21,128,61,0); } }

@media(max-width:1100px) {
  .ops-hero-intro,.ops-heading,.ops-closing>.ops-shell { grid-template-columns:1fr; gap:34px; }
  .ops-hero-copy>p { max-width:720px; }
  .ops-live-shell { height:500px; }
  .ops-live-shell .op-work.is-no-sidebar.is-drawer-open { grid-template-columns:minmax(0,1fr) 310px; }
  .ops-live-shell .op-side { width:310px; min-width:310px; }
  .ops-history-work { grid-template-columns:310px minmax(0,1fr); }
}
@media(max-width:800px) {
  .ops-shell { width:calc(100% - 40px); }
  .ops-live-shell { height:930px; }
  .ops-live-shell .op-work.is-no-sidebar.is-drawer-open { grid-template-columns:1fr; grid-template-rows:520px 1fr; overflow:auto; }
  .ops-live-shell .op-side { width:100%; min-width:0; max-width:none; border-top:1px solid var(--op-border); border-left:0; }
  .ops-history-work { grid-template-columns:1fr; }
  .ops-history-work>.op-runs { max-height:245px; border-right:0; border-bottom:1px solid var(--op-border); }
  .ops-run-detail { min-height:500px; }
  .ops-diagnostic-shell { height:900px; }
  .ops-diagnostic-shell .op-work { grid-template-columns:1fr; grid-template-rows:540px 1fr; overflow:auto; }
  .ops-diagnostic-shell .op-side { width:100%; min-width:0; max-width:none; border-top:1px solid var(--op-border); border-left:0; }
  .ops-capacity-shell { overflow-x:auto!important; }
}
@media(max-width:620px) {
  .ops-shell { width:calc(100% - 28px); }
  .ops-hero { padding-top:116px; padding-bottom:80px; }
  .ops-hero h1 { font-size:clamp(49px,14vw,64px); }
  .ops-product-caption { margin-top:52px; }
  .ops-product-caption>em { display:none; }
  .ops-product-frame { border-radius:18px; }
  .ops-live-shell { height:1020px; }
  .ops-live-shell .op-work.is-no-sidebar.is-drawer-open { grid-template-rows:575px 1fr; }
  .ops-section,.ops-diagnostic { padding-block:84px; }
  .ops-heading { gap:25px; margin-bottom:32px; }
  .ops-heading h2 { font-size:clamp(41px,11.7vw,54px); }
  .ops-history-shell .op-bar-actions { width:100%; overflow-x:auto; }
  .ops-history-shell { min-height:780px; }
  .ops-history-work>.op-runs { max-height:270px; }
  .ops-run-detail { min-height:500px; padding:22px 14px; }
  .ops-detail-head { flex-direction:column; }
  .ops-detail-head>div:last-child { justify-content:flex-start; }
  .ops-detail-stats { overflow-x:auto; }
  .ops-detail-tasks .op-task-row { grid-template-columns:4px minmax(0,1fr) auto; }
  .ops-detail-tasks :is(.op-task-attempt,.op-status-text) { display:none; }
  .ops-task-list .op-task-row { grid-template-columns:4px minmax(0,1fr) auto; }
  .ops-task-list :is(.op-task-attempt,.op-status-text) { display:none; }
  .ops-log-area { margin-inline:9px; }
  .ops-closing { padding-block:84px; }
  .ops-closing h2 { font-size:clamp(46px,12.3vw,59px); }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.ops-product-caption>em i{animation:none} }

.ops-live-feedback { display:inline-flex; align-items:center; min-width:112px; color:#68758a; font-size:10px; font-weight:700; transition:color .2s ease, transform .2s ease; }
.ops-live-feedback::before { content:""; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#35a66c; box-shadow:0 0 0 4px rgba(53,166,108,.1); }
.ops-live-feedback.is-updated { color:#315fa8; transform:translateY(-1px); }
.ops-live-shell [data-ops-task-key] { cursor:pointer; }
.ops-live-shell [data-ops-task-key]:focus-visible,
.ops-live-shell [data-ops-run]:focus-visible,
.ops-live-shell [data-ops-pause]:focus-visible { outline:3px solid rgba(55,103,190,.3); outline-offset:2px; }
.op-btn.is-busy { position:relative; opacity:.78; }
.op-btn.is-busy i { animation:ops-control-spin .8s linear infinite; }
.op-btn[aria-pressed="true"] { border-color:#5e5ce6; color:#4542ba; background:#f0efff; }
.op-icon-btn.is-spinning i { animation:ops-control-spin .65s linear; }
@keyframes ops-control-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) {
  .ops-live-feedback,
  .op-btn.is-busy i,
  .op-icon-btn.is-spinning i { transition:none; animation:none; }
}