/* Kodela — docs feature pages, set one (workspaces, AI agents, governance, egress).
   Scoped under .df-* so nothing leaks into other docs pages. Each page carries one
   "How it works" instrument: a create-command builder (workspaces), a tool/mode
   matrix (agents), a policy console (governance) and a summary-to-allowlist
   worksheet (egress). Content is in the HTML first; JS only drives it. */

/* ---------- what it is / is not ---------- */
.df-isnot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-mod); overflow: hidden; }
.df-isnot > div { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.df-isnot > div + div { border-left: 1px dashed var(--line-strong); background: #fbfbfa; }
.df-isnot h3 { font: 600 .76rem/1 var(--f-cond) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dimmer); }
.df-isnot ul { list-style: none; padding: 0 !important; gap: 8px !important; }
.df-isnot li { position: relative; padding-left: 22px; font-size: .95rem; line-height: 1.5; }
.df-isnot li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber-led); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.df-isnot > div + div li::before { border-radius: 1px; width: 9px; height: 1.5px; top: 11px; background: var(--ink-dimmer); box-shadow: none; }

/* ---------- defaults table ---------- */
.df-tbl { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-mod); }
.df-tbl table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.df-tbl caption { caption-side: top; text-align: left; padding: 12px 14px 10px; font: 600 .76rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dimmer); border-bottom: 1px solid var(--line); }
.df-tbl thead th { text-align: left; padding: 10px 12px; font: 600 .72rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dimmer); background: var(--elevated); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.df-tbl td, .df-tbl tbody th { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; text-align: left; color: var(--ink-dim); line-height: 1.45; }
.df-tbl tbody th { font-weight: 400; color: var(--ink); min-width: 170px; }
.df-tbl tbody th code { font: 600 .82rem/1.3 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.df-tbl tbody th small { display: block; margin-top: 4px; font: 400 .82rem/1.35 var(--f-sans); color: var(--ink-dim); }
.df-tbl td code { font: 500 .8rem/1.3 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.df-tbl tr.df-grp th { padding: 14px 12px 8px; background: var(--ground); font: 600 .74rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dimmer); }
.df-sc { display: inline-block; margin: 0 4px 4px 0; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-strong); font: 500 .7rem/1 var(--f-mono); letter-spacing: .04em; color: var(--ink-dim); background: #fff; white-space: nowrap; }
.df-off { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem/1.3 var(--f-sans); color: var(--ink); }
.df-off::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-dimmer); flex: none; }
.df-on { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem/1.3 var(--f-sans); color: var(--ink); }
.df-on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber-led); box-shadow: 0 1px 2px rgba(0,0,0,.3); flex: none; }
.df-tbl td small { display: block; margin-top: 3px; font-size: .8rem; color: var(--ink-dim); }

@media (max-width: 760px) {
  .df-isnot { grid-template-columns: minmax(0, 1fr); }
  .df-isnot > div + div { border-left: 0; border-top: 1px dashed var(--line-strong); }
  .df-tbl { overflow: visible; }
  .df-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .df-tbl table, .df-tbl tbody, .df-tbl caption { display: block; }
  .df-tbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .df-tbl tbody tr > * { padding: 0 !important; border: 0 !important; min-width: 0 !important; }
  .df-tbl tbody tr > th { grid-column: 1 / -1; }
  .df-tbl tbody tr > td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 3px; font: 600 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dimmer); }
  .df-tbl tbody tr > td.df-wide { grid-column: 1 / -1; }
  .df-tbl tr.df-grp { display: block; background: var(--ground); padding: 12px 14px 6px; }
}

