/*
 * Ehopto Quiet UI — shared, opt-in workspace primitives.
 *
 * Deliberately scoped to .ehopto-quiet-workspace: public landing pages,
 * discovery media, primary CTAs, Studio and admin tables retain their own
 * carefully tested interactions until independently reviewed.
 *
 * Reuse the canonical --e-* dark/light dial; no new theme fork.
 */
:root {
    --e-quiet-radius: 10px;
    --e-quiet-row-gap: var(--e-space-3, 12px);
    --e-quiet-rule: var(--e-line, #223050);
}
body.ehopto-quiet-workspace {
    font-family: var(--e-font, system-ui, sans-serif);
    line-height: 1.5;
}
body.ehopto-quiet-workspace .wrap { min-width: 0; }
body.ehopto-quiet-workspace h1 {
    font-size: clamp(1.45rem, 2.5vw, 1.7rem);
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 720;
}
body.ehopto-quiet-workspace .sub {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--e-ink-muted);
    margin-bottom: var(--e-space-4, 16px);
}
body.ehopto-quiet-workspace :is(.section h2, .card h2, .wrap > h2) {
    color: var(--e-ink);
    font-size: .94rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -.015em;
    line-height: 1.4;
}
body.ehopto-quiet-workspace .section { margin-top: var(--e-space-6, 24px); }

/* Reduce box-in-box layering without weakening the highlighted owner card
   or the clearly signalled destructive area. */
