/*
  Freek v1.0c scoped styling + layout (ported from the standalone freek_v_1.html)
*/

/* -----------------------------
   Variables / base
----------------------------- */
#freek-root{
  /* Inherit color from the active WordPress theme.
     All Freek accents use currentColor (no hardcoded palette). */
  --freek-accent: var(--wp--preset--color--primary);

  /* Derived tints (theme-driven) */
  --freek-a-dim: color-mix(in srgb, currentColor 70%, transparent);
  --freek-a-mid: color-mix(in srgb, currentColor 45%, transparent);
  --freek-a-faint: color-mix(in srgb, currentColor 22%, transparent);
  --freek-a-bg: color-mix(in srgb, currentColor 6%, transparent);

  /* Readable sticky headers on transparent backgrounds */
  --freek-thead-bg: color-mix(in srgb, currentColor 14%, transparent);
  --freek-thead-bg-fallback: var(--freek-thead-bg);

  --freek-radius: 14px;

  /* Responsive panel heights so the whole UI stays within one viewport */
  --freek-panel-h: clamp(240px, 38vh, 460px);
  --freek-table-h: clamp(220px, 38vh, 460px);

  /* ISO page paired table heights */
  --freek-iso-table-maxh: clamp(200px, 26vh, 320px);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

@supports not (background: color-mix(in srgb, currentColor 50%, transparent)){
  #freek-root{
    /* Safe fallback: keep everything readable without injected colors */
    --freek-a-dim: transparent;
    --freek-a-mid: transparent;
    --freek-a-faint: transparent;
    --freek-a-bg: transparent;
    --freek-thead-bg: transparent;
    --freek-thead-bg-fallback: transparent;
  }
}


/* Keep links neutral inside Freek */
#freek-root a{ color: inherit; text-decoration: none; }
#freek-root a:hover{ text-decoration: underline; }

/* -----------------------------
   Page wrapper
----------------------------- */
/* IMPORTANT: do NOT full-bleed. Keep it within the theme's constrained layout. */
.freek-page{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Avoid grid children forcing overflow */
.freek-grid2 > *,
.freek-isoGrid > *{ min-width: 0; }

/* App structure */
.freek-root{ display: flex; flex-direction: column; gap: 12px; }

/* Keep the tool self-contained in one viewport; internal panels scroll instead of the page */
#freek-root{ min-height: 100svh; }

/* Header (inside the page, not the site header) */
.freek-appHeader{
  position: sticky;
  top: var(--freek-sticky-top, 0px);
  z-index: 10;
  background: transparent;
  border-bottom: 1px solid var(--freek-accent);
  padding: 12px 14px 10px;
}
body.admin-bar .freek-appHeader{
  top: calc(var(--freek-sticky-top, 0px) + var(--wp-admin--admin-bar--height, 32px));
}
.freek-appHeader h2{
  font-size: 15px;
  margin: 0 0 6px 0;
  letter-spacing: .2px;
}
.freek-sub{ font-size: 12px; opacity: 0.95; margin: 0; }
.freek-version{ opacity: 0.95; font-weight: 600; }

/* Global frequency cursor */
.freek-cursor{
  margin-top: 10px;
  border: 1px solid var(--freek-accent);
  border-radius: 12px;
  padding: 10px;
  background: transparent;
}
.freek-cursorRow{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.freek-cursorRow + .freek-cursorRow{ margin-top: 8px; }
#freek-root .freek-cursor label{ font-size: 12px; }
#freek-root .freek-cursor input[type="range"]{
  width: min(520px, 100%);
  accent-color: inherit;
  }
#freek-root .freek-cursor input[type="number"]{
  width: 110px;
  background: transparent;
  color: inherit;
  border: 1px solid var(--freek-accent);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
}
.freek-pill{
  border: 1px solid var(--freek-accent);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  color: inherit;
  background: transparent;
  white-space: nowrap;
}
.freek-readout{ gap: 8px; }

/* Frame + carousel */
.freek-frame{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}

/* Carousel */
.freek-carousel{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  height: 100%;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.freek-slide{
  scroll-snap-align: start;
  padding: 14px;
  overflow: auto;
}

/* Card (centers content like the original) */
.freek-card{
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid var(--freek-accent);
  border-radius: var(--freek-radius);
  padding: 14px;
  background: transparent;
  box-sizing: border-box;
}
.freek-card h3{ margin: 0 0 8px 0; font-size: 18px; }
.freek-card p{ margin: 0 0 12px 0; font-size: 13px; }

/* 2-col layout */
.freek-grid2{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 980px){
  .freek-grid2{ grid-template-columns: 1fr; }
}

/* -----------------------------
   Tables
----------------------------- */
.freek-tableWrap{
  max-height: var(--freek-table-h);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--freek-accent);
  background: transparent;
  position: relative;
}

/* ISO paired tables */
.freek-isoGrid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 980px){
  .freek-isoGrid{ grid-template-columns: 1fr; }
}
.freek-isoCard{ padding: 10px; border-radius: 12px; width: 100%; }
.freek-isoTableWrap{
  max-height: var(--freek-iso-table-maxh);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--freek-accent);
  position: relative;
}

/* Ensure wide ISO tables scroll inside wrapper, not the page */
.freek-isoTableWrap table{
  width: max-content;
  min-width: 100%;
}

/* Table defaults (scoped) */
#freek-root table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: transparent;
}
#freek-root th,
#freek-root td{
  padding: 8px 10px;
  border-bottom: 1px solid var(--freek-accent);
  text-align: left;
  white-space: nowrap;
  color: inherit;
  }

/* Sticky thead */
#freek-root thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--freek-thead-bg);
  backdrop-filter: blur(6px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #freek-root thead th{ background: var(--freek-thead-bg-fallback); }
}
#freek-root tr:nth-child(even) td{ background: var(--freek-a-bg); }

/* -----------------------------
   Plots
----------------------------- */
.freek-plotWrap{
  background: transparent;
  border: 1px solid var(--freek-accent);
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
  min-width: 0;
}
#freek-root canvas{
  width: 100%;
  height: var(--freek-panel-h);
  display: block;
  background: transparent;
}

/* Controls under plots */
.freek-controls{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 0;
  font-size: 12px;
}
.freek-controls label{ display: inline-flex; gap: 6px; align-items: center; }
.freek-controls input[type="range"]{ width: 220px; accent-color: inherit;
  }
.freek-controls input[type="checkbox"],
.freek-controls input[type="radio"]{ accent-color: inherit;
  }

/* -----------------------------
   Footer nav
----------------------------- */
.freek-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;

  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--freek-accent);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;

  background: var(--freek-a-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-sizing: border-box;
}

/* Prevent content from hiding behind the pinned nav */
.freek-frame{ padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.freek-slide{ padding-bottom: calc(14px + 56px + env(safe-area-inset-bottom, 0px)); }
.freek-btn{
  appearance: none;
  border: 1px solid var(--freek-accent);
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
.freek-btn:disabled{ opacity: 0.5; cursor: not-allowed; }

.freek-dots{ display: flex; gap: 6px; align-items: center; justify-content: center; flex: 1; }
.freek-dot{
  width: 10px; height: 10px; border-radius: 999px;
  border: 1px solid var(--freek-accent);
  background: transparent;
  cursor: pointer;
}
.freek-dot.is-active{ background: var(--freek-accent); }
.freek-hint{ font-size: 12px; opacity: 0.9; white-space: nowrap; }