/* Generated by scripts/embed-growth-chart.mjs; source styles remain scoped to this view. */
#page-potty-chart{
  color-scheme: dark;
  --page: #1a0611;              
  --panel: #370f2d;             
  --ink: #fff0f4;               
  --muted: #e0b8cb;             
  --pink: #ff96c8;              
  --orchid: #a474d6;            
  --rail: #fadadd;              
  --gold: #ffe66f;              
  --line: rgba(250, 218, 221, 0.22);

  --paper: #ffe9f4;             
  --paper-deep: #ffd3e8;        
  --paper-ink: #6b2a4e;         
  --paper-soft: #a4658a;        
  --paper-line: #f0aecd;        
  --locked: #d8c4d0;            
}
#page-potty-chart *{ box-sizing: border-box; }
#page-potty-chart button, #page-potty-chart a, #page-potty-chart input{ font: inherit; }
#page-potty-chart .chart-shell{
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px) 72px;
}
#page-potty-chart .promo-kicker{
  margin: 0 0 10px;
  color: var(--rail);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
#page-potty-chart .promo-title{
  margin: 0;
  color: var(--ink);
  font-family: "Arial Black", "Segoe UI Black", Impact, sans-serif;
  font-size: clamp(2.1rem, 7vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(255, 150, 200, 0.55), 0 0 42px rgba(164, 116, 214, 0.35);
}
#page-potty-chart .promo-sub{
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}
#page-potty-chart .promo-sub strong{ color: var(--ink); }
#page-potty-chart .promo-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 34px;
}
#page-potty-chart .action{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  background: rgba(55, 15, 45, 0.9);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
#page-potty-chart .action:hover{
  transform: translateY(-1px);
  border-color: var(--rail);
  background: rgba(250, 218, 221, 0.1);
}
#page-potty-chart .action.primary{
  border-color: var(--pink);
  background: linear-gradient(120deg, rgba(255, 150, 200, 0.28), rgba(164, 116, 214, 0.28));
}
#page-potty-chart .action:focus-visible{
  outline: 2px solid var(--rail);
  outline-offset: 3px;
}
#page-potty-chart .action.ghost{
  border-color: var(--paper-line);
  color: var(--paper-soft);
  background: transparent;
}
#page-potty-chart .action.ghost:hover{
  border-color: var(--paper-ink);
  color: var(--paper-ink);
  background: rgba(255, 255, 255, 0.5);
}
#page-potty-chart .chart-card{
  position: relative;
  padding: clamp(20px, 4vw, 40px);
  overflow: hidden;
  border: 3px solid #ffffff;
  border-radius: 22px;
  color: var(--paper-ink);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper-line), 0 28px 70px rgba(0, 0, 0, 0.7);
  font-family: "Comic Sans MS", "Chalkboard SE", "Segoe Print", "Comic Neue", cursive;
}
#page-potty-chart .chart-ribbon{
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: repeating-linear-gradient(90deg, #ff8ec4 0 22px, #ffd7ea 22px 44px);
}
#page-potty-chart .chart-head{ text-align: center; }
#page-potty-chart .chart-head h2{
  margin: 12px 0 4px;
  color: #d63c8c;
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  text-shadow: 1px 1px 0 #ffffff, 3px 3px 0 var(--paper-deep);
}
#page-potty-chart .chart-sub{
  margin: 0 0 18px;
  color: var(--paper-soft);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
#page-potty-chart .name-line{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 0.98rem;
}
#page-potty-chart .name-line label{ color: var(--paper-soft); }
#page-potty-chart #chart-name{
  width: min(260px, 60vw);
  padding: 4px 8px;
  border: none;
  border-bottom: 2px dashed var(--paper-line);
  color: var(--paper-ink);
  background: transparent;
  font-family: inherit;
  font-size: 1.05rem;
  text-align: center;
}
#page-potty-chart #chart-name::placeholder{ color: #d9a8c4; }
#page-potty-chart #chart-name:focus-visible{
  outline: none;
  border-bottom-color: #d63c8c;
}
#page-potty-chart .name-star{ color: var(--gold); text-shadow: 0 0 6px #ffb400; }
#page-potty-chart .progress-block{ margin: 0 0 22px; text-align: center; }
#page-potty-chart .progress-rail{
  height: 16px;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--paper-deep);
  box-shadow: inset 0 2px 5px rgba(158, 62, 116, 0.28);
}
#page-potty-chart .progress-fill{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd36f, #ffb400);
  transition: width 260ms ease;
}
#page-potty-chart .progress-read{
  margin: 8px 0 4px;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}
#page-potty-chart .progress-label{ color: var(--paper-soft); }
#page-potty-chart .praise-line{
  min-height: 2.6em;
  margin: 0;
  color: #b8397f;
  font-size: 0.98rem;
  line-height: 1.35;
}
#page-potty-chart .grid-wrap{
  overflow-x: auto;                 
  padding-bottom: 6px;
}
#page-potty-chart .star-grid{
  display: grid;
  grid-template-columns: minmax(210px, 1.6fr) repeat(7, minmax(42px, 1fr));
  gap: 4px;
  min-width: 620px;
}
#page-potty-chart .grid-corner, #page-potty-chart .grid-day{
  padding: 6px 4px;
  color: var(--paper-soft);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
