/* Hopwire (clean-docs). Brand: Inazda green. Everything else comes from ../clean-base.css. */
:root { --accent: #1F6F4A; --accent-strong: #185A3C; --accent-dk: #4FBF8B; --accent-strong-dk: #7DD3AA; --hw-side: 264px; --hw-toc: 208px; }

/* Header: full width, docs-style */
.hw-head { padding-inline: var(--iz-gutter); }
.hw-docs-tag { font-weight: 500; color: var(--iz-muted-fg); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--iz-border); }
.hw-version { display: none; font-size: 13px; color: var(--iz-muted-fg); padding: 4px 8px; border: 1px solid var(--iz-border); border-radius: var(--iz-r-sm); }
@media (min-width: 900px) { .hw-version { display: inline-block; } }
.hw-subbar { display: flex; align-items: center; gap: 12px; height: 48px; padding-inline: var(--iz-gutter); border-top: 1px solid var(--iz-border); }
.hw-menu { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--iz-border); border-radius: var(--iz-r-md); background: var(--iz-surface); font-size: 14px; font-weight: 500; }
.hw-menu svg { width: 16px; height: 16px; }
.hw-menu[aria-expanded="true"] { background: var(--iz-sunken); }
.hw-where { font-size: 14px; color: var(--iz-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) { .hw-subbar { display: none; } }
@media (max-width: 899px) { .nav-actions .btn { display: inline-flex; height: 36px; padding: 0 12px; } }
@media (max-width: 380px) { .hw-docs-tag { display: none; } }

/* Shell: sidebar, content, outline */
.hw-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .hw-shell { grid-template-columns: var(--hw-side) minmax(0, 1fr); background: linear-gradient(to right, var(--iz-bg-subtle) calc(var(--hw-side) - 1px), var(--iz-border) calc(var(--hw-side) - 1px), var(--iz-border) var(--hw-side), transparent var(--hw-side)); } }
@media (min-width: 1280px) { .hw-shell { grid-template-columns: var(--hw-side) minmax(0, 1fr) var(--hw-toc); } }

.hw-side { display: none; padding: 20px var(--iz-gutter) 24px; border-bottom: 1px solid var(--iz-border); background: var(--iz-bg); }
.hw-side.is-open { display: block; }
@media (min-width: 960px) {
  .hw-side { display: block; position: sticky; top: var(--iz-head-h); height: calc(100vh - var(--iz-head-h)); height: calc(100dvh - var(--iz-head-h)); overflow-y: auto; padding: 24px 16px 32px 24px; border-bottom: 0; background: transparent; }
}
.hw-filter { position: relative; margin-bottom: 20px; }
.hw-filter svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--iz-muted-fg); pointer-events: none; }
.hw-filter .input { padding-left: 34px; font-size: 14px; min-height: 36px; }
.hw-group + .hw-group { margin-top: 20px; }
.hw-group h2 { font-size: 13px; font-weight: 600; color: var(--iz-fg); padding: 0 10px 6px; }
.hw-group ul { display: grid; gap: 1px; }
.hw-group a, .hw-toc a { display: block; text-decoration: none; transition: color var(--iz-dur) var(--iz-ease), background-color var(--iz-dur) var(--iz-ease), border-color var(--iz-dur) var(--iz-ease); }
.hw-group a { padding: 6px 10px; border-radius: var(--iz-r-sm); font-size: 14px; color: var(--iz-muted-fg); }
.hw-group a:hover { color: var(--iz-fg); background: var(--iz-sunken); }
.hw-group a[aria-current="true"] { color: var(--iz-fg); font-weight: 500; background: var(--iz-surface); box-shadow: inset 0 0 0 1px var(--iz-border), inset 2px 0 0 var(--iz-accent); }
.hw-empty { padding: 0 10px; }
.hw-clear { border: 0; background: none; padding: 0; color: var(--iz-link); text-decoration: underline; font-size: inherit; }

