/* DisplayGURU app additions on top of the design system (styles.css,
   admin-base.css, dg.css). Keep this small: anything the design system
   already covers should use its classes. */
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The design system styles links inside .ad in brand blue (.ad a). Many of
   our controls are links rather than buttons, so give them back their own
   colours with matching specificity. */
.ad a.ad-link, .ad a.ad-btn, .ad a.ad-chip, .ad a.ad-catlink, .ad a.ad-icbtn, .ad a.dg-card, .ad a.dg-lcard, .ad a.dg-wtile, .ad a.dg-blk, .ad a.dg-brow, .ad a.ad-brand, .ad a.dg-sib, .ad a.ad-row { text-decoration: none; }
.ad a.ad-link { color: #D6CFC8; }
.ad a.ad-link:hover { color: #fff; }
.ad a.ad-link[aria-current="page"], .ad a.ad-link[aria-current="page"]:hover { color: var(--ink-900); }
.ad-link.soon { cursor: default; }
.ad-link.soon:hover { background: none; color: #8A7F77; }
.ad-switch { cursor: default; }
.ad-btn { text-decoration: none; cursor: pointer; }
.ad-btn[disabled], .ad-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ad a.ad-btn-primary, .ad a.ad-btn-primary:hover, .ad a.ad-btn-dark, .ad a.ad-btn-dark:hover, .ad-btn-primary, .ad-btn-dark { color: #fff; }
.ad a.ad-btn-line, .ad a.ad-btn-line:hover, .ad a.ad-btn-ghost, .ad a.ad-btn-ghost:hover { color: var(--text-primary); }
.ad a.ad-btn-danger { color: var(--chili-700); }
.ad a.ad-chip, .ad a.ad-chip:hover { color: var(--text-primary); }
.ad a.ad-chip[aria-pressed="true"], .ad a.ad-chip[aria-pressed="true"]:hover { color: #fff; }
.ad a.ad-catlink, .ad a.ad-catlink:hover { color: var(--text-primary); }
.ad a.ad-catlink[aria-current="true"], .ad a.ad-catlink[aria-current="true"]:hover { color: #fff; }
.ad a.ad-icbtn, .ad a.ad-icbtn:hover { color: inherit; }
.ad a.dg-card, .ad a.dg-lcard, .ad a.dg-wtile, .ad a.dg-brow, .ad a.ad-row, .ad a.dg-card:hover, .ad a.dg-lcard:hover, .ad a.dg-wtile:hover, .ad a.dg-brow:hover { color: inherit; }
.ad a.dg-blk.layout, .ad a.dg-blk.media, .ad a.dg-blk.override { color: #fff; }
.ad a.dg-blk.playlist { color: #1C1714; }
.ad a.ad-brand, .ad a.ad-brand:hover { color: #fff; }
.ad a.dg-sib, .ad a.dg-sib:hover { color: #D6CFC8; }
.ad-toast.is-error { background: var(--chili-700); }
.ad-toast svg { flex: none; }
.ad-error { display: flex; gap: 8px; align-items: center; color: var(--chili-700); font-weight: 600; font-size: 13px; }
.ad-empty { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ad-empty h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ad-check-input { width: 18px; height: 18px; accent-color: var(--brand-600); margin: 0; flex: none; }
label.ad-row { cursor: pointer; }
.ad-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ad-seg label { white-space: nowrap; height: 30px; padding: 0 12px; border-radius: 8px; font-weight: 600; color: var(--text-secondary); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; position: relative; }
.ad-seg input:checked + span { color: var(--text-primary); }
.ad-seg label:has(input:checked) { background: var(--ink-0); color: var(--text-primary); box-shadow: 0 1px 3px rgba(28,23,20,.14); }
.ad-seg label:has(input:focus-visible) { box-shadow: var(--ring-focus); }
.ad-toggle-input { appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; }
.ad-toggle-input:checked { background: var(--basil-500); }
.ad-toggle-input:checked::after { transform: translateX(16px); }
.dg-days label { height: 36px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--border-default); font-weight: 700; font-size: 12.5px; background: var(--ink-0); display: grid; place-items: center; cursor: pointer; position: relative; }
.dg-days input { position: absolute; opacity: 0; }
.dg-days label:has(input:checked) { background: var(--brand-600); color: #fff; box-shadow: none; }
.dg-days label:has(input:focus-visible) { box-shadow: var(--ring-focus); }
.ad-presets label { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(28,23,20,.15); cursor: pointer; position: relative; }
.ad-presets input { position: absolute; opacity: 0; }
.ad-presets label:has(input:checked) { box-shadow: 0 0 0 2px var(--ink-0), 0 0 0 4px var(--ink-900); }
.ad-inline-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; border: 0; padding: 0; height: 36px; background: transparent; width: 100%; outline: none; }
.ad-inline-title:focus { box-shadow: inset 0 -2px 0 var(--brand-500); }
.dg-thumb img.dg-fill, .dg-thumb video.dg-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Mobile: the design hides side panels below 820px. Where the panel is the
   point of the page (a selected item), stack it under the content instead. */
@media (max-width: 820px) {
  .ad-body.flush { flex-direction: column; overflow: auto; }
  .ad-body.flush > div { overflow: visible !important; }
  .ad-detail.keep { display: flex; width: auto; border-left: 0; border-top: 1px solid var(--border-subtle); }
  .ad-detail.keep .ad-detail-scroll { overflow: visible; }
  .ad-split { display: flex; flex-direction: column; overflow: auto; }
  .ad-split .ad-pane.r { display: block; border-left: 0; border-top: 1px solid var(--border-subtle); }
  .ad-pane { overflow: visible; }
}

/* Sign in */
.dg-auth { min-height: 100vh; background: #14131A; display: grid; place-items: center; padding: 24px; }
.dg-auth .ad-card { width: min(420px, 100%); padding: 32px; display: flex; flex-direction: column; gap: 18px; border: 0; border-radius: 24px; box-shadow: var(--shadow-xl); }
.dg-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.dg-lockup span { font-family: var(--font-brand); font-weight: 800; letter-spacing: -.035em; font-size: 22px; color: var(--text-primary); }
.dg-lockup span b { color: var(--brand-500); font-weight: 800; }
.dg-auth h1 { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.025em; margin: 0; }
.dg-auth-foot { color: #9C9189; font-size: 12.5px; text-align: center; }
.dg-auth-foot a { color: #DDE6FF; }
[hidden] { display: none !important; }
.dg-aside-pad > * { flex: none; }
.dg-alert > svg, .ad-row > svg, .ad-error > svg { flex: none; }
.dg-support { display: flex; align-items: center; gap: 10px; padding: 8px 28px; background: #FFF1CC; color: #6B4700; font-size: 13px; font-weight: 600; border-bottom: 1px solid #F1DFA8; }
.dg-support svg { flex: none; }
.dg-support span { flex: 1; min-width: 0; }
.ad .dg-support a { color: #6B4700; text-decoration: underline; white-space: nowrap; }
.ad a.ad-switch:hover { background: rgba(255,255,255,.1); }
.dg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.dg-stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.dg-stat .ad-help { display: flex; gap: 6px; align-items: center; }
.dg-stat b { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.dg-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.dg-sec { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.dg-sec h3 { font-size: 16px; font-weight: 800; }
.ad a.dg-brow, .ad a.dg-brow:hover { color: inherit; text-decoration: none; }
a.dg-brow:hover { background: var(--ink-50); }