.oa-proc-header {
  align-items: flex-start;
}
.oa-proc-stat {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.oa-procedures .oa-procedure-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #f9fbfd;
}

.oa-procedures .oa-procedure-search {
  flex: 1 1 16rem;
}
.oa-procedures .oa-procedure-area-field {
  flex: 0 1 11rem;
}

.oa-proc-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 2px;
}

.oa-filter-pill {
  appearance: none;
  border: 1px solid #d2dde7;
  background: #ffffff;
  color: #324a60;
  border-radius: 999px;
  padding: 7px 13px;
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  cursor: pointer;
  transition: all .15s ease;
}
.oa-filter-pill span {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef3f7;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.oa-filter-pill:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.oa-filter-pill.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}
.oa-filter-pill.is-active span {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.oa-filter-pill.star-pill.is-active {
  background: #b87300;
  border-color: #b87300;
  color: #ffffff;
}

.oa-proc-import-box {
  flex: 1 1 100%;
  border: 1px dashed #cbd8e4;
  border-radius: 8px;
  padding: 8px 12px;
  background: #ffffff;
}
.oa-proc-import-box > summary {
  cursor: pointer;
  font-size: .83rem;
  font-weight: 650;
  color: #2f4b66;
}
.oa-proc-import-box form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 12px;
  margin-top: 10px;
}
.oa-proc-import-box input[type="file"] {
  max-width: 250px;
  padding: 5px 8px;
  font-size: .8rem;
}
.oa-proc-import-box form small {
  flex-basis: 100%;
  color: var(--muted);
}

.oa-procedure-tools output {
  flex: 0 0 100%;
  color: var(--muted);
  font-size: .85rem;
}
.oa-procedure-tools output[data-error] {
  color: #8b3d29;
}

/* 2-Column Clean Grid */
.oa-proc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px 20px 20px;
  align-items: start;
}

.oa-procedure-empty {
  grid-column: 1 / -1;
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
}

.oa-proc-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  transition: border-color .15s, box-shadow .15s;
}
.oa-proc-card:hover {
  border-color: #bfd0df;
  box-shadow: 0 3px 10px rgba(17, 36, 62, 0.05);
}
.oa-proc-card.is-star {
  border-color: #e6be60;
  background: linear-gradient(180deg, #fffdf6 0%, #ffffff 48%);
  box-shadow: 0 2px 10px rgba(196, 134, 12, 0.08);
}

.oa-proc-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.oa-proc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.oa-proc-code {
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #344c63;
  background: #eef3f7;
  padding: 2px 7px;
  border-radius: 5px;
}

.oa-proc-level {
  font-size: .74rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
.oa-proc-level.tone-l4 { color: #7c1f4d; background: #fbe9f1; border: 1px solid #f2c6da; }
.oa-proc-level.tone-l3 { color: #1d4f82; background: #e8f1fb; border: 1px solid #c6dcf4; }
.oa-proc-level.tone-l2 { color: #0f685a; background: #e4f6f1; border: 1px solid #bce6da; }
.oa-proc-level.tone-l1 { color: #4c5f72; background: #eef2f6; }
.oa-proc-level.tone-none { color: #7f6b52; background: #f7f3ec; }

.oa-proc-area,
.oa-proc-duration {
  font-size: .75rem;
  color: var(--muted);
  background: #f6f8fa;
  padding: 2px 7px;
  border-radius: 5px;
}

.oa-proc-star-btn {
  appearance: none;
  border: 1px solid #dbe3eb;
  background: #ffffff;
  color: #5d6f82;
  border-radius: 999px;
  padding: 3px 9px;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
}
.oa-proc-star-btn:hover {
  border-color: #d99b16;
  color: #966200;
  background: #fff9e6;
}
.oa-proc-star-btn.is-star,
.oa-proc-star-badge,
.oa-proc-star-inline {
  border: 1px solid #eab949;
  background: #fff3cd;
  color: #8a5200;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .75rem;
  font-weight: 750;
  white-space: nowrap;
}

.oa-proc-title {
  margin: 2px 0 0;
  font-size: .98rem;
  font-weight: 720;
  line-height: 1.38;
  color: var(--ink);
}

.oa-proc-alt {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oa-proc-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid #eef2f6;
}

.oa-proc-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
}
.oa-proc-ready i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5cfd9;
}
.oa-proc-ready.is-full { color: #0f6b5c; }
.oa-proc-ready.is-full i { background: #1d9a84; }
.oa-proc-ready.is-partial { color: #245785; }
.oa-proc-ready.is-partial i { background: #3b7ab5; }

.oa-proc-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.oa-proc-drawer {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f6faf9;
  border: 1px solid #e3eeec;
}

.oa-procedure-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
}
.oa-procedure-detail > div.is-wide {
  grid-column: 1 / -1;
}

.oa-procedure-detail dt {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}

.oa-procedure-detail dd {
  margin: 3px 0 0;
  font-size: .84rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.oa-procedure-unfilled {
  color: var(--muted);
  font-size: .82em;
}

.oa-prep-actions {
  justify-content: flex-start;
  margin-top: 8px;
}

@media (max-width: 860px) {
  .oa-proc-grid {
    grid-template-columns: 1fr;
    padding-inline: 14px;
  }
}

@media (max-width: 620px) {
  .oa-procedure-detail {
    grid-template-columns: 1fr;
  }
}

@media print {
  .oa-procedure-download, .oa-procedure-tools {
    display: none !important;
  }
  .oa-proc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 8px 0;
  }
  .oa-proc-card {
    break-inside: avoid;
    box-shadow: none;
  }
}