.hw-toc { display: none; }
@media (min-width: 1280px) {
  .hw-toc { display: block; position: sticky; top: var(--iz-head-h); align-self: start; padding: 48px 24px 32px 8px; }
}
.hw-toc h2 { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.hw-toc ul { border-left: 1px solid var(--iz-border); }
.hw-toc a { padding: 5px 0 5px 12px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13px; color: var(--iz-muted-fg); }
.hw-toc a:hover { color: var(--iz-fg); }
.hw-toc a[aria-current="true"] { color: var(--iz-fg); border-left-color: var(--iz-accent); font-weight: 500; }

/* Content column */
.hw-main { min-width: 0; padding: 40px var(--iz-gutter) 0; }
@media (min-width: 960px) { .hw-main { padding: 56px 48px 0; } }
.hw-doc { max-width: 760px; margin-inline: auto; }
.hw-doc > section { padding-block: 48px; border-top: 1px solid var(--iz-border); }
.hw-doc > section:first-child { padding-top: 0; border-top: 0; }
.hw-doc h2 { margin-bottom: 12px; }
.hw-doc p { line-height: 1.7; }
.hw-doc p + .code, .hw-doc p + .table-scroll, .hw-doc p + .hw-cli, .hw-doc p + .hw-log, .hw-doc p + .hw-steps { margin-top: 20px; }
.hw-doc .note-box { margin-top: 16px; }
.hw-doc .note-box p { line-height: 1.6; }
.hw-intro .h1 { max-width: 20ch; }
.hw-intro .lede { margin-top: 16px; }
.hw-intro .actions { margin-top: 28px; }
.hw-why { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--iz-border); }
.hw-why > div { padding: 16px 0; border-bottom: 1px solid var(--iz-border); display: grid; gap: 4px; }
.hw-why dt { font-weight: 600; font-size: 15px; }
.hw-why dd { color: var(--iz-muted-fg); font-size: 14px; line-height: 1.6; }
@media (min-width: 720px) { .hw-why { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .hw-why > div { border-bottom: 0; } }

/* Numbered steps with a rail */
.hw-steps { counter-reset: s; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.hw-steps > li, .hw-log > li > *, .hw-cli > div > * { min-width: 0; }
.hw-steps > li { counter-increment: s; position: relative; padding: 0 0 36px 44px; }
.hw-steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--iz-border-strong); background: var(--iz-surface); font: 500 13px/1 var(--iz-mono); color: var(--iz-fg); }
.hw-steps > li::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 6px; width: 1px; background: var(--iz-border); }
.hw-steps > li:last-child { padding-bottom: 0; }
.hw-steps > li:last-child::after { display: none; }
.hw-steps h3 { padding-top: 3px; }
.hw-steps p { margin-top: 6px; color: var(--iz-muted-fg); }
.hw-steps .code { margin-top: 14px; }
@media (max-width: 480px) { .hw-steps > li { padding-left: 38px; } }

/* Tables and CLI list */
.hw-table code, .hw-cli code { white-space: nowrap; }
.hw-table .hw-type { font-size: 13px; color: var(--iz-muted-fg); white-space: nowrap; }
.hw-table td.num { text-align: right; }
.hw-table td.hw-l { text-align: left; }
.hw-table { min-width: 560px; }
.hw-table td:last-child { min-width: 220px; }
.hw-cli { border-top: 1px solid var(--iz-border); }
.hw-cli > div { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--iz-border); }
.hw-cli dd { color: var(--iz-muted-fg); font-size: 15px; }
@media (min-width: 720px) { .hw-cli > div { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } }

/* Changelog */
.hw-log { display: grid; gap: 0; border-top: 1px solid var(--iz-border); }
.hw-log > li { display: grid; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--iz-border); }
@media (min-width: 720px) { .hw-log > li { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; } }
.hw-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; align-content: start; }
.hw-rel h3 { font-weight: 500; letter-spacing: 0; }
.hw-rel time { font-size: 14px; color: var(--iz-muted-fg); }
@media (min-width: 720px) { .hw-rel { flex-direction: column; align-items: flex-start; } }
.hw-log ul { display: grid; gap: 10px; }
.hw-log ul li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.6; }
.hw-log .tag { justify-content: center; font-weight: 500; }
.hw-add { --tone: var(--iz-success); }
.hw-fix { --tone: var(--iz-info); }
.hw-chg { --tone: var(--iz-warning); }
.hw-brk { --tone: var(--iz-danger); }
.hw-log .tag { color: color-mix(in oklab, var(--tone) 72%, var(--iz-fg)); border-color: color-mix(in srgb, var(--tone) 35%, var(--iz-border)); background: color-mix(in srgb, var(--tone) 7%, var(--iz-surface)); }

/* Pager and footer */
.hw-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding-top: 32px; border-top: 1px solid var(--iz-border); }
.hw-pager a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--iz-border); border-radius: var(--iz-r-md); text-decoration: none; transition: border-color var(--iz-dur) var(--iz-ease); }
.hw-pager a:hover { border-color: var(--iz-border-strong); }
.hw-pager a.is-next { text-align: right; }
.hw-pager small { font-size: 13px; color: var(--iz-muted-fg); }
.hw-pager span { font-weight: 500; }
.hw-foot { max-width: 760px; margin: 56px auto 0; padding: 24px 0 40px; border-top: 1px solid var(--iz-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--iz-muted-fg); }
@media (max-width: 959px) { html { scroll-padding-top: calc(var(--iz-head-h) + 64px); } }