/* Support portal additions on top of Proscreen's ps.css. */
:root { --ps-purple: #9054b9; }

/* Everything wraps and lines up at the top (nothing is cut off). */
.ps-table__row { align-items: flex-start; }
.ps-table__cell { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.ps-wrap { overflow-wrap: anywhere; white-space: pre-wrap; }
.ps-grid { align-items: start; }

/* No bottom tab bar here, so the sticky footer sits on the very bottom on phones too. */
@media (max-width: 900px) { .ps-sticky-foot, .ps-app.is-rail .ps-sticky-foot { bottom: 0; } }

/* Status badges */
.ps-badge--submitted { background: var(--ps-surface-3); color: var(--ps-ink-2); }
.ps-badge--processing { background: var(--ps-warn-soft); color: var(--ps-warn); }
.ps-badge--completed { background: var(--ps-accent-soft); color: var(--ps-accent-mid); }

/* Screenshot thumbnails: tap one to see it big (image-viewer.js). */
.sp-shots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sp-shots img { width: 140px; height: 100px; object-fit: cover; border-radius: var(--ps-r-sm); border: 1px solid var(--ps-line); }

/* New Request */
.ps-page--sticky-foot { padding-bottom: 110px; }
.sp-guide p { margin: 6px 0 0; color: var(--ps-ink-2); }
.sp-section + .sp-section { margin-top: var(--ps-s4); }
.sp-section__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sp-add { align-self: flex-start; }
.sp-grow { resize: none; overflow: hidden; min-height: 84px; }
.sp-drop { display: flex; align-items: center; gap: 10px; padding: 18px; border: 2px dashed var(--ps-line-strong); border-radius: var(--ps-r-md); color: var(--ps-ink-2); cursor: pointer; flex-wrap: wrap; }
.sp-drop.is-over { border-color: var(--ps-accent); background: var(--ps-accent-soft); }
.sp-shot { position: relative; }
.sp-shot button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.sp-shot.is-uploading img { opacity: .4; }

/* Dashboard */
.sp-dash { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--ps-s4); align-items: start; }
@media (max-width: 900px) { .sp-dash { grid-template-columns: minmax(0, 1fr); } }
.sp-legend { display: flex; align-items: center; gap: 6px; font-size: var(--ps-fs-xs); color: var(--ps-ink-2); margin: 6px 0 12px; }
.sp-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.sp-key--new, .sp-bar--new { background: var(--ps-purple); }
.sp-key--done, .sp-bar--done { background: var(--ps-accent-mid); }
.sp-chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 200px; }
.sp-chart__col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.sp-chart__col small { font-size: 11px; color: var(--ps-ink-3); white-space: nowrap; }
.sp-chart__bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.sp-bar { width: 40%; max-width: 22px; min-height: 2px; border-radius: 4px 4px 0 0; position: relative; }
.sp-bar b { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--ps-ink-2); }
.sp-oldest { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ps-line); color: inherit; align-items: flex-start; }
.sp-oldest:last-child { border-bottom: 0; }

.ps-field > .ps-badge { align-self: flex-start; }