:root{
  --c-bg:#f7fbff;
  --c-surface:#ffffff;
  --c-text:#1f2937;
  --c-muted:#6b7280;
  
  --page-max: 1100px;   /* match your .tt-main max-width */
  --page-pad: 16px;     /* match your .tt-main side padding */

  /* New palette */
  --c-primary:#8ec5ff;    /* pastel blue */
  --c-primary-2:#bfe1ff;  /* lighter blue for gradients */
  --c-sec-orange:#ffd3a4; /* secondary */
  --c-sec-yellow:#ffefad; /* secondary */
  --c-danger:#e53935;     /* strong opaque red */

  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Fredoka", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
}

.candy-bg{
  background:
    radial-gradient(60% 120% at -10% 0%, #ffe1f2 0%, transparent 60%),
    radial-gradient(40% 100% at 110% 10%, #e0f9ff 0%, transparent 50%),
    var(--c-bg);
}

/* === Header: 3-column grid with true center === */
/* Outer bar only; no grid, no side padding */
.tt-header{
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  border-bottom: 2px solid #000;
}


/* Left column (tight to left edge) */
.tt-left{ justify-self: start; min-width: 0; }

/* Make title+subtitle clickable as one link */
/* Make title+subtitle clickable without looking like a link */
.tt-home{
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.tt-home:hover .tt-title { text-decoration: underline; }
.tt-title{font-weight:700; font-size:1.35rem; letter-spacing:.2px}
.tt-subtitle{font-size:.9rem; color:var(--c-muted); margin-top:.1rem}

/* Center column stays exactly centered */
.tt-center { justify-self: center; }
.tt-points{
  display: grid;
  grid-auto-rows: min-content;
  justify-items: center;
}
.tt-points-icon { font-size: 1.1rem; }
.tt-points-label { font-weight: 600; }
.tt-points-value { font-weight: 700; font-size: 1.15rem; }

/* Right column (tight to right edge) */
.tt-right{ justify-self: end; display: flex; align-items: center; padding: 0.5rem }

/* === User chip: portrait 2:3 (width:height), max 150×225 === */
.tt-userchip{
  position: relative;
  width: clamp(60px, 10vw, 75px); /* responsive width, up to 150px */
  aspect-ratio: 2 / 3;              /* keeps 2:3 ratio (e.g., 150x225) */
  height: auto;                      /* height derives from width/ratio */
  min-height: 76px;
  max-height: 113px;
  padding: 0;
  border: 2px solid #000;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: inline-block;
}

.tt-userchip:focus-visible { outline: 3px solid #000; }

.tt-avatar { width: 36px; border-radius: 50%; border: 2px solid #000; object-fit: cover; }
.tt-username { font-size: .9rem; font-weight: 600; }

/* Circular avatar centered near the top with its own black border */
.tt-userchip .tt-avatar{
  position: absolute;
  width: var(--avatar-size);
  aspect-ratio: 2 / 3;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  object-fit: cover;

  border: 3px solid #000;   /* <-- border around the circle */
  border-radius: 50%;       /* keep it circular */
  box-sizing: border-box;   /* keep border inside the circle */
}

/* Username pill sits on the image near the bottom */
.tt-userchip .tt-username{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 8px;
  padding: .28rem .7rem;
  font-weight: 800;
  font-size: .95rem;
  background: #fff;
  color: #111;
  border: 2px solid #000;
  border-radius: 999px;
  box-shadow: 0 1.5px 0 rgba(0,0,0,.08);
  pointer-events: none;
}

/* Chip wrapper: no border; keep portrait shape */
.tt-userchip{
  border: 0;              /* border moves to the avatar */
  position: relative;
  --avatar-size: 85%;     /* tweak 70–90% to change circle size */
}

/* subtle gradient for legibility on bright avatars */
.tt-userchip::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.06), transparent 60%);
  pointer-events: none;
}

/* Layout */
.tt-main{
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  padding-top: 1rem;
}

.card{
  background:var(--c-surface);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow);
}

.form, .form-inline{display:flex; gap:.6rem; flex-wrap:wrap}
.form{flex-direction:column}
.form-inline input{flex:1 1 auto; min-width:15rem}

input, select, button{
  font:inherit;
  border-radius:12px;
  border:1px solid #efd8e6;
  padding:.6rem .75rem;
  background:#fff;
}

.btn{
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2));
  color:#0a2230; border:2px solid #000; cursor:pointer;
  border-radius:14px; padding:.6rem .9rem;
  box-shadow: 3px 3px 0 rgba(0,0,0,.18);
}
.btn-secondary{
  background: linear-gradient(90deg, var(--c-sec-orange), #ffe1b7);
  color:#1f2937; border:2px solid #000;
}
.btn-ghost{
  background:#fff; color:#374151; border:2px dashed #000;
}
.btn-danger{
  background: linear-gradient(90deg, #ff6b6b, var(--c-danger));
  color:#fff; border:2px solid #000;
}

.menu-item-button{
width:10rem;	
}

.flash-stack{position:fixed; left:50%; transform:translateX(-50%); top:70px; display:flex; flex-direction:column; gap:.5rem; z-index:20}
.flash{padding:.6rem .9rem; border-radius:12px; box-shadow:var(--shadow)}
.flash-success{background:#eafff6}
.flash-error{background:#ffeef0}

/* Tiles */
.tile-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1rem}
.tile{background:var(--c-surface); border-radius:var(--radius); box-shadow:var(--shadow); border:2px solid #000 }
.tile-header{display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; cursor:pointer; border-bottom:1px solid #f5e3ee}
.tile-body{padding: .8rem 1rem}
.caret{opacity:.6}

.task-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem}
.task-list li{background:#fff; border:1px solid #f2d9e8; border-radius:12px; padding:.6rem .75rem; display:flex; flex-direction:column; gap:.2rem}
.tl-primary{display:flex; justify-content:space-between; align-items:center}
.tl-name{font-weight:600}
.tl-due{color:var(--c-muted); font-size:.85rem}
.tl-meta{display:flex; gap:.6rem; font-size:.85rem}
.tl-points{font-weight:700; color:#d63a93}

.muted{color:var(--c-muted)}

.profile-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap:.8rem; margin-top:.6rem}
.profile-card{background:#fff; border:1px solid #f1d4e5; border-radius:16px; padding:.8rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; cursor:pointer; transition:.15s transform}
.profile-card:hover{transform:translateY(-2px)}
.profile-avatar{width:70px; height:70px; border-radius:999px; object-fit:cover}
.profile-name{font-weight:600}
.badge{background:#ffe1f4; color:#952b6e; font-size:.75rem; padding:.15rem .4rem; border-radius:999px}

dialog::backdrop{ background:rgba(0,0,0,.28) }
dialog{
  border:4px solid #000; border-radius:24px; padding:1rem;
  background:var(--c-surface);
  box-shadow: 10px 10px 0 rgba(0,0,0,.2), var(--shadow);
}
.modal-actions{display:flex; gap:.6rem; justify-content:flex-end}

.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:.5rem; border-bottom:1px solid #f0e2ec; vertical-align:middle}
.qr{width:88px; height:88px; border-radius:8px; border:1px solid #f2d9e8}
.mt{margin-top:.8rem}
.note{color:var(--c-muted); margin-top:.6rem}

/* Mobile tweaks */
@media (max-width:600px){
  .tt-header{grid-template-columns: 1fr 1fr auto}
  .tt-username{max-width:6rem}
}

.qr-large{
  width:280px; height:280px;
  border-radius:16px;
  border:1px solid #f2d9e8;
  display:block;
  margin:0 auto;
}
.link-row{ margin-top:.6rem; word-break:break-all }

.icon-round{
  --icon-bg: var(--c-sec-yellow); /* override per icon with utility below */
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  border:2px solid #000; background:var(--icon-bg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.15);
}
.icon-blue   { --icon-bg:#cfe9ff; }
.icon-orange { --icon-bg:#ffe2c1; }
.icon-yellow { --icon-bg:#fff4c7; }
.icon-mint   { --icon-bg:#dffbe9; }

/* The dropdown menu */
.user-menu{
  position:absolute; right:0; top:calc(100% + .5rem);
  width:240px; display:none; flex-direction:column; gap:.5rem;
  background:var(--c-surface); padding:.6rem;
  border:3px solid #000; border-radius:18px;
  box-shadow: 10px 10px 0 rgba(0,0,0,.18), var(--shadow); z-index:60;
}
.user-menu.open{ display:flex; }

/* The menu items as buttons */
.user-menu button{
  all:unset; display:flex; align-items:center; gap:.6rem;
  padding:.6rem .75rem; border-radius:12px;
  border:2px solid #000; background:var(--c-sec-yellow);
  font-weight:700; color:#111; cursor:pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,.12);
}
.user-menu button:hover{ transform:translateY(-1px) }
.user-menu button.danger{ background:#ffd0d0; color:#8b0000; }

dialog.tt-usermenu {
  position: fixed; /* we position via JS with top/left */
  margin: 0; padding: 0; border: 4px solid #000; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: #fff;
  z-index: 1000;
}
dialog.tt-usermenu::backdrop {
  /* transparent backdrop so it feels like a dropdown */
  background: rgba(0,0,0,0);
}

.tt-usermenu .menu-list {
  display: flex; flex-direction: column; min-width: fit-content;
  padding: .25rem; gap: 0.5rem; align-items: end;
}
.tt-usermenu .menu-btn {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; text-align: left; padding: .6rem .75rem;
  background: transparent; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit;
}
.tt-usermenu .menu-btn:hover { background: rgba(0,0,0,.06); }
.tt-usermenu .menu-btn.danger { color: #b00020; font-weight: 600; }

/* Header can grow a bit to fit the taller chip */
.tt-header{
  min-height: 88px; /* adjust if you want it tighter/looser */
}

/* Inner container aligns with .tt-main edges */
.tt-header-inner{
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* L | center | R */
  align-items: center;
  gap: .75rem;
  min-height: 72px; /* adjust as needed to fit your portrait chip */
}
.tt-home .tt-title{ font-weight: 700; }
.tt-home .tt-subtitle{ font-size: .9rem; opacity: .8; }

@media (max-width: 520px){
  /* keep things compact on narrow screens */
  .tt-header{ min-height: 76px; }
  .tt-userchip{ width: clamp(60px, 28vw, 73px); border: 0; }
  .tt-userchip .tt-username{ bottom: 6px; font-size: .9rem; }
}

/* --- Users page layout helpers --- */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.6rem; }
.row-flex { display:flex; gap:.6rem; align-items:flex-end; }
.row-flex.wrap { flex-wrap:wrap; }
.row-flex .grow { flex:1 1 240px; }

.member-row {
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: .6rem 0;
  border-top: 1px dashed rgba(0,0,0,.08);
}
.member-row:first-of-type { border-top: 0; }

.member-profile { display:flex; flex-direction:column; gap:.5rem; align-items: center; justify-content: center; }
.member-profile .profile-meta { display:flex; flex-direction:column; }
.member-profile .profile-name { font-weight:700; }
.member-profile .view-tasks { width:max-content; }

.member-details .chk { display:inline-flex; align-items:center; gap:.35rem; margin-right:.6rem; }
.checkbox-row { display:flex; align-items:center; gap:.8rem; }

/* Toggle group (Adult / Child) */
.tg-row { display:flex; align-items:center; gap:.75rem; }
.tg-inline { display:flex; align-items:flex-end; gap:.5rem; }
.tg-label { font-weight:700; }

.toggle-group { display:inline-flex; background:#fff; border:2px solid #000; border-radius:12px; overflow:hidden; }
.toggle-group .toggle {
  border:0; background:transparent; padding:.45rem .8rem; font-weight:700; cursor:pointer;
}
.toggle-group .toggle.active { background: var(--c-sec-yellow); }

/* Link options strip */
.link-options { display:flex; align-items:flex-end; gap:.6rem; }
.link-options .gen-link { margin-left:.2rem; }

/* Mobile */
@media (max-width: 760px){
  .member-row { grid-template-columns: 1fr; }
}

/* === Compact 12-col grid for perfect alignment === */
.form-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 12px;        /* tighter space between columns */
  row-gap: 10px;           /* compact rows */
}

/* Column utilities */
.col-1-6  { grid-column: 1 / 7; text-align: right; }
.col-7-12 { grid-column: 7 / 13; }
.col-1-8  { grid-column: 1 / 9; }
.col-9-12 { grid-column: 9 / 13; }
.col-1-12 { grid-column: 1 / -1; }

/* Keep right-side controls left-aligned */
.member-details { width: 100%; justify-items: self-start; }

/* Centered holder for the Generate Link button (hidden by default) */
.gen-holder {
  display: none;           /* JS will toggle this */
  justify-content: center; 
}

/* Make the two big columns sit closer by compacting the profile column and letting the right fill */
.member-row {
  display: grid;
  grid-template-columns: 240px 1fr; /* was 260px; shave a bit */
  gap: 0.85rem;                     /* slightly tighter gap */
  padding: .6rem 0;
  border-top: 1px dashed rgba(0,0,0,.08);
}
.member-row:first-of-type { border-top: 0; }

/* Keep link option strip left-justified and neat */
.link-options { display:flex; align-items:flex-end; gap:.6rem; justify-content:flex-start; }

/* --- Users page (mobile-first, vertical stacks) --- */

/* Create Member: tight vertical stack */
.form.stack-v { display:flex; flex-direction:column; gap:.65rem; max-width:700px; align-content: center; justify-self: center;}
.form.stack-v .row { display:flex; flex-direction:column; gap:.35rem; }
.form.stack-v .checkboxes { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }

/* Toggle group (Adult / Child) */
.tg-label { font-weight:700; }
.toggle-group { display:inline-flex; background:#fff; border:2px solid #000; border-radius:12px; overflow:hidden; width: min-content; }
.toggle-group .toggle { border:0; background:transparent; padding:.45rem .8rem; font-weight:700; cursor:pointer; }
.toggle-group .toggle.active { background: var(--c-sec-yellow); }

/* Existing Members: two-column on desktop, stacked on mobile */
.member-row {
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 1rem;
  padding: .75rem 0;
  border-top: 1px dashed rgba(0,0,0,.08);
}
.member-row:first-of-type { border-top: 0; }

@media (max-width: 820px){
  .member-row { grid-template-columns: 1fr; }
}

/* Left column: center the profile block */
.member-profile {
  display:flex; flex-direction:column; gap:.5rem;
  align-items:center; justify-content:center;
  text-align:center;
}
.member-profile .profile-meta { display:flex; flex-direction:column; gap:.15rem; }
.member-profile .profile-name { font-weight:700; }
.member-profile .view-tasks { width:max-content; }

/* Right column: vertical stack */
.member-details .stack-v { display:flex; flex-direction:column; gap:.65rem; }
.member-details .row      { display:flex; flex-direction:column; gap:.35rem; }

/* Checkboxes row + actions */
.link-row { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; }
.actions  { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.actions .gen-link { display:none; } /* shown by JS when any link box is ticked */
.actions .btn-save {}

/* Small helpers */
.hidden { display:none !important; }
.chk { display:inline-flex; align-items:center; gap:.35rem; }