/* Shared control primitives (Pento.Client.Ui/Shared) — one ×, one knob, one seg, one field.
   Tokens only. Controls hang off --ctl-* roles: the app's ink by default, the widget
   chrome's --w-* roles under .tone-widget (which an ancestor .wgt-pin/.wgtsetup pins).
   Every component root also carries .ctl so call sites can theme a whole control. */

.ctl, .ibtn, .seg, .ctl-toggle, .ctl-find, .field, .list-ed, .ctl-words {
    --ctl-ink: currentcolor;
    --ctl-soft: var(--ink-soft);
    --ctl-line: var(--line);
    --ctl-paper: var(--paper);
    --ctl-surface: var(--surface);
    --ctl-bone: color-mix(in srgb, var(--ink) 10%, var(--paper));
    --ctl-hi: var(--hi-yellow);
    --ctl-shadow: var(--line);
}
/* widget chrome: the control itself, or anything inside a widget dialog / pin / drawer */
.tone-widget, .tone-widget *, .wgtsetup *, .wgt-pin *, .wgt-peek *, .kit-drawer * {
    --ctl-ink: var(--w-ink, var(--ink));
    --ctl-soft: var(--w-ink-soft, var(--ink-soft));
    --ctl-line: var(--w-ink, var(--line));
    --ctl-paper: var(--w-paper, var(--paper));
    --ctl-surface: var(--w-white, var(--surface));
    --ctl-bone: var(--w-bone, color-mix(in srgb, var(--ink) 10%, var(--paper)));
    --ctl-hi: var(--amber-500);
    --ctl-shadow: var(--w-shadow, var(--line));
}

/* ---- the icon-only round button (close ×s, little removes, dock buttons) ---- */
.ibtn {
    display: grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px; padding: 0;
    border: none; border-radius: 50%;
    background: none; color: inherit;
    cursor: pointer;
}
.ibtn.sm { width: 28px; height: 28px; }
.ibtn.lg { width: 44px; height: 44px; }
.ibtn:hover:not(:disabled) { background: color-mix(in srgb, var(--ctl-ink) 8%, transparent); }
.ibtn.tilt:hover:not(:disabled) { rotate: -8deg; }
.ibtn.filled { background: color-mix(in srgb, var(--cream) 85%, transparent); color: var(--gray-900); }
.ibtn.filled:hover:not(:disabled) { background: var(--white); }
.ibtn.corner { position: absolute; right: 8px; top: 8px; }
.ibtn.push { margin-left: auto; }
.ibtn:disabled { opacity: .35; cursor: not-allowed; }

/* ---- segmented radio group (Seg) and its chips variant ---- */
.seg {
    display: flex; max-width: 340px; padding: 3px;
    border: 2.5px solid var(--ctl-line); border-radius: 14px 18px 12px 16px;
    background: var(--ctl-bone);
}
.seg button {
    flex: 1; min-height: 34px; padding: 0 10px; border: none; border-radius: 10px;
    background: none; font: inherit; font-size: 1rem; color: var(--ctl-soft);
    cursor: pointer; white-space: nowrap;
}
.seg.sm button { min-height: 32px; font-size: 14px; }
.seg.lg button { min-height: 40px; }
.seg button.on { background: var(--ctl-paper); color: var(--ctl-ink); box-shadow: 2px 2px 0 var(--ctl-shadow); }
.seg.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; border: none; border-radius: 0; background: none; max-width: none; }
.seg.chips button {
    flex: none; min-height: 36px; padding: 2px 12px; font-size: .95rem;
    border: 2px solid var(--ctl-line); border-radius: 14px 10px 14px 9px;
    background: var(--ctl-surface); color: var(--ctl-ink);
}
.seg.chips button:hover:not(:disabled) { rotate: -2deg; }
.seg.chips button.on { background: var(--ctl-hi); color: var(--ctl-ink); box-shadow: none; }
.seg button:disabled { opacity: .5; cursor: not-allowed; }

/* ---- the toggle switch (Toggle) and its labelled row list ---- */
.ctl-toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 0;
    border: none; background: none;
    font: inherit; font-size: 1.05rem; color: inherit; text-align: left; line-height: 1.15;
    cursor: pointer;
}
.ctl-toggle small { display: block; font-size: .85rem; color: var(--ctl-soft); }
.ctl-toggle:disabled { opacity: .55; cursor: not-allowed; }
.ctl-knob {
    position: relative; flex-shrink: 0; box-sizing: border-box;
    width: 44px; height: 24px; border-radius: 12px;
    border: 2.5px solid var(--ctl-line); background: var(--ctl-bone);
}
.ctl-knob::after {
    content: ""; position: absolute; left: 2px; top: 2px;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--ctl-line); transition: left .15s;
}
.ctl-knob.on { background: var(--ctl-hi); }
.ctl-knob.on::after { left: 21px; }
.ctl-toggle.danger .ctl-knob.on { background: var(--red-500); }
.ctl-toggles { display: flex; flex-direction: column; }
.ctl-toggles .ctl-toggle { min-height: 56px; border-bottom: 2px dashed color-mix(in srgb, var(--ctl-line) 12%, transparent); }

