/* Oroko V2 Procedure layout (SOP header, numbered steps with type label, Locate on canvas).
 * Loaded last. Uses only the shared design tokens, so light and dark themes follow automatically.
 * Selectors are scoped to .v2-procedure-page, which v2-procedure.js adds to the V1 Procedure page.
 */

/* State picker (only rendered when the process has more than one state). */
.v2-procedure-page .v2-proc-states{
  display:inline-flex;
  align-self:flex-end;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
}
.v2-procedure-page .v2-proc-states button{
  min-height:32px;
  padding:0 12px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:10.5px;
  font-weight:750;
  cursor:pointer;
}
.v2-procedure-page .v2-proc-states button[aria-pressed="true"]{
  background:var(--surface);
  color:var(--ink);
  box-shadow:var(--shadow-xs);
}
.v2-procedure-page .v2-proc-states button:focus-visible,
.v2-procedure-page .v2-proc-locate:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}

/* SOP header: Trigger, Outcome, Owner, Status. */
.v2-procedure-page .oroko-procedure-context.v2-sop-header{
  width:min(820px,100%);
  margin:4px 0 22px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
}
.v2-procedure-page .v2-sop-header>h2{
  margin:0 0 14px;
  color:var(--muted);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.v2-procedure-page .v2-sop-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 28px;
  margin:0;
}
.v2-procedure-page .v2-sop-grid>div{min-width:0;}
.v2-procedure-page .v2-sop-grid dt{
  margin:0 0 4px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.v2-procedure-page .v2-sop-grid dd{
  margin:0;
  color:var(--ink);
  font-size:12.5px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

/* Numbered steps. */
.pr118-procedure-page.v2-procedure-page .v2-proc-step .procedure-num{
  color:var(--orange);
  border-color:var(--orange)!important;
  font-weight:800;
  letter-spacing:.02em;
}
.v2-procedure-page .v2-proc-step-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-bottom:7px;
}
.pr118-procedure-page.v2-procedure-page .v2-proc-step-head>h3{margin:0!important;}
.v2-procedure-page .v2-proc-type{
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-soft);
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.v2-procedure-page .v2-proc-type[data-type="decision"]{
  border-color:var(--amber);
  background:var(--amber-soft);
  color:var(--amber);
}
.v2-procedure-page .v2-proc-type[data-type="subprocess"]{
  border-color:var(--blue);
  background:var(--blue-soft);
  color:var(--blue);
}

/* Locate on canvas. */
.v2-procedure-page .v2-proc-actions{margin-top:12px;}
.v2-procedure-page .v2-proc-locate{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:10.5px;
  font-weight:750;
  cursor:pointer;
}
.v2-procedure-page .v2-proc-locate:hover{
  border-color:var(--orange);
  color:var(--orange);
}

.v2-procedure-page .v2-proc-empty{
  margin:0;
  padding:28px 0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
}

/* Compact layout. */
@media(max-width:720px){
  .v2-procedure-page .oroko-procedure-context.v2-sop-header{padding:16px;}
  .v2-procedure-page .v2-sop-grid{grid-template-columns:1fr;gap:14px;}
}

/* Print: the document stays, the controls go. */
@media print{
  .v2-procedure-page .v2-proc-states,
  .v2-procedure-page .v2-proc-actions{display:none!important;}
  .v2-procedure-page .oroko-procedure-context.v2-sop-header{
    border-color:#ccc;
    break-inside:avoid;
  }
}

/* Trigger and Outcome read from the Start and End steps when not saved: visibly secondary. */
.v2-procedure-page .v2-sop-grid dd.v2-sop-derived{color:var(--muted);font-style:italic;}
.v2-procedure-page .v2-sop-grid dd.v2-sop-empty{color:var(--muted);}
.v2-procedure-page .v2-sop-tag{
  display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--line);border-radius:999px;
  font-size:9px;font-style:normal;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.v2-procedure-page .v2-sop-hint{margin:14px 0 0;color:var(--muted);font-size:11.5px;}
.v2-procedure-page .v2-sop-link{
  padding:0;border:0;background:none;color:var(--accent,inherit);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;
}