/* Sketchbook homepage: graph paper in light mode, chalkboard in dark mode.
   Loaded after index.html's inline styles. Shared tokens (paper, ink, fonts,
   highlighter colours) live in sketch-theme.css. The canvas reads --paper-grid,
   --sketch-ink and --pencil-red to draw the grid and the pencil curve. */

.home-screen {
  background: var(--paper);
  color: var(--sketch-ink);
  font-family: var(--font-ui);
}

html.dark .home-screen {
  color-scheme: dark;
}

/* Paper grain (or chalk dust): fractal noise over the page, under the content. */
.home-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.22;
  mix-blend-mode: multiply;
}

html.dark .home-screen::after {
  opacity: 0.18;
  mix-blend-mode: screen;
}

/* Pencil doodles in the margins. Absolutely positioned so they don't take a
   row in the .home-screen grid and push the content down. */
.home-doodles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.home-doodles span {
  position: absolute;
  z-index: 0;
  color: var(--graphite);
  font-family: var(--font-hand);
  font-size: 1.7rem;
  opacity: 0.55;
  pointer-events: none;
  transform: rotate(var(--tilt, 0deg));
}

@media (max-width: 760px) {
  .home-doodles { display: none; }
}

/* Copyright notice, pencilled into the bottom-right margin. Absolutely
   positioned, like the doodles, so it doesn't take a grid row. */
.home-copyright {
  position: absolute;
  right: 16px;
  bottom: 6px;
  z-index: 1;
  color: var(--graphite);
  font-family: var(--font-hand);
  font-size: 1.3rem;
}

.home-copyright a {
  color: inherit;
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.home-copyright a:hover {
  color: rgb(var(--pencil-red));
}

.home-copyright a:focus-visible {
  outline: 2px solid var(--muse-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Logo keeps the original bold sans; the tagline is handwritten. Both get a
   grain mask so paper shows through, a little lighter on the logo. */
.home-screen .muse-brand h1 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.0 0 0 0 1.35'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.0 0 0 0 1.35'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

.home-screen .muse-brand p {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.3 0 0 0 1.55'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.3 0 0 0 1.55'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

.home-screen .muse-brand {
  margin-bottom: 30px;
}

.home-screen .muse-brand h1 {
  color: var(--logo-ink);
  font-family: var(--font-print);
  font-weight: 700;
}

.home-screen .muse-brand h1 span {
  color: var(--logo-accent);
}

/* What MusePlot is for: a plain-sans line under the handwritten tagline. The
   :has() selector matches the signed-in tagline rule, which outranks a class. */
.home-screen .muse-brand .muse-intro,
.muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand .muse-intro {
  max-width: 400px;
  margin: 12px auto 0;
  color: var(--graphite);
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.45;
  -webkit-mask-image: none;
  mask-image: none;
}

/* The one-line pitch leads the intro, a shade darker instead of a new line. */
.home-screen .muse-brand .muse-intro strong {
  color: var(--sketch-ink);
  font-weight: 700;
}

.muse-squiggle {
  display: block;
  width: 210px;
  height: 16px;
  margin: 6px auto 12px;
  overflow: visible;
}

.muse-squiggle path {
  fill: none;
  stroke: rgb(var(--pencil-red));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: muse-squiggle-draw 1.1s 0.3s ease-out forwards;
}

@keyframes muse-squiggle-draw {
  to { stroke-dashoffset: 0; }
}

body.motion-reduced .muse-squiggle path {
  animation: none;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.motion-full) .muse-squiggle path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.home-screen .muse-brand p,
.muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand p {
  margin-top: 0;
  color: var(--graphite);
  font-family: var(--font-hand);
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.02;
}

/* The login form and the signed-in actions sit on an index card held on with tape. */
#homeAuth,
#homeSignedIn {
  position: relative;
  padding: 30px 24px 22px;
  border-radius: 3px;
  background-color: var(--card);
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(var(--paper-grid), 0.16) 33px 34px);
  box-shadow: 0 1px 2px rgba(40, 30, 10, 0.06), 0 10px 24px -16px rgba(40, 30, 10, 0.35);
  transform: rotate(-0.6deg);
}

#homeSignedIn {
  padding-top: 34px;
  transform: rotate(0.5deg);
}

#homeAuth::before,
#homeSignedIn::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 116px;
  height: 26px;
  background: var(--tape);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
  transform: translateX(-50%) rotate(2deg);
}

/* Log in / Create Account: a quiet segmented pill. The active side gets a
   highlighter swipe, the one hand-drawn touch on the controls. */
