/* ===== QUARANTINE POLICY DECISION MAP =====

   Post-specific component. Loaded only by posts that name it in front matter
   (`extra_css: ["quarantine-flow.css"]`) — see the "head" block in
   layouts/_default/single.html. Markup lives in
   layouts/shortcodes/quarantine-flow.html.

   Everything is namespaced under .qflow so none of it can reach the rest of
   .post-content. No new colors are invented: the three branch accents map onto
   the palette already in terminal.css —

     --red    AdminOnlyAccessPolicy   (no access, message never surfaced)
     --amber  DefaultFullAccessPolicy (full access, but silent — the trap)
     --green  ...WithNotificationPolicy (full access + digest — the goal)
     --blue   the decision node itself

   Each .branch sets --qf-c (its accent) and --qf-soft (a 7% wash of it) once,
   and every rule inside reads those two, so the three color variants cost one
   declaration each instead of three parallel rule blocks. */

/* ---- breakout ----
   .post-content is capped at 720px but .container's inner width is 912px
   (960 max-width less 2x24px padding), and the three branch columns want every
   pixel of it. Widening by the 192px difference extends the map rightward into
   that gutter while leaving the prose column where it is.

   The max-width is the safety catch: below ~768px viewports .post-content is
   already narrower than 720px, so `100% + 192px` would overrun the screen.
   Clamping to the container's own inner width (100vw less its padding) makes
   the breakout collapse to exactly zero at that point rather than overflowing.
   The 640px query below re-states it because .container drops to 16px padding
   there. */
.qflow {
  width: calc(100% + 192px);
  max-width: calc(100vw - 48px);
  margin: 32px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: 13px;
  line-height: 1.6;
}

.qflow .qf-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- flow spine ---- */
.qflow .flow { display: flex; flex-direction: column; align-items: center; gap: 0; }

.qflow .node {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 13px 20px;
  text-align: center;
  max-width: 560px;
  width: 100%;
}
.qflow .node .t { color: var(--text-bright); font-size: 13px; }
.qflow .node .s { color: var(--text-dim); font-size: 11.5px; margin-top: 4px; line-height: 1.5; }
.qflow .node.q { border-color: var(--blue); background: rgba(90, 200, 250, 0.05); }
.qflow .node.q .t { color: var(--blue); }

/* Connectors are drawn, not typed — a 2px rule with a CSS-triangle arrowhead
   pinned to its bottom edge. All decorative, and all aria-hidden in the markup. */
.qflow .conn { width: 2px; height: 24px; background: var(--border); position: relative; flex: none; }
.qflow .conn::after,
.qflow .splitter .leg::after,
.qflow .merge .stem::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--border);
}

.qflow .splitter,
.qflow .merge { width: 100%; display: flex; flex-direction: column; align-items: center; }
.qflow .splitter .stem,
.qflow .merge .stem { width: 2px; height: 22px; background: var(--border); }
.qflow .merge .stem { position: relative; height: 24px; }
.qflow .splitter .bar,
.qflow .merge .bar { width: 66.666%; height: 2px; background: var(--border); }
.qflow .splitter .legs,
.qflow .merge .legs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.qflow .splitter .leg,
.qflow .merge .leg { width: 2px; height: 24px; background: var(--border); margin: 0 auto; }
.qflow .splitter .leg { position: relative; }

/* ---- branch columns ---- */
.qflow .branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }

.qflow .branch {
  --qf-c: var(--text-dim);
  --qf-soft: var(--surface2);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.qflow .b-locked { --qf-c: var(--red);   --qf-soft: rgba(255, 95, 87, 0.07); }
.qflow .b-silent { --qf-c: var(--amber); --qf-soft: rgba(255, 179, 71, 0.07); }
.qflow .b-notify { --qf-c: var(--green); --qf-soft: rgba(0, 229, 160, 0.07); }

.qflow .branch .stripe { height: 3px; background: var(--qf-c); }
.qflow .branch .head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.qflow .branch .name {
  color: var(--text-bright);
  font-size: 12.5px;
  word-break: break-word;
  line-height: 1.4;
}
.qflow .chip {
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 9px;
  background: var(--qf-soft);
  color: var(--qf-c);
  border: 1px solid var(--qf-c);
}

/* subgrid keeps "Permission group", "Notifications", "User experience", "User
   can" and "Default for" on a shared baseline across all three columns, so the
   map reads as five comparable rows rather than three ragged cards. The
   @supports guard means browsers without it just stack each column
   independently — the content is identical, only the alignment is lost.
   Row count (2 header + 5 body = 7) must match the markup. */
.qflow .rows { display: flex; flex-direction: column; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 821px) {
    .qflow .branches { grid-template-rows: auto auto repeat(5, auto); }
    .qflow .branch { grid-row: span 7; display: grid; grid-template-rows: subgrid; }
    .qflow .branch .rows { grid-row: span 5; display: grid; grid-template-rows: subgrid; }
  }
}