body.ehopto-quiet-workspace .card:not(.mine):not(.danger-zone) {
    border: 0;
    border-bottom: 1px solid var(--e-quiet-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 16px 0;
}
body.ehopto-quiet-workspace .cards { gap: 0; }
body.ehopto-quiet-workspace .card.mine {
    box-shadow: none;
    border: 1px solid var(--e-line);
    border-radius: var(--e-quiet-radius);
}
body.ehopto-quiet-workspace .card .why { color: var(--e-ink-muted); }
body.ehopto-quiet-workspace .doors {
    gap: var(--e-space-4, 16px);
    align-items: center;
}
body.ehopto-quiet-workspace .doors a {
    flex: 0 1 auto;
    min-height: 40px;
    padding: 8px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--e-accent-soft);
    font-size: .83rem;
    font-weight: 650;
    text-decoration: none;
}
body.ehopto-quiet-workspace .doors a:hover {
    color: var(--e-accent-pale);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.ehopto-quiet-workspace .self-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--e-accent-soft);
    font-size: .8rem;
    font-weight: 650;
    padding: 7px 3px;
}
body.ehopto-quiet-workspace .self-link:hover {
    border: 0;
    color: var(--e-accent-pale);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.ehopto-quiet-workspace .create-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 0 var(--e-space-4, 16px);
}
body.ehopto-quiet-workspace .create-card {
    border: 0;
    border-bottom: 1px solid var(--e-quiet-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 13px 4px;
    transition: background-color 160ms ease, color 160ms ease;
}
body.ehopto-quiet-workspace .create-card:hover {
    border-bottom-color: var(--e-accent);
    background: color-mix(in srgb, var(--e-card) 40%, transparent);
}
body.ehopto-quiet-workspace .create-card span {
    color: var(--e-ink-muted);
    line-height: 1.5;
}
body.ehopto-quiet-workspace label.f {
    color: var(--e-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    font-weight: 650;
}
body.ehopto-quiet-workspace :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    background-color: var(--e-sunk);
    color: var(--e-ink);
    border-color: var(--e-control-line, var(--e-line));
    border-radius: var(--e-quiet-radius);
    max-width: 100%;
}
body.ehopto-quiet-workspace :is(input, select, textarea, button, a, summary):focus-visible {
    outline: 2px solid var(--e-accent);
    outline-offset: 3px;
}
body.ehopto-quiet-workspace :is(.btn, .media-upload button, .draft-actions button) {
    min-height: 40px;
    padding: 8px 12px;
    font-size: .825rem;
    font-weight: 650;
    line-height: 1.3;
    border-radius: 8px;
    box-shadow: none;
    transition: background-color 160ms ease, color 160ms ease;
}
body.ehopto-quiet-workspace .btn.ghost {
    border: 0;
    background: transparent;
    color: var(--e-accent-soft);
    padding-inline: 4px;
}
body.ehopto-quiet-workspace .btn.ghost:hover {
    color: var(--e-accent-pale);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.ehopto-quiet-workspace .btn.danger {
    background: var(--e-danger-bg);
    color: var(--e-bad);
    border: 1px solid var(--e-bad);
}
body.ehopto-quiet-workspace :is(button, a)[disabled],
body.ehopto-quiet-workspace :is(button, a)[aria-disabled="true"] {
    opacity: .6;
    cursor: not-allowed;
}

/* Me: a scannable identity and action list; no change to Ecode links. */
body.ehopto-quiet-workspace .private-badge {
    border-color: var(--e-line);
    letter-spacing: .035em;
    text-transform: none;
    font-size: .72rem;
}
body.ehopto-quiet-workspace .card .etype {
    color: var(--e-ink-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Preserve the newer Me/Us portfolio hierarchy from release PRs #862/#863.
   Those sections already have deliberately unboxed rows and larger headings;
   the generic workspace card and heading rules must not flatten them again. */
body.ehopto-quiet-workspace .section:not(.me-section) h2 {
    font-size: 20px;
    letter-spacing: -.02em;
}
body.ehopto-quiet-workspace .section:not(.me-section) .card:not(.mine):not(.danger-zone) {
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 10px 5px;
}
body.ehopto-quiet-workspace .section:not(.me-section) .self-link {
    color: var(--e-ink-muted);
    font-weight: 500;
}

/* Settings: sections are separated by rhythm, not nested rectangles. */
body.ehopto-quiet-workspace .card h2 { margin-bottom: 6px; }
body.ehopto-quiet-workspace .trims { gap: 12px; }
body.ehopto-quiet-workspace .trim .face { box-shadow: none; }
body.ehopto-quiet-workspace .trim:hover .face {
    box-shadow: none;
    border-color: rgba(var(--t), .8);
}
body.ehopto-quiet-workspace .trim input:checked + .face {
    box-shadow: inset 0 0 0 2px rgb(var(--t));
    background: rgba(var(--t), .14);
}
body.ehopto-quiet-workspace .trim input:focus-visible + .face {
    outline: 2px solid var(--e-accent);
    outline-offset: 3px;
}

/* Media: keep image-led, full-width content. Quiet the upload panel,
   but do not touch media sizing, upload fields, or draft/publish semantics. */
body.ehopto-quiet-workspace .tile {
    border-color: color-mix(in srgb, var(--e-line) 65%, transparent);
    background: var(--e-card);
    box-shadow: none;
}
body.ehopto-quiet-workspace .tile:hover { border-color: var(--e-line-strong); }
body.ehopto-quiet-workspace .media-upload {
    border: 0;
    border-top: 1px solid var(--e-quiet-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 16px 0;
}
body.ehopto-quiet-workspace .media-upload :is(button, summary) {
    color: var(--e-accent-soft);
}
body.ehopto-quiet-workspace :is(.media-upload button, .draft-actions button) {
    border: 0;
    background: transparent;
    padding-inline: 4px;
}

@media (max-width: 620px) {
    body.ehopto-quiet-workspace .create-cards { grid-template-columns: 1fr; }
    body.ehopto-quiet-workspace .card:not(.mine):not(.danger-zone) { padding-block: 14px; }
    body.ehopto-quiet-workspace .doors { gap: 8px 14px; }
    body.ehopto-quiet-workspace .shelf { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    body.ehopto-quiet-workspace :is(.create-card, .btn, .media-upload button, .draft-actions button) {
        transition: none;
    }
}