/*
 * Wishtile Daily — widget styles.
 *
 * EVERY selector is scoped to .wishtile-wrap. Two reasons, both learned from
 * looking at the deployed page rather than the local build:
 *
 * 1. The first version used bare selectors written for a standalone HTML file —
 *    including `body { background; display:flex }`. Enqueued into a WordPress
 *    theme that restyles the whole /daily page, not just the widget.
 *
 * 2. Block themes emit `:root :where(h1){...}` from theme.json, which has
 *    specificity (0,1,0). A bare `h1` is (0,0,1) and LOSES — which is why the
 *    heading rendered at theme size instead of 26px on Twenty Twenty-Two.
 *    `.wishtile-wrap h1` is (0,1,1) and wins without needing !important.
 */

.wishtile-wrap{
  --wt-ink:#2b2530; --wt-ink-soft:#6b6270; --wt-ink-faint:#9c94a3;
  --wt-tile:#fff; --wt-line:#ece6ee;
  --wt-accent:#8b6fa8; --wt-accent-soft:#f3eef7; --wt-accent-deep:#6d5287;
  --wt-warm:#e8b4a0;
  --wt-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --wt-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --wt-r:18px;
  --wt-shadow:0 1px 2px rgba(43,37,48,.04),0 8px 28px rgba(43,37,48,.07);

  max-width:480px; margin:0 auto; padding:8px 0 40px;
  font-family:var(--wt-sans); font-size:17px; line-height:1.55;
  color:var(--wt-ink); text-align:left;
  -webkit-font-smoothing:antialiased;
}
.wishtile-wrap *{box-sizing:border-box}

.wishtile-wrap .wishtile-step{display:none}
.wishtile-wrap .wishtile-step.on{display:block; animation:wt-rise .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes wt-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.wishtile-wrap .progress{display:flex; gap:6px; justify-content:center; margin:0 0 30px; padding:0}
.wishtile-wrap .progress i{width:26px; height:3px; border-radius:2px; background:var(--wt-line); transition:background .3s}
.wishtile-wrap .progress i.done{background:var(--wt-accent)}

/* (0,1,1) — beats the block theme's :root :where(h1) at (0,1,0). */
.wishtile-wrap h1{
  font-family:var(--wt-serif); font-size:26px; line-height:1.28; font-weight:400;
  margin:0 0 8px; padding:0; letter-spacing:-.01em; color:var(--wt-ink); text-align:left;
}
.wishtile-wrap h2{font-family:var(--wt-serif); font-weight:400; font-size:19px; margin:0 0 4px; padding:0; line-height:1.3}
.wishtile-wrap h3{font-family:var(--wt-serif); font-weight:400; font-size:17px; margin:0 0 4px; padding:0; line-height:1.3}
.wishtile-wrap p{margin:0 0 14px; font-size:inherit; line-height:inherit}
.wishtile-wrap .sub{color:var(--wt-ink-soft); font-size:15px; margin:0 0 22px}

.wishtile-wrap input[type=text],
.wishtile-wrap input[type=email]{
  width:100%; padding:15px 17px; font-size:17px; font-family:var(--wt-sans);
  border:1px solid var(--wt-line); border-radius:14px; background:var(--wt-tile);
  color:var(--wt-ink); outline:none; box-shadow:none;
  transition:border-color .2s, box-shadow .2s;
}
.wishtile-wrap input[type=text]:focus,
.wishtile-wrap input[type=email]:focus{border-color:var(--wt-accent); box-shadow:0 0 0 4px var(--wt-accent-soft)}

.wishtile-wrap .opts{display:grid; gap:9px; margin:0 0 20px}
.wishtile-wrap .opt{
  display:block; width:100%; text-align:left; padding:15px 17px;
  font-size:16px; font-family:var(--wt-sans); font-weight:400;
  background:var(--wt-tile); border:1px solid var(--wt-line); border-radius:14px;
  color:var(--wt-ink); cursor:pointer; transition:border-color .18s, transform .18s, background .18s;
}
.wishtile-wrap .opt:hover{border-color:var(--wt-accent); transform:translateY(-1px); background:var(--wt-tile)}
.wishtile-wrap .opt em{display:block; font-style:normal; font-size:13.5px; color:var(--wt-ink-faint); margin-top:2px}

.wishtile-wrap button.primary{
  display:block; width:100%; padding:15px; font-size:16.5px;
  font-family:var(--wt-sans); font-weight:500;
  background:var(--wt-accent-deep); color:#fff; border:0; border-radius:14px;
  cursor:pointer; transition:background .2s, transform .15s;
}
.wishtile-wrap button.primary:hover{background:#5b4372; transform:translateY(-1px)}
.wishtile-wrap button.primary:disabled{background:#cfc7d6; cursor:not-allowed; transform:none}
.wishtile-wrap .skip{
  display:block; width:100%; margin:12px 0 0; padding:10px;
  background:none; border:0; color:var(--wt-ink-faint);
  font-size:14.5px; font-family:var(--wt-sans); cursor:pointer;
}
.wishtile-wrap .skip:hover{color:var(--wt-accent-deep); background:none}

.wishtile-wrap .tile{
  background:var(--wt-tile); border:1px solid var(--wt-line); border-radius:var(--wt-r);
  padding:32px 28px; box-shadow:var(--wt-shadow); position:relative; overflow:hidden;
}
.wishtile-wrap .tile::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--wt-accent) 0%,var(--wt-warm) 100%);
}
.wishtile-wrap .tile .date{
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wt-ink-faint); margin-bottom:18px;
}
.wishtile-wrap .tile .mirror{font-family:var(--wt-serif); font-size:22px; line-height:1.42; margin:0 0 14px}
.wishtile-wrap .tile .reframe{color:var(--wt-ink-soft); font-size:16px; margin:0 0 24px}
.wishtile-wrap .tile .aff{
  font-family:var(--wt-serif); font-style:italic; font-size:19px; line-height:1.4;
  padding:18px 20px; background:var(--wt-accent-soft); border-radius:12px; margin:0 0 22px;
}
.wishtile-wrap .tile .act{display:flex; gap:11px; align-items:flex-start; font-size:15.5px}
.wishtile-wrap .tile .act b{color:var(--wt-accent-deep); font-weight:600; flex:none}
.wishtile-wrap .reveal{animation:wt-fade .8s ease both}
@keyframes wt-fade{from{opacity:0;transform:translateY(6px) scale(.994)}to{opacity:1;transform:none}}

