, hidden in every card iteration since §29.63, is shown again here
(line-clamped to 3 lines) since the reference crop shows real body
text, not just a title. */
.public-site #eventWeekGrid .event-card{
display:grid!important;
grid-template-columns:140px 1fr;
grid-template-rows:auto auto;
column-gap:14px;
row-gap:8px;
align-items:start;
height:auto!important;
min-height:0;
padding:14px!important;
overflow:visible;
}
.public-site #eventWeekGrid .event-card > .event-cover{
grid-column:1;
grid-row:1;
width:100%;
height:110px;
min-width:0;
min-height:0;
max-height:none;
border-radius:14px;
object-fit:cover;
display:block;
margin:0;
}
.public-site #eventWeekGrid .event-card > .event-date-box{
grid-column:1;
grid-row:2;
position:static;
width:64px;
min-height:56px;
justify-self:center;
margin:0;
}
.public-site #eventWeekGrid .event-card:not(.has-image) > .event-date-box{
grid-column:1;
grid-row:1/3;
background:#e8f3fb;
box-shadow:none;
align-self:center;
}
.public-site #eventWeekGrid .event-card > div:last-of-type{
grid-column:2;
grid-row:1/3;
display:flex;
flex-direction:column;
justify-content:flex-start;
gap:7px;
min-width:0;
}
.public-site #eventWeekGrid .event-card small,
.public-site #eventWeekGrid .event-card p{display:none}
.public-site #eventWeekGrid .event-card h3{font-size:1rem;margin:0;line-height:1.3}
.public-site #eventWeekGrid .event-card .event-info{
display:flex;
flex-direction:column;
gap:4px;
font-size:.8rem;
color:var(--muted);
}
.public-site #eventWeekGrid .event-card .card-actions{margin-top:auto}
.public-site #eventWeekGrid .event-card .card-actions .btn{padding:7px 14px;font-size:.8rem}
@media(max-width:560px){
.public-site #eventWeekGrid .event-card{grid-template-columns:110px 1fr}
.public-site #eventWeekGrid .event-card > .event-cover{height:90px}
.public-site #eventWeekGrid .event-card > .event-date-box{width:54px;min-height:48px}
}
.public-site #newsGrid .content-card{
display:grid!important;
grid-template-columns:140px 1fr;
column-gap:14px;
align-items:stretch;
height:auto!important;
padding:14px!important;
}
.public-site #newsGrid .content-card > .content-thumb{
grid-column:1;
grid-row:1;
width:100%;
height:100%;
min-height:110px;
border-radius:14px;
margin:0;
}
.public-site #newsGrid .content-card .content-copy{
grid-column:2;
grid-row:1;
display:flex;
flex-direction:column;
gap:6px;
padding:0;
min-width:0;
}
.public-site #newsGrid .content-card .content-copy .badge{
position:static;
box-shadow:none;
align-self:flex-start;
}
.public-site #newsGrid .content-card .content-copy h3{margin:0;font-size:1rem;line-height:1.3}
.public-site #newsGrid .content-card .content-copy p{
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
font-size:.82rem;
color:var(--muted);
margin:0;
}
.public-site #newsGrid .content-card .content-copy small{display:none}
.public-site #newsGrid .content-card .content-copy .content-date{
font-size:.76rem;
color:var(--muted);
margin-top:auto;
}
.public-site #newsGrid .content-card .content-copy .card-actions{margin-top:2px}
.public-site #newsGrid .content-card .content-copy .card-actions .btn{padding:7px 14px;font-size:.8rem}
@media(max-width:560px){
.public-site #newsGrid .content-card{grid-template-columns:110px 1fr}
.public-site #newsGrid .content-card > .content-thumb{min-height:90px}
}
/* Tighter vertical rhythm site-wide -- "all lines are close to each
other, no big empty spaces between areas" was the owner's direct
description of the mockup vs. the live site. */
.public-site .section{padding:28px 0}
.public-site .section-title{margin-bottom:14px}
.event-strip-block{margin-top:14px}
/* [project doc §29.69] Month-grid calendar for "לוח אירועים" (opened by
the "כל האירועים"/openCalendar button), built to match the owner's
reference mockup: a mini hero banner, a list/month view toggle, month
navigation, a 7-column day grid with color-coded event pills, and an
upcoming-events sidebar. Lives entirely inside the existing
#calendarModal (no new page/route) -- the modal is simply widened.
Colors are assigned per event via eventColor() in public.js (a fixed
palette cycled by the event's committee), not hard-coded here, so the
CSS below only defines the pill/dot shapes and reads each one's color
from an inline style set at render time. */
.public-site #calendarModal .modal-card{width:min(1120px,96vw);padding:0;overflow-y:auto;overflow-x:hidden}
.public-site #calendarModal #calendarBody{padding:0 20px 20px}
.public-site .calendar-hero{
background:linear-gradient(125deg,#edf5fb,#fef8e9);
border-radius:18px;
padding:16px 22px;
margin:4px 0 16px;
}
.public-site .calendar-hero p{margin:0;color:var(--muted,#5b7182);font-size:.88rem}
.public-site #calendarModal .modal-head{padding:16px 20px 0;margin-bottom:0}
.public-site #calendarModal .modal-head h2{font-size:1.3rem;color:var(--brand-navy,#173B64)}
.public-site .calendar-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
margin-bottom:16px;
}
.public-site .calendar-view-toggle{display:flex;gap:8px}
.public-site .calendar-mode-btn{
border:1px solid #d7e3ec;
background:#fff;
color:var(--brand-navy,#173B64);
border-radius:11px;
padding:9px 16px;
font-size:.85rem;
font-weight:700;
cursor:pointer;
}
.public-site .calendar-mode-btn.active{background:var(--brand-yellow);border-color:var(--brand-yellow);color:#47370c}
.public-site .calendar-nav{display:flex;align-items:center;gap:8px}
.public-site .calendar-nav .carousel-arrow{position:static;transform:none;box-shadow:none;border:1px solid #d7e3ec;width:34px;height:34px;font-size:1.3rem}
.public-site .calendar-month-select{
border:1px solid #d7e3ec;
border-radius:11px;
background:#fff;
padding:8px 12px;
font:inherit;
font-weight:700;
color:var(--brand-navy,#173B64);
cursor:pointer;
}
.public-site .calendar-today-btn{padding:8px 14px;font-size:.82rem}
.public-site .calendar-grid-wrap{display:flex;align-items:flex-start;gap:20px}
.public-site .month-grid-shell{flex:2.3;min-width:0;border:1px solid #e5edf5;border-radius:16px;overflow:hidden}
.public-site .month-grid-head{display:grid;grid-template-columns:repeat(7,1fr);background:#f7fafd;border-bottom:1px solid #e5edf5}
.public-site .month-grid-head-cell{padding:9px 4px;text-align:center;font-size:.78rem;font-weight:700;color:var(--muted,#5b7182)}
.public-site .month-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.public-site .month-cell{
height:96px;
padding:6px;
border-inline-start:1px solid #eef2f6;
border-top:1px solid #eef2f6;
display:flex;
flex-direction:column;
gap:3px;
overflow:hidden;
}
.public-site .month-cell:nth-child(7n+1){border-inline-start:none}
.public-site .month-cell-day{
align-self:flex-end;
font-size:.82rem;
font-weight:700;
color:var(--brand-navy,#173B64);
width:24px;
height:24px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}
.public-site .month-cell.out-month .month-cell-day{color:#c4ccd3;font-weight:600}.public-site .month-cell-hebrew{align-self:flex-end;font-size:.6rem;color:var(--muted,#5b7185);line-height:1}.public-site .month-cell.out-month .month-cell-hebrew{color:#c4ccd3}.public-site .month-cell-holiday-label{font-size:.64rem;font-weight:700;color:var(--brand-navy,#173B64);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-site .month-cell.has-holiday{border-radius:8px}.public-site .calendar-hebrew-subtitle{font-size:.8rem;color:var(--muted,#5b7185);margin-inline-start:6px}.public-site .calendar-legend{display:flex;flex-wrap:wrap;gap:14px;padding:0 4px 10px}.public-site .calendar-legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted,#5b7185)}.public-site .calendar-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.public-site .month-cell.is-today .month-cell-day{background:var(--brand-navy,#173B64);color:#fff}
.public-site .month-cell-events{display:flex;flex-direction:column;gap:2px;min-width:0}
.public-site .month-pill{
display:flex;
align-items:center;
gap:4px;
border:0;
border-radius:6px;
padding:2px 5px;
font-size:.66rem;
font-weight:600;
line-height:1.3;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer;
width:100%;
text-align:right;
}
.public-site .month-pill-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.public-site .month-pill-more{font-size:.64rem;color:var(--muted,#5b7182);padding-inline-start:2px}
.public-site .month-cell-dots{display:none}
.public-site .month-cell-dot{
width:8px;
height:8px;
min-width:8px;
padding:5px;
margin:-5px;
border:0;
border-radius:50%;
background-clip:content-box;
cursor:pointer;
}
.public-site .calendar-sidebar{
flex:1;
min-width:270px;
background:#fff;
border:1px solid #e5edf5;
border-radius:16px;
padding:16px;
}
.public-site .calendar-sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.public-site .calendar-sidebar-head h3{margin:0;font-size:1.02rem;color:var(--brand-navy,#173B64)}
.public-site .upcoming-row{
display:flex;
align-items:center;
gap:10px;
width:100%;
border:0;
background:none;
padding:10px 0;
border-bottom:1px solid #eef2f6;
cursor:pointer;
text-align:right;
font:inherit;
}
.public-site .upcoming-row:last-of-type{border-bottom:0}
.public-site .upcoming-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.public-site .upcoming-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.public-site .upcoming-copy strong{font-size:.88rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.public-site .upcoming-copy small{font-size:.74rem;color:var(--muted,#5b7182)}
.public-site .upcoming-date-box{
flex:0 0 auto;
width:52px;
text-align:center;
background:#eef5fb;
border-radius:11px;
padding:5px 4px;
color:var(--brand-navy,#173B64);
}
.public-site .upcoming-date-box strong{display:block;font-size:1rem}
.public-site .upcoming-date-box span{display:block;font-size:.66rem}
.public-site .calendar-all-btn{width:100%;margin-top:12px;justify-content:center;gap:8px;display:flex;align-items:center}
@media(max-width:860px){
.public-site .calendar-grid-wrap{flex-direction:column}
.public-site .calendar-sidebar{width:100%;min-width:0}
.public-site .calendar-view-toggle{width:100%}
.public-site .calendar-mode-btn{flex:1}
.public-site .month-cell{height:70px;padding:4px}
.public-site .month-pill{font-size:.6rem}
}
@media(max-width:560px){
.public-site #calendarModal .modal-card{padding:0}
.public-site .calendar-hero{padding:14px 16px;border-radius:0}
.public-site #calendarModal #calendarBody{padding:0 12px 16px}
.public-site .month-cell{height:56px}
.public-site .month-cell-events{display:none}
.public-site .month-cell-dots{display:flex;flex-wrap:wrap;gap:2px;justify-content:flex-end}
.public-site .month-cell.is-today .month-cell-day,
.public-site .month-cell.has-events .month-cell-day{box-shadow:0 0 0 2px var(--brand-yellow)}
}
/* project doc §29.77: tzaharon day-picker moved from its own top-level
panel into the relevant committee's card in ועדות. */
.badge.accent{background:#e1eef5;color:#164047}
/* project doc §29.78: tzaharon-active-day marker on the public month
calendar, alongside the existing holiday shading. */
.public-site .month-cell{position:relative}
.public-site .month-cell-tzaharon-badge{position:absolute;top:4px;inset-inline-start:4px;font-size:.72rem;line-height:1}
/* project doc §29.8x: generalized calendar-update support -- the event
form's optional end-time picker and calendar_only checkbox, and the
approval queue's list/calendar view toggle for the אירועים tab. */
.checkbox-label{display:flex;align-items:center;gap:8px;font-weight:700}
.checkbox-label input{width:auto}
#eventEndTimePicker .btn{margin-inline-start:8px}
.approval-view-toggle{margin:10px 0}
.approval-view-toggle .btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.approval-calendar-view{margin-top:10px}
.approval-cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.approval-cal-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px;font-size:.82rem;color:var(--muted)}
.approval-cal-legend span{display:flex;align-items:center;gap:6px}
.approval-cal-legend .approval-cal-pill.sample{padding:2px 8px}
.approval-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.approval-cal-cell{height:86px;background:#fff;border:1px solid #e2eaf2;border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.approval-cal-cell.out-month{background:transparent;border-color:transparent}
.approval-cal-cell.has-proposed{border-color:#f2b23a}
.approval-cal-daynum{font-weight:800;font-size:.82rem}
.approval-cal-pills{display:flex;flex-direction:column;gap:3px;min-width:0}
.approval-cal-pill{display:block;border-radius:7px;padding:2px 6px;font-size:.68rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.approval-cal-pill.live{background:#e8f3fb;color:#0f5f97}
.approval-cal-pill.proposed{background:#fff6e5;color:#8a5a00;border:1px dashed #f2b23a;cursor:pointer}
.approval-cal-pill.proposed.calendar-only{background:#f0e9fb;color:#4b2a8a;border-color:#b79bef}
@media(max-width:900px){.approval-cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));font-size:.85rem}.approval-cal-cell{height:66px;padding:4px}.approval-cal-pill{font-size:.6rem}}.events-cal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.events-cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.events-cal-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px;font-size:.82rem;color:var(--muted)}.events-cal-legend span{display:flex;align-items:center;gap:6px}.events-cal-legend .events-cal-pill.sample{padding:2px 8px}.events-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.events-cal-cell{height:86px;background:#fff;border:1px solid #e2eaf2;border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:4px;cursor:pointer;overflow:hidden}.events-cal-cell:hover{border-color:var(--primary)}.events-cal-cell.out-month{background:transparent;border-color:transparent;cursor:default}.events-cal-daynum{font-weight:800;font-size:.82rem}.events-cal-pills{display:flex;flex-direction:column;gap:3px;min-width:0}.events-cal-pill{display:block;border-radius:7px;padding:2px 6px;font-size:.68rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.events-cal-pill.published{background:#e8f3fb;color:#0f5f97}.events-cal-pill.pending{background:#fff6e5;color:#8a5a00;border:1px dashed #f2b23a}.events-cal-pill.calendar-only{background:#f0e9fb;color:#4b2a8a;border-color:#b79bef}.events-cal-cell.has-holiday{border-radius:8px}.events-cal-holiday-label{display:block;font-size:.6rem;font-weight:700;color:var(--brand-navy,#173B64);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.events-cal-holiday-dot{width:10px;height:10px;border-radius:50%;display:inline-block}#contentList,#eventRows{max-height:720px;overflow-y:auto;padding-inline-end:4px}@media(max-width:900px){.events-cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));font-size:.85rem}.events-cal-cell{height:66px;padding:4px}.events-cal-pill{font-size:.6rem}}#eventFormModal .modal-card{position:relative;padding-top:56px}.event-modal-close{position:absolute;top:16px;left:16px}
/* project doc §29.8x: range/gap-safety display for events (public site) --
the "⚠️ specific active days" note shown whenever a ranged event has
gaps, so a parent never reads just the overall range and assumes every
day in it applies; and a light visual marker for calendar_only pills
on the month view (still a real, clickable event -- just one that
didn't generate a public announcement). */
.event-schedule-note{color:#8a5a00;font-size:.82rem;font-weight:700;margin:4px 0 0}
.public-site .month-pill-calendar-only{border:1px dashed currentColor}
/* Parent access gate: the leadership "which view am I seeing" strip
(assets/public.js renderViewerBar). Deliberately plain and full-width at
the very top of the page -- it is a status indicator, not chrome, and it
must be impossible to mistake for part of the site's own design. */
.viewer-mode-bar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:#eef2ff;color:#1e3a8a;font-size:.9rem;border-bottom:1px solid #c7d2fe}
.viewer-mode-bar.is-preview{background:#fef3c7;color:#92400e;border-bottom-color:#fde68a}
.viewer-mode-bar .btn{white-space:nowrap}
.viewer-mode-bar .btn.is-active{background:#1e3a8a;color:#fff;border-color:#1e3a8a}
.viewer-mode-bar.is-preview .btn.is-active{background:#92400e;border-color:#92400e}
.viewer-mode-bar small{opacity:.85}
/* Parent access modal (assets/public.js). */
.parent-access-tabs{display:flex;gap:8px;margin-bottom:16px}
.parent-access-tabs .btn.is-active{background:#2563eb;color:#fff;border-color:#2563eb}
.parent-class-checklist{display:flex;flex-wrap:wrap;gap:8px 16px}
.parent-class-option{display:flex;align-items:center;gap:6px;white-space:nowrap}
.notice-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.notice-strong{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
/* The issued password is shown exactly once and has to be copied by hand or
by eye, so it gets a monospaced, well-spaced, selectable treatment rather
than being buried in body text. */
.parent-credential{display:flex;align-items:center;gap:10px;margin:10px 0}
.parent-credential-label{flex:0 0 auto;font-weight:800;min-width:6.5em}
.parent-credential .parent-password{flex:1;margin:0}
.parent-password{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.25rem;letter-spacing:.06em;background:#fff;border:1px dashed #065f46;border-radius:8px;padding:10px 14px;margin:10px 0;user-select:all;direction:ltr;text-align:center}
/* Sub-tabs under the page title, for nav entries that cover more than one
screen (publishing = content + events; users = leadership + parents).
Same pill language as .committee-tab, one level down in the hierarchy. */
.panel-group-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.panel-group-tabs button{border:1px solid #cfdeea;background:#fff;color:var(--text);border-radius:999px;padding:8px 14px;font:inherit;font-weight:800;cursor:pointer;transition:.18s ease}
.panel-group-tabs button:hover{border-color:var(--primary);background:#f4f9fd}
.panel-group-tabs button.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 5px 14px rgba(24,103,155,.18)}
.panel-group-tabs button.storage-warn{background:#7a5210;border-color:#7a5210;color:#fff}
.panel-group-tabs button.storage-danger{background:#7a2222;border-color:#7a2222;color:#fff}
@media(max-width:640px){.panel-group-tabs button{flex:1;padding:8px 10px}}
/* Standalone-backup panel: two buttons, everything else behind
"הגדרות מתקדמות" (14 Sep 2026). The