.qflow .row {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qflow .row:last-child { border-bottom: none; }
.qflow .row .lbl {
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--comment);
}
.qflow .row .val { font-size: 12.5px; line-height: 1.55; color: var(--text); }
.qflow .row .val strong { color: var(--qf-c); font-weight: 400; }
.qflow .row .val em { color: var(--text-bright); font-style: italic; }
.qflow .row .note-inline { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }

/* Action tokens. .on = the user really can do it; the plain state is a
   capability the policy withholds, struck through so branch A's list can't be
   misread as five things the user is allowed to do. */
.qflow .acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.qflow .act {
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
  color: var(--comment);
  text-decoration: line-through;
  text-decoration-color: var(--comment);
}
.qflow .act.on {
  color: var(--qf-c);
  border-color: var(--qf-c);
  background: var(--qf-soft);
  text-decoration: none;
}

/* ---- override gate ---- */
.qflow .gate {
  width: 100%;
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qflow .gate .k { color: var(--red); font-size: 13px; }
.qflow .gate p { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.qflow .gate ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--text);
}
.qflow .gate li { margin: 0; }
.qflow .gate .out {
  font-size: 12.5px;
  background: rgba(255, 95, 87, 0.07);
  border-radius: 3px;
  padding: 11px 14px;
  color: var(--text);
  line-height: 1.6;
}
.qflow .gate .out b { color: var(--red); font-weight: 400; }
.qflow .gate .out em { color: var(--text-bright); font-style: italic; }

/* ---- tables ----
   Scoped to .qflow deliberately. terminal.css has no table rules at all, so
   styling these globally would silently restyle the table already living in
   content/posts/android-app-protection-policy.md. That's a fix worth making,
   but on its own, not as a side effect of this post. */
.qflow .tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--surface);
}
/* min-width drives the horizontal scroll in .tablewrap. The permission matrix
   is the widest table here at five columns — keep this above its natural
   collapse point or the bit and group columns start wrapping. */
.qflow table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 12.5px; }
.qflow caption {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.qflow th,
.qflow td { text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--border); }
.qflow thead th {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 400;
  background: var(--surface2);
  white-space: nowrap;
}
.qflow tbody tr:last-child td { border-bottom: none; }
.qflow tbody th { font-weight: 400; color: var(--text); }
.qflow td.c { text-align: center; }
.qflow th.grp,
.qflow td.grp { border-left: 1px solid var(--border); }
.qflow .yes { color: var(--green); }
.qflow .no { color: var(--comment); }
.qflow .pname { color: var(--text-bright); }
.qflow table code {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--green-dim);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  white-space: nowrap;
}

/* ---- picker cards ---- */
.qflow .picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.qflow .pick {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--qf-c, var(--border));
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qflow .pick h3 { color: var(--text-bright); font-size: 12.5px; margin: 0; word-break: break-word; }
.qflow .pick .when { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.6; }
.qflow .pick .use {
  margin: 0;
  font-size: 11.5px;
  color: var(--qf-c, var(--text-dim));
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: auto;
  line-height: 1.5;
}

/* ---- callout ---- */
.qflow .note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  background: rgba(90, 200, 250, 0.04);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.65;
}
.qflow .note p { margin: 0; }
.qflow .note b { color: var(--text-bright); font-weight: 400; }
.qflow .note em { color: var(--text-bright); font-style: italic; }

/* ---- responsive ----
   821px is the subgrid cutoff above; matching it here means the columns stop
   being a comparison grid and start being three stacked cards at the same
   breakpoint, so alignment never half-applies. The connector bars and legs are
   meaningless once the branches are in one column, so they're removed rather
   than left as orphaned rules. */
@media (max-width: 820px) {
  .qflow .branches { grid-template-columns: 1fr; }
  .qflow .splitter .bar,
  .qflow .splitter .legs,
  .qflow .merge .bar,
  .qflow .merge .legs { display: none; }
  .qflow .splitter .stem { height: 24px; }
}

@media (max-width: 640px) {
  .qflow { max-width: calc(100vw - 32px); }
}