/* =========================================================
   Voy.world — unified styles
   File: assets/styles.css
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Colors */
  --bg:#f6f7fb;
  --card:#ffffff;
  --soft:#f3f6fb;
  --brand:#6b84ff;
  --brand-ink:#1d2545;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --chip-bg:#fff;
  --footer-bg:#ffffffF2;
  --sheet-bg:#ffffff;

  /* Layout */
  --header-h:60px;
  --footer-h:72px;
  --footer-total: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Base / Reset ---------- */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  min-height:100%;
  -webkit-tap-highlight-color: transparent; /* kill iOS tap flash */
}
a{ color:#4f46e5; text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }
.container{ max-width:1040px; margin:0 auto; padding:16px; }
h1{ font-size:28px; line-height:1.15; margin:12px 0 8px; }
h2{ font-size:20px; margin:16px 0 8px; }
.helper{ color:var(--muted); font-size:14px; }

/* ---------- Cards / Common Blocks ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 1px 0 #00000008;
  margin-bottom:12px; /* keeps space above footer */
}
.card.pad{ padding:14px; }
.card:last-child{ margin-bottom:24px; } /* extra breathing room for final card */

.grid{ display:grid; gap:12px; }
.grid.cards{ grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.list{ display:flex; flex-direction:column; gap:10px; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border:1px solid var(--line);
  border-radius:999px; background:var(--card); font-size:12px;
  white-space:nowrap;
}

/* ---------- Header (sticky) ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  height:var(--header-h);
  background:var(--card);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(150%) blur(6px);
}
.header-inner{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; height:100%;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand .logo{
  width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #7dd3fc, #4f46e5);
}
.header-actions{ margin-left:auto; display:flex; gap:8px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--line);
  background:var(--card); border-radius:10px;
}

/* ---------- Drawer (hamburger) ---------- */
.drawer-backdrop{
  position:fixed; inset:0; background:#0005; backdrop-filter:blur(2px);
  z-index:60; display:none;
}
.drawer{
  position:fixed; top:0; left:0; height:100%; width:88%; max-width:360px;
  background:var(--card); border-right:1px solid var(--line);
  z-index:61; display:none; flex-direction:column;
}
.drawer header{ padding:12px 14px; border-bottom:1px solid var(--line); font-weight:600; }
.drawer nav{ padding:8px 10px; display:flex; flex-direction:column; gap:8px; }
.drawer a{ padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }

/* ---------- Footer (bottom nav) ---------- */
.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  height:var(--footer-total);
  background:var(--footer-bg);
  border-top:1px solid var(--line);
  display:flex; justify-content:center;
  box-shadow:0 -6px 20px rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.footer-inner{
  width:100%; max-width:1040px;
  height:var(--footer-h);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; padding:10px 12px;
}
.footer-inner a{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px; border:1px solid var(--line);
  border-radius:14px; background:var(--card);
  min-width:0;
}
.footer-inner a.active{ outline:2px solid var(--brand); }
.footer-label{ font-size:12px; color:var(--muted); text-align:center; }

/* ---------- Page spacing (never hide behind footer) ---------- */
main{
  min-height:calc(100svh - var(--footer-total));
  padding-bottom:calc(var(--footer-total) + 24px) !important;
}
main::after{ content:""; display:block; height:12px; }

/* Universal spacer as a final guard (even if a page forgets <main>) */
body::after{
  content:"";
  display:block;
  height:calc(var(--footer-total) + 24px);
}

/* ---------- Tools grid ---------- */
.tool-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.tool-card{
  padding:14px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); text-align:left;
}
.tool-card:hover{ outline:2px solid var(--brand); }

/* ---------- Planner ---------- */
.planner-head{
  position:sticky; top:var(--header-h); z-index:4;
  background:var(--bg); padding:8px 12px; border-bottom:1px solid var(--line);
}
.day-tabs{ display:flex; gap:8px; overflow:auto; padding-bottom:6px; }
.day-tab{
  white-space:nowrap; padding:8px 12px; border:1px solid var(--line);
  border-radius:12px; background:var(--card);
}
.day-tab.active{ outline:2px solid var(--brand); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px dashed var(--line);
  border-radius:999px; background:var(--chip-bg);
  cursor:pointer; user-select:none;
}
.chip[data-draggable="true"]{ border-style:solid; }
.chip-palette{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }

.day-col{
  min-height:120px; padding:12px; border:1px dashed var(--line);
  border-radius:12px; background:var(--soft); margin-bottom:12px;
}
.day-col.drag-over{ outline:2px dashed var(--brand); }

.segs-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.seg{ border:1px solid var(--line); border-radius:12px; background:var(--card); padding:10px; margin:8px 0; }
.seg-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.seg-row input, .seg-row select{
  width:100%; padding:8px; border:1px solid var(--line);
  border-radius:10px; background:var(--card);
}
.seg-actions{ display:flex; gap:8px; margin-top:6px; }
.totals{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }

/* Wrap long labels so they don't get cut off */
.checklists .item{ display:flex; gap:8px; align-items:center; margin:8px 0; }
.checklists .item label, .chip, .badge{ white-space:normal; }

/* ---------- Modal / Bottom Sheet ---------- */
.sheet-backdrop{
  position:fixed; inset:0; background:#0007;
  backdrop-filter:saturate(1.2) blur(2px);
  z-index:1100; display:none;
}
.sheet{
  position:fixed; left:0; right:0; bottom:0; max-height:90vh;
  background:var(--sheet-bg); border-radius:16px 16px 0 0;
  box-shadow:0 -10px 40px #0003; z-index:1110;
  display:none; flex-direction:column;
}
.sheet.open{ display:flex; }
.sheet-backdrop.open{ display:block; }
.sheet-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:inherit; z-index:1;
}
.sheet-body{ padding:12px 16px; overflow:auto; }
.sheet-close{
  border:1px solid var(--line); border-radius:10px;
  background:var(--card); padding:6px 10px;
}

/* When a modal is open, app can add body.modal-open to stop background scroll */
body.modal-open{ overflow:hidden; }

/* ---------- Responsive ---------- */
@media (max-width:420px){
  h1{ font-size:24px; }
  .footer-label{ font-size:11px; }
  .seg-row{ grid-template-columns:repeat(2,1fr); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Settings page extras ---------- */
.setting-row input[type="text"],
.setting-row input[type="tel"],
.setting-row input[type="date"],
.setting-row input[type="email"],
.setting-row input[type="time"],
.setting-row select,
textarea{
  flex:1;
  padding:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card);
}
.setting-row button{
  padding:8px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--card);
  cursor:pointer;
}
.setting-row button[disabled]{ opacity:.6; cursor:not-allowed; }

/* =========================================================
   Focus ring policy (Safari viewport ring fix)
   ========================================================= */

/* Never show focus outlines on the viewport containers */
html:focus, body:focus, main:focus { outline:none !important; }

/* Show accessible outlines ONLY on interactive controls */
:where(
  a,
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"]),
  [role="button"],
  [role="link"]
):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Hidden file inputs must not surface focus */
input[type="file"][hidden],
input[type="file"][style*="display:none"]{
  display:none !important;
}
input[type="file"][hidden]:focus,
input[type="file"][style*="display:none"]:focus{
  outline:none !important;
}