/* Event detail in the left panel. Stream C. Colours from tokens.css only. */

.detail { display: grid; gap: 12px; min-width: 0; }
.detail h2 { font-size: 1.3rem; margin: 0; overflow-wrap: anywhere; }
.detail h2:focus { outline: none; }
.detail h3 { font-size: .95rem; margin: 6px 0 0; }
.detail .place { margin: 0; color: var(--muted); }
.back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; justify-self: start; }

.deadline { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); }
.deadline p { margin: 0 0 4px; }
.dl-main { font-size: 1.15rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dl-main.urgent { color: var(--urgent); }
.dl-main.soon { color: var(--soon); }
.dl-time { font-family: var(--font-mono); font-weight: 500; font-size: .9rem; }
.dl-time .muted { font-family: var(--font-sans); font-weight: 400; }

.links { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent); text-decoration: none; font-weight: 600;
}
.btn-link:hover { border-color: var(--accent); }
.btn-link.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* The four dates, top to bottom with a rail down the left. */
.fourpoint { list-style: none; margin: 0; padding: 0; display: grid; }
.fp { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 6px 0 10px 24px; }
.fp::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: -6px; width: 2px; background: var(--line); }
.fp:last-child::before { display: none; }
.fp-dot { position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); background: var(--surface); }
.fp.next .fp-dot { border-color: var(--accent); background: var(--accent); }
.fp.past .fp-dot { background: var(--muted); }
.fp-label { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.fp-date { font-family: var(--font-mono); font-weight: 500; font-size: .85rem; text-align: right; align-self: center; }
.fp-rel { grid-column: 1 / -1; font-size: .8rem; }
.fp.past .fp-label, .fp.past .fp-date { color: var(--muted); }

.excerpt blockquote { margin: 0 0 6px; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--text); overflow-wrap: anywhere; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pill-topic { background: var(--accent-tint); color: var(--accent); }

.dslot { display: grid; gap: 8px; }
.dslot:empty { display: none; }

/* What to do next (detail:actions), under the deadline: a row with a one-line
   reason and the buttons, and a small row for what is not the next step. One
   button is filled. On a phone the row is pinned to the bottom of the sheet (the
   host and its wrapper take no box, so the row is a grid item of .detail and
   sticks against it); the small row scrolls. */
.tr-act { display: grid; gap: 8px; }
.tr-why { margin: 0; font-size: .92rem; }
.dslot-actions .tr-quick, .dslot-actions .actions, .tr-minor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The first line of the row: the reason, and where the event stands as a control
   at its right. On a phone the whole row is the pinned bar. */
.tr-head { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; }
.tr-head > .tr-why { flex: 1 1 0; min-width: 0; }
.tr-quick > button, .tr-quick > .btn-link { min-height: 48px; padding: 0 14px; }
.tr-quick > button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Where the event stands: a quiet outline, so the filled button stays the one thing to press. */
.tr-head > .tr-status {
  flex: none; margin-left: auto; min-height: 44px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line); color: var(--text); font-weight: 600;
}
/* "Already sent it?" is quiet: text in the accent color. */
.tr-minor { gap: 0 18px; }
.tr-minor > button { padding: 0; border-color: transparent; background: transparent; color: var(--accent); font-weight: 600; }
.tr-minor > button:hover { text-decoration: underline; }
.tr-minor > button[aria-pressed="true"] { color: var(--text); }
.tr-q-open::after { content: ' ↗'; content: ' ↗' / ''; }
@media (max-width: 899px) {
  .dslot-actions, .tr-act { display: contents; }
  .tr-quick {
    /* Sticky offsets are measured inside the panel body's 14 px padding, so bottom is -14px to meet the sheet's edge. */
    order: 100; position: sticky; bottom: -14px; z-index: 3; margin: 0 -14px; padding: 10px 14px;
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .tr-head > .tr-why { font-size: .82rem; line-height: 1.25; color: var(--muted); }
}

/* The calendar links are one menu; the event's site is a plain link. */
.links.small { align-items: center; gap: 0 20px; font-size: .9rem; }
.cal-menu > summary, .textlink {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; cursor: pointer;
}
.cal-menu > summary { list-style: none; }
.cal-menu > summary::-webkit-details-marker { display: none; }
.cal-menu > summary::after { content: ' ▾'; content: ' ▾' / ''; }
.cal-menu[open] > summary::after { content: ' ▴'; content: ' ▴' / ''; }
.cal-menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.cal-menu li a { display: flex; align-items: center; min-height: 44px; }
.textlink::after { content: ' ↗'; content: ' ↗' / ''; }

/* Rows that open in place: About this event, Note/reminders/ignore. */
.drow { border-top: 1px solid var(--line); }
.drow > summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; cursor: pointer; list-style: none;
}
.drow > summary::-webkit-details-marker { display: none; }
.drow > summary::after { content: '▸'; content: '▸' / ''; color: var(--muted); }
.drow[open] > summary::after { content: '▾'; content: '▾' / ''; }
.drow > summary .muted { margin-left: auto; font-weight: 400; font-size: .85rem; }
.drow:not(:has(> summary .muted)) > summary::after { margin-left: auto; }
.drow[open] { padding-bottom: 10px; }
.drow > .chips { margin-top: 2px; }
.trip { margin: 0; }
.timeoff { margin: 0; padding-left: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.home-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 8px; }
.home-results { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.home-results button { width: 100%; text-align: left; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

/* Where the deadline came from, one line under it. */
.dl-basis { margin: 2px 0 0; color: var(--muted); }
.dl-basis-listed { color: var(--soon); }
.dl-moved { margin: 2px 0 0; color: var(--text); }
.dl-moved-earlier { color: var(--urgent); font-weight: 600; }

/* Source and freshness, and Around this event: two closed rows. */
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.src-list li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 4px 10px; }
.src-k { color: var(--muted); font-size: .85rem; }
.src-v { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.src-level { font-weight: 600; }
.src-confirmed::before, .src-checked::before { content: '\2713  '; }
.src-seen::before, .src-yours::before { content: '\25CB  '; }
.src-listed::before, .src-assumed::before, .src-date-only::before, .src-stale::before { content: '\24D8  '; }
.src-missing::before, .src-gone::before, .src-unknown::before { content: '?  '; }
.src-listed, .src-assumed, .src-date-only, .src-stale { color: var(--soon); }
.src-missing, .src-gone { color: var(--urgent); }
.src-caution { color: var(--soon); font-weight: 600; }
.rep-kinds { display: grid; gap: 4px; margin: 8px 0; }
.rep-kind { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 4px 0; }
.rep-kind input { margin-top: 6px; flex: none; }
.rep-kind label { display: grid; gap: 2px; }

.trip-body { display: grid; gap: 10px; padding-top: 6px; }
.trip-summary { margin: 0; font-weight: 600; }
.trip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trip-row { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; }
.trip-row.trip-same-trip { border-left-color: var(--st-accepted-fg); }
.trip-row.trip-overlap { border-left-color: var(--urgent); }
.trip-name { font-weight: 600; overflow-wrap: anywhere; }
.trip-rel { font-size: .9rem; }
.trip-overlap .trip-rel { color: var(--urgent); font-weight: 600; }
.trip-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tr-explain { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.src > .tr-row { margin-top: 12px; }