/* Product layouts built with the unchanged starter form, settings and Tabler contracts. */
.settings-frame .settings-sidebar .list-group {margin:0}
.po-new-options.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:0}
.po-new-options .action{padding:1.25rem 1rem;min-height:12rem;border:1px solid var(--tblr-border-color);border-radius:var(--tblr-border-radius);background:var(--tblr-bg-surface);gap:.6rem}
.po-new-options .action.run{background:var(--tblr-primary-lt);border-color:color-mix(in srgb,var(--tblr-primary) 35%,var(--tblr-border-color));color:var(--tblr-primary)}
.po-new-options .action small{font-size:.8rem;line-height:1.6;color:var(--tblr-secondary-color);font-weight:400}
.po-new-options .action b{font-size:.9rem}
@media(max-width:450px){.po-new-options.quick-actions{grid-template-columns:1fr}.po-new-options .action{min-height:0;display:grid;grid-template-columns:auto 1fr;text-align:left;padding:1rem}.po-new-options .action>span{grid-row:1/3}.po-new-options .action small{grid-column:2}}
.po-dialog,
.ai-dialog,
#editor {
  --tblr-card-spacer-x: 1.25rem;
  --tblr-card-spacer-y: 1.25rem;
  --tblr-card-border-radius: 0.5rem;
}
.po-dialog > .sheet-head,
.ai-dialog > .sheet-head {
  margin: 0;
  padding: 1rem 1.25rem;
  min-height: 3.5rem;
  position: sticky;
  top: 0;
  z-index: 2;
}
.po-dialog > .card-body {
  padding: 1.25rem;
}
.po-dialog > .card-body > form {
  padding: 0;
}
.po-dialog .card-body > form > .form-label {
  margin: 0 0 1rem;
  display: grid;
  gap: 0.375rem;
}
.po-dialog .card-body > form > .form-label > .form-control,
.po-dialog .card-body > form > .form-label > .form-select {
  margin: 0;
}
.po-dialog .card-body > form > button[type="submit"] {
  margin-top: 1rem;
}
.po-dialog:has(.po-record-form) > .card-body {
  padding: 1.25rem 0 0;
}
.po-record-form .calendar-date-fields {
  margin: 0 1.25rem 1rem;
}
.po-record-form .calendar-date-fields label {
  margin: 0 !important;
}
.po-dialog .card-body > .po-record-form > .form-label {
  margin: 0 1.25rem 1rem;
}
.po-record-form > .calendar-event-actions {
  position: sticky;
  bottom: 0;
  background: var(--tblr-bg-surface);
  border-top: 1px solid var(--tblr-border-color);
  padding: 1rem 1.25rem;
  margin-top: 0.5rem;
  z-index: 1;
}
.po-dialog .po-error:not(:empty) {
  margin: 1rem 1.25rem;
}
.po-dialog .po-error:empty {
  margin: 0;
}
.po-dialog .form-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0;
  padding-left: 0;
}
.po-dialog .form-check-input {
  float: none;
  margin: 0;
  width: 1rem;
  height: 1rem;
  flex: none;
}
.po-dialog .po-row-actions,
.po-dialog .starter-inline-actions {
  gap: 0.5rem;
}
.po-dialog h3 {
  font-size: 1rem;
  line-height: 1.4;
  margin: 1.5rem 0 0.75rem;
}
.po-dialog .sheet-head h2 {
  font-size: 1rem;
  line-height: 1.4;
}
.po-dialog input,
.po-dialog select,
.po-dialog textarea {
  max-width: 100%;
}
.po-dialog pre {
  font-size: 0.8rem;
  line-height: 1.6;
}
.po-label-field {
  min-width: 0;
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
}
.po-label-field > .form-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-secondary-color);
}
.po-label-picker {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  margin: 0;
}
.po-label-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  list-style: none;
  padding: 0.6rem 0.75rem;
  min-height: 40px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 400;
}
.po-label-picker > summary::-webkit-details-marker {
  display: none;
}
.po-selected-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.po-picker-panel {
  padding: 0.75rem;
  border-top: 1px solid var(--tblr-border-color);
  display: grid;
  gap: 0.65rem;
}
.po-picker-options {
  max-height: 12rem;
  overflow: auto;
}
.po-picker-option {
  display: flex !important;
  align-items: center;
  gap: 0.65rem !important;
  padding: 0.5rem 0.25rem;
  font-size: 0.875rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  cursor: pointer;
}
.po-picker-option input {
  width: 1rem !important;
  height: 1rem;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none;
}
.po-picker-panel .po-picker-error:empty {
  display: none;
}
.po-picker-panel .btn {
  white-space: normal;
  text-align: left;
}
.po-label-manager {
  margin-top: 1.5rem;
}
.po-label-manager > .po-row-actions {
  justify-content: space-between;
}
.po-label-manager h3 {
  margin: 0;
  font-size: 1rem;
}
.po-focus-star {
  width: 1rem;
  height: 1rem;
  flex: none;
  vertical-align: middle;
  color: var(--tblr-primary);
}
[data-action$="-focus"][aria-pressed="true"] {
  background: var(--tblr-primary-lt);
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
}
.po-row-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.4rem;
}
.po-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.po-filter-count {
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 0.75rem;
  margin-left: 0.3rem;
}
.po-stat-link {
  text-align: left;
  color: inherit;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s;
}
.po-stat-link:hover {
  border-color: var(--tblr-primary);
}
.po-stat-link small {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.po-profile-back {
  margin-bottom: 1rem;
}
.po-profile-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  margin: 1rem 0;
}
.po-profile-summary > .po-avatar {
  width: 100px;
  height: 100px;
  flex: none;
  font-size: 2rem;
}
.po-profile-summary p {
  margin: 0.5rem 0;
  color: var(--tblr-secondary-color);
}
.po-collection {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.po-collection-cover {
  width: 88px;
  height: 110px;
  padding: 0;
  border-radius: var(--tblr-border-radius);
  font-size: 1.8rem;
}
.setting-row h3 {
  font-size: 1rem;
  margin: 0 0 0.35rem;
}
.setting-row > div:first-child {
  max-width: 36rem;
}
.setting-row .starter-inline-actions {
  justify-content: flex-end;
  flex-shrink: 0;
}
.settings-content .dash-header h2 {
  font-size: 1.25rem;
  margin: 0;
}
.po-doc-search {
  max-width: 36rem;
  margin-bottom: 1.25rem;
}
.po-doc-frame .settings-layout {
  grid-template-columns: 17rem minmax(0, 1fr);
}
.po-doc-frame .settings-sidebar {
  max-height: calc(100dvh - 9rem);
  overflow: auto;
  position: sticky;
  top: 5rem;
  align-self: start;
}
.po-doc-group {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tblr-secondary-color);
  margin: 1.25rem 0 0.4rem;
  font-weight: 650;
}
.po-doc-frame .list-group-item {
  font-size: 0.8rem;
  line-height: 1.45;
}
.po-doc-article {
  max-width: 58rem;
  padding: 2rem 2.25rem;
}
.po-doc-article h2 {
  font-size: 1.65rem;
  line-height: 1.3;
  margin: 0.5rem 0 0.75rem;
}
.po-doc-article .lead {
  font-size: 1rem;
  color: var(--tblr-secondary-color);
  line-height: 1.65;
}
.po-doc-contents {
  display: grid;
  gap: 0.4rem;
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
}
.po-doc-contents strong {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}
.po-doc-contents a {
  font-size: 0.85rem;
}
.po-doc-article .markdown {
  font-size: 0.925rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.po-doc-article .markdown section {
  scroll-margin-top: 5rem;
  margin: 0 0 2.25rem;
}
.po-doc-article .markdown h3 {
  font-size: 1.15rem;
  margin: 0 0 0.85rem;
  line-height: 1.4;
}
.po-doc-article .markdown p {
  margin: 0 0 1rem;
}
.po-doc-article .markdown li {
  margin: 0.4rem 0;
  padding-left: 0.2rem;
}
.po-doc-article .markdown ul,
.po-doc-article .markdown ol {
  padding-left: 1.4rem;
  margin-bottom: 1.25rem;
}
.po-doc-article .markdown table {
  display: block;
  width: 100%;
  overflow: auto;
  border-collapse: collapse;
  margin: 1rem 0;
}
.po-doc-article .markdown th,
.po-doc-article .markdown td {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--tblr-border-color);
  vertical-align: top;
}
#editor .calendar-date-fields {
  margin: 0;
  gap: 0.875rem 1rem;
}
#editor .calendar-date-fields label {
  margin: 0 0 0.5rem;
  display: grid;
  gap: 0.375rem;
}
#editor .calendar-date-fields .form-hint {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5;
}
#editor .calendar-date-fields .form-control,
#editor .calendar-date-fields .form-select {
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  min-height: 40px;
  margin: 0;
}
#editor .radar-toggle {
  margin: 0.5rem 0;
  padding: 0.75rem;
  gap: 1rem;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
