/* css/folder.css — Accordion Folder tool.
   All rules fld-prefixed. No @keyframes here; they live in css/animations.css. */

.fld-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 20px 16px 48px;
}

/* ── Day-of banner ─────────────────────────────────────────────────────────
   The one line that says "the accordion has something in it today". The linked
   reminder already reaches the bell and the Today widget, but there it reads as
   one more reminder among many. */

.fld-due-banner {
    margin-bottom: 16px;
    padding: 11px 14px;
    background: var(--bg-card);
    border: 1px solid var(--apple-blue);
    border-left-width: 3px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
}

.fld-due-banner-late {
    border-color: #FF9500;
}

/* ── Slot grid ─────────────────────────────────────────────────────────────
   The point of the grid is that it reads like the physical object: a row of
   day-numbered pockets you can point at. */

.fld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 8px;
}

.fld-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.fld-slot:hover {
    border-color: var(--apple-blue);
    transform: translateY(-1px);
}

.fld-slot:focus-visible {
    outline: 2px solid var(--apple-blue);
    outline-offset: 2px;
}

.fld-slot-today {
    border-color: var(--apple-blue);
    box-shadow: inset 0 0 0 1px var(--apple-blue);
}

.fld-slot-active {
    background: var(--apple-blue);
    border-color: var(--apple-blue);
    color: #fff;
}

.fld-slot-filled .fld-slot-n {
    font-weight: 700;
}

.fld-slot-count {
    position: absolute;
    top: 4px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--apple-blue);
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.fld-slot-active .fld-slot-count {
    background: #fff;
    color: var(--apple-blue);
}

.fld-slot-next {
    position: absolute;
    bottom: 3px;
    right: 6px;
    font-size: 12px;
    opacity: 0.5;
}

.fld-legend {
    margin: 10px 2px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ── Compose ───────────────────────────────────────────────────────────────
   Capture has to be about ten seconds, so this is one row that opens in place
   rather than a modal. */

.fld-compose {
    margin-top: 18px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.fld-compose-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.fld-compose-slot {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.fld-compose-date {
    font-size: 13px;
    color: var(--apple-blue);
    font-weight: 500;
}

.fld-compose-note {
    font-size: 12px;
    color: var(--text-secondary);
}

.fld-compose-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fld-input {
    flex: 1 1 180px;
    min-width: 0;
    padding: 9px 11px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
}

.fld-input:focus {
    outline: none;
    border-color: var(--apple-blue);
}

.fld-input-who { flex: 0 1 150px; }
.fld-input-email { flex: 0 1 190px; }

.fld-check {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* css/components-inputs.css:2 sets `input, select, textarea { width: 100% }`
   globally, which stretches a bare checkbox across the whole row and shoves its
   label to the far edge. Every checkbox in a plugin has to opt out. */
.fld-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────────*/

.fld-btn {
    padding: 9px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.fld-btn:hover { border-color: var(--apple-blue); }

.fld-btn-primary {
    background: var(--apple-blue);
    border-color: var(--apple-blue);
    color: #fff;
}

.fld-btn-sm { padding: 6px 10px; font-size: 12px; }

.fld-btn-danger {
    background: #FF3B30;
    border-color: #FF3B30;
    color: #fff;
}

.fld-header-actions {
    display: flex;
    gap: 8px;
}

/* ── Item list ─────────────────────────────────────────────────────────────*/

.fld-list-wrap { margin-top: 26px; }

.fld-h {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.fld-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fld-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.fld-item-overdue { border-color: #FF9500; }

/* Today is the whole point of the tool, so it reads louder than "late". */
.fld-item-today {
    border-color: var(--apple-blue);
    border-left-width: 3px;
}

.fld-flash { border-color: var(--apple-blue); }

.fld-item-slot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.fld-item-main { flex: 1 1 auto; min-width: 0; }

.fld-item-title {
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fld-item-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

.fld-chip {
    display: inline-block;
    padding: 1px 6px;
    background: var(--bg-input);
    border-radius: 5px;
    font-size: 11px;
}

.fld-chip-today,
.fld-chip-overdue {
    margin-right: 7px;
    font-weight: 600;
    color: #fff;
    vertical-align: 1px;
}

.fld-chip-today { background: var(--apple-blue); }
.fld-chip-overdue { background: #FF9500; }

/* A slot still holding something due today or earlier — the ones to walk to. */
.fld-slot-due:not(.fld-slot-active) {
    border-color: var(--apple-blue);
    background: color-mix(in srgb, var(--apple-blue) 14%, var(--bg-input));
}

.fld-item-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

.fld-empty {
    padding: 26px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: 10px;
}

.fld-empty p { margin: 0; }

.fld-privacy {
    margin: 14px 2px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ── Narrow layouts ────────────────────────────────────────────────────────
   Keyed to the CONTENT COLUMN's width, not the viewport. The docked chat panel
   reserves room with padding-right on .app-shell and never changes
   window.innerWidth, so a plain @media query keeps resolving against the full
   viewport and these rules would never fire with the panel open.
   body[data-shell-width] is published by js/chat-launcher.js from a
   ResizeObserver on .app-main; buckets are xs/sm/md/lg/xl. */

body:is([data-shell-width="xs"], [data-shell-width="sm"]) .fld-item {
    flex-wrap: wrap;
}

body:is([data-shell-width="xs"], [data-shell-width="sm"]) .fld-item-actions {
    width: 100%;
    justify-content: flex-end;
}

body:is([data-shell-width="xs"], [data-shell-width="sm"]) .fld-grid {
    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
}

body:is([data-shell-width="xs"], [data-shell-width="sm"]) .fld-slot {
    min-height: 44px;
    font-size: 14px;
}

body:is([data-shell-width="xs"], [data-shell-width="sm"]) :is(.fld-input-who, .fld-input-email) {
    flex: 1 1 100%;
}