.ows-front-preview {
  --ows-ink: #2f3335;
  --ows-orange: #f58220;
  --ows-paper: #f7f1e8;
  --ows-line: #d8cfc2;
  --ows-green: #18794e;
  color: var(--ows-ink);
  margin: 0 auto;
  max-width: 1080px;
  padding: 24px 18px 72px;
}

.ows-preview-toolbar {
  align-items: center;
  background: #fff8dd;
  border: 1px solid #ead27a;
  border-radius: 12px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.7fr) auto;
  margin-bottom: 42px;
  padding: 16px 18px;
}

.ows-front-preview[data-mode="published"] .ows-preview-toolbar {
  background: #edf8f2;
  border-color: #9bcbb3;
}

.ows-preview-toolbar strong,
.ows-preview-toolbar span { display: block; }
.ows-preview-toolbar strong { font-size: 15px; }
.ows-preview-toolbar span { font-size: 12px; margin-top: 2px; opacity: 0.72; }
.ows-preview-toolbar select { margin: 0; max-width: 100%; width: 100%; }

.ows-preview-modes { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.ows-preview-modes a {
  border: 1px solid var(--ows-ink);
  border-radius: 999px;
  color: var(--ows-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 9px 13px;
  text-decoration: none;
}
.ows-preview-modes a.active { background: var(--ows-ink); color: #fff; }
.ows-preview-modes .ows-preview-edit { border-color: var(--ows-orange); color: #b34d00; }

.ows-slate-board { background: #fff; border: 1px solid var(--ows-line); border-radius: 12px; display: grid; gap: 15px; margin: -20px 0 38px; padding: 17px 18px; }
.ows-slate-group { display: grid; gap: 9px; grid-template-columns: 110px 1fr; }
.ows-slate-group > strong { color: #6b6258; font-size: 11px; letter-spacing: .08em; padding-top: 9px; text-transform: uppercase; }
.ows-slate-group > div { display: flex; flex-wrap: wrap; gap: 7px; }
.ows-slate-group a { background: #f8f4ee; border: 1px solid #e2dacf; border-radius: 8px; color: var(--ows-ink); min-width: 140px; padding: 7px 10px; text-decoration: none; }
.ows-slate-group a span, .ows-slate-group a small { display: block; }
.ows-slate-group a span { font-size: 12px; font-weight: 800; }
.ows-slate-group a small { font-size: 10px; margin-top: 2px; opacity: .65; }
.ows-slate-group a.active { background: var(--ows-ink); border-color: var(--ows-ink); color: #fff; }

.ows-preview-heading { margin: 0 auto 34px; max-width: 780px; text-align: center; }
.ows-preview-kicker {
  color: var(--ows-orange);
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ows-preview-heading h1 { color: var(--ows-ink); font-size: clamp(38px, 6vw, 68px); line-height: 1; margin: 0 0 14px; }
.ows-preview-heading p { font-size: 17px; margin: 0 auto 8px; max-width: 680px; }
.ows-preview-heading small { font-size: 12px; opacity: 0.65; }
.ows-preview-timestamps { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.ows-download-csv {
  background: var(--ows-orange);
  border: 1px solid var(--ows-orange);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  margin-top: 18px;
  padding: 12px 19px;
}
.ows-download-csv:hover,
.ows-download-csv:focus { background: #d96608; border-color: #d96608; color: #fff; }
.ows-download-csv:disabled { cursor: not-allowed; opacity: .55; }
.ows-preview-heading [data-ows-csv-data] { display: none; }

.ows-position-nav {
  border-bottom: 1px solid var(--ows-line);
  border-top: 1px solid var(--ows-line);
  display: flex;
  gap: 7px;
  justify-content: center;
  margin: 34px auto 18px;
  padding: 14px 0;
}
.ows-position-nav a { color: var(--ows-orange); font-size: 20px; font-weight: 800; padding: 3px 10px; text-decoration: none; }
.ows-position-nav a + a::before { color: var(--ows-ink); content: "||"; font-weight: 400; margin-right: 14px; }
.ows-preview-subone { font-family: Georgia, serif; font-size: 15px; font-style: italic; margin: 0 0 36px; text-align: center; }

.ows-position-section { margin: 0 0 42px; scroll-margin-top: 24px; }
.ows-position-section h2 { color: var(--ows-ink); font-size: 29px; margin: 0 0 12px; }
.ows-preview-table-wrap { border: 1px solid var(--ows-line); border-radius: 10px; overflow-x: auto; }
.ows-preview-table { border-collapse: collapse; font-size: 15px; margin: 0; width: 100%; }
.ows-preview-table th { background: var(--ows-ink); color: #fff; font-size: 12px; letter-spacing: 0.06em; padding: 12px 14px; text-align: left; text-transform: uppercase; }
.ows-preview-table th button { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: inline-flex; font: inherit; gap: 5px; letter-spacing: inherit; margin: -4px -5px; padding: 4px 5px; text-transform: inherit; }
.ows-preview-table th button::after { color: #b9c0c4; content: "↕"; font-size: 11px; }
.ows-preview-table th button[data-active-direction="asc"]::after { color: var(--ows-orange); content: "↑"; }
.ows-preview-table th button[data-active-direction="desc"]::after { color: var(--ows-orange); content: "↓"; }
.ows-preview-table td { background: #fff; border-bottom: 1px solid #e8e2da; padding: 12px 14px; }
.ows-preview-table tbody tr:nth-child(even) td { background: #fbf8f3; }
.ows-preview-table tbody tr:last-child td { border-bottom: 0; }
.ows-preview-table .ows-ownership-cell { color: var(--ows-orange); font-size: 16px; font-weight: 800; }
.ows-preview-table .ows-team-ownership-cell { color: #765336; font-size: 15px; font-weight: 750; }
.ows-preview-table .ows-points-cell { color: var(--ows-ink); font-size: 16px; font-weight: 800; }
.ows-preview-table .ows-points-heading { background: #22292d; }
.ows-preview-table .ows-team-ownership-heading { background: #3a3632; }

@media (min-width: 781px) {
  .ows-preview-table-wrap { overflow-x: visible; }
  .ows-preview-table { table-layout: fixed; }
  .ows-preview-table th,
  .ows-preview-table td { padding: 11px 8px; }
  .ows-preview-table th,
  .ows-preview-table td:not(:first-child) { white-space: nowrap; }
  .ows-preview-table td:first-child { overflow-wrap: anywhere; }

  .ows-main-table th:nth-child(1), .ows-main-table td:nth-child(1) { width: 21%; }
  .ows-main-table th:nth-child(2), .ows-main-table td:nth-child(2) { width: 7%; }
  .ows-main-table th:nth-child(3), .ows-main-table td:nth-child(3) { width: 9%; }
  .ows-main-table th:nth-child(4), .ows-main-table td:nth-child(4) { width: 11%; }
  .ows-main-table th:nth-child(5), .ows-main-table td:nth-child(5) { width: 13%; }
  .ows-main-table th:nth-child(6), .ows-main-table td:nth-child(6) { width: 10%; }
  .ows-main-table th:nth-child(7), .ows-main-table td:nth-child(7) { width: 14%; }
  .ows-main-table th:nth-child(8), .ows-main-table td:nth-child(8) { width: 15%; }

  .ows-showdown-table th:nth-child(1), .ows-showdown-table td:nth-child(1) { width: 22%; }
  .ows-showdown-table th:nth-child(2), .ows-showdown-table td:nth-child(2) { width: 7%; }
  .ows-showdown-table th:nth-child(3), .ows-showdown-table td:nth-child(3) { width: 9%; }
  .ows-showdown-table th:nth-child(4), .ows-showdown-table td:nth-child(4) { width: 11%; }
  .ows-showdown-table th:nth-child(5), .ows-showdown-table td:nth-child(5) { width: 10%; }
  .ows-showdown-table th:nth-child(6), .ows-showdown-table td:nth-child(6) { width: 10%; }
  .ows-showdown-table th:nth-child(n+7), .ows-showdown-table td:nth-child(n+7) { width: 10.333%; }
}

.ows-preview-empty { background: #fff; border: 1px solid var(--ows-line); border-radius: 12px; padding: 34px; text-align: center; }
.ows-preview-empty strong,
.ows-preview-empty span { display: block; }
.ows-preview-empty span { margin-top: 5px; opacity: 0.7; }

@media (max-width: 780px) {
  .ows-front-preview { padding-left: 10px; padding-right: 10px; }
  .ows-preview-toolbar { grid-template-columns: 1fr; margin-bottom: 28px; }
  .ows-slate-board { margin-top: -10px; }
  .ows-slate-group { grid-template-columns: 1fr; }
  .ows-slate-group > strong { padding-top: 0; }
  .ows-preview-modes { justify-content: flex-start; }
  .ows-preview-heading h1 { font-size: 42px; }
  .ows-download-csv { min-height: 44px; width: 100%; }
  .ows-position-nav { gap: 0; justify-content: flex-start; overflow-x: auto; }
  .ows-position-nav a { font-size: 16px; padding: 3px 8px; }
  .ows-position-nav a + a::before { margin-right: 9px; }
  .ows-position-section h2 { font-size: 24px; }
  .ows-main-table { font-size: 13px; min-width: 850px; }
  .ows-showdown-table { font-size: 13px; min-width: 920px; }
  .ows-preview-table th,
  .ows-preview-table td { padding: 10px 11px; }
}