.home-screen .muse-tabs {
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1.5px solid var(--control-line);
  background: var(--card);
  box-shadow: none;
}

.home-screen .muse-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: var(--home-button-radius);
  background: transparent;
  color: var(--graphite);
  font-family: var(--font-ui);
  font-size: 1.02rem;
  font-weight: 600;
}

.home-screen .muse-tabs button {
  --hl: var(--highlight);
  --hl-press: var(--highlight);
}

.home-screen .muse-tabs #authCreateTab {
  --hl: var(--highlight-create);
  --hl-press: var(--highlight-create);
}

.home-screen .muse-tabs button:hover {
  background: transparent;
  color: var(--sketch-ink);
}

.home-screen .muse-tabs button[aria-pressed="true"],
.home-screen .muse-tabs #authCreateTab[aria-pressed="true"] {
  border: 0;
  background: transparent;
  color: var(--highlight-ink, var(--sketch-ink));
}

/* Notebook-style fields: a dashed line that firms up while you type. */
.home-screen .muse-auth-form input {
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1.5px dashed rgba(var(--paper-grid), 0.55);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sketch-ink);
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 500;
}

.home-screen .muse-auth-form input::placeholder {
  color: var(--graphite);
  opacity: 0.75;
}

.home-screen .muse-auth-form input:focus {
  border-bottom-style: solid;
  border-bottom-color: var(--muse-blue);
  box-shadow: none;
}

.home-screen .muse-auth-form input[aria-invalid="true"] {
  border-bottom-style: solid;
  border-bottom-color: rgb(var(--pencil-red));
  box-shadow: none;
}

/* Log in: handwritten words on the card, highlighted on hover. */
.home-screen .muse-submit-row button {
  --hl: var(--hl-orange);
  --hl-press: var(--hl-orange-press);
  min-width: 0;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--sketch-ink);
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
}

.home-screen .muse-submit-row button:hover {
  background: transparent;
}

.home-screen .muse-auth-status {
  color: var(--graphite);
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

.home-screen .muse-auth-status[data-kind="error"] {
  color: rgb(var(--pencil-red));
}

html.dark .home-screen .muse-auth-status[data-kind="success"] {
  color: #8fe0b5;
}

/* Guest entry under the login form: a dashed "or" rule, then a quieter
   highlighter button than Log in. */
.home-screen .muse-guest-entry {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: 12px;
}

.home-screen .muse-or {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--graphite);
  font-family: var(--font-hand);
  font-size: 1.3rem;
}

.home-screen .muse-or::before,
.home-screen .muse-or::after {
  content: "";
  flex: 1;
  border-top: 1.5px dashed var(--control-line);
}

.home-screen .muse-guest-entry button {
  --hl: var(--hl-green);
  --hl-press: var(--hl-green);
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--sketch-ink);
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.home-screen .muse-guest-entry button:hover {
  background: transparent;
}

.home-screen .muse-guest-entry p,
.home-screen .muse-guest-note {
  margin: 0;
  color: var(--graphite);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}

.home-screen .muse-guest-note {
  margin-top: 14px;
}

/* Signed-in actions. */
.home-screen .muse-user strong {
  color: var(--graphite);
  font-family: var(--font-print);
  font-size: 1.2rem;
}

/* Signed-in actions: handwritten words, each with its own highlighter colour. */
.home-screen .muse-user-actions {
  grid-template-rows: none;
  justify-items: center;
  row-gap: 8px;
}

.home-screen .muse-user-actions button,
.home-screen .muse-user-actions .practice-action.primary {
  width: auto;
  height: auto;
  min-height: 60px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--action-ink);
  font-family: var(--font-print);
  /* Same paper grain as the logo; it textures the highlighter too, like real marker. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.0 0 0 0 1.35'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.0 0 0 0 1.35'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.home-screen .muse-user-actions button:hover,
.home-screen .muse-user-actions .practice-action.primary:hover {
  background: transparent;
}

.home-screen .muse-user-actions .daily-action {
  --hl: var(--hl-orange);
  --hl-press: var(--hl-orange-press);
}

.home-screen .muse-user-actions .practice-action {
  --hl: var(--hl-red);
  --hl-press: var(--hl-red-press);
}

.home-screen .muse-user-actions .profile-action {
  --hl: var(--hl-slate);
  --hl-press: var(--hl-slate-press);
}

/* The highlighter stroke shared by every homepage control: slightly ragged,
   slightly tilted, and drawn left to right. */
