/* The owner's pages board (2026-09-24): Replit's design for four screens, in the site's current colours - the report
   summary (a ring around the score), sign-in (one centred card), the profile (panels, rows and a bar per competitor) and
   the owner's admin page (tabs, search, a status filter and sortable columns). Every other screen stays as it is, so
   each rule here is scoped to its own screen. Loaded last on report.html, login.html, profile.html and admin.html,
   with pages-design.js. Screen only: the printed report is never touched.
   The profile and admin pages also stop touching the edges of the screen (they had no page width before). */
@media screen {
  body:is([data-screen="summary"], [data-screen="profile"], [data-screen="admin"]),
  body:has(.google-sign-in) {
    /* The site's own panel, as .card and the summary's panels draw it today. */
    --pk-panel-bg: linear-gradient(125deg, rgba(230, 243, 255, .07), rgba(153, 202, 255, .016) 55%, rgba(135, 186, 255, .047)), rgba(25, 44, 68, .24);
    --pk-panel-edge: rgba(181, 217, 245, .3);
    --pk-panel-shadow: inset 0 1px 0 rgba(237, 247, 255, .07), 0 12px 36px rgba(0, 0, 0, .14);
    --pk-line: rgba(181, 217, 245, .16);
    --pk-accent: #9cddf4;
    --pk-tint: rgba(196, 230, 255, .1);
    --pk-tint-edge: rgba(196, 230, 255, .3);
    --pk-muted: #b7cde0;
    --pk-page: min(1100px, calc(100% - 48px));
  }

  /* ================= Report summary: a ring around the score ================= */
  [data-screen="summary"] .score .gauge { position: relative; display: grid; justify-items: center; align-content: center; min-height: 190px; }
  [data-screen="summary"] .score .gauge::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 126px;
    height: 126px;
    transform: translateX(-50%);
    border: 5px solid;
    border-color: rgba(181, 217, 245, .22) rgba(156, 221, 244, .85) rgba(156, 221, 244, .45) rgba(181, 217, 245, .12);
    border-radius: 50%;
    pointer-events: none;
  }
  [data-screen="summary"] .score .gauge .big { height: 140px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
  [data-screen="summary"] .score .gauge .lbl { margin-top: 3px; }
  [data-screen="summary"] .visual-page > .honest {
    padding: 18px 24px 20px;
    border: 1px solid var(--pk-panel-edge);
    border-radius: 14px;
    background: var(--pk-panel-bg);
    box-shadow: var(--pk-panel-shadow);
  }

  /* ================= Sign-in: one centred card ================= */
  body:has(.google-sign-in) .page > .intro {
    box-sizing: border-box;
    width: min(560px, 100%);
    margin: clamp(34px, 7vh, 90px) auto 30px;
    padding: 44px;
    border: 1px solid var(--pk-panel-edge);
    border-radius: 20px;
    background: radial-gradient(circle at 100% 0, rgba(156, 221, 244, .1), transparent 60%), var(--pk-panel-bg);
    box-shadow: var(--pk-panel-shadow);
  }
  body:has(.google-sign-in) .page > .intro h1 { font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.055em; line-height: 1.08; }
  html[lang="ar"] body:has(.google-sign-in) .page > .intro h1 { letter-spacing: 0; }

  /* ================= Profile: a page width, panels, rows and competitor bars ================= */
  [data-screen="profile"] .visual-page > :is(.intro, .profile-form, .score-chart-block, .rivals-block, .scan-history, p) {
    box-sizing: border-box;
    width: var(--pk-page);
    margin-inline: auto;
  }
  [data-screen="profile"] .visual-page > :is(.profile-form, .score-chart-block, .rivals-block, .scan-history) { margin-block: 18px; }
  [data-screen="profile"] .visual-page > :is(.score-chart-block, .rivals-block, .scan-history) {
    padding: 24px;
    border: 1px solid var(--pk-panel-edge);
    border-radius: 14px;
    background: var(--pk-panel-bg);
    box-shadow: var(--pk-panel-shadow);
  }
  [data-screen="profile"] :is(.scan-list, .rival-list) { margin: 0; padding: 0; list-style: none; }
  [data-screen="profile"] :is(.scan-row, .rival-row) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--pk-line); }
  [data-screen="profile"] .scan-row a { flex: 1; color: inherit; text-decoration: none; }
  [data-screen="profile"] .scan-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
  [data-screen="profile"] .result-chip { padding: 1px 9px; border: 1px solid var(--pk-tint-edge); border-radius: 999px; background: var(--pk-tint); }
  /* One bar per competitor: how many of the answers named it (pages-design.js sets the step, 0 to 100 in fives). */
  [data-screen="profile"] .rival-row::after {
    content: "";
    flex-basis: 100%;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(to right, var(--pk-accent) var(--pk-bar, 0%), rgba(181, 217, 245, .14) var(--pk-bar, 0%));
  }
  html[dir="rtl"] [data-screen="profile"] .rival-row::after { background: linear-gradient(to left, var(--pk-accent) var(--pk-bar, 0%), rgba(181, 217, 245, .14) var(--pk-bar, 0%)); }
  .pk-bar-5 { --pk-bar: 5%; } .pk-bar-10 { --pk-bar: 10%; } .pk-bar-15 { --pk-bar: 15%; } .pk-bar-20 { --pk-bar: 20%; }
  .pk-bar-25 { --pk-bar: 25%; } .pk-bar-30 { --pk-bar: 30%; } .pk-bar-35 { --pk-bar: 35%; } .pk-bar-40 { --pk-bar: 40%; }
  .pk-bar-45 { --pk-bar: 45%; } .pk-bar-50 { --pk-bar: 50%; } .pk-bar-55 { --pk-bar: 55%; } .pk-bar-60 { --pk-bar: 60%; }
  .pk-bar-65 { --pk-bar: 65%; } .pk-bar-70 { --pk-bar: 70%; } .pk-bar-75 { --pk-bar: 75%; } .pk-bar-80 { --pk-bar: 80%; }
  .pk-bar-85 { --pk-bar: 85%; } .pk-bar-90 { --pk-bar: 90%; } .pk-bar-95 { --pk-bar: 95%; } .pk-bar-100 { --pk-bar: 100%; }
  [data-screen="profile"] .btn-link {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--pk-muted);
    font: inherit;
    cursor: pointer;
  }
  [data-screen="profile"] .btn-link:hover { border-color: var(--pk-tint-edge); background: var(--pk-tint); color: #eaf5ff; }

  /* ================= Admin: a page width, tabs, table tools and sortable tables ================= */
  [data-screen="admin"] .visual-page > :is(.intro, .admin-tabs, .pk-admin-tools, .admin-panel) {
    box-sizing: border-box;
    width: var(--pk-page);
    margin-inline: auto;
  }
  [data-screen="admin"] .admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--pk-panel-edge);
    border-radius: 13px;
    background: var(--pk-panel-bg);
  }
  [data-screen="admin"] .admin-tab {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--pk-muted);
    font: inherit;
    cursor: pointer;
  }
  [data-screen="admin"] :is(.admin-tab.active, .admin-tab:hover) { border-color: var(--pk-tint-edge); background: var(--pk-tint); color: #eaf5ff; }
  [data-screen="admin"] .pk-admin-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-block: 14px;
    padding: 12px;
    border: 1px solid var(--pk-panel-edge);
    border-radius: 12px;
    background: var(--pk-panel-bg);
  }
  [data-screen="admin"] .pk-admin-tools label { display: grid; gap: 4px; color: var(--pk-muted); font-size: 12px; }
  [data-screen="admin"] .pk-admin-tools :is(input, select) { min-height: 44px; min-width: 190px; padding: 8px 11px; }
  [data-screen="admin"] .pk-admin-reset {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--pk-tint-edge);
    border-radius: 9px;
    background: transparent;
    color: #eaf5ff;
    font: inherit;
    cursor: pointer;
  }
  [data-screen="admin"] .admin-panel {
    overflow-x: auto;
    padding: 24px;
    border: 1px solid var(--pk-panel-edge);
    border-radius: 14px;
    background: var(--pk-panel-bg);
    box-shadow: var(--pk-panel-shadow);
  }
  [data-screen="admin"] .admin-table { min-width: 670px; border-color: var(--pk-line); }
  [data-screen="admin"] .admin-table :is(td, th) { padding: 13px 12px; border-color: var(--pk-line); overflow-wrap: normal; word-break: normal; }
  [data-screen="admin"] .admin-table th { background: rgba(196, 230, 255, .08); cursor: pointer; user-select: none; }
  [data-screen="admin"] .admin-table th:hover { background: rgba(196, 230, 255, .14); }
  [data-screen="admin"] .admin-table th[aria-sort="ascending"]::after { content: " ↑"; }
  [data-screen="admin"] .admin-table th[aria-sort="descending"]::after { content: " ↓"; }
  [data-screen="admin"] .admin-table tr[hidden] { display: none; }

  @media (max-width: 700px) {
    body:is([data-screen="summary"], [data-screen="profile"], [data-screen="admin"]) { --pk-page: calc(100% - 32px); }
    [data-screen="summary"] .score .gauge::before { width: 112px; height: 112px; }
    body:has(.google-sign-in) .page > .intro { padding: 26px; }
    [data-screen="profile"] .visual-page > :is(.score-chart-block, .rivals-block, .scan-history),
    [data-screen="admin"] .admin-panel { padding: 18px; }
    [data-screen="profile"] .scan-row a { flex-basis: 100%; }
    [data-screen="admin"] .admin-tabs { flex-wrap: nowrap; overflow-x: auto; }
    [data-screen="admin"] .admin-tab { white-space: nowrap; }
    [data-screen="admin"] .pk-admin-tools { align-items: stretch; }
    [data-screen="admin"] .pk-admin-tools :is(label, input, select, .pk-admin-reset) { width: 100%; min-width: 0; }
  }

  /* Motion: the summary's panels arrive in sequence, CSS only, "backwards" fill, so nothing stays hidden; the score
     counts up (pages-design.js). Off for anyone who asks for reduced motion. */
  @media (prefers-reduced-motion: no-preference) {
    [data-screen="summary"] .visual-page > :is(.score, .offer, .honest) { animation: pk-rise .55s ease backwards; }
    [data-screen="summary"] .visual-page > .offer { animation-delay: .08s; }
    [data-screen="summary"] .visual-page > .honest { animation-delay: .16s; }
    [data-screen="admin"] .admin-tab, [data-screen="profile"] .btn-link { transition: background .18s ease, border-color .18s ease, color .18s ease; }
    @keyframes pk-rise { from { opacity: 0; transform: translateY(8px); } }
  }
}