#page-potty-chart .grid-corner{
  display: flex;
  align-items: flex-end;
  text-align: left;
}
#page-potty-chart .grid-day{
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}
#page-potty-chart .day-name{ font-weight: 700; }
#page-potty-chart .day-date{
  color: #c08cab;
  font-size: 0.64rem;
  letter-spacing: 0.02em;
}
#page-potty-chart .grid-day.is-today{
  color: #d63c8c;                     
}
#page-potty-chart .grid-day.is-today .day-date{ color: #d63c8c; }
#page-potty-chart .day-today-tag{
  margin-top: 2px;
  color: #ffffff;
  background: #d63c8c;
  border-radius: 999px;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}
#page-potty-chart .grid-day.is-future{ opacity: 0.45; }
#page-potty-chart .row-label{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.86rem;
  line-height: 1.25;
}
#page-potty-chart .row-label-view{
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;                       
}
#page-potty-chart .row-note{
  margin-top: 3px;
  color: var(--paper-soft);
  font-size: 0.7rem;
  font-style: italic;
}
#page-potty-chart .row-tools{
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  opacity: 0;                         
  transition: opacity 130ms ease;
}
#page-potty-chart .row-label:hover .row-tools, #page-potty-chart .row-tools:focus-within{
  opacity: 1;
}
@media (hover: none){#page-potty-chart .row-tools{ opacity: 1; }
}
#page-potty-chart .row-tool{
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  color: var(--paper-soft);
  background: #ffffff;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 110ms ease, border-color 130ms ease, color 130ms ease;
}
#page-potty-chart .row-tool:hover{
  transform: scale(1.1);
  border-color: #d63c8c;
  color: #d63c8c;
}
#page-potty-chart .row-tool-delete:hover{
  border-color: #c8434c;
  color: #c8434c;
}
#page-potty-chart .row-tool:focus-visible{
  outline: 2px solid #d63c8c;
  outline-offset: 2px;
  opacity: 1;
}
#page-potty-chart .row-tool.is-locked-tool{
  border-style: dashed;
  border-color: var(--locked);
  color: #c3aab7;
  cursor: not-allowed;
}
#page-potty-chart .row-tool.is-locked-tool:hover{
  transform: none;
  border-color: var(--locked);
  color: #c3aab7;
}
#page-potty-chart .row-edit{
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#page-potty-chart .row-edit-label, #page-potty-chart .row-edit-note{
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  color: var(--paper-ink);
  background: #ffffff;
  font-family: inherit;
  font-size: 0.8rem;
}
#page-potty-chart .row-edit-note{
  color: var(--paper-soft);
  font-size: 0.7rem;
  font-style: italic;
}
#page-potty-chart .row-edit-label:focus-visible, #page-potty-chart .row-edit-note:focus-visible{
  outline: none;
  border-color: #d63c8c;
}
#page-potty-chart .row-edit-actions{
  display: flex;
  gap: 4px;
}
#page-potty-chart .row-edit-save, #page-potty-chart .row-edit-cancel{
  padding: 3px 10px;
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  color: var(--paper-ink);
  background: #ffffff;
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
#page-potty-chart .row-edit-save{
  border-color: #d63c8c;
  color: #ffffff;
  background: #d63c8c;
}
#page-potty-chart .row-edit-save:hover{ background: #c22f7c; }
#page-potty-chart .row-edit-cancel:hover{ border-color: var(--paper-ink); }
#page-potty-chart .row-add-bar{
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
#page-potty-chart #add-row{
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.68rem;
}
#page-potty-chart .star-cell{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid var(--paper-line);
  border-radius: 8px;
  color: transparent;
  background: #ffffff;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1;
  cursor: pointer;
  transition: transform 110ms ease, background 140ms ease, border-color 140ms ease;
}
#page-potty-chart .star-cell:hover{ transform: scale(1.06); border-color: #ffb400; }
#page-potty-chart .star-cell:focus-visible{
  outline: 2px solid #d63c8c;
  outline-offset: 2px;
}
#page-potty-chart .star-cell.is-starred{
  color: var(--gold);
  border-color: #ffb400;
  background: #fff8dd;
  text-shadow: 0 0 8px #ffbe2e;
}
#page-potty-chart .star-cell.just-starred{ animation: star-pop 340ms ease; }
@keyframes star-pop{
  0%   { transform: scale(0.4) rotate(-24deg); }
  60%  { transform: scale(1.28) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
#page-potty-chart .star-cell.is-locked{
  border-style: dashed;
  border-color: var(--locked);
  background: #f6eef3;
  cursor: not-allowed;
}
#page-potty-chart .star-cell.is-locked:hover{ transform: none; border-color: var(--locked); }
#page-potty-chart .star-cell.refused{ animation: refuse-shake 320ms ease; }
@keyframes refuse-shake{
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
#page-potty-chart .star-cell.is-future{
  border-style: dotted;
  border-color: #e6d3df;
  background: #fbf5f9;
  cursor: not-allowed;
}
#page-potty-chart .star-cell.is-future:hover{ transform: none; border-color: #e6d3df; }
#page-potty-chart .star-cell.in-today-column{ box-shadow: inset 0 0 0 2px rgba(214, 60, 140, 0.14); }
#page-potty-chart .row-label.locked-row{ background: rgba(216, 196, 208, 0.34); color: var(--paper-soft); }
#page-potty-chart .week-nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
}
#page-potty-chart .week-step{
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid var(--paper-line);
  border-radius: 999px;
  color: var(--paper-ink);
  background: #ffffff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 110ms ease, border-color 140ms ease;
}
#page-potty-chart .week-step:hover:not(:disabled){ transform: scale(1.08); border-color: #d63c8c; }
#page-potty-chart .week-step:focus-visible, #page-potty-chart .history-row:focus-visible{
  outline: 2px solid #d63c8c;
  outline-offset: 2px;
}
#page-potty-chart .week-step:disabled, #page-potty-chart .action.ghost:disabled{
  opacity: 0.35;
  cursor: not-allowed;
}
#page-potty-chart .week-label{
  min-width: 16ch;
  margin: 0;
  color: var(--paper-ink);
  font-size: 0.94rem;
  text-align: center;
}
#page-potty-chart .week-today{ padding: 7px 14px; font-size: 0.68rem; }
#page-potty-chart .history-block{
  margin: 26px auto 0;
  max-width: 54ch;
  padding: 16px 18px;
  border: 2px dashed var(--paper-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
}
#page-potty-chart .history-block h3{
  margin: 0 0 6px;
  color: #d63c8c;
  font-size: 1.05rem;
}
#page-potty-chart .history-summary{
  margin: 0;
  color: var(--paper-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}
