/* Plans Module (Phase 0) styles.
 *
 * Two-tier CSS discipline per modules-lessons.md:
 *   Tier 1 (CONTAINER): scoped under [data-module="plans"]. Rendered into
 *     the module's container element by render().
 *   Tier 2 (MODAL-CONTENT): UNSCOPED, prefixed with .pl- to namespace.
 *     Rendered inside ctx.ui.modal({ content }) which mounts on
 *     document.body's .strata-overlay (no [data-module] ancestor).
 *
 * All colors via CSS custom properties from the platform token set; both
 * themes inherit automatically.
 */

/* The platform's default `.strata-content` padding (24px) and the
 * 1200px-capped, centered `.strata-module-container` give the curation
 * list a clean contained layout. Phase 0 does not need the full-bleed
 * override that data-heavy modules (DAM gallery, fixture-list grid) use.
 */

/* ── Tier 1: container ───────────────────────────────────────────────────── */

[data-module="plans"] .pl-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

[data-module="plans"] .pl-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

[data-module="plans"] .pl-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

[data-module="plans"] .pl-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-module="plans"] .pl-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-secondary);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  line-height: 1.4;
  min-height: 28px;
}

[data-module="plans"] .pl-chip:hover {
  background: var(--row-hover);
  color: var(--text-primary);
}

[data-module="plans"] .pl-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--text-primary);
}

[data-module="plans"] .pl-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
}

[data-module="plans"] .pl-empty p {
  margin: 0;
}

[data-module="plans"] .pl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-module="plans"] .pl-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

[data-module="plans"] .pl-row-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  min-width: 0;
}

[data-module="plans"] .pl-row-body[role="button"] {
  cursor: pointer;
}

[data-module="plans"] .pl-row-body[role="button"]:hover {
  background: var(--row-hover);
}

[data-module="plans"] .pl-row-body[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

[data-module="plans"] .pl-row-icon {
  flex-shrink: 0;
  color: var(--text-secondary);
  margin-top: 2px;
}

[data-module="plans"] .pl-row-main {
  flex: 1;
  min-width: 0;
}

[data-module="plans"] .pl-row-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

[data-module="plans"] .pl-row-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

[data-module="plans"] .pl-discipline-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-primary);
  border: 1px solid var(--accent-line);
  text-transform: capitalize;
}

[data-module="plans"] .pl-row-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

[data-module="plans"] .pl-row-meta-sep {
  color: var(--text-tertiary);
}

/* Sheet-number coverage sentence. Inherits .pl-row-meta's 12px/secondary; the
 * shortfall variant is the only thing that takes a colour, and --warning
 * rather than --error because "we could not read 1 of 18" is a fact to act on,
 * not a failure. A set nothing has parsed renders no span at all, so there is
 * no "unknown" variant here by design. */
[data-module="plans"] .pl-row-sheets {
  white-space: nowrap;
}

[data-module="plans"] .pl-row-sheets.is-short {
  color: var(--warning);
}

[data-module="plans"] .pl-row-notes {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[data-module="plans"] .pl-row-edit {
  appearance: none;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  touch-action: manipulation;
}

[data-module="plans"] .pl-row-edit:hover {
  background: var(--row-hover);
  color: var(--text-primary);
}

[data-module="plans"] .pl-row-edit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 640px) {
  [data-module="plans"] .pl-row-body { padding: 12px; }
  [data-module="plans"] .pl-row-edit { padding: 0 10px; min-width: 40px; }
}

/* ── Tier 2: modal-content (UNSCOPED, .pl- prefix) ──────────────────────── */
/* These classes appear inside ctx.ui.modal({content}) HTML, which mounts on
 * document.body's .strata-overlay -- outside the [data-module="plans"] scope.
 * The .pl- prefix is the leak guard. */

.pl-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pl-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pl-modal-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pl-input,
.pl-textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  width: 100%;
  box-sizing: border-box;
}

.pl-input:focus,
.pl-textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}

.pl-textarea { resize: vertical; min-height: 64px; }

.pl-modal-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

.pl-modal-current {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel-2);
}

.pl-modal-current-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.pl-modal-current-name {
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-word;
}

.pl-modal-current-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Discipline chip selector + Other fallback (modal-content). */
.pl-disc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pl-disc-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-secondary);
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 32px;
  line-height: 1.2;
}
.pl-disc-chip:hover {
  background: var(--row-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.pl-disc-chip.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text-primary);
  font-weight: 500;
}
.pl-disc-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pl-disc-other-input {
  margin-top: 10px;
}

/* iOS-zoom prevention on modal inputs at phone width. The Tier-1 rule on
 * [data-module="plans"] inputs does NOT apply because the modal is body-
 * mounted; mirror the rule under .strata-overlay so phone Safari does not
 * zoom on focus. */