#editor .radar-toggle > span:first-child {
  flex: 1;
}
#editor .radar-toggle .toggle {
  flex: none;
}
#editor .radar-toggle input {
  width: auto !important;
}
#editor .calendar-event-actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
}
#editor .sheet-head h2 {
  font-size: 1.1rem;
}
#editor .radar-card .card-header {
  padding: 0.9rem 1.1rem;
  min-height: auto;
}
#editor .radar-card .card-body {
  padding: 1.1rem;
}
#editor .radar-card .card-header p {
  font-size: 0.8rem;
  line-height: 1.5;
}
#editor .radar-card .card-title {
  font-size: 0.95rem;
}
#editor .radar-editor-tabs .list-group-item {
  min-height: 2.75rem;
  font-size: 0.85rem;
  white-space: normal;
}
#editor .radar-editor-tabs .list-group-item.active {
  background: var(--tblr-primary-lt);
  color: var(--tblr-primary);
}
#editor .radar-editor-tabs {
  margin: 0;
  padding: 1rem 0.65rem;
}
.po-dialog .toggle > i,
.po-dialog .toggle > .toggle-state,
#editor .toggle > i,
#editor .toggle > .toggle-state {
  pointer-events: none;
}
.ai-dialog .ai-body {
  padding: 1.25rem;
}
.ai-dialog .calendar-event-form > label,
.ai-dialog .calendar-date-fields {
  margin: 0 0 1rem;
}
.ai-dialog .calendar-event-form {
  padding: 0;
}
.ai-dialog .check-label {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  font-size: 0.85rem;
}
.ai-dialog .help {
  color: var(--tblr-secondary-color);
  font-size: 0.85rem;
  line-height: 1.6;
}
.ai-dialog .calendar-date-fields label {
  margin: 0;
}
@media (max-width: 767.98px) {
  .po-dialog {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .po-record-form .calendar-date-fields {
    grid-template-columns: 1fr;
  }
  .po-profile-summary {
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem;
  }
  .po-profile-summary > .po-avatar {
    width: 72px;
    height: 88px;
  }
  .po-profile-summary .po-row-actions {
    margin-left: calc(-72px - 0.8rem);
    margin-top: 1rem;
  }
  .po-filter-bar {
    flex-wrap: nowrap;
    overflow: auto;
    padding-bottom: 0.4rem;
  }
  .po-filter-bar .btn {
    flex: none;
    white-space: nowrap;
  }
  .po-doc-frame .settings-layout {
    display: block;
  }
  .po-doc-frame .settings-sidebar {
    position: static;
    max-height: 15rem;
    border-bottom: 1px solid var(--tblr-border-color);
  }
  .po-doc-article {
    padding: 1.25rem;
  }
  .po-doc-article h2 {
    font-size: 1.4rem;
  }
  .setting-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }
  .setting-row .starter-inline-actions {
    justify-content: flex-start;
  }
  #editor .radar-editor-tabs .list-group-item {
    flex: 0 0 auto;
    min-height: 2.5rem;
    width: auto;
    white-space: nowrap;
    font-size: 0.8rem;
  }
  #editor .calendar-date-fields {
    grid-template-columns: 1fr;
  }
  #editor .calendar-event-actions {
    padding: 0.75rem 0.7rem calc(0.75rem + env(safe-area-inset-bottom));
    gap: 0.35rem;
  }
  #editor .calendar-event-actions .btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.55rem;
  }
}

