/* A quiet appointment card: identity, date, work and notification recipients. */
#seafix-demo #sf-layover-services-panel > .sf-planning-heading { margin-bottom:18px; }
#seafix-demo #sf-service-list { gap:18px; align-items:stretch; }
#seafix-demo .sf-service-visit {
  position:relative; gap:18px; padding:23px; border-radius:20px; overflow:hidden;
  background:linear-gradient(145deg,var(--sf-surface),var(--sf-surface-raised));
  box-shadow:0 1px 0 rgb(255 255 255 / .035) inset,0 6px 22px rgb(0 0 0 / .025);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
#seafix-demo .sf-service-visit::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--sf-heading); opacity:.18; }
#seafix-demo .sf-service-identity { gap:13px; }
@media(min-width:1101px) {
  #seafix-demo .sf-service-visit .sf-service-identity { min-height:66px; }
}
#seafix-demo .sf-service-monogram {
  width:48px; height:48px; border-radius:15px; border-color:color-mix(in srgb,var(--sf-heading) 18%,var(--sf-line));
  background:var(--sf-surface); box-shadow:0 0 0 4px color-mix(in srgb,var(--sf-heading) 3%,transparent);
  font-size:15px; font-weight:600; letter-spacing:-.5px;
}
#seafix-demo .sf-service-identity-copy small { margin:0 0 5px; font-size:9px; font-weight:600; letter-spacing:1.05px; text-transform:uppercase; }
#seafix-demo .sf-service-identity-copy strong { font-size:16px; line-height:1.45; letter-spacing:-.2px; }
#seafix-demo .sf-service-open-mark { display:grid; place-items:center; flex:none; width:29px; height:29px; align-self:flex-start; border:1px solid var(--sf-line); border-radius:50%; color:var(--sf-muted); background:var(--sf-surface); }
#seafix-demo .sf-service-open-mark svg { width:14px!important; height:14px!important; }
#seafix-demo .sf-service-appointment { display:flex; flex-wrap:nowrap; align-items:center; gap:14px; margin:0; padding:15px; border:1px solid var(--sf-line); border-radius:13px; background:var(--sf-surface); }
#seafix-demo .sf-service-date-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; min-width:60px; padding-right:14px; border-right:1px solid var(--sf-line); }
#seafix-demo .sf-service-appointment .sf-service-date-tile strong { padding:0; margin:0; border:0; background:none; color:var(--sf-heading); font-size:32px; line-height:1.05; font-weight:500; letter-spacing:-1.1px; }
#seafix-demo .sf-service-date-tile > span { display:block; margin-top:5px; color:var(--sf-muted); font-size:9px; font-weight:500; line-height:1.4; text-align:center; }
#seafix-demo .sf-service-date-copy { display:flex; flex:1; min-width:0; flex-direction:column; align-items:flex-start; gap:3px; }
#seafix-demo .sf-service-date-copy > span { color:var(--sf-muted); font-size:10px; font-weight:400; line-height:1.5; text-transform:capitalize; overflow-wrap:anywhere; }
#seafix-demo .sf-service-appointment .sf-service-date-copy strong { margin:0; padding:0; background:none; font-size:20px; line-height:1.2; font-weight:500; letter-spacing:-.6px; color:var(--sf-heading); }
#seafix-demo .sf-service-appointment > svg { flex:none; width:20px!important; height:20px!important; opacity:.6; }
#seafix-demo .sf-service-preview { min-height:40px; font-size:12px; line-height:1.7; color:var(--sf-text); opacity:.8; }
#seafix-demo .sf-service-visit-footer { gap:12px; padding-top:15px; border-top:1px solid var(--sf-line); font-size:10px; }
#seafix-demo :is(.sf-service-reminder-summary,.sf-service-crew-summary) { display:inline-flex; align-items:center; gap:6px; min-width:0; }
#seafix-demo :is(.sf-service-reminder-summary,.sf-service-crew-summary) > span { font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
#seafix-demo :is(.sf-service-reminder-summary,.sf-service-crew-summary) svg { width:13px!important; height:13px!important; flex:none; }
#seafix-demo .sf-service-crew-summary { flex:none; }
#seafix-demo .sf-service-visit--past::before { opacity:.07; }
#seafix-demo .sf-service-visit--past .sf-service-monogram { color:var(--sf-muted); }
#seafix-demo .sf-service-card { padding:28px; border-radius:20px; box-shadow:0 6px 24px rgb(0 0 0 / .02); }
#seafix-demo .sf-service-card-heading { margin-bottom:24px; }
#seafix-demo .sf-service-card-heading .sf-service-identity-copy strong { font-size:22px; line-height:1.35; }
#seafix-demo .sf-service-detail-schedule { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#seafix-demo .sf-service-detail-reminder { display:flex; align-items:center; gap:12px; padding:16px; background:var(--sf-surface-raised); border:1px solid var(--sf-line); border-radius:13px; }
#seafix-demo .sf-service-detail-reminder > svg { flex:none; width:21px!important; height:21px!important; color:var(--sf-muted); }
#seafix-demo .sf-service-detail-reminder > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
#seafix-demo .sf-service-detail-reminder span { color:var(--sf-muted); font-size:10px; line-height:1.4; }
#seafix-demo .sf-service-detail-reminder strong { color:var(--sf-heading); font-size:13px; line-height:1.5; font-weight:500; overflow-wrap:anywhere; }
#seafix-demo .sf-service-description { padding:23px 0; }
#seafix-demo .sf-service-description h3,#seafix-demo .sf-service-audience-section h3 { margin:0; color:var(--sf-muted); font-size:11px; font-weight:500; line-height:1.5; }
#seafix-demo .sf-service-description p { margin:9px 0 0; color:var(--sf-text); font-size:13px; line-height:1.8; }
#seafix-demo .sf-service-audience-section { margin:0 0 24px; padding-top:18px; border-top:1px solid var(--sf-line); }
#seafix-demo .sf-service-audience-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
#seafix-demo .sf-service-audience { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:6px 9px; border:1px solid var(--sf-line); border-radius:8px; background:var(--sf-surface-raised); color:var(--sf-text); font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
#seafix-demo .sf-service-audience svg { flex:none; width:13px!important; height:13px!important; }
#seafix-demo .sf-service-audience small { display:inline; padding-left:4px; color:var(--sf-muted); font-size:9px; line-height:inherit; }
#seafix-demo .sf-service-state { display:inline-flex; align-items:center; gap:6px; }
#seafix-demo .sf-service-state > span { width:5px; height:5px; border-radius:50%; background:var(--sf-muted); }
#seafix-demo .sf-service-create.sf-planning-form { max-width:none; margin:0; padding:0; border:0; }
#seafix-demo .sf-service-reminder-settings { display:grid; gap:10px; margin:14px 0 3px; padding:18px; border:1px solid var(--sf-line); border-radius:14px; background:var(--sf-surface-raised); }
#seafix-demo .sf-service-setting-heading { display:flex; align-items:center; gap:10px; margin-bottom:3px; }
#seafix-demo .sf-service-setting-icon { display:grid; place-items:center; flex:none; width:31px; height:31px; border:1px solid var(--sf-line); border-radius:10px; background:var(--sf-surface); color:var(--sf-muted); }
#seafix-demo .sf-service-setting-icon svg { width:16px!important; height:16px!important; }
#seafix-demo #sf-service-form label.sf-service-reminder { display:flex; flex:1; flex-direction:row-reverse; justify-content:space-between; gap:12px; margin:0; color:var(--sf-heading); font-size:12px; font-weight:500; }
#seafix-demo .sf-service-reminder span { font:inherit; }
#seafix-demo .sf-service-reminder input { flex:none; width:18px!important; height:18px!important; margin:0!important; }
#seafix-demo #sf-service-form .sf-service-reminder-settings > label { margin:0; font-size:11px; }
#seafix-demo #sf-service-reminder-minutes { width:100%; min-width:0; box-sizing:border-box; min-height:42px; padding:10px 12px; border:1px solid var(--sf-line); border-radius:10px; background:var(--sf-surface); color:var(--sf-heading); font:inherit; font-size:13px; }
#seafix-demo #sf-service-reminder-minutes:disabled { opacity:.5; }
#seafix-demo .sf-service-field-note { margin:0; color:var(--sf-muted); font-size:11px; line-height:1.7; }
#seafix-demo .sf-service-recipients { min-width:0; margin:8px 0 13px; padding:0; border:0; }
#seafix-demo .sf-service-recipients legend { margin:0 0 8px; padding:0; color:var(--sf-heading); font-size:12px; font-weight:500; }
#seafix-demo .sf-service-departments { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
#seafix-demo #sf-service-form .sf-service-department { position:relative; display:inline-flex; margin:0; cursor:pointer; }
#seafix-demo .sf-service-department input { position:absolute; width:1px!important; height:1px!important; margin:0!important; opacity:0; }
#seafix-demo .sf-service-department > span { display:inline-flex; align-items:center; gap:6px; min-height:36px; box-sizing:border-box; padding:8px 10px; border:1px solid var(--sf-line); border-radius:9px; color:var(--sf-muted); background:var(--sf-surface); font-size:10px; line-height:1.4; font-weight:500; }
#seafix-demo .sf-service-department svg { flex:none; width:14px!important; height:14px!important; }
#seafix-demo .sf-service-department .sf-service-department-check { width:11px!important; height:11px!important; opacity:0; }
#seafix-demo .sf-service-department input:checked + span .sf-service-department-check { opacity:1; }
#seafix-demo .sf-service-department input:focus-visible + span { outline:2px solid var(--sf-heading); outline-offset:3px; }
#seafix-demo :is(.sf-service-department--engine,.sf-service-audience--engine) { --service-dept:#c94e55; }
#seafix-demo :is(.sf-service-department--deck,.sf-service-audience--deck) { --service-dept:#397ace; }
#seafix-demo :is(.sf-service-department--hotel,.sf-service-audience--hotel) { --service-dept:#26836b; }
#seafix-demo .sf-service-department input:checked + span,#seafix-demo :is(.sf-service-audience--engine,.sf-service-audience--deck,.sf-service-audience--hotel) { color:color-mix(in srgb,var(--service-dept) 83%,var(--sf-heading)); border-color:color-mix(in srgb,var(--service-dept) 30%,var(--sf-line)); background:color-mix(in srgb,var(--service-dept) 8%,var(--sf-surface)); }
#seafix-demo .sf-service-recipient-picker { margin-top:4px; }
#seafix-demo #sf-service-recipient-chips .sf-participant-chip { max-width:100%; }
#seafix-demo #sf-service-recipient-chips .sf-participant-chip > span:nth-child(2) { min-width:0; overflow-wrap:anywhere; }
#seafix-demo #sf-service-recipient-options .sf-participant-person { margin:0; }
#seafix-demo #sf-service-back[hidden] { display:none!important; }
@media(hover:hover) and (pointer:fine) {
  #seafix-demo .sf-service-visit:hover { border-color:color-mix(in srgb,var(--sf-heading) 45%,var(--sf-line)); transform:translateY(-2px); box-shadow:0 9px 25px rgb(0 0 0 / .06); }
  #seafix-demo .sf-service-visit:hover .sf-service-open-mark { color:var(--sf-heading); border-color:var(--sf-muted); }
}
@media(max-width:600px) {
  #seafix-demo .sf-service-visit { padding:18px; gap:16px; }
  #seafix-demo .sf-service-card { padding:18px; }
  #seafix-demo .sf-service-monogram { width:41px; height:41px; border-radius:13px; font-size:12px; }
  #seafix-demo .sf-service-identity { gap:11px; }
  #seafix-demo .sf-service-identity-copy strong { font-size:14px; }
  #seafix-demo .sf-service-identity-copy small { font-size:8px; letter-spacing:.8px; }
  #seafix-demo .sf-service-appointment { padding:13px; gap:12px; }
  #seafix-demo .sf-service-card-heading .sf-service-identity-copy strong { font-size:17px; }
  #seafix-demo .sf-service-detail-schedule { grid-template-columns:minmax(0,1fr); gap:10px; }
  #seafix-demo .sf-service-detail-reminder { padding:13px; }
  #seafix-demo .sf-service-reminder-settings { padding:14px; }
  #seafix-demo .sf-service-open-mark { width:25px; height:25px; }
  #seafix-demo .sf-service-audience--organizer { flex-wrap:wrap; }
}
@media(max-width:359px) {
  #seafix-demo .sf-service-visit,#seafix-demo .sf-service-card { padding:15px; }
  #seafix-demo .sf-service-identity { gap:9px; }
  #seafix-demo .sf-service-monogram { width:35px; height:35px; border-radius:11px; font-size:11px; }
  #seafix-demo .sf-service-open-mark { display:none; }
  #seafix-demo .sf-service-date-tile { min-width:52px; padding-right:12px; }
  #seafix-demo .sf-service-visit-footer { gap:8px; }
}
@media(prefers-reduced-motion:reduce) {
  #seafix-demo .sf-service-visit { transition:none; }
  #seafix-demo .sf-service-visit:hover { transform:none; }
}