/* Shared controls; code-tools.css imports this file for existing pages. */
.ct-wrap {
    box-sizing:border-box;
    max-width:960px;
    margin:auto;
    color:var(--site-text)}
 .ct-note {
    color:var(--site-muted);
    line-height:1.8}
.ct-panel {
    background:var(--site-card);
    border:1px solid var(--site-line);
    border-radius:1.3rem;
    padding:clamp(1rem,3vw,1.7rem);
    margin:1rem 0;
    min-width:0}
.ct-fields {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    min-width:0;
    gap:1rem}
.ct-fields label {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    min-width:0;
    gap:.4rem;
    font-weight:750}
.ct-input {
    width:100%;
    min-width:0;
    min-height:46px;
    border:1px solid var(--site-line-strong);
    border-radius:.6rem;
    padding:.65rem;
    background:var(--site-page);
    color:var(--site-text);
    font:inherit}
.ct-input[type=checkbox] {
    width:1.2rem;
    min-height:1.2rem}
.ct-actions {
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin:1rem 0}
.ct-button {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    border-radius:999px;
    border:1px solid var(--site-line-strong);
    color:var(--site-text);
    padding:.65rem 1rem;
    font-weight:750;
    cursor:pointer;
    background:var(--site-card-soft)}
.ct-primary {
    background:var(--md-sys-color-primary);
    color:var(--md-sys-color-on-primary);
    border-color:transparent}
.ct-button:disabled {
    opacity:.5;
    cursor:default}
.ct-button:hover:not(:disabled) {
    border-color:var(--site-link)}
.ct-input:focus-visible,.ct-button:focus-visible, .ct-wrap summary:focus-visible {
    outline:3px solid var(--site-link);
    outline-offset:3px}
.ct-help {
    font-size:.83rem;
    color:var(--site-muted);
    line-height:1.8;
    margin:.6rem 0}
.ct-link {
    color:var(--site-link);
    text-decoration:underline}
.ct-status {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    line-height:1.8;
    margin:.7rem 0}

/* Opt-in work area. Reuse code-tools.css controls and the site's color tokens. */
.ct-system {
    --ct-space: 1rem;
    --ct-radius: .8rem;
    --ct-control-height: 48px;
}
.ct-system .ct-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ct-space); }
.ct-workspace > *, .ct-stack > * { min-width: 0; }
.ct-workspace > .ct-panel { margin: 0; }
.ct-system .ct-stack { display: grid; gap: var(--ct-space); align-content: start; }
.ct-field { display: grid; gap: .4rem; min-width: 0; }
.ct-field > label, .ct-field > legend { font-weight: 750; }
.ct-field .ct-help { margin: 0; }
.ct-system .ct-input:not([type="checkbox"]):not([type="radio"]) { min-height: var(--ct-control-height); border-radius: var(--ct-radius); }
.ct-system textarea.ct-input { resize: vertical; }
.ct-system .ct-button {
    min-height: var(--ct-control-height);
    max-width: 100%;
    font: inherit;
    font-weight: 750;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.ct-system .ct-button:disabled { opacity: .65; cursor: not-allowed; }
.ct-system .ct-button[aria-busy="true"] { cursor: progress; }
.ct-system .ct-secondary {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border-color: transparent;
}
.ct-system .ct-input[aria-invalid="true"] { border: 2px solid var(--md-sys-color-error); }
.ct-field-error { margin: 0; color: var(--md-sys-color-error); line-height: 1.7; }
.ct-system .ct-status[data-state] {
    padding: .75rem 1rem;
    border-inline-start: 4px solid var(--site-line-strong);
    border-radius: .4rem;
    background: var(--site-card-soft);
}
.ct-system .ct-status[data-state="success"] { border-inline-start-color: var(--md-sys-color-primary); }
.ct-system .ct-status[data-state="busy"] { border-inline-start-color: var(--md-sys-color-secondary); }
.ct-system .ct-status[data-state="error"] {
    border-inline-start-color: var(--md-sys-color-error);
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}
.ct-result-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.8; }
.ct-system .ct-status:empty { display: none; }
.ct-system .ct-field-error[hidden], .ct-system [hidden] { display: none !important; }
.ct-system .ct-check, .ct-system .wb-choice { min-height: 44px; }
.ct-system .ct-check input, .ct-system .wb-choice input { flex: none; width: 1.2rem; height: 1.2rem; min-height: 0; }
.ct-system .ct-button:focus-visible, .ct-system .ct-input:focus-visible { outline: 3px solid var(--site-link); outline-offset: 3px; }
@media (min-width: 800px) {
    .ct-system .ct-workspace--split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.ct-wrap *, .ct-wrap *::before, .ct-wrap *::after { box-sizing: border-box; }
.ct-button { font-family: inherit; text-align: center; white-space: normal; overflow-wrap: anywhere; text-decoration: none; }

.ct-system .ct-check { display:flex; align-items:center; gap:.6rem; }
.ct-system input[type="file"].ct-input { overflow:hidden; }
.ct-system summary { cursor:pointer; min-height:44px; }

/* Shared variants for dense editor toolbars, tabs and camera overlays. */
.ct-system .ct-button--compact { min-height: 44px; padding: .5rem .75rem; font-size: .875rem; }
.ct-system .ct-button--icon { min-width: 44px; min-height: 44px; padding: .5rem; }
.ct-system .ct-danger { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-color: transparent; }
.ct-system .ct-button--overlay { background: rgb(0 0 0 / .65); color: #fff; border-color: rgb(255 255 255 / .4); }
.ct-system .ct-input--compact { min-height: 44px; padding: .5rem .65rem; font-size: .875rem; }
.ct-system .ct-tab {
    min-width: 0; min-height: 48px; padding: .75rem 1rem;
    display: inline-flex; justify-content: center; align-items: center; gap: .5rem;
    border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    background: transparent; color: var(--site-muted); font: inherit; font-weight: 750;
    cursor: pointer; overflow-wrap: anywhere;
}
.ct-system .ct-tab.text-primary { border-bottom-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
.ct-system .ct-tab:focus-visible { outline: 3px solid var(--site-link); outline-offset: -3px; }
.ct-system .ct-button[disabled] { pointer-events: auto; }
.ct-system .ct-status--inline { margin: 0; border-radius: 0; font-size: .875rem; }
.ct-system .ct-button.hidden, .ct-system .ct-input.hidden { display: none; }