@media (max-width: 640px) {
  .strata-overlay .pl-input,
  .strata-overlay .pl-textarea {
    font-size: 16px;
  }
}

/* ── Tier 2: Box file browser (modal-content; .pl-fb- prefix) ───────────── */
/* The modal-body keeps its default platform padding (16-24px) for the
 * title; the browser content lives inside .pl-fb which extends edge-to-
 * edge inside the body by undoing the body's horizontal padding via
 * negative margin. The toolbar/footer's own padding gives the visual
 * inset back at a different scope (we want the breadcrumb bar and footer
 * to sit flush against the body bg, but rows can still hover-fill). */

.pl-fb-overlay .strata-modal {
  max-width: 760px;
  width: 92vw;
}

.pl-fb {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  max-height: 70vh;
  margin: 12px -20px -8px;  /* undo body horizontal padding + tighten bottom */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pl-fb-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  flex-shrink: 0;
}

.pl-fb-up {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}
.pl-fb-up:hover:not(:disabled) {
  background: var(--row-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.pl-fb-up:disabled { opacity: 0.4; cursor: not-allowed; }

.pl-fb-crumbs {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
  scrollbar-width: thin;
}

.pl-fb-crumb {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  border-radius: 4px;
  flex-shrink: 0;
}
.pl-fb-crumb:hover { background: var(--row-hover); color: var(--text-primary); }
.pl-fb-crumb-current {
  padding: 4px 8px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.pl-fb-crumb-sep {
  color: var(--text-tertiary);
  margin: 0 2px;
  flex-shrink: 0;
  font-size: 13px;
}

.pl-fb-root {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  white-space: nowrap;
  height: 32px;
}
.pl-fb-root:hover { background: var(--row-hover); color: var(--text-primary); border-color: var(--border-strong); }

.pl-fb-banner {
  padding: 10px 20px;
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 12px;
  border-bottom: 1px solid var(--accent-line);
  flex-shrink: 0;
}

.pl-fb-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0;
}

.pl-fb-empty,
.pl-fb-error {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-secondary);
}
.pl-fb-error p { margin: 0 0 12px; }

.pl-fb-row {
  appearance: none;
  background: transparent;
  border: none;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 16px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 12px 20px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--text-primary);
  touch-action: manipulation;
  min-height: 48px;
  border-left: 3px solid transparent;
}
.pl-fb-row:hover { background: var(--row-hover); }
.pl-fb-row.is-selected {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.pl-fb-row.is-selected .pl-fb-name { font-weight: 600; }
.pl-fb-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.pl-fb-row-file {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}
.pl-fb-row-file-dim .pl-fb-name { color: var(--text-secondary); }
.pl-fb-row-file-dim .pl-fb-icon { color: var(--text-tertiary); }

.pl-fb-icon {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pl-fb-row.is-selected .pl-fb-icon { color: var(--accent); }

.pl-fb-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.pl-fb-meta {
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}

.pl-fb-chevron { color: var(--text-tertiary); }

.pl-fb-sep {
  border-top: 1px solid var(--border);
  margin: 6px 20px;
}

.pl-fb-loadmore {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.pl-fb-loadmore button { min-width: 180px; }

.pl-fb-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  flex-shrink: 0;
}
.pl-fb-selection {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-fb-selection strong {
  color: var(--text-primary);
  font-weight: 600;
}

@media (max-width: 640px) {
  .pl-fb-overlay .strata-modal {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }
  .pl-fb { max-height: 80vh; min-height: 360px; margin: 8px -16px -8px; }
  .pl-fb-toolbar { padding: 10px 16px; }
  .pl-fb-banner { padding: 10px 16px; }
  .pl-fb-row { padding: 12px 16px; min-height: 52px; }
  .pl-fb-footer { padding: 10px 16px; }
  .pl-fb-sep { margin: 6px 16px; }
}

/* Plans Phase 1.5 -- per-row "Check for new issuance" button.
   Same shape as .pl-row-edit so they sit side-by-side cleanly. */

[data-module="plans"] .pl-row-check,
[data-module="plans"] .pl-row-sheets-btn {
  background: transparent;
  color: var(--text-tertiary);
  border: none;
  cursor: pointer;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  align-self: stretch;
}
[data-module="plans"] .pl-row-check:hover,
[data-module="plans"] .pl-row-sheets-btn:hover {
  color: var(--text-primary);
  background: var(--row-hover);
}
[data-module="plans"] .pl-row-check:focus-visible,
[data-module="plans"] .pl-row-sheets-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Candidate review modal -- TIER 2 (modal-content; .strata-overlay
   is body-mounted with no data-module attribute, so these rules stay
   UNSCOPED and rely on the .pl-cand-modal- prefix as the leak guard
   per .claude/rules/modules-lessons.md). */

.pl-cand-modal-body { min-width: 360px; max-height: 60vh; overflow-y: auto; }
.pl-cand-modal-folders { list-style: none; padding: 0; margin: 0; }
.pl-cand-modal-folder {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
  background: var(--panel);
}
.pl-cand-modal-folder.is-open { border-color: var(--accent-line); }
.pl-cand-modal-folder-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.pl-cand-modal-folder-toggle {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-primary);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  padding: 0;
}
.pl-cand-modal-folder-caret { color: var(--text-tertiary); display: inline-flex; }
.pl-cand-modal-folder-name { font-weight: 500; }
.pl-cand-modal-new-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 3px;
}
.pl-cand-modal-folder-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
}
.pl-cand-modal-dismiss {
  padding: 4px 8px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
.pl-cand-modal-dismiss:hover { background: var(--row-hover); color: var(--text-primary); }
.pl-cand-modal-busy {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 4px 8px;
}
.pl-cand-modal-folder-body {
  padding: 0 10px 10px 30px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.pl-cand-modal-files { list-style: none; padding: 0; margin: 6px 0 0; }
.pl-cand-modal-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}
.pl-cand-modal-file:last-child { border-bottom: none; }
.pl-cand-modal-file-main { flex: 1; min-width: 0; }
.pl-cand-modal-file-name {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-cand-modal-file-meta {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.pl-cand-modal-pick {
  padding: 4px 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.pl-cand-modal-pick:hover { filter: brightness(1.1); }
.pl-cand-modal-files-loading,
.pl-cand-modal-files-empty,
.pl-cand-modal-files-error {
  padding: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.pl-cand-modal-files-error { color: var(--error); }
.pl-cand-modal-link {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
  text-decoration: underline;
}
.pl-cand-modal-empty { padding: 16px; text-align: center; }
.pl-cand-modal-empty p { margin: 4px 0; }
.pl-cand-modal-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.pl-cand-modal-more {
  padding: 6px 12px;
  background: var(--panel-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.pl-cand-modal-more:disabled { opacity: 0.6; cursor: default; }
.pl-cand-modal-change {
  margin-left: auto;
  padding: 6px 10px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
.pl-cand-modal-change:hover { color: var(--text-primary); background: var(--panel-2); }
.pl-cand-modal-empty p { margin: 4px 0; }

/* Sheets review (manual sheet-number entry) -- TIER 2 (modal-content).
   UNSCOPED on purpose: ctx.ui.modal mounts on document.body's .strata-overlay,
   which has no [data-module] ancestor, so a [data-module="plans"] prefix here
   would match nothing and every field would render at browser defaults. The
   .pl-sheets- prefix is the leak guard. Colours are platform tokens only, so
   both themes follow without a [data-theme="light"] block. */

.pl-sheets { min-width: 360px; max-width: 620px; }

.pl-sheets-summary {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
/* Same reading as the set row: a shortfall is a fact to act on. */
.pl-sheets-summary.is-short { color: var(--warning); }
/* "Nobody has looked yet" is not a failure -- it recedes rather than alarms. */
.pl-sheets-summary.is-unread { color: var(--text-tertiary); }

.pl-sheets-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 52vh;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.pl-sheets-row {
  display: grid;
  grid-template-columns: 68px 150px auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
}

.pl-sheets-page {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.pl-sheets-input { width: 100%; }

.pl-sheets-static {
  font-size: 14px;
  color: var(--text-primary);
}

/* The per-row hand-decision button. Quiet by default -- it is an escape hatch
   for the two states typing cannot reach, not the primary action of the row. */
.pl-sheets-confirm {
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.pl-sheets-confirm:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.pl-sheets-confirm:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.pl-sheets-prov {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The three states this UI must never collapse into one another. */
.pl-sheets-prov.is-parsed { color: var(--text-secondary); }
.pl-sheets-prov.is-manual { color: var(--accent); }
.pl-sheets-prov.is-unresolved { color: var(--warning); }
.pl-sheets-prov.is-unread { color: var(--text-tertiary); }

.pl-sheets-dwg {
  grid-column: 2 / -1;
  font-size: 11px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-sheets-hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

@media (max-width: 640px) {
  .pl-sheets { min-width: 0; }
  .pl-sheets-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  /* 44px minimum touch target (.claude/rules/modules.md "Mobile responsive").
     At 4px padding around 11px text this control was ~25px tall, and it is the
     ONLY affordance for the two decisions typing cannot reach -- recording that
     a page has no sheet number, and pinning a number the machine read. A
     quiet-by-default control still has to be hittable. min-height rather than a
     fixed height so a wrapped label still grows; the padding widens with it so
     the horizontal target grows too. */
  .pl-sheets-confirm {
    grid-column: 2 / -1;
    justify-self: start;
    min-height: 44px;
    padding: 4px 14px;
  }
  .pl-sheets-prov { grid-column: 2 / -1; }
  .pl-sheets-dwg { grid-column: 2 / -1; }
}