/* ---------- troubleshooting: the verbatim message is the symptom ---------- */
.df-msg { display: block; margin-top: 6px; padding: 7px 9px; border-radius: 8px; background: var(--lcd); color: #e3e5ea; font: 500 .78rem/1.45 var(--f-mono); overflow-wrap: anywhere; box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.df-cause { font-size: .92rem; }
.df-cause b { color: var(--ink); }

/* ---------- verify: what good looks like ---------- */
.df-good { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.df-good .kd-lcd { font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.df-good .kd-lcd b { color: var(--lcd-ink); font-weight: 500; }
.df-good .kd-lcd i { color: var(--lcd-dim); font-style: normal; }
.df-good__h { display: flex; align-items: center; gap: 8px; font: 600 .76rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dimmer); }
.df-good__h .kd-tag { margin-left: auto; }

/* ---------- related ---------- */
.df-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0; border-top: 1.5px solid var(--ink); }
.df-rel a { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 12px 14px 12px 0; border-bottom: 1px dashed var(--line-strong); text-decoration: none; color: var(--ink); }
.df-rel a b { font: 600 .98rem/1.3 var(--f-sans); }
.df-rel a small { font: 400 .86rem/1.4 var(--f-sans); color: var(--ink-dim); }
.df-rel a:hover b { color: var(--amber-text); }
.df-rel a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.kd-docs__body :is(p, li, dd, small, td) code { overflow-wrap: anywhere; }

/* step headings one level under a task's h3 */
.dg-step .df-h4 { font: 600 1.05rem/1.3 var(--f-sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
.kd-docs__body h3 + .dg-steps { margin-top: -6px; }

/* ---------- shared instrument pieces ---------- */
.df-ins { display: flex; flex-direction: column; gap: 14px; }
.df-ins .kd-module__bar { display: flex; align-items: center; gap: 8px; font: 600 .76rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dimmer); }
.df-lbl { font: 600 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dimmer); }
.df-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 11px; background: var(--bay); box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.df-seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: 500 .82rem/1 var(--f-sans); color: var(--ink-dim); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.df-seg button:hover { color: var(--ink); }
.df-seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 1px 0 #fff inset; }
.df-seg button:focus-visible, .df-sw:focus-visible, .df-ins input:focus-visible, .df-ins select:focus-visible, .df-cell:focus-visible, .df-cmd:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.df-sw { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font: 500 .84rem/1.2 var(--f-sans); color: var(--ink-dim); cursor: pointer; text-align: left; }
.df-sw::before { content: ""; flex: none; width: 30px; height: 18px; border-radius: 99px; background-color: var(--bay); background-image: radial-gradient(circle at 9px 50%, #fff 0 6px, rgba(255,255,255,0) 6.5px); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); transition: background-color .2s; }
.df-sw[aria-pressed="true"] { color: var(--ink); border-color: var(--line-strong); }
.df-sw[aria-pressed="true"]::before { background-color: var(--amber); background-image: radial-gradient(circle at 21px 50%, #fff 0 6px, rgba(255,255,255,0) 6.5px); }
.df-sw code { font: 500 .74rem/1 var(--f-mono); color: var(--ink-dimmer); }
.df-caption { font: 400 .88rem/1.5 var(--f-sans); color: var(--ink-dim); max-width: 70ch; }
.df-lcdcmd { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--lcd); color: #e3e5ea; font: 500 .82rem/1.65 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: inset 0 2px 8px rgba(0,0,0,.55); }
.df-lcdcmd .p { color: var(--lcd-ink); }
.df-lcdcmd .c { color: var(--lcd-dim); }
.df-lcdcmd .n { color: var(--lcd-ink); }
.df-lcdcmd .x { color: #cfd3da; text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ===== 1. workspaces: create builder ===== */
.df-build__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.df-build__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.df-build pre, .df-al pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.df-build__form { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.df-field { display: flex; flex-direction: column; gap: 6px; }
.df-field input[type="text"], .df-field select { min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; font: 500 .88rem/1 var(--f-mono); color: var(--ink); width: 100%; }
.df-field small { font: 400 .8rem/1.4 var(--f-sans); color: var(--ink-dim); }
.df-build__sws { display: flex; flex-wrap: wrap; gap: 8px; }
.df-build__sws select { width: auto; flex: 1 1 140px; }
.df-build__out { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.df-man { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 0; margin: 0; border-radius: 12px; border: 1px solid var(--line); background: #fbfbfa; overflow: hidden; }
.df-man > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 9px 12px; margin-bottom: -1px; border-bottom: 1px dashed var(--line); }
.df-man dt { font: 600 .72rem/1.35 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dimmer); padding-top: 2px; }
.df-man dd { margin: 0; font: 500 .84rem/1.4 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.df-man dd small { display: block; font: 400 .8rem/1.4 var(--f-sans); color: var(--ink-dim); }
.df-man .is-new dd { animation: df-flash .9s var(--ease, ease-out); }
.df-man .is-refused dd { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--ink-dim); }
@keyframes df-flash { from { background: var(--amber-soft); } to { background: transparent; } }
.df-err { display: none; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: #fff; font: 500 .8rem/1.45 var(--f-mono); }
.df-err.is-on { display: block; }
.df-err b { display: inline-block; margin-right: 8px; padding: 2px 6px; border: 1.5px solid #fff; border-radius: 4px; font: 700 .72rem/1 var(--f-cond); letter-spacing: .12em; }

/* ===== 2. agents: tool/mode matrix ===== */
.df-mx__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.df-mx__ctl > div { display: flex; flex-direction: column; gap: 6px; }
.df-mx__sws { display: flex; flex-wrap: wrap; gap: 6px; }
.df-mx__wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: #fbfbfa; }
.df-mx table { width: 100%; border-collapse: collapse; min-width: 480px; }
.df-mx thead th { padding: 10px 4px; font: 600 .72rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dimmer); text-align: center; border-bottom: 1px solid var(--line-strong); background: var(--elevated); }
.df-mx thead th:first-child { text-align: left; padding-left: 12px; }
.df-mx tbody th { position: sticky; left: 0; z-index: 1; text-align: left; padding: 6px 12px; font: 500 .84rem/1.3 var(--f-sans); color: var(--ink); background: #fbfbfa; border-top: 1px solid var(--line); min-width: 150px; }
.df-mx tbody th small { display: block; font: 500 .7rem/1.2 var(--f-mono); color: var(--ink-dimmer); letter-spacing: .02em; }
.df-mx td { padding: 4px; border-top: 1px solid var(--line); text-align: center; }
.df-cell { width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: 600 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); cursor: pointer; }
.df-cell:hover { background: var(--panel); border-color: var(--line); }
.df-cell::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.df-cell[data-s="auto"] { color: var(--ink); }
.df-cell[data-s="auto"]::before { background: var(--amber-led); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.df-cell[data-s="card"]::before { border: 2px solid var(--amber); width: 7px; height: 7px; }
.df-cell[data-s="off"] { color: var(--ink-dimmer); font-weight: 500; }
.df-cell[data-s="off"]::before { width: 10px; height: 1.5px; border-radius: 0; background: var(--ink-dimmer); }
.df-cell[aria-pressed="true"] { background: var(--panel); border-color: var(--ink); box-shadow: var(--shadow-mod); }
.df-mx tr.is-changed th { color: var(--amber-text); }
.df-mx__read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.df-mx__stamp { min-width: 70px; padding: 8px 10px; border-radius: 8px; background: var(--lcd); color: var(--lcd-ink); font: 700 .8rem/1 var(--f-cond); letter-spacing: .14em; text-align: center; text-transform: uppercase; box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.df-mx__read p { margin: 0; font-size: .92rem; max-width: none; }
.df-mx__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 .74rem/1 var(--f-mono); color: var(--ink-dim); }
.df-mx__legend span { display: inline-flex; align-items: center; gap: 6px; }
.df-mx__legend .df-cell { width: auto; min-height: 0; padding: 0; pointer-events: none; }

/* ===== 3. governance: policy console ===== */
.df-pc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.df-pc__stack { display: flex; flex-direction: column; gap: 6px; }
.df-lvl { display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); transition: border-color .25s, box-shadow .25s; }
.df-lvl__s { font: 600 .72rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dimmer); }
.df-lvl__t { font: 500 .8rem/1.3 var(--f-mono); color: var(--ink-dim); overflow-wrap: anywhere; }
.df-lvl__v { justify-self: end; font: 600 .84rem/1 var(--f-mono); color: var(--ink); padding: 5px 8px; border-radius: 6px; background: var(--elevated); white-space: nowrap; }
.df-lvl__v.is-unset { color: var(--ink-dimmer); font-weight: 500; background: transparent; border: 1px dashed var(--line-strong); }
.df-lvl.is-win { border-color: var(--ink); box-shadow: var(--shadow-mod); }
.df-lvl.is-win .df-lvl__v { background: var(--lcd); color: var(--lcd-ink); }
.kd-docs__body .df-pc__eff { max-width: none; color: var(--lcd-dim); }
.df-pc__eff { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--lcd); color: var(--lcd-dim); font: 500 .76rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.df-pc__eff b { font: 700 1.05rem/1 var(--f-mono); color: var(--lcd-ink); letter-spacing: .02em; text-transform: none; }
.df-pc__keys { display: flex; flex-wrap: wrap; gap: 6px; }
.df-pc__cmds { display: flex; flex-direction: column; gap: 6px; }
.df-cmd { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); text-align: left; font: 500 .78rem/1.45 var(--f-mono); color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.df-cmd::before { content: ""; width: 7px; height: 7px; margin: 5px 0 0 3px; transform: rotate(45deg); border-radius: 1px; background: var(--line-strong); transition: background .2s; }
.df-cmd:hover { border-color: var(--ink-dimmer); }
.df-cmd:hover::before, .df-cmd[aria-pressed="true"]::before { background: var(--amber); }
.df-cmd[aria-pressed="true"] { border-color: var(--ink); box-shadow: var(--shadow-mod); }
.df-cmd small { grid-column: 2; font: 400 .8rem/1.35 var(--f-sans); color: var(--ink-dim); }
.df-pc__tty { min-height: 190px; }
.df-pc__tty .ok { color: #cfd3da; }
.df-pc__stampline { display: inline-block; margin-top: 2px; padding: 2px 6px; border: 1.5px solid #cfd3da; border-radius: 4px; font: 700 .72rem/1.2 var(--f-cond); letter-spacing: .14em; color: #fff; }

/* ===== 4. egress: summary to allowlist worksheet ===== */
.df-al__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.df-al__list { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 0 !important; border-radius: 12px; border: 1px solid var(--line); background: #fbfbfa; overflow: hidden; }
.df-al__list li { max-width: none !important; border-top: 1px solid var(--line); }
.df-al__list li:first-child { border-top: 0; }
.df-al__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 64px 118px; gap: 10px; align-items: center; padding: 8px 12px; min-height: 44px; cursor: pointer; }
.df-al__row input { width: 18px; height: 18px; accent-color: var(--amber); margin: 0; }
.df-al__host { font: 500 .84rem/1.3 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.df-al__host small { display: block; font: 400 .78rem/1.35 var(--f-sans); color: var(--ink-dim); }
.df-al__n { font: 500 .8rem/1 var(--f-mono); color: var(--ink-dim); text-align: right; font-variant-numeric: tabular-nums; }
.df-al__v { justify-self: end; padding: 4px 7px; border-radius: 5px; font: 700 .7rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid var(--line-strong); color: var(--ink-dim); white-space: nowrap; }
.df-al__v[data-v="allow"] { border-color: var(--amber); color: var(--amber-text); }
.df-al__v[data-v="would-deny"] { border-style: dashed; color: var(--ink); border-color: var(--ink-dimmer); }
.df-al__v[data-v="deny"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.df-al__v[data-v="always"] { background: var(--elevated); color: var(--ink); border-color: var(--line-strong); }
.df-al__list li.is-struck .df-al__host { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--ink-dim); }
.df-al__list li.is-fixed .df-al__row { cursor: default; }
.df-al__meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.df-al__meter div { background: var(--lcd); border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.df-al__meter b { font: 700 1.4rem/1 var(--f-seg, var(--f-mono)); color: var(--lcd-ink); font-variant-numeric: tabular-nums; }
.df-al__meter span { font: 500 .7rem/1.25 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lcd-dim); }

@media (max-width: 980px) {
  .df-build__grid, .df-pc__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .df-al__row { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .df-al__n { display: none; }
  .df-al__meter { grid-template-columns: minmax(0, 1fr); }
  .df-al__meter div { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .df-lvl { grid-template-columns: minmax(0, 1fr) auto; }
  .df-lvl__t { grid-column: 1; grid-row: 2; }
  .df-lvl__v { grid-row: 1 / span 2; grid-column: 2; }
  .df-man > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (pointer: coarse) {
  .df-seg button, .df-sw, .df-cell { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .df-man .is-new dd { animation: none; }
}
.df-lvl[hidden] { display: none; }