/* 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;
}

/* ── Calendar ──────────────────────────────────────────────────────────────
   Replaced a bare 1–31 strip. On that strip "slot 5" could mean five days away
   or nearly a month away, and there was no way to reach a date beyond the next
   occurrence of a slot — so anything pushed out was easy to skip by a month.
   The day number is still the pocket number; only the framing changed. */

.fld-cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.fld-cal-month {
    margin: 0;
    min-width: 160px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.fld-cal-jump { margin-left: auto; }

.fld-cal-head,
.fld-cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.fld-cal-head { margin-bottom: 6px; }

.fld-cal-dow {
    padding: 2px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.fld-cal-day {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.fld-cal-day:hover:not(:disabled) {
    border-color: var(--apple-blue);
    transform: translateY(-1px);
}

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

/* Neighbouring-month and past days are shown so the week rows read as real
   weeks, but you cannot file paper into a pocket whose day has gone. */
.fld-cal-day:disabled {
    cursor: default;
    opacity: 0.35;
    background: transparent;
    border-style: dashed;
}

.fld-cal-out { opacity: 0.3; }

/* The office is shut and Reminders' weekend-quiet mode suppresses tasks, so a
   weekend column is a real caution, not decoration — it has to be legible even
   when every cell in it is live. Both the header and the cells are dimmed so
   the column reads as one block. */
.fld-cal-weekend:not(:disabled) {
    background: transparent;
    color: var(--text-secondary);
}

.fld-cal-dow:first-child,
.fld-cal-dow:last-child {
    opacity: 0.55;
}

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

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

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

/* Holding something due today or earlier — the cells to walk to. */
.fld-cal-due:not(.fld-cal-active) {
    border-color: var(--apple-blue);
    background: color-mix(in srgb, var(--apple-blue) 16%, var(--bg-input));
}

.fld-cal-count {
    position: absolute;
    right: 6px;
    bottom: 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-cal-active .fld-cal-count {
    background: #fff;
    color: var(--apple-blue);
}

.fld-legend {
    margin: 12px 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;
}

/* The DATE leads: it is what the agent is reasoning about ("when does this come
   back?"). The slot is the supporting detail — which pocket the paper goes in —
   and it follows the date, including through a weekend shift. */
.fld-compose-date {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

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

.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; }

/* Outlook is the office's mail client, so it leads; .ics sits beside it as the
   portable fallback rather than the only option. */
.fld-btn-outlook {
    border-color: var(--apple-blue);
}

.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);
}

/* ── Agency contacts ───────────────────────────────────────────────────────
   Names used to accumulate invisibly as a side effect of filing, so a typo'd
   email could not be fixed and nobody could be added ahead of their first item. */

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

.fld-roster summary {
    padding: 9px 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.fld-person-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fld-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 13px;
}

.fld-person-name { flex: 0 0 auto; font-weight: 500; color: var(--text); }

.fld-person-email {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.fld-person-empty { color: var(--text-secondary); }

.fld-person-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* ── 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;
}

/* The 7-column week grid must survive: dropping to fewer columns would stop it
   being a calendar. Shrink the cells instead. */
body:is([data-shell-width="xs"], [data-shell-width="sm"]) .fld-cal-day {
    min-height: 42px;
    padding: 4px 5px;
    font-size: 12px;
    border-radius: 7px;
}

body:is([data-shell-width="xs"], [data-shell-width="sm"]) :is(.fld-cal-head, .fld-cal-body) {
    gap: 3px;
}

body:is([data-shell-width="xs"], [data-shell-width="sm"]) .fld-cal-count {
    right: 3px;
    bottom: 3px;
    min-width: 14px;
    height: 14px;
    font-size: 10px;
}

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