/* Shared calendars consume Agur's approved sea/sand tokens locally. */
.shared-calendars {
  color: var(--sea-ink);
  background: var(--sand-200);
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--s5);
  border-radius: var(--r-lg);
}
.shared-calendars button, .shared-calendars select, .shared-calendars input { font: inherit; }
.shared-calendars button { cursor: pointer; min-height: var(--tap); }
.shared-calendars svg { width: 20px; height: 20px; }
.sc-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s5); }
.sc-header-title { display: flex; align-items: center; gap: var(--s4); }
.sc-page-icon { display: grid; place-items: center; width: 64px; height: 64px; flex: none; background: var(--sand-50); color: var(--teal-600); border: 1px solid var(--sand-300); border-radius: var(--r-md); }
.sc-page-icon svg { width: 30px; height: 30px; }
.sc-header h1 { font-size: var(--fs-h1); color: var(--teal-600); line-height: 1.25; margin: var(--s1) 0 var(--s2); }
.sc-header p { color: var(--sand-700); font-size: var(--fs-small); margin: 0; }
.sc-eyebrow { font-size: var(--fs-th); font-weight: 600; color: var(--sand-700); }
.sc-header-actions { display: flex; gap: var(--s2); flex: none; }
.sc-primary, .sc-secondary { border-radius: var(--r-sm); padding: var(--s3) var(--s4); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); }
.sc-primary { background: var(--teal-600); color: var(--surface); border: 1px solid var(--teal-600); }
.sc-primary:hover { background: var(--teal-700); border-color: var(--teal-700); }
.sc-secondary { background: var(--sand-50); border: 1px solid var(--teal-600); color: var(--teal-600); }
.sc-secondary:hover { background: var(--teal-50); }
.sc-toolbar { background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: var(--r-md); margin-bottom: var(--s5); overflow: hidden; }
.sc-toolbar-top { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); padding: var(--s4); }
.sc-view-tabs { display: flex; background: var(--sand-200); border-radius: var(--r-sm); padding: var(--s1); gap: var(--s1); }
.sc-view-tabs button { background: transparent; border: 0; padding: var(--s2) var(--s4); color: var(--sand-700); border-radius: calc(var(--r-sm) - var(--s1)); }
.sc-view-tabs button:hover { background: var(--clay-tint-200); color: var(--clay-dark); }
.sc-view-tabs button[aria-pressed=true] { background: var(--teal-600); color: var(--surface); font-weight: 600; }
.sc-search { position: relative; flex: 1; max-width: 430px; min-width: 180px; }
.sc-search svg { position: absolute; inset-inline-start: var(--s3); top: 50%; transform: translateY(-50%); color: var(--teal-500); }
.sc-toolbar input[type=search], .sc-toolbar select { min-height: var(--tap); border: 1px solid var(--sand-500); border-radius: var(--r-sm); background: var(--sand-50); padding: var(--s2) var(--s3); max-width: 100%; color: var(--sea-ink); font-size: var(--fs-small); }
.sc-search input { width: 100%; padding-inline-start: var(--s7)!important; }
.sc-search input::placeholder { color: var(--sand-700); opacity: 1; }
.sc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--sand-300); background: var(--sand-100); }
.sc-filters-title { display: flex; align-items: center; gap: var(--s2); color: var(--teal-600); font-size: var(--fs-small); font-weight: 600; }
.sc-text-btn { border: 0; background: transparent; color: var(--teal-600); padding: var(--s2); font-weight: 600; border-radius: var(--r-sm); }
.sc-text-btn:hover { background: var(--teal-50); }
.sc-hebrew { margin-inline-start: auto; font-size: var(--fs-small); white-space: nowrap; display: flex; align-items: center; gap: var(--s2); }
.shared-calendars input[type=checkbox] { accent-color: var(--teal-600); width: 18px; height: 18px; flex: none; margin: 0; }
.sc-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: var(--s5); align-items: start; }
.sc-sidebar { background: var(--sand-100); border: 1px solid var(--sand-300); border-radius: var(--r-md); padding: var(--s4); }
.sc-sidebar__title { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-small); color: var(--teal-600); }
.sc-sidebar__title strong { display: flex; align-items: center; gap: var(--s2); }
.sc-calendar-group { padding: var(--s4) 0; border-bottom: 1px solid var(--sand-300); }
.sc-sidebar h3 { color: var(--sand-700); font-size: var(--fs-th); margin: 0 0 var(--s3); }
.sc-calendar-choice { display: flex; align-items: center; gap: var(--s1); padding: var(--s2); border-radius: var(--r-sm); margin-bottom: var(--s1); }
.sc-calendar-choice:has(input:checked) { background: var(--sand-50); }
.sc-calendar-choice:hover { background: var(--clay-tint-50); }
.sc-calendar-choice label { display: flex; align-items: center; gap: var(--s3); flex: 1; min-width: 0; cursor: pointer; }
.sc-calendar-choice label > span { flex: 1; min-width: 0; }
.sc-calendar-choice strong { font-size: var(--fs-small); font-weight: 600; display: block; line-height: 1.4; }
.sc-calendar-choice small { font-size: var(--fs-th); color: var(--sand-700); display: block; margin-top: var(--s1); }
.sc-calendar-choice .sc-calendar-access--managed { color: var(--teal-600); }
.sc-menu-btn { display: grid; place-items: center; flex: none; background: transparent; border: 0; color: var(--teal-600); padding: var(--s2); border-radius: var(--r-sm); }
.sc-menu-btn:hover { background: var(--teal-100); }
.sc-layer-group { padding-top: var(--s4); }
.sc-layer-group label { display: flex; gap: var(--s3); align-items: center; min-height: var(--tap); font-size: var(--fs-small); cursor: pointer; }
.sc-access-note { display: flex; align-items: flex-start; gap: var(--s2); border-radius: var(--r-sm); padding: var(--s3); background: var(--clay-tint-50); color: var(--clay-dark); font-size: var(--fs-th); line-height: 1.65; margin-top: var(--s4); }
.sc-access-note svg { margin-top: 2px; }
.sc-board { background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: var(--r-md); overflow: hidden; min-width: 0; }
.sc-board-heading { padding: var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.sc-board-heading h2 { font-size: var(--fs-h2); color: var(--teal-600); margin: 0 0 var(--s1); }
.sc-board-heading p { margin: 0; color: var(--sand-700); font-size: var(--fs-th); }
.sc-date-nav { display: flex; gap: var(--s1); }
.sc-date-nav button { display: inline-flex; align-items: center; justify-content: center; background: var(--sand-50); color: var(--teal-600); border: 1px solid var(--sand-500); border-radius: var(--r-sm); padding: var(--s2) var(--s3); min-width: var(--tap); }
.sc-date-nav [data-prev] svg { transform: rotate(180deg); }
.sc-date-nav button:hover { background: var(--teal-50); }
.sc-grid-hint { display: none; }
.sc-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); background: var(--sand-100); border-block: 1px solid var(--sand-300); }
.sc-weekdays span { text-align: center; font-size: var(--fs-th); color: var(--sand-700); font-weight: 600; padding: var(--s3) var(--s1); }
.sc-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.sc-day { min-height: 150px; padding: var(--s2) var(--s1); border-inline-end: 1px solid var(--sand-300); border-bottom: 1px solid var(--sand-300); min-width: 0; }
.sc-day:nth-child(7n) { border-inline-end: 0; }
.sc-day:nth-child(7n), .sc-day:nth-child(7n + 6) { background: var(--sand-100); }
.sc-grid--week .sc-day { min-height: 430px; }
.sc-day--outside { background: var(--sand-200)!important; }
.sc-day--outside .sc-day__head { color: var(--sand-700); }
.sc-day--today { background: var(--teal-50)!important; box-shadow: inset 0 3px var(--teal-600); }
.sc-day__head { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin: 0 var(--s1) var(--s2); min-height: 28px; }
.sc-day__head time { font-size: var(--fs-small); font-weight: 600; }
.sc-day--today time { background: var(--teal-600); color: var(--surface); border-radius: var(--r-pill); min-width: 28px; height: 28px; display: grid; place-items: center; }
.sc-day__head span { font-size: var(--fs-th); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: var(--sand-700); }
.sc-event { display: block; width: 100%; text-align: start; border: 1px solid var(--teal-100); border-inline-start: 3px solid var(--teal-600); border-radius: var(--s2); background: var(--teal-50); color: var(--sea-ink); margin: var(--s1) 0; padding: var(--s2); line-height: 1.4; min-width: 0; }
.sc-event:hover { background: var(--teal-100); border-color: var(--teal-400); }
.sc-event strong { font-size: var(--fs-th); font-weight: 600; display: block; overflow-wrap: anywhere; }
.sc-event small { font-size: var(--fs-th); display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; color: var(--teal-700); margin-top: var(--s1); overflow-wrap: anywhere; }
.sc-event__access { font-size: var(--fs-th); font-weight: 600; }
.sc-event__access::before { content: '· '; }
.sc-event__time { font-size: var(--fs-th); font-weight: 600; color: var(--teal-600); direction: ltr; display: block; text-align: right; margin-bottom: var(--s1); }
.sc-event__time:empty { display: none; }
.sc-event--draft { border-color: var(--sand-400); border-inline-start-color: var(--sand-700); border-inline-start-style: dashed; background: var(--sand-100); }
.sc-event--draft small, .sc-event--draft .sc-event__time { color: var(--sand-700); }
.sc-event--draft:hover { background: var(--sand-200); border-color: var(--sand-600); }
.sc-more { border: 0; background: transparent; color: var(--teal-600); font-size: var(--fs-th)!important; padding: var(--s1); }
.sc-list-item { display: flex; align-items: center; gap: var(--s4); border-top: 1px solid var(--sand-300); padding: var(--s3) var(--s5); }
.sc-list-item:hover { background: var(--sand-100); }
.sc-list-date { display: flex; flex-direction: column; align-items: center; min-width: var(--tap); color: var(--teal-600); }
.sc-list-date strong { font-size: var(--fs-h2); }
.sc-list-date span { font-size: var(--fs-th); color: var(--sand-700); }
.sc-list-item .sc-event { flex: 1; min-width: 100px; border: 0; background: none; margin: 0; }
.sc-list-item .sc-event strong { font-size: var(--fs-small); }
.sc-list-place { font-size: var(--fs-th); color: var(--sand-700); }
.sc-tag { background: var(--sand-200); color: var(--sand-700); padding: var(--s1) var(--s2); border-radius: var(--r-pill); font-size: var(--fs-th); display: inline-block; }
.sc-empty { text-align: center; padding: var(--s8) var(--s5); color: var(--sand-700); }
.sc-empty strong { display: block; color: var(--teal-600); }
.sc-empty button { color: var(--teal-600); background: var(--sand-50); border: 1px solid var(--teal-600); border-radius: var(--r-sm); padding: var(--s2) var(--s4); margin-top: var(--s4); }
.sc-year { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s4); padding: var(--s4); }
.sc-year section { border: 1px solid var(--sand-300); background: var(--sand-100); border-radius: var(--r-sm); padding: var(--s3); min-height: 140px; }
.sc-year h3 { font-size: var(--fs-small); color: var(--teal-600); margin: 0 0 var(--s3); }
.sc-hint { font-size: var(--fs-th); color: var(--sand-700); line-height: 1.6; }
.sc-message { color: var(--teal-600); font-size: var(--fs-small); margin-bottom: var(--s4); }
.sc-message:empty { display: none; }
.sc-dialog { width: min(540px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; border: 1px solid var(--sand-300); border-radius: var(--r-lg); padding: var(--s6); background: var(--sand-50); color: var(--sea-ink); box-shadow: var(--shadow); }
.sc-dialog::backdrop { background: color-mix(in srgb,var(--teal-900) 42%,transparent); backdrop-filter: blur(3px); }
.sc-dialog h2 { font-size: var(--fs-h2); color: var(--teal-600); margin: var(--s1) 0 var(--s3); padding-inline-end: var(--s5); }
.sc-close { position: absolute; top: var(--s3); inset-inline-end: var(--s3); display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; padding: var(--s2); color: var(--sand-700); }
.sc-close:hover { background: var(--sand-200); }
.sc-share-subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--sand-700); font-size: var(--fs-small); margin-top: 0; }
.sc-access-badge { display: inline-flex; align-items: center; gap: var(--s1); color: var(--teal-700); background: var(--teal-50); padding: var(--s1) var(--s2); border-radius: var(--r-pill); font-size: var(--fs-th); }
.sc-access-badge svg { width: 16px; height: 16px; }
.sc-permanent { display: flex; align-items: flex-start; gap: var(--s3); background: var(--sand-200); border-radius: var(--r-sm); padding: var(--s4); margin: var(--s5) 0; }
.sc-permanent > svg { color: var(--teal-600); margin-top: 2px; }
.sc-permanent strong { font-size: var(--fs-small); color: var(--teal-600); }
.sc-permanent p { font-size: var(--fs-th); color: var(--sand-700); margin: var(--s1) 0 0; line-height: 1.65; }
.sc-dialog h3 { font-size: var(--fs-small); color: var(--teal-600); margin: var(--s5) 0 var(--s2); }
.sc-person { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--sand-300); }
.sc-person-avatar { display: grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; border-radius: var(--r-pill); color: var(--teal-600); background: var(--teal-50); }
.sc-person-info { flex: 1; min-width: 0; }
.sc-person strong { display: block; font-size: var(--fs-small); }
.sc-person small { display: block; font-size: var(--fs-th); color: var(--sand-700); margin-top: var(--s1); }
.sc-revoke { border: 1px solid var(--clay-dark); color: var(--clay-dark); background: transparent; border-radius: var(--r-sm); padding: var(--s2) var(--s3); white-space: nowrap; font-size: var(--fs-th)!important; }
.sc-revoke:hover { background: var(--clay-tint-50); }
.sc-share-form { display: flex; flex-direction: column; margin-top: var(--s5); gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--sand-300); }
.sc-share-form label { font-size: var(--fs-small); font-weight: 600; }
.sc-share-form select { min-height: var(--tap); padding: var(--s3); border: 1px solid var(--sand-500); border-radius: var(--r-sm); background: var(--sand-50); color: var(--sea-ink); max-width: 100%; }
.sc-share-form .sc-hint { margin: var(--s1) 0 var(--s3); }
.sc-share-message { font-size: var(--fs-small); color: var(--teal-600); margin-top: var(--s3); }
.sc-description { white-space: pre-wrap; line-height: 1.8; font-size: var(--fs-small); margin-bottom: var(--s5); }
.sc-dialog dl { display: grid; grid-template-columns: 55px minmax(0,1fr); font-size: var(--fs-small); gap: var(--s3); margin: var(--s5) 0; }
.sc-dialog dt { color: var(--sand-700); }
.sc-dialog dd { margin: 0; }
.shared-calendars :focus-visible { outline: 3px solid var(--teal-600); outline-offset: 3px; }
.shared-calendars button:disabled { opacity: .5; cursor: default; }
@media(max-width:1100px) {
  .sc-layout { grid-template-columns: 210px minmax(0,1fr); gap: var(--s4); }
  .sc-header { align-items: flex-start; flex-wrap: wrap; }
  .sc-day { min-height: 135px; }
}
@media(max-width:700px) {
  .shared-calendars { padding: var(--s3); border-radius: var(--r-md); }
  .sc-header { flex-direction: column; gap: var(--s4); margin-bottom: var(--s4); }
  .sc-header-title { align-items: flex-start; gap: var(--s3); }
  .sc-page-icon { width: var(--s7); height: var(--s7); border-radius: var(--r-sm); }
  .sc-page-icon svg { width: 26px; height: 26px; }
  .sc-header h1 { font-size: var(--fs-h2); }
  .sc-header p { font-size: var(--fs-th); }
  .sc-header-actions { flex-wrap: wrap; width: 100%; }
  .sc-header-actions button { flex: 1; padding: var(--s2) var(--s3); font-size: var(--fs-small); }
  .sc-toolbar { margin-bottom: var(--s4); }
  .sc-toolbar-top { padding: var(--s3); gap: var(--s3); }
  .sc-search { order: -1; flex-basis: 100%; max-width: none; }
  .sc-view-tabs { width: 100%; }
  .sc-view-tabs button { flex: 1; padding: var(--s2); font-size: var(--fs-small); }
  .sc-filters { padding: var(--s3); gap: var(--s2); }
  .sc-filters-title { flex-basis: 100%; font-size: var(--fs-th); }
  .sc-toolbar select { flex: 1 1 calc(50% - var(--s2)); min-width: 130px; width: 130px; font-size: var(--fs-th); }
  .sc-layout { display: flex; flex-direction: column; gap: var(--s4); }
  .sc-sidebar { width: 100%; }
  .sc-calendar-group { display: flex; flex-wrap: wrap; gap: 0 var(--s2); padding: var(--s3) 0; }
  .sc-calendar-group h3 { width: 100%; margin-bottom: var(--s2); }
  .sc-calendar-choice { flex: 1 1 220px; max-width: 100%; }
  .sc-layer-group { display: flex; flex-wrap: wrap; gap: 0 var(--s3); padding-top: var(--s3); }
  .sc-layer-group h3 { width: 100%; margin-bottom: var(--s1); }
  .sc-layer-group label { font-size: var(--fs-th); }
  .sc-access-note { margin-top: var(--s3); }
  .sc-board { width: 100%; }
  .sc-board-heading { padding: var(--s4); flex-wrap: wrap; }
  .sc-board-heading h2 { font-size: var(--fs-h3); }
  /* Preserve legible event titles: the month/week grid scrolls inside the card. */
  .sc-board:has(.sc-grid) { overflow-x: auto; }
  .sc-grid-hint { display: block; position: sticky; inset-inline-start: 0; color: var(--sand-700); background: var(--sand-100); padding: var(--s2) var(--s4); font-size: var(--fs-th); border-top: 1px solid var(--sand-300); }
  .sc-board-heading { position: sticky; inset-inline-start: 0; }
  .sc-weekdays, .sc-grid { min-width: 700px; }
  .sc-day { min-height: 125px; padding: var(--s2) var(--s1); }
  .sc-list-item { gap: var(--s2); padding: var(--s3); }
  .sc-list-place { display: none; }
  .sc-year { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s2); padding: var(--s3); }
  .sc-dialog { padding: var(--s5); }
  .sc-person { flex-wrap: wrap; gap: var(--s2); }
}
@media(prefers-reduced-motion:reduce) { .shared-calendars { scroll-behavior: auto; } }