/* ---- labelled field (Field) ---- */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 1.05rem; }
.field input { width: 100%; font-size: 1.1rem; }
.field small { color: var(--ink-soft); font-size: .88rem; }
.field.span2 { grid-column: span 2; }
.field.wide { grid-column: 1 / -1; }
.field.grow { flex: 1; min-width: 0; }
.field-count { font-size: 13px; color: var(--ink-soft); text-align: right; }
/* the widget set-up's captions and inputs wear the chrome's marker + --w-* inks */
.field.tone-widget { font-family: var(--font-marker, cursive); font-weight: 700; font-size: 21px; }
.field.tone-widget small { font-family: var(--font-hand, sans-serif); font-weight: 400; font-size: 13px; }
.field.tone-widget input, .field.tone-widget select {
    font-family: var(--font-hand, system-ui, sans-serif); font-weight: 400; font-size: 16px; min-height: 44px;
    color: var(--ctl-ink); background: var(--ctl-surface);
    border: 2px solid var(--ctl-line); border-radius: 185px 25px 145px 20px / 20px 155px 25px 175px;
    padding: 4px 12px; box-sizing: border-box;
}
.field.tone-widget input:focus, .field.tone-widget select:focus { outline: 3px solid var(--amber-500); outline-offset: 1px; }

/* the widget chrome's buttons (wgtsetup-btn folded into .btn) */
.btn.tone-widget {
    border-color: var(--w-ink, var(--line)); background: var(--w-paper, var(--paper)); color: var(--w-ink, var(--ink));
    box-shadow: 2px 2px 0 var(--w-shadow, var(--line)); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.btn.tone-widget.primary { background: var(--navy); color: var(--amber-200); }
.btn.tone-widget.danger-out { color: var(--red-800); border-color: var(--red-800); box-shadow: none; background: transparent; }
.btn.tone-widget:hover:not(:disabled) { box-shadow: 3px 3px 0 var(--w-shadow, var(--line)); }
.btn.tone-widget.ghost:hover:not(:disabled), .btn.tone-widget.danger-out:hover:not(:disabled) { box-shadow: none; }

/* ---- numbered row list (ListEditor) ---- */
.list-ed { display: flex; flex-direction: column; gap: 6px; }
.list-row { display: flex; gap: 6px; align-items: center; }
.list-row .n { width: 20px; font-size: 14px; color: var(--ctl-soft); text-align: right; flex-shrink: 0; }
.list-row .ibtn { color: var(--ctl-soft); }
.list-row .ibtn:hover { color: var(--ctl-ink); }
.list-in {
    flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 4px 12px;
    font-size: 16px; color: var(--ctl-ink); background: var(--ctl-surface);
    border: 2px solid var(--ctl-line); border-radius: 185px 25px 145px 20px / 20px 155px 25px 175px;
}
.list-in:focus { outline: 3px solid var(--amber-500); outline-offset: 1px; }
.list-add {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    min-height: 36px; padding: 0 12px; font-size: 15px; color: var(--ctl-ink);
    background: transparent; border: 2px dashed var(--ctl-line);
    border-radius: 14px 10px 14px 9px; cursor: pointer;
}
.list-add:disabled { opacity: .5; cursor: default; }

/* ---- search box (SearchBox) ---- */
.ctl-find {
    display: flex; align-items: center; gap: 8px; color: var(--ctl-soft);
    border: 2px solid var(--ctl-line); border-radius: var(--wobble-3);
    background: var(--ctl-surface);
}
.ctl-find input {
    flex: 1; min-width: 0; padding: 0; border: none; background: none;
    box-shadow: none; transform: none; font: inherit; font-size: 1rem; color: var(--ctl-ink);
}
.ctl-find input:focus { outline: none; box-shadow: none; }
.ctl-find input::-webkit-search-cancel-button { display: none; }
.ctl-find.list { height: 40px; padding: 0 10px; margin: 10px 12px 4px; }
.ctl-find.strip {
    height: 46px; padding: 0 12px; background: var(--ctl-paper); color: var(--ctl-ink);
    border-width: 2.5px; box-shadow: var(--shadow-hard);
}
.ctl-find.compact { height: 36px; padding: 0 8px; margin: 0; }
.ctl-find.flush { margin: 0; }
/* the kit drawer's find row wears the widget chrome's wonky pill */
.ctl-find.tone-widget { border-radius: 185px 25px 145px 20px / 20px 155px 25px 175px; }
.ctl-find.tone-widget:focus-within { outline: 3px solid var(--amber-500); outline-offset: 2px; }

/* font previews inside a seg (the lettering tools) */
.seg .font-marker { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.2rem; }
.seg .font-neat { font-family: "Patrick Hand", sans-serif; }
.seg .font-chunky { font-family: "Permanent Marker", cursive; font-size: .85rem; }

/* ---- removable word chips (WordChips) ---- */
.ctl-word-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ctl-word {
    display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 0 4px 0 12px;
    border: 2px solid var(--ctl-line); border-radius: 18px 14px 16px 12px;
    background: var(--ctl-surface); font-size: .95rem; color: var(--ctl-ink);
}
.ctl-word-add { display: flex; gap: 8px; margin-top: 10px; max-width: 440px; }
.ctl-word-add input { flex: 1; min-width: 0; font-size: 1rem; padding: 6px 12px; }

/* ---- picture picker (PhotoPicker) ---- */
.photo-pick { position: relative; overflow: hidden; }
.photo-pick.disabled { opacity: .5; cursor: not-allowed; }
.ctl-file {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}