.wishtile-wrap .actions{display:flex; gap:9px; margin:20px 0 8px}
.wishtile-wrap .actions button{
  flex:1; padding:13px; font-size:15px; font-family:var(--wt-sans);
  background:var(--wt-tile); border:1px solid var(--wt-line); border-radius:13px;
  color:var(--wt-ink); cursor:pointer; transition:border-color .18s, color .18s;
}
.wishtile-wrap .actions button:hover{border-color:var(--wt-accent); color:var(--wt-accent-deep)}
.wishtile-wrap .nametoggle{
  display:flex; align-items:center; gap:9px; font-size:13.5px;
  color:var(--wt-ink-faint); padding:2px 2px 16px; cursor:pointer;
}
.wishtile-wrap .nametoggle input{accent-color:var(--wt-accent); margin:0}

.wishtile-wrap .growth{background:var(--wt-accent-soft); border-radius:var(--wt-r); padding:22px; margin-top:22px}
.wishtile-wrap .growth p{margin:0 0 14px; font-size:14.5px; color:var(--wt-ink-soft)}
.wishtile-wrap .growth input[type=email]{border-color:#ded2e8; margin-bottom:12px}
.wishtile-wrap .consent{
  display:flex; gap:9px; align-items:flex-start; font-size:13.5px;
  color:var(--wt-ink-soft); margin-bottom:9px; line-height:1.4; cursor:pointer;
}
.wishtile-wrap .consent input{margin:2px 0 0; accent-color:var(--wt-accent); flex:none}
.wishtile-wrap .wt-msg{font-size:13.5px; color:var(--wt-accent-deep); margin:10px 0 0; min-height:1em}

.wishtile-wrap .commercial{margin-top:22px; padding:20px; border:1px solid var(--wt-line); border-radius:var(--wt-r); background:var(--wt-tile)}
.wishtile-wrap .commercial p{margin:0 0 12px; font-size:14.5px; color:var(--wt-ink-soft)}
.wishtile-wrap .commercial a{
  display:inline-block; padding:11px 18px; background:var(--wt-tile);
  border:1px solid var(--wt-accent); border-radius:12px; color:var(--wt-accent-deep);
  text-decoration:none; font-size:15px;
}
.wishtile-wrap .commercial a:hover{background:var(--wt-accent-soft); color:var(--wt-accent-deep)}

.wishtile-wrap .tomorrow{text-align:center; color:var(--wt-ink-faint); font-size:14.5px; margin:26px 0 0}
.wishtile-wrap .changefocus{
  display:block; margin:10px auto 0; background:none; border:0;
  color:var(--wt-ink-faint); font-size:13.5px; text-decoration:underline;
  cursor:pointer; font-family:var(--wt-sans);
}

/* The disclosure shortcode renders outside .wishtile-wrap, so it is scoped by its own class. */
.wishtile-disclosure{
  max-width:480px; margin:34px auto 0; padding-top:18px;
  border-top:1px solid #ece6ee; font-size:12.5px; line-height:1.5;
  color:#9c94a3; text-align:center;
}

@media (max-width:480px){
  .wishtile-wrap{padding-left:4px; padding-right:4px}
  .wishtile-wrap h1{font-size:23px}
  .wishtile-wrap .tile{padding:26px 22px}
  .wishtile-wrap .tile .mirror{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .wishtile-wrap *,.wishtile-wrap .wishtile-step.on{animation:none!important; transition:none!important}
}