/*!
 * color-tools-shared.css
 * Shared visual styles for the web developer color tools.
 * Include this once in <head>, alongside color-conversions.js and
 * color-tools-shared.js. Each individual tool wraps its markup in a
 * div with class "cct-wrap" and can add its own <style> block for
 * anything specific to that tool; everything generic (buttons, inputs,
 * the result-card grid, recent colors, etc.) lives here so it isn't
 * duplicated across every converter.
 *
 * Every selector is prefixed with .cct-wrap. This scopes the rules to
 * the tool's own markup and also raises their specificity above a
 * typical single-class or bare-element rule from the rest of the site,
 * so global styles are less likely to bleed in and override these.
 */
  /* Every rule below is prefixed with .cct-wrap. This isn't just visual
     scoping, it also raises the specificity of every rule here above a
     typical single-class or bare-element rule from a site's global
     stylesheet, so global button/input/etc. styles are less likely to
     bleed in and override these. */
  .cct-wrap {
    --cct-bg: #f7f7f8;
    --cct-panel: #ffffff;
    --cct-border: #e0e0e4;
    --cct-text: #1c1c1f;
    --cct-text-dim: #6b6b73;
    --cct-accent: #3a5bc7;
    --cct-accent-text: #ffffff;
    --cct-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --cct-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cct-radius: 10px;
    max-width: 960px;
    margin: 0 auto;
    font-family: var(--cct-sans);
    color: var(--cct-text);
    box-sizing: border-box;
  }
  .cct-wrap *, .cct-wrap *::before, .cct-wrap *::after {
    box-sizing: inherit;
  }
  .cct-wrap [hidden] { display: none !important; }

  .cct-wrap .cct-panel {
    background: var(--cct-panel);
    border: 1px solid var(--cct-border);
    border-radius: var(--cct-radius);
    padding: 20px;
  }

  /* Input row */
  .cct-wrap .cct-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
  }
  .cct-wrap .cct-input-field {
    position: relative;
    flex: 1 1 260px;
  }
  .cct-wrap .cct-input-field input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--cct-mono);
    font-size: 15px;
    border: 1px solid var(--cct-border);
    border-radius: 8px;
    background: var(--cct-bg);
    color: var(--cct-text);
    outline: none;
    transition: border-color 0.15s ease;
  }
  .cct-wrap .cct-input-field input[type="text"]:focus {
    border-color: var(--cct-accent);
  }
  .cct-wrap .cct-input-field input[type="text"].cct-invalid {
    border-color: #c73a3a;
  }
  .cct-wrap .cct-swatch-btn {
    flex: 0 0 auto;
    width: 46px;
    padding: 0;
    border: 1px solid var(--cct-border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
  }
  .cct-wrap .cct-swatch-btn input[type="color"] {
    width: 130%;
    height: 130%;
    margin: -15%;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .cct-wrap .cct-btn {
    flex: 0 0 auto;
    padding: 11px 16px;
    border: 1px solid var(--cct-border);
    border-radius: 8px;
    background: var(--cct-panel);
    color: var(--cct-text);
    font-family: var(--cct-sans);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
  }
  .cct-wrap .cct-btn:hover { background: var(--cct-bg); }
  .cct-wrap .cct-btn:active { transform: translateY(1px); }
  .cct-wrap .cct-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
  .cct-wrap .cct-btn.cct-btn-primary {
    background: var(--cct-accent);
    color: var(--cct-accent-text);
    border-color: var(--cct-accent);
  }
  .cct-wrap .cct-btn.cct-btn-primary:hover { background: var(--cct-accent); filter: brightness(1.1); }

  .cct-wrap .cct-alpha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--cct-text-dim);
  }
  .cct-wrap .cct-alpha-row input[type="range"] {
    flex: 1 1 auto;
    accent-color: var(--cct-accent);
  }
  .cct-wrap .cct-alpha-row .cct-alpha-value {
    font-family: var(--cct-mono);
    width: 3.5em;
    text-align: right;
  }

  .cct-wrap .cct-status {
    margin-top: 10px;
    font-size: 13px;
    min-height: 1.2em;
  }
  .cct-wrap .cct-status.cct-status-error { color: #c73a3a; }
  .cct-wrap .cct-status.cct-status-gamut { color: #9a6b12; }

  .cct-wrap .cct-recent {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cct-wrap .cct-recent-label {
    font-size: 12px;
    color: var(--cct-text-dim);
    margin-right: 2px;
  }
  .cct-wrap .cct-recent-swatch {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid var(--cct-border);
    cursor: pointer;
    padding: 0;
    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%),
      linear-gradient(-45deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  }
  .cct-wrap .cct-recent-swatch span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

  /* Results grid */
  .cct-wrap .cct-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
  }
  .cct-wrap .cct-card {
    border: 1px solid var(--cct-border);
    border-radius: var(--cct-radius);
    overflow: hidden;
    background: var(--cct-panel);
    display: flex;
    flex-direction: column;
  }
  .cct-wrap .cct-card-swatch {
    height: 56px;
    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%),
      linear-gradient(-45deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
    position: relative;
  }
  .cct-wrap .cct-card-swatch > span {
    position: absolute;
    inset: 0;
  }
  .cct-wrap .cct-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .cct-wrap .cct-card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cct-text-dim);
  }
  .cct-wrap .cct-card-value {
    font-family: var(--cct-mono);
    font-size: 13.5px;
    word-break: break-all;
    flex: 1;
  }
  .cct-wrap .cct-card-value.cct-card-value-empty {
    color: var(--cct-text-dim);
    font-family: var(--cct-sans);
    font-style: italic;
    font-size: 13px;
  }
  .cct-wrap .cct-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .cct-wrap .cct-copy-btn {
    border: 1px solid var(--cct-border);
    background: var(--cct-bg);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 12px;
    cursor: pointer;
    color: var(--cct-text);
  }
  .cct-wrap .cct-copy-btn:hover { background: #ececef; }
  .cct-wrap .cct-copy-btn.cct-copied {
    background: #1f8a4c;
    color: #fff;
    border-color: #1f8a4c;
  }
  .cct-wrap .cct-gamut-flag {
    font-size: 11px;
    color: #9a6b12;
    border: 1px solid #e6c366;
    background: #fdf3d9;
    border-radius: 4px;
    padding: 1px 6px;
  }

  .cct-wrap .cct-footer-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  .cct-wrap .cct-section-advanced {
    margin-top: 22px;
    padding-top: 18px;
  }
  .cct-wrap .cct-advanced-heading {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--cct-text);
  }
  .cct-wrap .cct-advanced-hint {
    margin: 0;
    color: var(--cct-text-dim);
  }
  .cct-wrap .cct-grid-advanced {
    margin-top: 14px;
  }

  /* WCAG contrast panel */
  .cct-wrap .cct-contrast {
    margin-top: 14px;
    border: 1px solid var(--cct-border);
    border-radius: var(--cct-radius);
    padding: 20px;
    background: var(--cct-panel);
  }
  .cct-wrap .cct-contrast-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
  }
  .cct-wrap .cct-contrast-color-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 1 260px;
  }
  .cct-wrap .cct-contrast-color-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cct-text-dim);
  }
  .cct-wrap .cct-contrast-swatch {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--cct-border);
    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%),
      linear-gradient(-45deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
  }
  .cct-wrap .cct-contrast-color-value {
    font-family: var(--cct-mono);
    font-size: 13px;
    color: var(--cct-text-dim);
  }
  .cct-wrap .cct-contrast-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
  }
  .cct-wrap .cct-contrast-input-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }
  .cct-wrap .cct-contrast-input {
    width: 100%;
    height: 100%;
    padding: 8px 10px;
    font-family: var(--cct-mono);
    font-size: 13px;
    border: 1px solid var(--cct-border);
    border-radius: 6px;
    background: var(--cct-bg);
    color: var(--cct-text);
    outline: none;
  }
  .cct-wrap .cct-contrast-input.cct-invalid {
    border-color: #c73a3a;
  }
  .cct-wrap .cct-contrast-swatch-picker {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background-image: none;
    background: var(--cct-panel);
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
  }
  .cct-wrap .cct-contrast-swatch-picker:hover {
    border-color: var(--cct-accent);
  }
  .cct-wrap .cct-contrast-swatch-picker input[type="color"] {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .cct-wrap .cct-contrast-swap-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-top: 22px;
    border-radius: 50%;
    border: 1px solid var(--cct-border);
    background: var(--cct-bg);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cct-wrap .cct-contrast-swap-btn:hover {
    background: #ececef;
  }
  .cct-wrap .cct-contrast-preview {
    margin-top: 18px;
    border: 1px solid var(--cct-border);
    border-radius: 8px;
    overflow: hidden;
  }
  .cct-wrap .cct-contrast-preview-large {
    padding: 20px 18px 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
  }
  .cct-wrap .cct-contrast-preview-normal {
    padding: 8px 18px 20px;
    font-size: 15px;
    line-height: 1.5;
  }
  .cct-wrap .cct-contrast-preview-ui {
    height: 28px;
    margin: 0 18px 18px;
    border-radius: 6px;
    border-width: 3px;
    border-style: solid;
  }
  .cct-wrap .cct-contrast-result {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .cct-wrap .cct-contrast-ratio {
    font-family: var(--cct-mono);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
  }
  .cct-wrap .cct-contrast-ratio-unit {
    font-size: 16px;
    color: var(--cct-text-dim);
    font-weight: 500;
  }
  .cct-wrap .cct-contrast-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cct-wrap .cct-contrast-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
  }
  .cct-wrap .cct-contrast-badge.cct-pass {
    background: #e5f6ec;
    color: #1f8a4c;
    border-color: #b8e6cb;
  }
  .cct-wrap .cct-contrast-badge.cct-fail {
    background: #fdecec;
    color: #b3261e;
    border-color: #f3c6c4;
  }
  .cct-wrap .cct-contrast-suggest {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--cct-border);
    border-radius: 8px;
    background: var(--cct-bg);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .cct-wrap .cct-contrast-suggest-label {
    font-size: 13px;
    color: var(--cct-text-dim);
  }
  .cct-wrap .cct-contrast-suggest-swatch {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--cct-border);
    flex: 0 0 auto;
  }
  .cct-wrap .cct-contrast-suggest-value {
    font-family: var(--cct-mono);
    font-size: 13px;
  }

  @media (max-width: 480px) {
    .cct-wrap .cct-input-row { flex-direction: column; }
    .cct-wrap .cct-swatch-btn { width: 100%; height: 44px; }
  }