/* ── Atlas create composers v2: side sheet / centered modal · inline or stacked fields ── */

/* overlay + containers */
.atl-cmp-wrap { position: fixed; inset: 0; z-index: 120; display: flex; }
.atl-cmp-wrap.v-modal { align-items: center; justify-content: center; padding: 28px; }
.atl-cmp-wrap.v-sheet { justify-content: flex-end; padding: 14px; }
.atl-cmp-scrim { position: absolute; inset: 0; background: var(--scrim); }
.atl-cmp { position: relative; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.atl-cmp.as-modal { width: var(--w, 560px); max-width: 100%; max-height: min(92vh, 100%); border-radius: var(--radius); box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.65); }
.atl-cmp.as-sheet { width: 500px; max-width: 94vw; border-radius: var(--radius); box-shadow: -28px 0 80px -32px rgba(0, 0, 0, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .atl-cmp-scrim { animation: atl-fade 0.2s ease both; }
  .atl-cmp.as-modal { animation: atl-pop 0.3s cubic-bezier(0.25, 1, 0.4, 1) both; }
  .atl-cmp.as-sheet { animation: atl-sheetin 0.32s cubic-bezier(0.25, 1, 0.35, 1) both; }
}
@keyframes atl-pop { from { opacity: 0; transform: translateY(14px) scale(0.975); } }
@keyframes atl-sheetin { from { opacity: 0; transform: translateX(64px); } }

/* header: kicker chip, serif name, quiet meta */
.atl-cmp-hd { padding: 20px 24px 6px; }
.atl-cmp.as-sheet .atl-cmp-hd { padding-bottom: 14px; border-bottom: 1px solid var(--line2); }
.atl-cmp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.atl-cmp-kick { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tc-ink); background: var(--tc-soft); border-radius: 999px; padding: 5px 11px 5px 10px; }
.atl-cmp-x { margin-left: auto; }
.atl-cmp-name { font-family: 'Source Serif 4', serif; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); width: 100%; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.atl-cmp-name::placeholder { color: var(--faint); font-weight: 400; }
.atl-cmp-name:focus { border-color: var(--acc2); box-shadow: 0 0 0 3px var(--focus); }
.atl-cmp-names { display: flex; gap: 12px; }
.atl-cmp-names .atl-cmp-name { flex: 1; min-width: 0; }
.atl-cmp-tags { margin-top: 13px; }
.atl-cmp-meta { display: flex; align-items: center; gap: 7px; margin-top: 13px; font-size: 11.5px; color: var(--faint); }

/* body + collapsible sections */
.atl-cmp-bd { flex: 1; overflow: auto; padding: 2px 24px 12px; }
.atl-csec-h { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 13px 0 9px; cursor: pointer; font-family: inherit; color: var(--faint); }
.atl-csec-h > span { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.atl-csec-ln { flex: 1; height: 1px; background: var(--line2); }
.atl-csec-h svg { flex: none; transition: transform 0.18s; }
.atl-csec:not(.open) .atl-csec-h svg { transform: rotate(-90deg); }
.atl-csec-bd { display: flex; flex-direction: column; gap: 13px; padding: 3px 0 9px; }
.atl-cmp.f-inline .atl-csec-bd { gap: 1px; padding: 0 0 7px; }

/* footer */
.atl-cmp-ft { display: flex; align-items: center; gap: 9px; padding: 12px 24px 18px; }
.atl-cmp.as-sheet .atl-cmp-ft { border-top: 1px solid var(--line2); padding-top: 14px; }
.atl-cmp-hint { margin-right: auto; font-size: 11.5px; color: var(--faint); display: inline-flex; align-items: center; gap: 5px; }

/* inline field rows (Twenty's label-left anatomy, made readable) */
.atl-fr { display: grid; grid-template-columns: 148px 1fr; gap: 12px; align-items: center; min-height: 37px; }
.atl-fr.top { align-items: start; }
.atl-fr.top .atl-fr-lb { padding-top: 9px; }
.atl-fr-lb { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: var(--muted); min-width: 0; }
.atl-fr-lb svg { color: var(--faint); flex: none; }
.atl-fr-ct { min-width: 0; }
.atl-cmp.f-inline .atl-input { background-color: transparent; border-color: transparent; padding: 7px 10px; }
.atl-cmp.f-inline .atl-input:hover:not(:focus) { background-color: var(--chip); }
.atl-cmp.f-inline .atl-input:focus { background-color: var(--card2); }

/* stacked fields (labels above) — shared primitives */
.atl-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.atl-flabel { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 6px; }
.atl-input { width: 100%; font-family: inherit; font-size: 13px; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; }
.atl-input::placeholder { color: var(--faint); }
.atl-input:focus { border-color: var(--acc2); box-shadow: 0 0 0 3px var(--focus); }
textarea.atl-input { resize: vertical; min-height: 64px; line-height: 1.45; }
select.atl-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; cursor: pointer; }

/* $-prefix input */
.atl-inwrap { position: relative; display: block; }
.atl-inwrap > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12.5px; color: var(--faint); pointer-events: none; }
.atl-inwrap > .atl-input, .atl-cmp.f-inline .atl-inwrap > .atl-input { padding-left: 24px; }

/* chips + owner picker + toggle */
.atl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.atl-fchip { font-family: inherit; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: color 0.14s, background 0.14s, border-color 0.14s; }
.atl-fchip:hover { color: var(--text); border-color: var(--line3); }
.atl-fchip.on { color: var(--tc-ink, var(--acc-ink)); background: var(--tc-soft, var(--acc-soft)); border-color: color-mix(in oklab, var(--tc, var(--acc)) 42%, transparent); }
.atl-fchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc, var(--acc)); display: none; }
.atl-fchip.on i { display: block; }
.atl-owners { display: flex; gap: 8px; flex-wrap: wrap; }
.atl-fowner { background: none; border: none; padding: 2px; border-radius: 50%; cursor: pointer; opacity: 0.45; transition: opacity 0.15s, box-shadow 0.15s; }
.atl-fowner:hover { opacity: 0.8; }
.atl-fowner.on { opacity: 1; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--acc2); }
.atl-ftg { position: relative; width: 36px; height: 21px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); cursor: pointer; padding: 0; transition: background 0.18s, border-color 0.18s; }
.atl-ftg i { position: absolute; top: 50%; left: 3px; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: left 0.18s, background 0.18s; }
.atl-ftg.on { background: linear-gradient(135deg, var(--acc), var(--acc2)); border-color: transparent; }
.atl-ftg.on i { left: 17px; background: #fff; }
.atl-ftg-hint { font-size: 11.5px; color: var(--faint); margin-left: 9px; }

/* big borderless body (notes / task body) */
.atl-bodyarea { width: 100%; min-height: 120px; background: transparent; border: none; outline: none; resize: vertical; font-family: inherit; font-size: 13.5px; line-height: 1.65; color: var(--text); padding: 2px 0 6px; }
.atl-bodyarea::placeholder { color: var(--faint); }

.atl-btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* success toast */
.atl-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px 9px 11px; font-size: 13px; font-weight: 600; color: var(--text); box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.5); }
.atl-toast-ic { width: 22px; height: 22px; border-radius: 50%; background: rgba(74, 222, 151, 0.16); color: #4ade97; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.atl.mode-light .atl-toast-ic { color: #15966b; background: rgba(21, 150, 107, 0.12); }
@media (prefers-reduced-motion: no-preference) {
  .atl-toast { animation: atl-toastin 0.35s cubic-bezier(0.25, 1, 0.4, 1) both; }
}
@keyframes atl-toastin { from { opacity: 0; transform: translate(-50%, 14px); } }