/* Athena hosted build: Defense view (defense.js). Rides the mockup's tokens and its
   roster / dfeed / cmt classes; only layout and the few new pieces live here. */
.df-head{margin-bottom:18px}
.df-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.df-seg{flex-wrap:wrap}
.df-one{font-size:13px;font-weight:600;color:var(--t1)}
.df-tel{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t3);font-family:var(--font);margin-left:auto;white-space:nowrap}   /* relative words: sans, not mono */
.df-tel .lv{width:6px;height:6px;border-radius:50%;background:var(--t3);flex-shrink:0}
.df-tel.live{color:var(--t2)}
.df-tel.live .lv{background:var(--success);box-shadow:0 0 6px rgba(39,166,68,.7)}
.df-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--raised);margin-bottom:16px;font-size:12.5px;line-height:1.5}
.df-banner.prove{border-color:rgba(217,162,59,.3);background:var(--warn-dim)}
.df-banner.active{border-color:rgba(39,166,68,.3);background:var(--success-dim)}
.df-banner-mode{font-weight:600;color:var(--t1);white-space:nowrap}
.df-banner.prove .df-banner-mode{color:var(--warn)}
.df-banner.active .df-banner-mode{color:var(--success)}
.df-banner-tx{color:var(--t2);flex:1;min-width:200px}
.df-banner-btn{white-space:nowrap}
.df-tiles{margin-bottom:20px}
/* inside the App page's Live pane: the band names the app, so one sentence leads and the status row sits under it */
.df-root.in-shell .df-toolbar{margin-bottom:14px}
.df-sent{font-size:16px;line-height:1.45;color:var(--t1);margin:0 0 8px;max-width:70ch}
.df-sent.unknown{color:var(--t2)}
.df-cannot{font-size:12.5px;line-height:1.5;color:var(--t2);margin:-6px 0 16px;max-width:70ch}
.pj-tile .tv.df-unknown{color:var(--t3);font-weight:500;font-size:18px}
.df-feed .dfeed-act.df-kind{text-transform:none;letter-spacing:0;font-size:11px;font-weight:600;white-space:normal;line-height:1.35}
.df-roster .agent-top{align-items:center}
.df-roster .df-did{margin:0;flex:1;min-width:0;font-size:12.5px;color:var(--t1);line-height:1.45}
.cmt.df-undone{opacity:.85}
.cmt.df-undone::after{background:var(--t3)}
.df-hist-row.has-undo{grid-template-columns:minmax(0,1fr) auto auto auto}
.df-hist-row .df-undo{padding:2px 8px;font-size:11px}
/* shell mode: one list of hostile sources with the blocks merged in; the rest behind disclosures */
.df-note{font-size:13px;line-height:1.5;color:var(--t2);margin:0 0 14px;max-width:70ch}
.df-note.prove{color:var(--t1)}
.df-rules{color:var(--accent);text-decoration:none;font-weight:500}
.df-rules:hover{text-decoration:underline}
.df-sources{margin:0 0 14px}
.df-list-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.df-list-h h3{font-size:13px;font-weight:600;letter-spacing:-.005em;margin:0}
.df-list{display:flex;flex-direction:column;gap:8px}
.df-row{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center}
.df-row-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0;grid-column:1}
.df-row-head .df-lead{flex:1 1 200px;color:var(--t1);font-size:13.5px;line-height:1.45}
.df-meta{grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 2px;font-size:12px;color:var(--t3);min-width:0}
.df-meta .df-addr{font-size:12px;color:var(--t2)}
.df-meta .df-when{margin-left:0;white-space:normal}
.df-addr{font-family:var(--mono);font-size:13px;color:var(--t1);overflow-wrap:anywhere;min-width:0;flex:0 1 auto;white-space:normal}   /* a hostname takes the width it needs, wrapping before it is ever cut */
/* chips never cut their words: up to two lines, the full text in the hover title */
.df-chip{font-size:11px;line-height:1.35;color:var(--t3);border:1px solid var(--line);border-radius:12px;padding:1px 9px;background:var(--bg);max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.df-chip.on{color:var(--t1);border-color:var(--line-2)}
.df-chip.ask{color:var(--warn);border-color:rgba(217,162,59,.3);background:var(--warn-dim)}
.df-chip.ok{color:var(--success);border-color:rgba(39,166,68,.3);background:var(--success-dim)}
.df-chip.own{color:var(--t2);border-color:var(--line-2);background:var(--raised)}
/* the row dot is the row's state, one token each, the same in both themes: red = hostile traffic now only, amber = a decision
   for a person, ink = a block holding, a hollow red ring = known hostile but gone (grey would read "unknown"), grey = nothing
   hostile (Athena's own or allowed). Severity is in the receipt. */
.df-row .sd{background:var(--t3);opacity:1;flex-shrink:0}
.df-row .sd.hot{background:var(--danger)}
.df-row .sd.ask{background:var(--warn)}
.df-row .sd.blocked{background:var(--t1)}
.df-row .sd.gone{background:transparent;box-shadow:inset 0 0 0 1.5px var(--t3)}   /* gone: hollow grey, as in the picture */
.df-row .sd.own{background:var(--t3)}
.df-visits{color:var(--t3)}
/* tap targets: every control in the list is at least 44px tall without loosening the row's rhythm */
.df-row-act .act-btn,.df-hist-row .df-undo,.df-receipt-acts .act-btn{min-height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
.df-row>.df-more{min-height:44px;display:inline-flex;align-items:center;margin:-6px 0 -4px 0}
.df-disc summary{min-height:44px}
.df-rules{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;vertical-align:middle}
.df-when{margin-left:auto;font-size:11.5px;color:var(--t3);font-family:var(--font);letter-spacing:0;white-space:nowrap}   /* "6 h ago" is words: the grey sans meta style; mono is for clock times, addresses and code */
.df-row-line{display:contents}
.df-sentence{grid-column:1;font-size:13px;line-height:1.5;color:var(--t2);min-width:0}
.df-row-act{grid-column:2;grid-row:1/span 2;display:flex;align-items:center;justify-content:flex-end;min-width:0}
.df-row-act .act-btn{white-space:nowrap}
.df-why{font-size:12px;color:var(--t3);line-height:1.4;text-align:right;max-width:26ch}
.df-row>.df-more{grid-column:1;justify-self:start}
/* under the sentence: what the app replied to this address ("answered 12 · errors 3 · denied 8") and the other apps
   it hit today, each name a link to that app's Live tab. Both grey: facts, not the row's state. */
.df-answered{grid-column:1;font-size:12px;line-height:1.45;color:var(--t3);min-width:0;overflow-wrap:anywhere}
.df-also{grid-column:1;font-size:12px;line-height:1.45;color:var(--t3);min-width:0;overflow-wrap:anywhere}
.df-also .df-also-app{color:var(--t3);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;vertical-align:middle;border-radius:4px}
.df-also .df-also-app:hover,.df-also .df-also-app:focus-visible{color:var(--t1);text-decoration:underline}
.df-also .df-also-app:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.df-also .df-more-chev{color:var(--t3)}
.df-more{font-size:11.5px;color:var(--t3);padding:0;background:none;border:none}
.df-more:hover{color:var(--t1)}
/* the receipt toggle is the product's one link style: plain grey text and a "›" that turns when the receipt is open.
   No pill: the 44px tap target comes from the line height, not from a border. */
.df-row{cursor:pointer}
.df-row .df-receipt,.df-row .df-row-act,.df-row .df-facts{cursor:auto}
.df-row>.df-more{font-size:12px;color:var(--t3);border:0;border-radius:4px;background:none;padding:0 2px;gap:4px;cursor:pointer;font-family:var(--font)}
.df-row>.df-more:hover,.df-row>.df-more:focus-visible{color:var(--t1)}
.df-row>.df-more:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.df-row>.df-more .df-more-chev{display:inline-block;transition:transform .15s;color:var(--t3)}
.df-row>.df-more[aria-expanded="true"]{color:var(--t2)}
.df-row>.df-more[aria-expanded="true"] .df-more-chev{transform:rotate(90deg)}
.df-row.open{border-color:var(--line-2)}
/* the allowed fold: one quiet line at the end of the list ("1 allowed ›"); the rows open in place beneath it */
.df-fold{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2);background:none;border:none;padding:0 2px;cursor:pointer;font-family:var(--font)}
.df-fold:hover,.df-fold:focus-visible{color:var(--t1)}
.df-fold:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
.df-fold .df-more-chev{display:inline-block;transition:transform .15s;color:var(--t3)}
.df-fold[aria-expanded="true"] .df-more-chev{transform:rotate(90deg)}
.df-allowed{margin-top:-2px}
.df-receipt{grid-column:1/-1;min-width:0}
.df-receipt .df-facts{margin:4px 0 0}
.df-receipt-acts{margin-top:8px}
.df-disc{border-top:1px solid var(--line);padding:4px 0}
.df-disc summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--t1);padding:10px 0;list-style:none;display:flex;align-items:center;gap:8px}
.df-disc summary::-webkit-details-marker{display:none}
.df-disc summary::before{content:"›";display:inline-block;color:var(--t3);transition:transform .15s}
.df-disc[open] summary::before{transform:rotate(90deg)}
.df-disc summary .n{font-size:11.5px;font-weight:500;color:var(--t3);font-family:var(--mono)}
.df-disc summary .df-off{font-size:11.5px;font-weight:500;color:var(--t3);font-family:var(--font)}   /* "· blocking is off": words, grey sans */
.df-hist-row .df-src{min-width:0;white-space:normal}
.df-disc>div{padding:0 0 14px}
.df-crew{display:flex;flex-direction:column;gap:8px}
.df-crew-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t1);line-height:1.45}
.df-crew-orb{width:7px;height:7px;border-radius:50%;background:var(--t3);flex-shrink:0}
.df-crew-orb.working{background:var(--t2)}   /* working = busier, not "verified": no green; the title says what the dot means */
.df-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:16px;align-items:start}
.df-main,.df-side{min-width:0;display:flex;flex-direction:column;gap:16px}
.df-card{min-width:0}
.df-card .card-h{flex-wrap:wrap;gap:8px 10px}
.df-empty{padding:22px 14px;text-align:center;font-size:12.5px;color:var(--t3);line-height:1.55;background:var(--bg);border:1px dashed var(--line-2);border-radius:var(--r-md)}
.df-src{font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
.df-verdict{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;border:1px solid var(--line);color:var(--t3);background:var(--raised)}
.df-verdict.v-contained{color:var(--success);border-color:rgba(39,166,68,.3);background:var(--success-dim)}
.df-verdict.v-recommended{color:var(--warn);border-color:rgba(217,162,59,.3);background:var(--warn-dim)}
.df-verdict.v-allowlisted{color:var(--t2)}
.df-verdict.v-escalated{color:var(--danger);border-color:rgba(243,78,82,.3);background:var(--danger-dim)}
.df-verdict.v-released,.df-verdict.v-expired{color:var(--t2)}
.df-feed .dfeed-row{animation:none}
.df-feed .dfeed-time{margin-left:auto}
.df-facts{margin:10px 0 2px;padding:10px 12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:5px 14px;font-size:11.5px}
.df-facts dt{color:var(--t3)}
.df-facts dd{margin:0;color:var(--t1);min-width:0;overflow-wrap:anywhere}
.df-paths{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.df-paths li{font-size:11px;color:var(--t2)}
.df-muted{font-size:11.5px;color:var(--t3)}
.dchip.warn{color:var(--warn);border-color:rgba(217,162,59,.3)}
.cmt.active::after{background:var(--danger)}
.cmt.rec::after{background:var(--warn)}
.cmt-badge.on{color:var(--danger);background:var(--danger-dim)}
.df-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.df-acts .act-btn[disabled]{opacity:.5;cursor:not-allowed}
.df-history{display:flex;flex-direction:column;gap:8px}
.df-hist-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:12px;padding:8px 0;border-top:1px solid var(--line)}
.df-hist-row:first-child{border-top:none;padding-top:0}
.df-card .card-h .df-more{margin-left:auto}
.df-card .card-h .count + .df-more{margin-left:8px}
@media (max-width:980px){
  .df-cols{grid-template-columns:minmax(0,1fr)}
  .df-tel{margin-left:0}
}
@media (max-width:560px){
  .df-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .df-banner{flex-direction:column;align-items:flex-start}
  .df-banner-btn{align-self:stretch;text-align:center}
  .df-facts{grid-template-columns:minmax(0,1fr)}
  .df-acts .act-btn{flex:1;justify-content:center}
  .df-hist-row{grid-template-columns:minmax(0,1fr) auto}
  .df-hist-row.has-undo{grid-template-columns:minmax(0,1fr) auto auto}
  .df-hist-row .df-muted{grid-column:1/-1}
  .df-row{grid-template-columns:minmax(0,1fr)}
  .df-row-act{grid-column:1;grid-row:auto;justify-content:flex-start}
  .df-row-act{order:1}   /* phone: the answered / also-seen lines stay under the sentence; the action, the receipt toggle and the receipt follow */
  .df-row>.df-more{order:2}
  .df-row .df-receipt{order:3}
  .df-row-act .act-btn{flex:1;justify-content:center}
  .df-why{text-align:left;max-width:none}
  .df-receipt{grid-column:1}
  .df-seg button{flex:1}
  .df-tel{white-space:normal}
}
/* "What Athena is doing" with nothing to say: one plain sentence, never an empty box (zero-context critic, 2026-10-30) */
.df-crew-line{margin:0;font-size:13px;line-height:1.45;color:var(--t2);max-width:70ch}