/* ============================================================================
   Assured Services LLC — calendar. Shares the tokens in asl-pm.css.
   ========================================================================== */

.cal-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; }

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.cal-title { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.cal-legend { display: flex; align-items: center; gap: .85rem; font-size: .75rem; color: var(--ink-3); flex-wrap: wrap; }
.cal-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.cal-hint { font-style: italic; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; }
.cal-dow { background: #f4f4f5; padding: .4rem .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }

.cal-cell { background: var(--paper); min-height: 142px; padding: .4rem; display: flex; flex-direction: column; gap: .25rem; transition: background .12s; }
.cal-out { background: #fafafa; }
.cal-out .cal-daynum { color: var(--ink-4); }
.cal-today { background: rgba(10, 108, 245, .05); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-over { background: rgba(10, 108, 245, .12); box-shadow: inset 0 0 0 2px var(--accent); }

.cal-daynum { display: flex; align-items: center; gap: .3rem; font-size: .92rem; font-weight: 700; color: var(--ink); }
.cal-todaytag { font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.cal-count { margin-left: auto; font-size: .62rem; background: #f4f4f5; border-radius: 999px; padding: 0 .32rem; color: var(--ink-3); }

.cal-jobs { display: flex; flex-direction: column; gap: .2rem; overflow: hidden; }

.cal-job {
  display: flex; align-items: center; gap: .28rem; width: 100%;
  text-align: left; background: #fff; border: 1px solid var(--line);
  border-left-width: 3px; border-radius: .32rem;
  padding: .25rem .35rem; font-size: .68rem; line-height: 1.2;
  align-items: flex-start;
  cursor: pointer; color: var(--ink); font-family: inherit;
  transition: box-shadow .12s, transform .08s;
}
.cal-job:hover { box-shadow: 0 2px 8px rgba(16, 16, 20, .12); }
.cal-job:active { transform: scale(.99); }
.cal-job[draggable="true"] { cursor: grab; }
.cal-job.is-dragging { opacity: .4; cursor: grabbing; }
.cal-job.is-done { opacity: .62; }
.cal-job.is-done .cal-job-text { text-decoration: line-through; }
.cal-job.is-overdue { background: #fff6f7; border-color: #ffd7dd; }

/* Two lines of title beats one ellipsis — a priest scanning a month needs to
   know which job it is, not that a job exists. */
.cal-job-text {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  word-break: break-word;
}
.cal-dot { margin-top: .32rem; }
.cal-pin, .cal-vol, .cal-flag { flex: none; font-size: .58rem; margin-top: .1rem; }
.cal-flag { color: #fff; background: var(--amber); border-radius: 999px; width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
/* The estimate lives in the work-order panel and the work-orders table. On a
   month grid it only steals the room the title needs, so it is never drawn
   here — measured: showing it clipped 6 of 15 titles at 1500px. */
.cal-cost { display: none; }

.cal-dot, i.cal-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; display: inline-block; }
.dot-blue { background: #0a6cf5; } .dot-violet { background: #6d28d9; }
.dot-amber { background: #b45309; } .dot-green { background: #059669; }
.dot-gray { background: #a1a1aa; }

.edge-rose { border-left-color: #e11d48; } .edge-amber { border-left-color: #b45309; }
.edge-blue { border-left-color: #0a6cf5; } .edge-violet { border-left-color: #6d28d9; }
.edge-teal { border-left-color: #0d9488; } .edge-gray { border-left-color: #d4d4d8; }

/* Agenda — phones */
.agenda { display: flex; flex-direction: column; gap: .1rem; }
.agenda-day { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-bottom: 1px solid #f1f1f4; }
.agenda-date { display: flex; flex-direction: column; font-size: .78rem; color: var(--ink-3); }
.agenda-date b { color: var(--ink); }
.agenda-jobs { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.agenda .cal-job { font-size: .82rem; padding: .4rem .5rem; }

/* Below this width a 7-column grid is unreadable, so the agenda takes over. */
@media (max-width: 900px) {
  .cal-grid { display: none; }
  .cal-mobile-note { display: block; }
}
@media (min-width: 901px) {
  .agenda-fallback { display: none; }
}
.cal-mobile-note { display: none; font-size: .8rem; color: var(--ink-3); margin-bottom: .6rem; }

/* Volunteer page */
.vol-job { border: 1px solid var(--line); border-radius: .85rem; padding: 1rem; background: var(--paper); }
.vol-job h3 { margin: 0 0 .2rem; font-size: 1rem; }
.vol-spaces { font-size: .78rem; font-weight: 700; }
.vol-full { color: var(--ink-3); }
.vol-open { color: var(--green); }
.vol-steps { font-size: .82rem; color: var(--ink-2); }
.vol-steps summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: .82rem; }
.vol-steps ol, .vol-steps ul { padding-left: 1.1rem; margin: .5rem 0 0; }
.vol-steps li { margin-bottom: .2rem; }

/* Media picker on the request form */
.media-drop {
  border: 2px dashed #d9d9e0; border-radius: .75rem; padding: 1.1rem;
  text-align: center; color: var(--ink-3); font-size: .85rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.media-drop:hover, .media-drop.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink-2); }
.media-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); gap: .5rem; margin-top: .7rem; }
.media-item { position: relative; border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; background: #f4f4f5; aspect-ratio: 1; }
.media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-item .media-kind { position: absolute; left: 4px; bottom: 4px; font-size: .58rem; background: rgba(0,0,0,.6); color: #fff; padding: 1px 4px; border-radius: 3px; }
.media-item button {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 999px; border: none; background: rgba(0, 0, 0, .62); color: #fff;
  cursor: pointer; font-size: .72rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.media-progress { height: 3px; background: var(--accent); width: 0; transition: width .2s; border-radius: 999px; margin-top: .4rem; }

/* ============================================================================
   Client portal extras — work-order checklists, materials, donations.
   ========================================================================== */

.wo-section { margin-top: 1.5rem; }
.wo-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wo-section-head h4 { margin: 0; }
.wo-progress-text { font-size: .8rem; font-weight: 700; color: var(--ink-2); }

.wo-bar { background: #eeeef1; border-radius: 999px; overflow: hidden; height: 5px; }
.wo-bar > span { display: block; height: 100%; background: var(--green, #059669); border-radius: 999px; transition: width .25s; }
.wo-bar-lg { height: 7px; margin: .5rem 0 .9rem; }
.wo-mini { display: flex; align-items: center; gap: .4rem; min-width: 70px; }
.wo-mini .wo-bar { flex: 1 1 auto; }

/* Checklist */
.task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.task {
  position: relative; border: 1px solid var(--line); border-radius: .6rem;
  padding: .6rem 2rem .6rem .7rem; background: var(--paper);
}
.task.is-done { background: #f7fdf9; border-color: #cdeedd; }
.task-head { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; margin: 0; }
.task-head input[type="checkbox"] { margin-top: .18rem; width: 17px; height: 17px; flex: none; accent-color: var(--green, #059669); cursor: pointer; }
.task-head input[disabled] { cursor: default; }
.task-text { font-size: .9rem; line-height: 1.45; }
.task.is-done .task-text { color: var(--ink-3); }
.task-meta { font-size: .74rem; color: var(--ink-3); margin: .3rem 0 0 2.15rem; font-weight: 600; }
.task-note { font-size: .78rem; color: var(--ink-2); margin: .25rem 0 0 2.15rem; font-style: italic; }
.task-drop {
  position: absolute; top: .45rem; right: .45rem; width: 20px; height: 20px;
  border: none; background: transparent; color: var(--ink-4); border-radius: 999px;
  cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.task-drop:hover { background: #fee2e2; color: #b91c1c; }

.task-log { margin: .6rem 0 .1rem 2.15rem; padding: .7rem; background: #f7f7f9; border-radius: .5rem; }
.task-log-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)); gap: .5rem; }
.task-log label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.task-log input { font: inherit; font-size: .85rem; padding: .35rem .45rem; border: 1px solid var(--line); border-radius: .4rem; background: #fff; width: 100%; }
.task-log-note { margin-top: .5rem; }

.task-add { display: flex; gap: .4rem; margin-top: .7rem; }
.task-add input { flex: 1 1 auto; font: inherit; font-size: .88rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: .5rem; }

.supplier-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .55rem; }
.supplier-list li { padding-left: .7rem; border-left: 3px solid var(--accent); }

/* Donations */
.don-list { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); margin-top: .7rem; }
.don-card { border: 1px solid var(--line); border-radius: .85rem; padding: .9rem; background: var(--paper); }
.don-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.don-job { font-size: .8rem; color: var(--ink-3); margin: .45rem 0 .2rem; font-weight: 600; }
.don-what { margin: .1rem 0 .4rem; font-size: .92rem; }
.don-msg { font-size: .85rem; color: var(--ink-2); font-style: italic; margin: .4rem 0; }
.don-actions { margin-top: .7rem; border-top: 1px solid #f1f1f4; padding-top: .7rem; }
.don-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.don-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.don-grid input, .don-note { font: inherit; font-size: .85rem; padding: .38rem .5rem; border: 1px solid var(--line); border-radius: .4rem; width: 100%; background: #fff; }
.don-note { margin-top: .5rem; }

.donor-list { list-style: none; padding: 0; margin: .5rem 0 .7rem; display: flex; flex-direction: column; gap: .45rem; }
.donor-list li { font-size: .88rem; }

/* The public donor wall */
.wall { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.wall-name {
  font-size: .82rem; font-weight: 600; background: #f4f4f5; border: 1px solid var(--line);
  border-radius: 999px; padding: .28rem .7rem;
}

/* Volunteer page — giving */
.give-row { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.give-row .btn { flex: 1 1 130px; min-width: 0; }
.vol-thanks { font-size: .78rem; color: var(--ink-3); margin: .7rem 0 0; line-height: 1.5; }
.vol-thanks b { color: var(--ink-2); }
.vol-steps li.is-covered { color: var(--ink-4); text-decoration: line-through; }
.vol-steps li.is-covered .badge { text-decoration: none; }

/* ============================================================================
   Needs attention — one card per question, not a wall of flag text.
   ========================================================================== */

.rv-list { display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.rv-group + .rv-group { margin-top: 1rem; }

.rv-item {
  border: 1px solid var(--line); border-left: 3px solid var(--amber, #b45309);
  border-radius: .7rem; padding: .85rem .95rem; background: var(--paper);
}
.rv-item.is-done { border-left-color: var(--green, #059669); background: #f8fdfa; }

.rv-top { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .45rem; }
.rv-wo { font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.rv-kind { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.rv-title { margin: 0 0 .2rem; font-size: .88rem; font-weight: 600; }
.rv-q { margin: 0 0 .35rem; font-size: .93rem; font-weight: 600; line-height: 1.45; }
.rv-how { margin: 0; font-size: .84rem; color: var(--ink-2); line-height: 1.5; }
.rv-res { margin: .1rem 0 .3rem; font-size: .87rem; font-style: italic; color: var(--ink-2); line-height: 1.5; }
.rv-waiting { margin: .5rem 0 0; font-size: .8rem; color: var(--ink-3); font-style: italic; }

.rv-form { margin-top: .75rem; border-top: 1px solid #f1f1f4; padding-top: .75rem; }
.rv-value { margin-bottom: .6rem; }
.rv-value > label, .rv-note {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.rv-value-input { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; max-width: 230px; }
.rv-prefix, .rv-suffix { font-size: .9rem; font-weight: 600; color: var(--ink-3); }
.rv-form input[type="number"], .rv-form input[type="text"] {
  font: inherit; font-size: .9rem; padding: .4rem .55rem; border: 1px solid var(--line);
  border-radius: .45rem; background: #fff; width: 100%; text-transform: none;
  font-weight: 400; letter-spacing: normal; color: var(--ink);
}
.rv-note input { margin-top: .25rem; }
.rv-value .muted { margin: .3rem 0 0; font-size: .76rem; text-transform: none; letter-spacing: normal; font-weight: 400; }

.rv-add { display: flex; gap: .4rem; margin-top: .9rem; flex-wrap: wrap; }
.rv-add input[type="text"] { flex: 1 1 220px; font: inherit; font-size: .88rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: .5rem; }
.rv-add select { flex: 0 0 auto; font-size: .82rem; padding: .45rem .5rem; }

@media (max-width: 560px) {
  .rv-add input[type="text"], .rv-add select, .rv-add .btn { flex: 1 1 100%; }
}

/* ============================================================================
   Volunteer dates — a pencilled day, a day waiting on the parish, a promise.
   ========================================================================== */

/* Chip extras on the volunteer calendar. The chip stacks: the title gets the
   full width of the cell, the time and the headcount sit under it. */
.cal-job-vol { flex-direction: column; align-items: stretch; gap: .15rem; }
.cal-vol-top { display: flex; align-items: flex-start; gap: .28rem; min-width: 0; }
.cal-vol-meta { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; padding-left: .95rem; }
.cal-time { flex: none; font-size: .6rem; font-weight: 700; color: var(--ink-3); }
.cal-spaces {
  flex: none; font-size: .6rem; font-weight: 700;
  background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 0 .3rem;
}
.cal-spaces.is-full { background: #f4f4f5; color: var(--ink-3); }
.cal-job.is-confirmed { background: #f6fdf9; }
.agenda .cal-time, .agenda .cal-spaces { font-size: .72rem; }

/* What the date means, on a public job card */
.vol-when { font-size: .82rem; line-height: 1.5; margin: .2rem 0 .6rem; padding-left: .6rem;
            border-left: 3px solid var(--line); color: var(--ink-2); }
.vol-when.is-confirmed { border-left-color: var(--green, #059669); }
.vol-when.is-waiting   { border-left-color: var(--amber, #b45309); }

/* The parish's confirm board */
.vconf-list { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); margin-top: .8rem; }
.vconf { border: 1px solid var(--line); border-left: 3px solid var(--amber, #b45309);
         border-radius: .8rem; padding: .9rem; background: var(--paper); }
.vconf:has(.vconf-set) { border-left-color: var(--green, #059669); }
.vconf-set { font-size: .88rem; line-height: 1.5; margin: .6rem 0 .7rem; }
.vconf-form { margin-top: .75rem; border-top: 1px solid #f1f1f4; padding-top: .75rem; }
.vconf-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
.vconf-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .7rem;
                    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.vconf input { font: inherit; font-size: .86rem; padding: .38rem .5rem; border: 1px solid var(--line);
               border-radius: .42rem; background: #fff; width: 100%; font-weight: 400;
               letter-spacing: normal; text-transform: none; color: var(--ink); }
.vconf-text { margin-top: .5rem; }

/* ============================================================================
   A calendar that reads as a calendar: every date in its own box, with the
   number where the eye looks for it. The grid used to lean on a 1px gap over a
   grey background, which at a glance read as a table rather than a month.
   ========================================================================== */
.cal-grid { gap: 0; background: var(--paper); border-radius: .7rem; }
.cal-dow {
  background: #fff; border-bottom: 2px solid var(--ink); color: var(--ink);
  font-size: .68rem; padding: .5rem .5rem .45rem;
}
.cal-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-grid > .cal-cell:nth-child(7n + 7) { border-right: none; }
.cal-grid > .cal-dow:nth-child(7) { border-right: none; }
.cal-dow + .cal-dow, .cal-cell { border-left: none; }
.cal-dow:not(:nth-child(7)) { border-right: 1px solid var(--line); }
.cal-out { background: #fbfbfc; }
.cal-out .cal-daynum { color: var(--ink-4); font-weight: 600; }
.cal-today { background: rgba(10, 108, 245, .06); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-today .cal-daynum { color: var(--accent); }

/* Weekends read differently from the working week — most volunteering is a
   Saturday, so it helps to find them at a glance. */
.cal-grid > .cal-cell:nth-child(7n + 6),
.cal-grid > .cal-cell:nth-child(7n + 7) { background: #fcfcfd; }
.cal-grid > .cal-cell:nth-child(7n + 6).cal-today,
.cal-grid > .cal-cell:nth-child(7n + 7).cal-today { background: rgba(10, 108, 245, .06); }

/* Nothing confirmed yet */
.cal-empty {
  text-align: center; padding: 2.5rem 1.25rem; border: 2px dashed #e4e4e8;
  border-radius: .9rem; background: #fcfcfd; color: var(--ink-3);
}
.cal-empty h3 { margin: .5rem 0 .3rem; font-size: 1.05rem; color: var(--ink); }
.cal-empty p { margin: 0 auto; max-width: 46ch; font-size: .9rem; line-height: 1.6; }

/* Jobs still finding helpers — a window, never a day */
.win-list { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.win-job { border: 1px solid var(--line); border-left: 3px solid var(--accent);
           border-radius: .85rem; padding: 1rem; background: var(--paper); }
.win-when { font-size: .82rem; font-weight: 700; color: var(--accent); margin: .1rem 0 .4rem; }
.win-bar { height: 6px; background: #eeeef1; border-radius: 999px; overflow: hidden; margin: .6rem 0 .35rem; }
.win-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s; }
.win-need { font-size: .78rem; color: var(--ink-3); }

/* Availability picker on the signup form */
.avail-days { display: flex; gap: .3rem; flex-wrap: wrap; }
.avail-day {
  flex: 1 1 auto; min-width: 42px; text-align: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: .5rem; padding: .45rem .2rem;
  font-size: .78rem; font-weight: 600; background: #fff; user-select: none;
}
.avail-day input { position: absolute; opacity: 0; pointer-events: none; }
.avail-day:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.avail-times { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.avail-times .avail-day { flex: 1 1 90px; }

/* The shortlist of days that suit the most people */
.vsug { margin-top: .75rem; border-top: 1px solid #f1f1f4; padding-top: .7rem; }
.vsug-head { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
             color: var(--ink-3); margin: 0 0 .45rem; }
.vsug-list { display: flex; gap: .4rem; flex-wrap: wrap; }
.vsug-pick {
  flex: 1 1 130px; display: flex; flex-direction: column; gap: .1rem; text-align: left;
  border: 1px solid var(--line); border-radius: .55rem; padding: .45rem .55rem;
  background: #fff; cursor: pointer; font-family: inherit; color: var(--ink);
  transition: border-color .12s, background .12s;
}
.vsug-pick b { font-size: .82rem; }
.vsug-pick span { font-size: .7rem; color: var(--ink-3); }
.vsug-pick:hover { border-color: var(--accent); }
.vsug-pick.is-best { border-color: #cdeedd; background: #f7fdf9; }
.vsug-pick.is-chosen { border-color: var(--accent); background: var(--accent-soft); }
.vsug-pick.is-chosen span { color: var(--accent); }