/* The sidebar owns its inset; the starter list remains inside it. */
#editor .radar-editor-layout { grid-template-columns: 220px minmax(0, 1fr); }
#editor .radar-editor-sidebar {
  min-width: 0; overflow: auto; padding: 20px 16px;
  background: var(--tblr-bg-surface-secondary); border-right: 1px solid var(--tblr-border-color);
}
#editor .radar-editor-tabs { margin: 0; padding: 0; border: 0; overflow: visible; background: transparent; }
#editor .radar-editor-tabs .list-group-item { padding: 12px; gap: 10px; }
#editor .radar-editor-tabs .ti,
#editor #preview-watch .ti,
#editor .watch-management .ti {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 20px; width: 20px; height: 20px; font-size: 20px; line-height: 1;
  margin: 0; vertical-align: middle;
}
#editor #preview-watch, #editor .watch-management .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
#editor .watch-management { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
#editor .watch-management[hidden] { display: none; }
@media (max-width: 767.98px) {
  #editor .radar-editor-layout { grid-template-columns: minmax(0, 1fr); }
  #editor .radar-editor-sidebar { padding: 12px; border-right: 0; border-bottom: 1px solid var(--tblr-border-color); }
  #editor .radar-editor-tabs { overflow-x: auto; }
  #editor .radar-editor-tabs .list-group-item { padding: 10px 12px; }
  #editor .watch-management { margin-bottom: 16px; }
}

/* Equal side tracks keep the wordmark centered despite unequal action counts. */
.topbar > .container-xl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.topbar .starter-brand { position: static; left: auto; transform: none; justify-self: center; margin: 0; }
.topbar .top-left { justify-self: start; }
.topbar .top-actions { justify-self: end; }
@media (max-width: 359.98px) { .topbar .starter-brand .brand-logo { width: 7rem; } }

