/* An everyday check-in reads like a conversation, with the source beside the action. */
.ec-panel { display: grid; gap: 10px; min-width: 0; width: min(100%, 1040px); color: #242424; overflow-wrap: anywhere; }
.ec-panel h2, .ec-panel h3, .ec-panel p, .ec-panel blockquote { margin: 0; }
.ec-panel button { font: 500 11px/1.2 var(--font); }
.ec-kicker { color: #898985; font: 500 10px/1.35 var(--mono); letter-spacing: .025em; text-transform: uppercase; }

.ec-moment { position: relative; padding: 27px 29px 29px; overflow: hidden; border: 1px solid #e3e3e0; border-radius: 5px; background: #f8f8f5; }
.ec-moment::after { position: absolute; right: 29px; bottom: -37px; width: 155px; height: 155px; border: 1px solid #ecece8; border-radius: 50%; content: ''; pointer-events: none; }
.ec-moment-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ec-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #dededb; border-radius: 3px; background: #fff; color: #64645f; font-size: 10px; white-space: nowrap; }
.ec-badge > span { width: 6px; height: 6px; border-radius: 50%; background: #7c8c77; }
.ec-panel--pause .ec-badge > span { background: #ac8b75; }
.ec-panel--learn .ec-badge > span { background: #aaa29b; }
.ec-moment h2 { position: relative; z-index: 1; max-width: 720px; margin-top: 19px; color: #191919; font: 500 clamp(28px, 3vw, 39px)/1.1 var(--display); letter-spacing: -.06em; }
.ec-moment > p { position: relative; z-index: 1; max-width: 680px; margin-top: 12px; color: #666; font-size: 13px; line-height: 1.6; }

.ec-context-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.ec-context-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 21px 23px 18px; border: 1px solid #e6e6e3; border-radius: 5px; background: #fff; }
.ec-context-card h3 { margin-top: 9px; color: #262626; font-size: 16px; font-weight: 600; letter-spacing: -.035em; }
.ec-context-card > p { max-width: 590px; margin-top: 8px; color: #60605d; font-size: 12px; line-height: 1.55; }
.ec-source { width: 100%; margin-top: 14px; padding: 11px 13px 10px; border-left: 2px solid #a6b4a5; background: #f8f9f6; }
.ec-source blockquote { color: #303431; font: 400 13px/1.55 var(--font); overflow-wrap: anywhere; }
.ec-source-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; margin-top: 7px; }
.ec-source small { color: #858983; font: 400 10px/1.45 var(--font); }
.ec-source-foot button { padding: 0; border: 0; background: transparent; color: #52604f; font-size: 10px; text-decoration: underline; text-decoration-color: #a6b6a0; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine){.ec-source-foot button:hover { color: #263424; text-decoration-color: currentColor; }}
.ec-source--compact { border-left-color: #c5c9bf; background: #fafaf8; }
.ec-source--compact blockquote { font-size: 12px; }
.ec-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 17px; }
.ec-card-actions button { padding: 0; border: 0; background: transparent; color: #535b51; text-decoration: underline; text-decoration-color: #c3cbc0; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine){.ec-card-actions button:hover { color: #1f3024; text-decoration-color: currentColor; }}

.ec-action { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 20px; padding: 22px 23px; border: 1px solid #dededa; border-radius: 5px; background: #f6f7f3; }
.ec-action-copy { min-width: 0; }
.ec-action-copy h3 { margin-top: 9px; color: #20221f; font-size: 17px; font-weight: 600; letter-spacing: -.04em; }
.ec-action-copy > p { margin-top: 8px; color: #5f665d; font-size: 12px; line-height: 1.6; }
.ec-caution { display: block; margin-top: 12px; padding-left: 9px; border-left: 2px solid #aa9c88; color: #615b50; font-size: 11px; font-weight: 500; line-height: 1.5; }
.ec-timing { display: inline-block; margin-top: 16px; padding: 6px 9px; border: 1px solid #dce1d8; border-radius: 3px; background: #fff; color: #677065; font-size: 10px; }
.ec-compose { min-width: 0; padding: 13px; border: 1px solid #dedfd9; border-radius: 4px; background: #fff; }
.ec-compose-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 0 2px 9px; }
.ec-compose-head strong { color: #333; font-size: 11px; font-weight: 600; }
.ec-compose-head span { color: #8a8b86; font-size: 10px; white-space: nowrap; }
.ec-compose textarea { display: block; width: 100%; min-height: 86px; padding: 11px 12px; resize: vertical; border: 1px solid #e3e5e0; border-radius: 3px; outline: 0; background: #fbfbfa; color: #242424; font: 400 12px/1.55 var(--font); }
.ec-compose textarea::placeholder { color: #a2a6a0; }
.ec-compose textarea:focus { border-color: #a1ab9b; background: #fff; box-shadow: 0 0 0 3px #a1ab9b20; }
.ec-compose-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 9px; }
.ec-tone { max-width: 240px; color: #858985; font-size: 10px; line-height: 1.4; }
.ec-save-feedback { display: flex; align-items: baseline; gap: 10px; min-height: 16px; margin-top: 7px; color: #696e66; font: 400 10px/1.5 var(--font); }
.ec-save-feedback button { min-height: 28px; padding: 3px 7px; border: 1px solid #d7d9d3; border-radius: 6px; background: #fff; color: #374b37; }
.ec-compose [hidden] { display: none !important; }
.ec-compose-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ec-compose-buttons button { min-height: 31px; padding: 7px 10px; border: 1px solid #dededa; border-radius: 3px; background: #fff; color: #4d524a; white-space: nowrap; }
@media (hover: hover) and (pointer: fine){.ec-compose-buttons button:hover { border-color: #aaa; color: #222; }}
.ec-compose-buttons .ec-discard { border-color: transparent; color: #85857f; }
@media (hover: hover) and (pointer: fine){.ec-compose-buttons .ec-discard:hover { border-color: #ddd; color: #484844; }}
.ec-compose-buttons .ec-button-primary { border-color: #272925; background: #272925; color: #fff; }
@media (hover: hover) and (pointer: fine){.ec-compose-buttons .ec-button-primary:hover { border-color: #40423e; background: #40423e; color: #fff; }}
.ec-pause { align-self: stretch; padding: 16px 18px; border: 1px solid #dedfd9; border-radius: 4px; background: #fff; }
.ec-pause strong { display: block; color: #343a34; font-size: 12px; font-weight: 600; }
.ec-pause p { margin-top: 7px; color: #6a6e68; font-size: 11px; line-height: 1.55; }
.ec-pause .ec-hidden-draft { margin-top: 12px; padding: 8px 10px; border: 1px solid #e6e7e2; border-radius: 3px; background: #f8f9f6; color: #636961; }
.ec-pause-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 17px; }
.ec-pause button { padding: 0; border: 0; background: transparent; color: #485b48; text-decoration: underline; text-decoration-color: #bbc8ba; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine){.ec-pause button:hover { color: #222; }}

.ec-follow { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 19px 23px 20px; border: 1px solid #e6e6e3; border-radius: 5px; background: #fff; }
.ec-follow > div { min-width: 0; }
.ec-follow h3 { margin-top: 8px; color: #242424; font-size: 14px; font-weight: 600; letter-spacing: -.025em; }
.ec-follow p { margin-top: 5px; color: #6b6b68; font-size: 11px; line-height: 1.55; }
.ec-follow-question { display: block; margin-top: 8px; color: #4d584d; font-size: 11px; font-weight: 500; }
.ec-follow > button { flex: 0 0 auto; margin-top: 4px; padding: 8px 10px; border: 1px solid #dfdfdc; border-radius: 3px; background: #fff; color: #4a5049; }
@media (hover: hover) and (pointer: fine){.ec-follow > button:hover { border-color: #aaa; color: #222; }}
.ec-outcome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 9px; margin-top: 12px !important; padding-top: 10px; border-top: 1px solid #ecece9; }
.ec-outcome span { color: #92928f; font-size: 10px; }
.ec-outcome strong { color: #454b43; font-size: 10px; font-weight: 600; }
.ec-outcome small { display: block; flex-basis: 100%; color: #6a6a67; font-size: 10px; }
.ec-uncertainty { padding: 2px 4px; color: #777; }
.ec-uncertainty summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 260px; padding: 6px 2px; color: #666; font-size: 11px; cursor: pointer; list-style: none; }
.ec-uncertainty summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine){.ec-uncertainty summary:hover { color: #222; }}
.ec-uncertainty summary span { font-size: 17px; line-height: 1; }
.ec-uncertainty[open] summary span { transform: rotate(45deg); }
.ec-uncertainty > p { max-width: 720px; margin: 7px 0; color: #72736f; font-size: 11px; line-height: 1.55; }
.ec-uncertainty ul { margin: 7px 0 12px; padding-left: 18px; }
.ec-uncertainty li { margin: 4px 0; color: #72736f; font-size: 11px; line-height: 1.5; }

@media (max-width: 900px) {
  .ec-action { grid-template-columns: 1fr; gap: 17px; }
  .ec-compose-foot { align-items: stretch; }
}
@media (max-width: 680px) {
  .ec-context-grid { grid-template-columns: 1fr; }
  .ec-context-card { min-height: 0; }
  .ec-moment { padding: 22px 21px 24px; }
  .ec-moment::after { opacity: .55; }
  .ec-moment h2 { font-size: 28px; }
  .ec-action, .ec-follow { padding: 19px 20px; }
  .ec-follow { flex-direction: column; gap: 12px; }
  .ec-follow > button { margin-top: 0; }
}
@media (max-width: 500px) {
  .ec-moment-top { align-items: flex-start; flex-direction: column; }
  .ec-moment h2 { margin-top: 16px; }
  .ec-compose-head, .ec-compose-foot { align-items: flex-start; flex-direction: column; }
  .ec-compose-buttons { justify-content: flex-start; }
  .ec-context-card { padding: 19px; }
}
@media (prefers-reduced-motion: reduce) { .ec-panel * { scroll-behavior: auto; } }