/* Oroko V2 Process Details: numbered sections with a left rail.
 * Loaded after process-settings-refinement.css. Scoped to .v2pd so the V1 fallback
 * renderer keeps its own styles. Uses the shared theme tokens, so dark mode follows.
 */
.v2pd .oroko-page-head,
.v2pd .v2pd-layout,
.v2pd .v2pd-banner{
  width:min(900px,100%);
  max-width:900px;
  box-sizing:border-box;
}
.v2pd .v2pd-banner{
  margin:18px 0 0;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-soft,var(--surface));
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
}
.v2pd-layout{padding-top:6px}
.v2pd-section{
  display:grid;
  grid-template-columns:minmax(150px,200px) minmax(0,1fr);
  gap:24px 32px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.v2pd-section:last-child{border-bottom:0}
.v2pd-rail{min-width:0}
.v2pd-rail h2{
  margin:0;
  font-size:13px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--ink);
}
.v2pd-rail h2 span{color:var(--muted);font-weight:600}
.v2pd-rail p{
  margin:5px 0 0;
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
}
.v2pd-fields{min-width:0;display:grid;gap:16px}
.v2pd-fields .field{margin:0;min-width:0}
.v2pd-fields .field label{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  line-height:1.4;
  font-weight:680;
  color:var(--ink);
}
.v2pd-fields .field-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.v2pd-fields input,
.v2pd-fields select,
.v2pd-fields textarea{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-height:42px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:13.5px;
  line-height:1.45;
}
.v2pd-fields textarea{min-height:92px;resize:vertical}
.v2pd-fields input:focus-visible,
.v2pd-fields select:focus-visible,
.v2pd-fields textarea:focus-visible{
  outline:2px solid color-mix(in srgb,var(--oroko-tab-accent,var(--accent,#d8541e)) 35%,transparent);
  outline-offset:1px;
  border-color:var(--oroko-tab-accent,var(--accent,#d8541e));
}
.v2pd-fields input:disabled,
.v2pd-fields select:disabled,
.v2pd-fields textarea:disabled{
  background:var(--surface-soft,var(--surface));
  color:var(--muted);
  cursor:not-allowed;
}
.v2pd-fields input[aria-invalid="true"]{border-color:var(--danger,#b44c51)}
.v2pd-error{color:var(--danger,#b44c51)!important}
.v2pd-error[hidden]{display:none}
.v2pd-lock{margin:-6px 0 0}

/* Inline "create new" forms for Folder and Department */
.v2pd-inline{
  margin-top:10px;
  padding:12px;
  border:1px dashed var(--line);
  border-radius:9px;
  background:var(--surface-soft,var(--surface));
}
.v2pd-inline[hidden]{display:none}
.v2pd-inline-label{
  display:block;
  margin-bottom:6px;
  font-size:11.5px;
  font-weight:680;
  color:var(--muted);
}
.v2pd-inline-row{display:flex;flex-wrap:wrap;gap:8px}
.v2pd-inline-row input{flex:1 1 140px;min-height:38px;width:auto}
.v2pd-inline-row .btn{min-height:38px;padding:0 12px}

/* Process owner typeahead */
.v2pd-combo{position:relative}
.v2pd-options{
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:calc(100% + 4px);
  max-height:260px;
  overflow:auto;
  margin:0;
  padding:4px;
  list-style:none;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 14px 34px rgba(30,27,24,.16);
}
.v2pd-options[hidden]{display:none}
.v2pd-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:7px;
  font-size:13px;
  color:var(--ink);
  cursor:pointer;
}
.v2pd-option.active,
.v2pd-option:hover{background:var(--surface-soft,rgba(128,128,128,.12))}
.v2pd-option[aria-selected="true"] .v2pd-option-name{font-weight:700}
.v2pd-option small{margin-left:auto;color:var(--muted);font-size:10.5px;text-transform:capitalize}
.v2pd-option-unassigned{color:var(--muted)}
.v2pd-option-empty{padding:9px 10px;font-size:12px;color:var(--muted)}
.v2pd-avatar{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--oroko-tab-accent,var(--accent,#d8541e));
  color:#fff;
  font-size:9.5px;
  font-weight:700;
}

.v2pd-save-footer{display:none}

@media(max-width:720px){
  .v2pd-section{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 0}
  .v2pd-fields .field-row{grid-template-columns:minmax(0,1fr)}
  .v2pd-save-footer{
    display:block;
    position:sticky;
    bottom:0;
    z-index:5;
    margin:0 -16px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line);
    background:var(--surface);
  }
  .v2pd-save-footer .btn{width:100%;min-height:44px}
  .v2pd .oroko-page-head #detailsSave{display:none}
}
@media(prefers-reduced-motion:no-preference){
  .v2pd-options{animation:v2pdPop .12s ease-out}
  @keyframes v2pdPop{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
}

/* Tabs: one section at a time instead of a long scroll */
.v2pd-section[hidden]{display:none!important}
.v2pd-tabs{margin:14px 0 18px}