.home-screen :is(.muse-tabs, .muse-submit-row, .muse-user-actions, .muse-guest-entry) button {
  position: relative;
  isolation: isolate;
}

.home-screen :is(.muse-tabs, .muse-submit-row, .muse-user-actions, .muse-guest-entry) button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20% 2px 16% 2px;
  border-radius: 4px 10px 6px 12px / 8px 5px 10px 6px;
  background: var(--hl);
  clip-path: polygon(0 10%, 100% 0, 99% 100%, 1% 90%);
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left center;
  transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.15s;
}

.home-screen .muse-tabs button[aria-pressed="true"]::before,
.home-screen :is(.muse-tabs, .muse-submit-row, .muse-user-actions, .muse-guest-entry) button:focus-visible::before {
  transform: scaleX(1) rotate(-1deg);
}

.home-screen :is(.muse-submit-row, .muse-user-actions, .muse-guest-entry) button:active::before {
  background: var(--hl-press);
}

@media (hover: hover) {
  .home-screen :is(.muse-tabs, .muse-submit-row, .muse-user-actions, .muse-guest-entry) button:hover::before {
    transform: scaleX(1) rotate(-1deg);
  }
}

/* Touch screens can't hover, so the highlight stays on to mark what's tappable. */
@media (hover: none) {
  .home-screen :is(.muse-submit-row, .muse-user-actions, .muse-guest-entry) button::before {
    transform: scaleX(1) rotate(-1deg);
  }
}

body.motion-reduced .home-screen :is(.muse-tabs, .muse-submit-row, .muse-user-actions, .muse-guest-entry) button::before {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.motion-full) .home-screen :is(.muse-tabs, .muse-submit-row, .muse-user-actions, .muse-guest-entry) button::before {
    transition: none;
  }
}

@media (max-width: 600px) {
  .home-screen .muse-brand p,
  .muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand p {
    font-size: 1.8rem;
  }

  #homeAuth,
  #homeSignedIn {
    padding: 26px 16px 18px;
  }

  .home-screen .muse-tabs button {
    padding: 0 8px;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .home-screen .muse-user-actions button,
  .home-screen .muse-user-actions .practice-action.primary {
    min-height: 52px;
    font-size: 1.3rem;
  }
}

/* Short windows, such as a laptop with browser bars: compact the vertical
   stack so the whole homepage fits without scrolling. Widths stay the same,
   and phones keep their own layout above. */
@media (min-width: 601px) and (max-height: 880px) {
  .home-screen,
  .home-screen:has(#homeSignedIn:not([hidden])) {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #appearanceDock {
    margin-bottom: 12px;
  }

  .home-screen .muse-brand,
  .muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand {
    margin-bottom: 22px;
  }

  .home-screen .muse-brand h1,
  .muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand h1 {
    font-size: 3.6rem;
  }

  .muse-squiggle {
    margin: 2px auto 8px;
  }

  .home-screen .muse-brand p,
  .muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand p {
    font-size: 1.95rem;
  }

  .home-screen .muse-brand .muse-intro,
  .muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand .muse-intro {
    margin-top: 8px;
  }

  #homeAuth,
  #homeSignedIn {
    padding: 24px 22px 16px;
  }

  .home-screen .muse-tabs {
    margin-bottom: 12px;
  }

  .home-screen .muse-auth-form input {
    min-height: 42px;
  }

  .home-screen .muse-submit-row button {
    min-height: 46px;
  }

  .home-screen .muse-guest-entry {
    margin-top: 6px;
  }

  .home-screen .muse-guest-entry button {
    min-height: 42px;
  }

  .home-screen .muse-user-actions button,
  .home-screen .muse-user-actions .practice-action.primary {
    min-height: 50px;
  }
}

@media (min-width: 601px) and (max-height: 760px) {
  .home-screen .muse-brand,
  .muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand {
    margin-bottom: 16px;
  }

  .home-screen .muse-brand h1,
  .muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand h1 {
    font-size: 3rem;
  }

  .home-screen .muse-brand p,
  .muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand p {
    font-size: 1.7rem;
  }

  .home-screen .muse-brand .muse-intro,
  .muse-landing:has(#homeSignedIn:not([hidden])) .muse-brand .muse-intro {
    margin-top: 6px;
    font-size: 0.92rem;
  }

  .home-screen .muse-user-actions button,
  .home-screen .muse-user-actions .practice-action.primary {
    min-height: 44px;
  }
}