/* ==============================================================
   COMPONENTS
   Reusable pieces, each with its hover, focus, active and
   disabled states.
   ============================================================== */
@layer components{
  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
    min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-sm);
    font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-title);line-height:1;
    white-space:nowrap;text-decoration:none;cursor:pointer;
    transition:background-color var(--t-fast) ease-out,border-color var(--t-fast) ease-out,color var(--t-fast) ease-out,transform .2s var(--ease-out);
  }
  .btn:active{transform:translateY(1px)}
  .btn[disabled]{opacity:.5;cursor:not-allowed}
  .btn .i-move{transition:transform .15s var(--ease-out)}
  .btn:hover .i-move{transform:translateX(2px)}
  .btn-primary{background:var(--btn-bg);color:var(--btn-ink)}
  .btn-primary:hover{background:var(--btn-hover)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
  .btn-ghost:hover{background:var(--sunken);border-color:var(--ink-3)}
  .btn-sm{min-height:36px;padding:0 14px;font-size:var(--text-xs)}

  .icon-btn{width:36px;height:36px;display:grid;place-items:center;flex:none;padding:0;cursor:pointer;
    border:1px solid var(--line);border-radius:var(--r-sm);background:transparent;color:var(--ink-2);
    transition:background-color var(--t-fast) ease-out,border-color var(--t-fast) ease-out,color var(--t-fast) ease-out}
  .icon-btn:hover{background:var(--sunken);color:var(--ink);border-color:var(--line-2)}

  /* the header's quick-menu button, showing its shortcut */
  .kbd-btn{display:inline-flex;align-items:center;gap:var(--s-2);height:36px;padding:0 var(--s-2) 0 var(--s-3);cursor:pointer;
    border:1px solid var(--line);border-radius:var(--r-sm);background:transparent;color:var(--ink-3);
    transition:background-color var(--t-fast) ease-out,border-color var(--t-fast) ease-out,color var(--t-fast) ease-out}
  .kbd-btn:hover{background:var(--sunken);color:var(--ink);border-color:var(--line-2)}
  .kbd-btn kbd{padding:2px 6px;border-radius:var(--r-xs);background:var(--sunken);border:1px solid var(--line);color:var(--ink-3)}

  .text-link{display:inline-flex;align-items:center;gap:var(--s-2);padding-bottom:2px;border-bottom:1px solid var(--line-2);
    font-weight:var(--weight-ui);color:var(--ink);text-decoration:none;transition:border-color var(--t-fast) ease-out}
  .text-link:hover{border-bottom-color:var(--accent)}
  .text-link .i-move{transition:transform .15s var(--ease-out)}
  .text-link:hover .i-move{transform:translateX(2px)}

  /* ---------- labels and marks ---------- */
  /* section label: "01  INTERACTIVE DEMO" */
  .label{display:flex;gap:var(--s-3);align-items:baseline;font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1.6;
    letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
  .label span{color:var(--accent-ink)}

  /* icon in a tinted square */
  .chip{width:40px;height:40px;display:grid;place-items:center;margin-bottom:var(--s-5);border-radius:10px;
    background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);
    transition:transform var(--t-med) var(--ease-out),background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}
  .chip .i{width:20px;height:20px}

  /* "Current" pill */
  .now{display:inline-flex;align-items:center;gap:var(--s-2);padding:2px var(--s-2);border-radius:999px;background:var(--ok-soft);
    font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;letter-spacing:.02em;color:var(--ok)}
  .now .status-dot{width:6px;height:6px}

  /* ---------- form controls ---------- */
  .field + .field,.field-row + .field,.field + .field-row{margin-top:var(--s-4)}
  .field label{display:block;margin-bottom:var(--s-2);font-size:var(--text-sm);font-weight:var(--weight-ui);color:var(--ink)}
  .field .opt{font-weight:400;color:var(--ink-3)}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
  @media (max-width:520px){.field-row{grid-template-columns:1fr}}

  .input{display:block;width:100%;min-height:44px;padding:10px var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-sm);
    background:var(--bg);color:var(--ink);font-size:var(--text-base);
    transition:border-color var(--t-fast) ease-out,box-shadow var(--t-fast) ease-out}
  .input::placeholder{color:var(--ink-3);opacity:.8}
  .input:hover{border-color:var(--ink-3)}
  .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .input[aria-invalid="true"]{border-color:var(--bad)}
  textarea.input{min-height:140px;resize:vertical}
  select.input{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237D8C95' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center}
  .err{display:block;margin-top:var(--s-2);font-size:var(--text-xs);color:var(--bad)}
  /* spam trap: people never see or fill this field */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* segmented control */
  .seg{display:inline-flex;padding:2px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunken)}
  .seg button{min-height:32px;padding:0 var(--s-3);border:0;border-radius:6px;background:transparent;cursor:pointer;
    font-size:var(--text-xs);font-weight:var(--weight-ui);color:var(--ink-3);
    transition:background-color var(--t-fast) ease-out,color var(--t-fast) ease-out}
  .seg button:hover{color:var(--ink)}
  .seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line-2)}

  /* on/off switch: a real checkbox underneath */
  .switch{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);min-height:32px;cursor:pointer;
    font-size:var(--text-xs);font-weight:var(--weight-ui);color:var(--ink)}
  .switch input{position:absolute;opacity:0;width:1px;height:1px}
  .switch-track{position:relative;width:32px;height:18px;border-radius:999px;background:var(--line-2);transition:background-color .15s ease-out}
  .switch-track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);
    box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease-out)}
  .switch input:checked + .switch-track{background:var(--accent)}
  .switch input:checked + .switch-track::after{transform:translateX(14px)}
  .switch input:focus-visible + .switch-track{outline:2px solid var(--accent);outline-offset:2px}

  /* ---------- quick menu (Ctrl/Cmd + K) ---------- */
  .palette{width:min(560px,calc(100vw - 32px));max-height:min(480px,calc(100vh - 96px));margin:12vh auto auto;padding:0;
    border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop)}
  .palette::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .palette[open]{animation:palIn .18s var(--ease-out)}
  @keyframes palIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
  .palette-box{display:flex;flex-direction:column;max-height:inherit}
  .palette-search{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-4);border-bottom:1px solid var(--line);color:var(--ink-3)}
  .palette-search input{flex:1;min-width:0;height:52px;border:0;background:transparent;color:var(--ink);font-size:var(--text-base)}
  .palette-search input:focus{outline:none}
  .palette-search kbd{padding:2px 6px;border-radius:var(--r-xs);border:1px solid var(--line);color:var(--ink-3)}
  .palette-list{overflow-y:auto;padding:var(--s-2)}
  .palette-group{padding:var(--s-2) var(--s-2) var(--s-1);font-family:var(--font-mono);font-size:var(--text-2xs);
    letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
  .palette-item{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-sm);
    cursor:pointer;font-size:var(--text-sm);color:var(--ink-2)}
  .palette-item .i{color:var(--ink-3)}
  .palette-item[aria-selected="true"]{background:var(--sunken);color:var(--ink)}
  .palette-item[aria-selected="true"] .i{color:var(--accent-ink)}
  .palette-empty{padding:var(--s-5) var(--s-4);font-size:var(--text-sm);color:var(--ink-3)}
}