/* ==========================================================================
   The You, You-er — ported from youyouer.ryanpavel.com
   Every selector is scoped to .dp-tool--youyouer: the source used
   generic names (.container .header .btn .subtitle) that would collide with
   the theme. :root/html/body remapped to the wrapper; @keyframes suffixed so
   the two tools can't clash. Source comments stripped.
   REGENERATE rather than hand-edit if the tool source changes.
   ========================================================================== */
/* NOTE: every rem length in this file was multiplied by 1.6 during the port.
   The theme sets html{font-size:62.5%} so 1rem = 10px, but the source was
   authored against the 16px browser default. Without the rebase the whole
   tool rendered at 62.5% scale — unreadably small. */


.dp-tool--youyouer { --primary-accent: var(--ghost-accent-color, #19c0ff); --background: #ffffff; --text-dark: #15171a; --text-muted: #767676; --border-color: #e9ecef; --border-radius: 8px; --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --strength-1: #c8e6c9; --strength-1-border: #a5d6a7; --strength-1-text: #2e7d32; --strength-2: #66bb6a; --strength-2-border: #4caf50; --strength-2-text: #1b5e20; --strength-3: #2e7d32; --strength-3-border: #1b5e20; --strength-3-text: #ffffff; --unselected-bg: #f8f9fa; }
.dp-tool--youyouer,
.dp-tool--youyouer *,
.dp-tool--youyouer ::before,
.dp-tool--youyouer ::after { box-sizing: border-box; margin: 0; padding: 0; }
.dp-tool--youyouer { font-family: var(--font-stack); background: var(--background); color: var(--text-dark); line-height: 1.6; padding: 3.2rem 1.6rem; }
.dp-tool--youyouer .container { max-width: 720px; margin: 0 auto; }
.dp-tool--youyouer .header { text-align: center; margin-bottom: 4rem; }
.dp-tool--youyouer .header h1 { font-size: 3.6rem; font-weight: 700; margin-bottom: 0.8rem; }
.dp-tool--youyouer .header h1 a { color: var(--text-dark) !important; text-decoration: none; }
.dp-tool--youyouer .header h1 a:hover { color: var(--strength-3) !important; }
.dp-tool--youyouer .subtitle { font-size: 1.76rem; color: var(--text-muted); margin-bottom: 2.4rem; }
.dp-tool--youyouer .subtitle a { color: #0066cc; text-decoration: none; }
.dp-tool--youyouer .subtitle a:hover { text-decoration: underline; }
.dp-tool--youyouer a { color: #0066cc; }
.dp-tool--youyouer a:hover { color: #004499; }
.dp-tool--youyouer .intro-text { max-width: 700px; margin: 0 auto; text-align: left; }
.dp-tool--youyouer .intro-text p { margin-bottom: 1.2rem; color: var(--text-dark); font-size: 1.52rem; }
.dp-tool--youyouer .intro-text .instructions { color: var(--text-muted); margin-top: 0.8rem; }
.dp-tool--youyouer .intro-text .instructions em { color: var(--text-muted); }
.dp-tool--youyouer .mosaic-section { display: flex; flex-direction: column; align-items: center; margin-bottom: 3.2rem; }
.dp-tool--youyouer #mosaic-svg { width: 500px; max-width: 100%; height: auto; transition: width 0.4s ease-out; }
.dp-tool--youyouer .head-outline { fill: #f5f5f5; stroke: #555; stroke-width: 2.5; }
.dp-tool--youyouer .ear { fill: none; stroke: #555; stroke-width: 2.5; stroke-linecap: round; }
.dp-tool--youyouer #mosaic-svg text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; pointer-events: none; }
.dp-tool--youyouer .mosaic-actions { width: 100%; max-width: min(500px, 100%); display: flex; justify-content: space-between; margin-top: 1.2rem; transition: max-width 0.4s ease-out; }
.dp-tool--youyouer .selection-section { border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 2.4rem; margin-bottom: 3.2rem; }
.dp-tool--youyouer .tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 2rem; }
.dp-tool--youyouer .tile { position: relative; display: flex; align-items: center; justify-content: center; padding: 1.6rem 1.2rem; border: 2px solid var(--border-color); border-radius: var(--border-radius); background: var(--unselected-bg); cursor: pointer; user-select: none; -webkit-user-select: none; transition: all 0.3s ease-out; text-align: center; font-size: 1.44rem; font-weight: 500; color: var(--text-muted); min-height: 5.6rem; }
.dp-tool--youyouer .tile:hover { border-color: var(--strength-2); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.dp-tool--youyouer .tile::after { content: ''; position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-color); background: transparent; transition: all 0.3s ease-out; }
.dp-tool--youyouer .tile.strength-1 { background: var(--strength-1); border-color: var(--strength-1-border); color: var(--strength-1-text); font-weight: 600; }
.dp-tool--youyouer .tile.strength-1::after { border-color: var(--strength-1-border); background: linear-gradient(to top, var(--strength-1-border) 33%, transparent 33%); }
.dp-tool--youyouer .tile.strength-2 { background: var(--strength-2); border-color: var(--strength-2-border); color: var(--strength-2-text); font-weight: 600; }
.dp-tool--youyouer .tile.strength-2::after { border-color: var(--strength-2-border); background: linear-gradient(to top, var(--strength-2-border) 66%, transparent 66%); }
.dp-tool--youyouer .tile.strength-3 { background: var(--strength-3); border-color: var(--strength-3-border); color: var(--strength-3-text); font-weight: 700; box-shadow: 0 0 10px rgba(46, 125, 50, 0.25); }
.dp-tool--youyouer .tile.strength-3::after { border-color: var(--strength-3-text); background: var(--strength-3-text); }
.dp-tool--youyouer .add-own { display: flex; gap: 0.8rem; margin-bottom: 2rem; }
.dp-tool--youyouer .add-own input { flex: 1; padding: 1.04rem 1.2rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-family: var(--font-stack); font-size: 1.44rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.dp-tool--youyouer .add-own input:focus { border-color: var(--strength-2); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15); }
.dp-tool--youyouer .action-buttons { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.dp-tool--youyouer .btn { display: inline-flex; align-items: center; justify-content: center; padding: 1.04rem 2rem; border-radius: var(--border-radius); font-family: var(--font-stack); font-size: 1.44rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; }
.dp-tool--youyouer .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dp-tool--youyouer .btn-primary { background: var(--primary-accent); color: #fff; }
.dp-tool--youyouer .btn-primary:hover:not(:disabled) { background: var(--dp-accent-hover, #16ade5); box-shadow: 0 2px 8px rgba(25, 192, 255, 0.3); }
.dp-tool--youyouer .btn-dark { background: #15171a; color: #fff; }
.dp-tool--youyouer .btn-dark:hover:not(:disabled) { background: #333; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.dp-tool--youyouer .btn-secondary { background: var(--text-dark); color: #fff; }
.dp-tool--youyouer .btn-secondary:hover:not(:disabled) { background: #333; }
.dp-tool--youyouer .btn-outline { background: transparent; border-color: var(--border-color); color: var(--text-muted); }
.dp-tool--youyouer .btn-outline:hover:not(:disabled) { border-color: var(--strength-2); color: var(--strength-2-text); }
@keyframes fadeInYou {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dp-tool--youyouer .tile-enter { animation: fadeInYou 0.4s ease-out both; }
@media (max-width: 768px) {

  .dp-tool--youyouer .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .dp-tool--youyouer .container { padding: 0; }
  .dp-tool--youyouer .header h1 { font-size: 2.8rem; }
  .dp-tool--youyouer .action-buttons { flex-direction: column; }
  .dp-tool--youyouer .action-buttons .btn { width: 100%; }
}

@media (max-width: 500px) {

  .dp-tool--youyouer { padding: 1.6rem 0.8rem; }
  .dp-tool--youyouer .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .dp-tool--youyouer .tile { padding: 1.2rem 0.8rem; font-size: 1.28rem; min-height: 4.8rem; }
  .dp-tool--youyouer .selection-section { padding: 1.6rem; }
  .dp-tool--youyouer .mosaic-actions { gap: 0.8rem; }
  .dp-tool--youyouer .mosaic-actions .btn { font-size: 1.248rem; padding: 0.88rem 1.2rem; }
}


/* ============================================================================
   THEME INTEGRATION — written during the port, NOT present in the source.
   ----------------------------------------------------------------------------
   The source was a standalone page, so it set its own body background, text
   colour, system font stack and min-height:100vh. Inside a Ghost page all four
   are wrong. Rather than rewrite the source, remap its own custom properties
   onto the theme's tokens — the tool then inherits the site's typography and
   colour automatically.
   ========================================================================== */

.dp-tool--youyouer {
    --font-stack: inherit;
    --background: transparent;
    --text-dark: var(--color-primary-text);
    --text-muted: var(--color-secondary-text);
    --border-color: var(--color-border);
    min-height: 0;          /* source said 100vh — meaningless inside a page */
}

/* The theme already constrains and pads the canvas; the source's own container
   would double it up. */
.dp-tool--youyouer .container { max-width: none; padding: 0; margin: 0; }

/* DARK PAGE HANDLING.
   default.hbs computes YIQ luminance from --background-color and puts
   .has-light-text on <html> when the background is dark. The source hardcodes
   ~30 light surfaces (#fff, #f8f9fa, #fafafa) and the four quadrant tints are
   deliberately near-white. Inverting all of that would fight the tool's own
   colour logic and look broken, so on a dark page the tool becomes an explicit
   light app panel instead. Deliberate choice, easy to revisit. */
html.has-light-text .dp-tool--youyouer {
    --background: #ffffff;
    --text-dark: #15171a;
    --text-muted: #767676;
    --border-color: #e9ecef;
    background: #ffffff;
    color: #15171a;
    padding: clamp(2.56rem, 3vw, 5.12rem);
    border-radius: var(--dp-radius-lg, 16px);
}

/* Narrow screens: let wide interactive grids scroll rather than overflow the
   page and create a horizontal scrollbar on <body>. */
@media (max-width: 600px) {
    .dp-tool--youyouer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
    .dp-tool--youyouer *, .dp-tool--youyouer *::before, .dp-tool--youyouer *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}