/* Tuesday Race Book — styles layered on top of the Studio's styles.css.
   Reuses existing tokens where possible; only adds what's new. */

/* Club Menangle brand palette (Communication Guidelines v3, p.17) */
:root {
  --cm-highland-green: #1c4233;
  --cm-keystone-gold:  #a89161;
  --cm-country-beige:  #e0e0d9;
  --cm-emerald:        #007066;
  --cm-apple:          #bed46b;
  --cm-sand:           #d1b082;
  --cm-charcoal:       #3c3c3c;
  --tue-teal: var(--cm-emerald);   /* cover panel = brand Emerald */
  --tue-ink:  var(--cm-highland-green);
  /* Brand display face: Gilroy Extra Bold, Lexend Deca ExtraBold as websafe fallback */
  --cm-display: "Gilroy", "Lexend Deca", system-ui, sans-serif;
}

/* The Tuesday nav item is a link (<a>), so strip the default underline and
   inherit colour, matching the <button> tools next to it. */
.rail-nav a.rail-tool,
.rail-nav a.rail-tool:hover,
.rail-nav a.rail-tool:visited {
  text-decoration: none;
  color: inherit;
}
.rail-nav a.rail-tool .rail-tool-name,
.rail-nav a.rail-tool .rail-tool-desc {
  text-decoration: none;
}

/* ---- real-PDF preview canvas ---- */
.tue-render-wrap {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  position: relative;
}
.tue-render-canvas {
  width: 100%; height: auto; display: block;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); border-radius: 2px;
}
.tue-render-msg {
  font-size: 12px; color: var(--tue-ink); opacity: .8;
  padding: 30px 12px; text-align: center;
}

/* two-up sponsor slots */
.tue-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- preview header: title on top, tabs + arrows on the next line ---- */
.tue-head { display: block; }
.tue-head-title { font-weight: 700; margin-bottom: 8px; }
.tue-head-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.tue-head-controls .preview-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tue-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tue-nav-count { font-size: 12px; color: var(--tue-ink); min-width: 42px; text-align: center; }
.tue-arrow {
  border: 1px solid rgba(0,0,0,.15); background: #fff; color: var(--tue-ink);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.tue-arrow:hover { background: var(--cm-country-beige); }
.tue-arrow:active { transform: translateY(1px); }
.tue-arrow-sm { width: 26px; height: 26px; font-size: 13px; }

/* ---- body PDF preview page ---- */
.tue-body-wrap {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: #fff; gap: 8px; padding: 6px; box-sizing: border-box;
}
.tue-body-canvas { max-width: 100%; height: auto; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.tue-body-empty {
  font-size: 12px; color: var(--tue-ink); text-align: center;
  padding: 24px 12px; opacity: .8;
}
.tue-body-nav { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tue-two > div { display: flex; flex-direction: column; gap: 6px; }

.row-actions { margin-top: 6px; }

.drop.is-drag { outline: 2px dashed var(--tue-teal); outline-offset: 2px; }

/* meetings editor */
.tue-meetblock {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(0,0,0,.015);
}
.tue-meet-monthrow { display: flex; gap: 8px; margin-bottom: 10px; }
.tue-meet-monthrow .text-input { flex: 1; font-weight: 600; }
.tue-meet-daterow { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.tue-del { padding: 6px 10px; }

/* ---- preview: A4 aspect ---- */
.tue-a4 { aspect-ratio: 210 / 297; width: 300px; max-width: 100%; }

.tue-pvpage { width: 100%; height: 100%; }
.tue-fullpage { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }

/* front cover preview */
.tue-cover {
  width: 100%; height: 100%;
  background: #fff;
  padding: 16px 18px;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  font-family: "Lexend Deca", system-ui, sans-serif;
  color: var(--tue-ink);
}
.tue-cover-top { display: flex; justify-content: space-between; align-items: flex-start; }
.tue-trackside { height: 30px; }
.tue-official { color: var(--tue-teal); font-weight: 600; font-size: 10px; }
.tue-date { text-align: center; font-family: var(--cm-display); font-weight: 800; font-size: 14px; letter-spacing: .3px; margin: 4px 0 8px; color: var(--tue-ink); }

.tue-panel {
  background: var(--tue-teal);
  padding: 10px 12px 16px;
  display: flex; flex-direction: column; align-items: center;
}
.tue-photo {
  width: 100%; aspect-ratio: 4 / 3;
  background: #d8d8d8 center/cover no-repeat;
  border: 3px solid #fff;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px;
}
.tue-caption { color: #fff; font-size: 8px; margin-top: 12px; text-align: center; }

.tue-partners-label { color: var(--tue-teal); font-weight: 700; font-size: 9px; margin: 12px 0 6px; }
.tue-partners { display: flex; gap: 16px; align-items: center; justify-content: center; }
.tue-partners img { height: 22px; object-fit: contain; }
.tue-address { font-size: 5.6px; line-height: 1.5; margin-top: 10px; text-align: center; color: var(--tue-ink); }

/* last page preview */
.tue-last {
  width: 100%; height: 100%;
  background: #fff; padding: 18px; box-sizing: border-box;
  font-family: "Lexend Deca", system-ui, sans-serif; color: var(--tue-ink);
  display: flex; flex-direction: column;
}
.tue-last-head { text-align: center; font-family: var(--cm-display); font-weight: 800; font-size: 13px; margin-bottom: 12px; color: var(--tue-ink); }
.tue-monthbar { background: var(--cm-country-beige); color: var(--tue-ink); text-align: center; font-size: 9px; padding: 4px; margin: 8px 0 6px; }
.tue-meetrow { font-size: 8px; text-align: center; padding: 2px 0; letter-spacing: .2px; color: var(--tue-ink); }
/* bottom block: logos + copyright, pinned to the bottom of the page */
.tue-last-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; }
.tue-last-logos { width: 48%; margin: 0 auto 8px; object-fit: contain; }
.tue-last-note { font-size: 5.4px; line-height: 1.5; text-align: center; color: var(--tue-ink); padding: 0 8px; }