/* Profile fields follow the starter label/control spacing with equal row heights. */
.po-record-form .calendar-date-fields { align-items: start; gap: 1.1rem 1rem; }
.po-record-form .calendar-date-fields > label,
.po-record-form .po-label-field { display: grid; gap: .375rem; margin: 0; min-width: 0; align-content: start; }
.po-record-form .calendar-date-fields > label > .form-control { margin: 0; height: 42px; min-height: 42px; }
.po-record-form .po-label-field > .form-label { line-height: 1.4285714286; font-weight: 600; }
.po-record-form .po-label-picker { height: 42px; }
.po-record-form .po-label-picker > summary { height: 40px; min-height: 40px; padding: .5rem .75rem; }
.po-label-picker:has(summary:focus-visible), .po-label-picker[open] { border-color: var(--tblr-primary); box-shadow: 0 0 0 .2rem var(--tblr-primary-lt); }
.po-label-picker .po-selected-labels { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.po-selected-labels .badge { flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.po-picker-panel[popover] { position: fixed; inset: auto; margin: 0; padding: .875rem; border: 1px solid var(--tblr-border-color); border-radius: .65rem; background: var(--tblr-bg-surface); color: var(--tblr-body-color); box-shadow: 0 12px 36px #0003; overflow-y: auto; }
.po-picker-panel[popover]:not(:popover-open) { display: none; }
.po-picker-panel[popover]:popover-open { display: grid; gap: .75rem; }
.po-picker-panel .po-picker-options { min-height: 0; }
.po-picker-panel .po-picker-option { border-radius: .375rem; padding: .6rem .5rem; }
.po-picker-option:hover, .po-picker-option:has(input:focus-visible) { background: var(--tblr-primary-lt); }
.po-picker-panel .form-hint { font-size: .75rem; line-height: 1.5; }

.po-login-methods { display:flex; justify-content:center; gap:.75rem; margin-top:1rem; }
.po-login-methods .btn-icon { width:48px; height:48px; border-radius:.65rem; }
.po-login-methods .ti { font-size:24px; line-height:1; }

.po-diff-added { color:var(--tblr-primary); background:var(--tblr-primary-lt); }
.po-diff-removed { color: #881337; background: #ffe4e6; text-decoration: line-through; }

html[data-bs-theme="dark"] .po-diff-removed { color: #fecdd3; background: #4c1d2b; }

.po-selector-stage { position: relative; line-height: 0; }
.po-selector-stage img { display: block; width: 100%; }
.po-selector-stage.is-area-mode { touch-action: none; user-select: none; cursor: crosshair; }
.po-selector-rectangle { position: absolute; pointer-events: none; border: 2px solid #b52869; background: #b5286926; box-shadow: 0 0 0 1px #fff; }
.po-area-preview { margin: 1rem 0; padding: 1rem; border: 1px solid var(--tblr-border-color); border-radius: .5rem; }
.po-area-preview pre { margin-top: .75rem; }
/* Shared product form treatment; keep the starter's controls and layout contracts. */
:is(.po-dialog, .ai-dialog, #editor) .form-label:not(.form-check),
.ai-dialog label:not(.check-label):not(.btn):has(> .form-control, > .form-select, > .form-range) {
  display: grid; gap: .375rem; align-content: start; min-width: 0;
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tblr-secondary-color);
}
:is(.po-dialog, .ai-dialog, #editor) :is(input.form-control:not([type=checkbox]):not([type=range]):not([type=radio]):not([type=file]), select.form-select) {
  height: 42px; min-height: 42px; margin-top: 0; margin-bottom: 0;
  font-size: .875rem; font-weight: 400; letter-spacing: normal; text-transform: none;
}
:is(.po-dialog, .ai-dialog, #editor) textarea.form-control {
  margin-top: 0; font-size: .875rem; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.5;
}
.ai-dialog label.check-label { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0; }
.ai-dialog .check-label input[type=checkbox] { width: 1rem; height: 1rem; min-height: 1rem; flex: none; padding: 0; margin: .15rem 0 0; }
.ai-dialog .ai-body > label:not(.btn), .ai-dialog #ai-followup > label { margin-bottom: 1rem; }
.ai-dialog .change-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 1rem 0; }
.ai-dialog .calendar-date-fields { align-items: start; gap: 1rem; }
#editor .calendar-date-fields { align-items: start; }
#crop-stage.selecting #crop-outline { pointer-events: auto; cursor: move; touch-action: none; }
.crop-handle { position: absolute; width: 16px; height: 16px; border: 2px solid white; background: #b52869; border-radius: 3px; box-shadow: 0 1px 4px #0006; }
.crop-handle.nw { left: -8px; top: -8px; cursor: nwse-resize; }
.crop-handle.ne { right: -8px; top: -8px; cursor: nesw-resize; }
.crop-handle.sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.crop-handle.se { right: -8px; bottom: -8px; cursor: nwse-resize; }
#crop-stage:not(.selecting) .crop-handle { visibility: hidden; }
@media(max-width:767.98px) { .crop-controls { grid-template-columns: 1fr; gap: .75rem; } }

.po-comparison-tabs { margin:1rem 0; }
.po-changes-only .po-diff-unchanged { display:none; }
.po-changes-only .po-diff-added,.po-changes-only .po-diff-removed { display:inline-block; margin:.15rem; padding:.2rem .35rem; border-radius:.25rem; }
.po-visual-comparison { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.po-visual-comparison img { display:block; width:100%; height:auto; }
.po-visual-comparison figure { margin:0; min-width:0; overflow:auto; max-height:65vh; border:1px solid var(--tblr-border-color); }
.po-visual-comparison figcaption { padding:.5rem; font-weight:600; position:sticky; top:0; background:var(--tblr-bg-surface); }
@media(max-width:767.98px){.po-visual-comparison{grid-template-columns:1fr;}}
/* Dark form surfaces share the charcoal/rose palette, including native autofill. */
html[data-bs-theme=dark] { --tblr-bg-forms:#211c22; --tblr-tertiary-bg:#332a32; --dyn-running-surface:#30232c; --tblr-secondary-color:#c0adb9; }
html[data-bs-theme=dark] :is(.form-control,.form-select) { background-color:var(--tblr-bg-forms); color:var(--tblr-body-color); border-color:var(--tblr-border-color); }
html[data-bs-theme=dark] :is(.form-control,.form-select):focus { border-color:var(--tblr-primary); box-shadow:0 0 0 .2rem var(--tblr-primary-lt); }
html[data-bs-theme=dark] input:-webkit-autofill { -webkit-text-fill-color:var(--tblr-body-color); -webkit-box-shadow:0 0 0 1000px var(--tblr-bg-forms) inset; caret-color:var(--tblr-body-color); }
.po-profile-grouping { max-width:260px; margin:1rem 0; }
.po-profile-group { border-bottom:1px solid var(--tblr-border-color); }
.po-profile-group > summary { padding:1rem; font-weight:600; cursor:pointer; }
.po-gallery-sharing { padding:1rem; margin-bottom:1rem; background:var(--tblr-bg-surface-secondary); border:1px solid var(--tblr-border-color); border-radius:.5rem; }
@media(max-width:767.98px){
 .po-dialog:has(.po-record-form) { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; display:grid; grid-template-rows:auto minmax(0,1fr); }
 .po-dialog:has(.po-record-form):not([open]) { display:none; }
 .po-dialog:has(.po-record-form) > .card-body { min-height:0; overflow-y:auto; padding-top:1rem; }
 .po-record-form .calendar-date-fields { grid-template-columns:minmax(0,1fr); gap:1rem; }
 .po-record-form :is(.form-control,.form-select) { font-size:16px!important; min-width:0; width:100%; }
 .po-record-form .po-label-picker summary { font-size:16px; }
 .po-record-form .calendar-event-actions { display:flex; justify-content:flex-end; padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
 .po-record-form .calendar-event-actions > span { display:none; }
 .po-record-form .calendar-event-actions .btn { min-height:44px; }
}
.po-history-navigation { display:flex; gap:.65rem; align-items:end; margin:1rem 0; flex-wrap:wrap; }
.po-history-navigation label { flex:1; min-width:200px; margin:0; }
.po-history-timeline { border-left:2px solid var(--tblr-border-color); padding-left:1rem; }
.po-history-timeline > details { position:relative; margin-bottom:.75rem; }
.po-history-timeline > details::before { content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--tblr-primary); left:-22px; top:18px; }

/* Product interaction states override the starter in both colour schemes. */
html[data-bs-theme] .btn-primary { --tblr-btn-hover-bg:var(--tblr-primary-darken); --tblr-btn-active-bg:var(--tblr-primary-darken); color:var(--tblr-primary-fg)!important; }
html[data-bs-theme] .btn-primary:is(:hover,:focus-visible,:active,.active) { background:var(--tblr-primary-darken)!important; border-color:var(--tblr-primary-darken)!important; color:var(--tblr-primary-fg)!important; }
html[data-bs-theme] .po-new-options .action:is(:hover,:focus-visible,:active) { background:var(--tblr-primary-lt)!important; color:var(--tblr-primary)!important; border-color:var(--tblr-primary)!important; }
html[data-bs-theme] :is(.btn,.action,.po-photo-button,.po-name):focus-visible { outline:2px solid var(--tblr-primary); outline-offset:3px; }
html[data-bs-theme] :is(.form-control,.form-select):focus { border-color:var(--tblr-primary); box-shadow:0 0 0 .2rem var(--tblr-primary-lt); }
html[data-bs-theme] .po-diff-added { color:var(--tblr-primary); background:var(--tblr-primary-lt); text-decoration:underline; text-decoration-thickness:2px; }
/* Photo tiles reserve independent rows for the image and its controls. */
.po-photo-grid > div { display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.po-photo-grid .po-photo-button { display:block; flex:none; height:auto; aspect-ratio:1; overflow:hidden; border-radius:.5rem; }
.po-photo-grid .po-photo-button img { display:block; width:100%; height:100%; object-fit:cover; }
.po-photo-grid .po-row-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.375rem; width:100%; margin:0; }
.po-photo-grid .po-row-actions .btn { min-width:0; width:100%; margin:0; min-height:40px; padding:.375rem; }
.po-photo-grid [data-remove] { grid-column:1/-1; }
@media(max-width:767.98px) {
 html { scrollbar-gutter:auto; }
 body:has(dialog[open]) { overflow:hidden; }
 #workspace { padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
 #workspace .starter-list-row { padding:.875rem; gap:.75rem; }
 #workspace .starter-list-row > .po-row-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:flex-end; margin:0; }
 #workspace .starter-list-row > .po-row-actions .btn { flex:0 0 auto; min-height:44px; min-width:44px; }
 #workspace .starter-list-row > span { min-width:0; overflow-wrap:anywhere; }
 .po-filter-bar { flex-wrap:wrap; overflow:visible; gap:.5rem; }
 .po-filter-bar .btn { min-height:44px; flex:1 1 auto; justify-content:center; }
 .po-profile-grouping { max-width:none; }
 .po-dialog:has(.po-record-form) { width:100vw; max-width:100vw; border:0; }
 .po-dialog:has(.po-record-form) > .sheet-head { padding:.75rem 1rem; }
 .po-dialog:has(.po-record-form) > .card-body { padding:0; overscroll-behavior:contain; }
 .po-record-form { min-width:0; padding:1rem 0 0!important; }
 .po-record-form .calendar-date-fields { margin:0 1rem 1rem; grid-template-columns:minmax(0,1fr); }
 .po-dialog .card-body > .po-record-form > .form-label { margin:0 1rem 1rem; }
 .po-record-form .calendar-date-fields > label > .form-control,.po-record-form .po-label-picker { height:46px; min-height:46px; }
 .po-record-form .po-label-picker > summary { height:44px; min-height:44px; }
 .po-record-form > .calendar-event-actions { padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); gap:.5rem; flex-wrap:wrap; }
 .po-record-form > .calendar-event-actions .btn { flex:1; }
 .po-record-form .calendar-all-day { margin:0 1rem 1rem; }
 :is(.po-dialog,.ai-dialog,#editor) :is(input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea) { font-size:16px!important; max-width:100%; min-width:0; }
 :is(.po-dialog,.ai-dialog) .btn { min-height:44px; }
 .po-dialog .btn-close,.ai-dialog .btn-close,#editor .btn-close { min-width:44px; min-height:44px; flex:none; }
 .po-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.875rem; }
 .po-gallery-sharing .po-row-actions { display:flex; flex-wrap:wrap; }
 .po-gallery-sharing .po-row-actions .btn { flex:1 1 140px; white-space:normal; }
 .po-history-navigation { align-items:stretch; }
 .po-history-navigation label { min-width:0; flex-basis:100%; }
 .po-visual-comparison { grid-template-columns:minmax(0,1fr); }
 .settings-frame:not(.po-doc-frame) .settings-sidebar { position:static; width:100%; padding:.75rem; border-right:0; border-bottom:1px solid var(--tblr-border-color); }
 .settings-frame:not(.po-doc-frame) .settings-sidebar .list-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem; }
 .settings-frame:not(.po-doc-frame) .settings-sidebar .list-group-item { min-height:44px; padding:.5rem; white-space:normal; font-size:.8rem; }
 .radar-editor-tabs { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem; }
 .radar-editor-tabs .list-group-item { min-width:0; min-height:44px; padding:.5rem!important; white-space:normal; }
 .radar-editor-layout { min-width:0; }
 .radar-editor-body .card-body { padding:1rem; }
 .po-profile-summary .po-row-actions { flex-wrap:wrap; }
 .po-profile-summary .po-row-actions .btn { flex:1 1 130px; white-space:normal; }
}

@media(max-width:767.98px) {
 #workspace .starter-list-row .po-name { white-space:normal; overflow-wrap:anywhere; text-align:left; max-width:100%; }
 #workspace .po-tags { min-width:0; max-width:100%; flex-wrap:wrap; }
 #workspace .po-tags .badge { white-space:normal; overflow-wrap:anywhere; max-width:100%; text-align:left; line-height:1.4; }
 #workspace .starter-list-row > [data-action=person-focus] { justify-self:end; width:44px; min-height:44px; }
}
/* Screenshot-first setup and shared review use the product's existing surfaces. */
.po-new-options.quick-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.po-visual-url { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.75rem; margin-bottom:1rem; }
.po-visual-url .form-label { margin:0; }
.po-visual-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.po-visual-options .form-label { display:grid; gap:.375rem; margin:0; min-width:0; }
.po-visual-toolbar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; margin:1rem 0; }
.po-visual-toolbar .form-label { margin:0; display:grid; gap:.375rem; }
.po-visual-toolbar .form-check { padding-bottom:.6rem; }
.po-visual-frame { overflow:auto; max-height:65dvh; border:1px solid var(--tblr-border-color); border-radius:.5rem; background:var(--tblr-bg-surface-secondary); overscroll-behavior:contain; }
.po-visual-stage { position:relative; width:100%; line-height:0; }
.po-visual-stage > img { display:block; width:100%; max-width:none; height:auto; user-select:none; }
.po-visual-marks { position:absolute; inset:0; pointer-events:none; }
.po-visual-stage .po-selector-rectangle { border-color:var(--tblr-primary); background:color-mix(in srgb,var(--tblr-primary) 12%,transparent); }
.po-visual-stage .is-excluded { border:2px dashed var(--tblr-danger); background:color-mix(in srgb,var(--tblr-danger) 15%,transparent); }
.po-visual-selection-summary { padding:.75rem; margin-top:.75rem; background:var(--tblr-primary-lt); border-radius:.375rem; font-weight:600; }
.po-visual-test-image { display:block; width:auto; max-width:100%; max-height:50dvh; object-fit:contain; margin:1rem auto; border:1px solid var(--tblr-border-color); }
.po-visual-footer { position:sticky; bottom:-1.25rem; display:flex; justify-content:flex-end; gap:.5rem; padding:1rem 0; background:var(--tblr-bg-surface); border-top:1px solid var(--tblr-border-color); z-index:3; }
.po-visual-status { margin:1rem 0; overflow-wrap:anywhere; }
.po-visual-setup pre,.po-watch-review pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:35dvh; overflow:auto; }
.po-screenshot-pair > .po-row-actions { margin:1rem 0; }
.po-comparison-image { display:block; position:relative; padding:0; border:0; width:100%; cursor:zoom-in; background:transparent; }
.po-comparison-image img { display:block; width:100%; height:auto; }
.po-comparison-image canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.po-context-diff { white-space:pre-wrap; overflow-wrap:anywhere; max-height:50dvh; overflow:auto; }
.po-screenshot-inspect { width:calc(100vw - 1rem); height:calc(100dvh - 1rem); max-width:none; max-height:none; background:var(--tblr-bg-surface); color:var(--tblr-body-color); border:1px solid var(--tblr-border-color); border-radius:.5rem; padding:1rem; overflow:auto; }
.po-screenshot-inspect > .btn { position:sticky; top:0; z-index:1; display:block; margin-bottom:.75rem; }
.po-screenshot-inspect > img { display:block; max-width:none; }
@media(max-width:767.98px) {
 .po-new-options.quick-actions { grid-template-columns:1fr; }
 .po-new-options .action { min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr); text-align:left; padding:1rem; }
 .po-new-options .action > span { grid-row:1/3; }
 .po-new-options .action small { grid-column:2; }
 .po-visual-setup,.po-watch-review { width:100vw!important; max-width:100vw!important; max-height:100dvh!important; height:100dvh; margin:0; border:0; border-radius:0; }
 .po-visual-url,.po-visual-options { grid-template-columns:minmax(0,1fr); }
 .po-visual-toolbar { gap:.5rem; }
 .po-visual-toolbar > .form-label { flex:1 1 130px; }
 .po-visual-toolbar .po-row-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
 .po-visual-toolbar .btn { font-size:.8rem; white-space:normal; }
 .po-visual-frame { max-height:55dvh; }
 .po-visual-footer { bottom:-1rem; padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
 .po-visual-footer .btn { flex:1; }
 .po-comparison-tabs { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
 .po-comparison-tabs .btn { white-space:normal; width:100%; min-width:0; }
 .po-screenshot-inspect > img { max-width:100%; }
}
.po-notes-controls { display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0; }
.po-notes-controls input { flex:1 1 240px; }
.po-notes-controls select { width:auto; min-width:180px; }
.po-note-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.po-note-card { min-width:0; }
.po-note-card .po-name { font-size:1.1rem; text-align:left; }
.po-note-excerpt { white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; margin:.75rem 0; }
.po-note-links { display:flex; flex-wrap:wrap; gap:.375rem; margin:.75rem 0; }
.po-note-toolbar { display:flex; flex-wrap:wrap; gap:.375rem; margin:.75rem 0; position:sticky; top:0; background:var(--tblr-bg-surface); z-index:2; padding:.375rem 0; }
.po-note-editor { min-height:240px; max-height:55dvh; overflow:auto; font-size:1rem; padding:1rem; line-height:1.65; white-space:pre-wrap; }
.po-note-editor:focus { outline:2px solid var(--tblr-primary); outline-offset:1px; }
.po-note-editor ul,.po-note-editor ol { padding-left:1.5rem; }
.po-note-editor a { color:var(--tblr-primary); }
.po-note-relations { position:relative; min-width:0; }
.po-note-relations summary { cursor:pointer; }
.po-note-relations > div { position:absolute; top:100%; left:0; right:0; max-height:260px; overflow:auto; padding:.75rem; border:1px solid var(--tblr-border-color); border-radius:.5rem; background:var(--tblr-bg-surface); box-shadow:var(--tblr-box-shadow); z-index:5; }
.po-note-relations .form-check { margin:.6rem 0; }
.po-note-add-link { display:grid; grid-template-columns:1fr 2fr auto; gap:.5rem; }
.po-note-link { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.5rem 0; }
.po-note-link a { overflow-wrap:anywhere; min-width:0; }
.po-note-attachments { display:grid; gap:.75rem; margin:1rem 0; }
.po-note-attachment { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.5rem; align-items:center; border:1px solid var(--tblr-border-color); border-radius:.5rem; padding:.75rem; }
.po-note-attachment span { overflow-wrap:anywhere; }
.po-note-photo { display:block; width:auto; max-width:100%; max-height:75dvh; margin:auto; object-fit:contain; }
.po-note-footer { position:sticky; bottom:-1.25rem; background:var(--tblr-bg-surface); padding:1rem 0; display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--tblr-border-color); z-index:3; }
@media(max-width:767.98px){
 .po-note-grid { grid-template-columns:minmax(0,1fr); }
 .po-note-dialog { width:100vw!important; max-width:100vw!important; height:100dvh; max-height:100dvh!important; border:0; border-radius:0; margin:0; }
 .po-note-editor { font-size:16px; min-height:240px; }
 .po-note-add-link { grid-template-columns:minmax(0,1fr); }
 .po-note-attachment { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .po-note-attachment span { grid-column:1/-1; }
 .po-note-attachment .btn { white-space:normal; }
 .po-note-footer { bottom:-1rem; padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
 .po-note-footer .btn { flex:1 1 auto; }
 .po-notes-controls select { width:100%; }
}
.po-note-toolbar { position:static; }
.po-comparison-tabs .btn.active { color:var(--tblr-primary)!important; background:var(--tblr-primary-lt)!important; border-color:var(--tblr-primary)!important; }

/* Product layouts using starter components. */
#workspace > .dash-intro { border:0; }
.po-radar-navigation.starter-content-toolbar{background:transparent;padding:0;}
.po-radar-navigation .today-list-filter{display:flex;gap:4px;padding:4px;width:auto;border-radius:12px;}
.po-radar-navigation .today-list-filter-segment{display:flex;gap:6px;width:auto;height:auto;min-height:36px;padding:6px 16px;border-radius:8px;font-weight:600;}
.po-radar-navigation .today-list-filter-segment.active{background:var(--tblr-primary);color:#fff;}
.po-radar-navigation{margin-bottom:1rem}.po-radar-navigation .starter-content-filter{max-width:100%}
.po-field-label{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:1.6rem;margin-bottom:.5rem;font-weight:500}.po-field-label .btn{padding:.2rem .5rem;min-height:28px}
.po-goal{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--tblr-border-color)}.po-goal>div{min-width:0}.po-goal strong,.po-photo-source{overflow-wrap:anywhere}.po-photo-source{font-size:.75rem;display:block}.po-profile-links .po-note-link{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}.po-profile-links a{flex:1;min-width:0;overflow-wrap:anywhere}
#photo-import-dialog #import-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem;margin:1rem 0}#photo-import-dialog .import-photo{display:grid;grid-template-columns:24px 1fr;gap:.5rem;align-items:center;min-width:0;border:1px solid var(--tblr-border-color);padding:.75rem;border-radius:.75rem}#photo-import-dialog .import-photo img{grid-column:1/-1;width:100%;height:140px;object-fit:contain;grid-row:1}#photo-import-dialog .import-photo input{width:20px;height:20px;margin:0}#photo-import-dialog .ai-body>label{display:block;margin-bottom:1rem}#photo-import-dialog .ai-body>label[hidden]{display:none}#photo-import-dialog .ai-body>label>input,#photo-import-dialog .ai-body>label>select,#photo-import-dialog .ai-body>label>textarea{margin-top:.5rem}
.starter-empty-state{grid-column:1/-1;max-width:100%;margin:1rem 0}.po-photo-grid .po-row-actions{margin:0}
@media(max-width:600px){.po-goal{align-items:stretch;flex-direction:column}.po-profile-links .po-note-link{flex-wrap:wrap}.po-profile-links a{flex-basis:100%}#photo-import-dialog #import-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}#photo-import-dialog .import-photo{padding:.5rem}#photo-import-dialog .import-photo img{height:110px}}

.po-record-form > [data-profile-links]{margin:0 1.25rem 1rem}.po-photo-properties{min-width:0;overflow-wrap:anywhere}.po-photo-properties summary{cursor:pointer}.po-photo-properties small{display:block;margin-top:.5rem}