#page-potty-chart .history-list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
#page-potty-chart .history-list li + li{ margin-top: 4px; }
#page-potty-chart .history-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--paper-ink);
  background: #ffffff;
  font-family: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 130ms ease, transform 110ms ease;
}
#page-potty-chart .history-row:hover{ transform: translateX(2px); border-color: #ffb400; }
#page-potty-chart .history-row.is-viewing{
  border-color: #d63c8c;
  background: #fff3f9;
}
#page-potty-chart .history-range{ flex: 1 1 auto; }
#page-potty-chart .history-score{
  flex: 0 0 auto;
  color: var(--paper-soft);
  font-size: 0.74rem;
  white-space: nowrap;
}
html.crt-disabled #page-potty-chart .star-cell.just-starred, html.crt-disabled #page-potty-chart .star-cell.refused{ animation: none; }
#page-potty-chart .fineprint{
  margin: 18px 0 0;
  color: var(--paper-soft);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}
#page-potty-chart .ledger-stamp{
  max-width: 46ch;
  margin: 20px auto 0;
  padding: 14px 18px;
  border: 1px solid #c9a06f;
  border-radius: 4px;
  color: #6a4a24;
  background: #f7ecd8;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  transform: rotate(-0.6deg);
}
#page-potty-chart .ledger-line{ margin: 0 0 6px; }
#page-potty-chart .ledger-margin{
  margin: 0;
  color: #a6432f;
  font-family: "Comic Sans MS", "Segoe Print", cursive;
}
#page-potty-chart .friend-note{
  max-width: 44ch;
  margin: 20px auto 0;
  padding: 16px 18px;
  border: 1px solid #b9c6d8;
  border-radius: 3px;
  color: #2f3d52;
  background: #eef2f8;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 0.94rem;
  line-height: 1.5;
  text-align: left;
  transform: rotate(0.7deg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
#page-potty-chart .friend-note p{ margin: 0 0 10px; }
#page-potty-chart .friend-sign{ color: #5d6b80; text-align: right; }
#page-potty-chart .slide-cta{ margin-top: 6px; }
#page-potty-chart .chart-foot{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
#page-potty-chart #install-chart[hidden]{ display: none; }
#page-potty-chart .promo-foot{
  margin-top: 30px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}
#page-potty-chart .promo-foot p{ margin: 0 0 6px; }
#page-potty-chart .promo-foot strong{ color: var(--pink); }
@media (max-width: 560px){#page-potty-chart .star-grid{
    grid-template-columns: minmax(150px, 1.4fr) repeat(7, minmax(38px, 1fr));
    min-width: 540px;
  }
#page-potty-chart .row-note{ display: none; }
}
@media (prefers-reduced-motion: reduce){#page-potty-chart *{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
#page-potty-chart .account-card{ margin-top: 24px; padding: 20px; border: 2px solid var(--rail); background: var(--panel); line-height: 1.6; }
#page-potty-chart .account-card [hidden]{ display: none; }
#page-potty-chart .account-card .action{ white-space: normal; }

#page-potty-chart { min-width: 0; }
#page-potty-chart .chart-card { width: 100%; margin: 0; }
#page-potty-chart .name-line input { width: min(240px, 100%); }
#page-potty-chart .account-card .action { letter-spacing: .06em; }
#page-potty-chart .star-cell { margin: 0; }
#page-potty-chart [hidden] { display: none !important; }