/* Annotations page in the redesign (flag new_ui); drawn by js/views/annotations-ui.js. */
body:not(.new-ui) #annPage { display: none; }
body.new-ui #viewAnnotations > h1,
body.new-ui #viewAnnotations > .sub,
body.new-ui #annEmpty,
body.new-ui #annBody { display: none !important; }

body.new-ui .ann2-page .ann2-grid { align-items: start; }
body.new-ui .ann2-page .ann2-grid > .ui-kpi { align-self: stretch; }
body.new-ui .ann2-page .ann2-muted { color: var(--ui-ink-2); font-size: 13.5px; }
body.new-ui .ann2-page .ann2-empty-t { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ui-ink); }

/* Timeline: date, what was done, what the runs after it show. */
body.new-ui .ann2-page .ann2-list { list-style: none; margin: 0; padding: 0 0 8px; }
body.new-ui .ann2-page .ann2-month { padding: 14px 20px 6px; font-size: 12.5px; font-weight: 500; color: var(--ui-ink-3); border-bottom: 1px solid var(--ui-line-2); }
body.new-ui .ann2-page .ann2-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--ui-line-2); transition: background .3s ease; }
body.new-ui .ann2-page .ann2-item.ann2-focus { background: var(--ui-accent-soft); }
body.new-ui .ann2-page .ann2-item time { display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
body.new-ui .ann2-page .ann2-item time b { font: 600 18px var(--ui-mono); line-height: 1.1; }
body.new-ui .ann2-page .ann2-item time span { font-size: 12px; color: var(--ui-ink-3); }
body.new-ui .ann2-page .ann2-main { min-width: 0; }
body.new-ui .ann2-page .ann2-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
body.new-ui .ann2-page .ann2-head strong { font-weight: 500; font-size: 14.5px; }
body.new-ui .ann2-page .ann2-type { font-size: 11.5px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--ui-line); color: var(--ui-ink-2); }
body.new-ui .ann2-page .ann2-url { display: block; margin-top: 2px; font-size: 13px; color: var(--ui-accent-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.new-ui .ann2-page .ann2-note { margin: 4px 0 0; font-size: 13.5px; color: var(--ui-ink-2); }
body.new-ui .ann2-page .ann2-imp { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 8px; padding: 8px 12px; border-radius: 9px; background: var(--ui-paper-2); font-size: 13px; }
body.new-ui .ann2-page .ann2-imp b { font-weight: 500; }
body.new-ui .ann2-page .ann2-imp span { color: var(--ui-ink-2); }
body.new-ui .ann2-page .ann2-imp.up b { color: var(--ui-accent-ink); }
body.new-ui .ann2-page .ann2-imp.down b { color: var(--ui-neg); }
body.new-ui .ann2-page .ann2-imp.wait { background: none; padding: 0; color: var(--ui-ink-3); }
body.new-ui .ann2-page .ann2-imp.wait b { font-weight: 400; }
body.new-ui .ann2-page .ann2-del { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--ui-ink-3); cursor: pointer; }
body.new-ui .ann2-page .ann2-del:hover { background: var(--ui-neg-soft); color: var(--ui-neg); }
body.new-ui .ann2-page .ann2-del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
body.new-ui .ann2-page .ann2-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; color: var(--ui-ink-2); }
body.new-ui .ann2-page .ann2-pager > span:last-child { display: flex; gap: 8px; }

/* Pin an action. */
body.new-ui .ann2-page .ann2-form form { display: grid; gap: 12px; }
body.new-ui .ann2-page .ann2-form label { display: grid; gap: 4px; min-width: 0; }
body.new-ui .ann2-page .ann2-form label > span { font-size: 12.5px; color: var(--ui-ink-2); }
body.new-ui .ann2-page .ann2-form :is(input, select) { width: 100%; min-width: 0; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-card); color: var(--ui-ink); font: 14px var(--ui-font); flex: none; }
body.new-ui .ann2-page .ann2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.new-ui .ann2-page .ann2-form .ui-btn { justify-self: start; }
body.new-ui .ann2-page .ann2-how ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ui-ink-2); }
body.new-ui .ann2-page .ann2-how li { margin: 0 0 8px; }

@media (max-width: 1180px) {
  body.new-ui .ann2-page .ann2-grid > .ui-kpi:not(.ui-lead) { grid-column: span 6; }   /* the lead keeps the row */
  body.new-ui .ann2-page .ann2-tl, body.new-ui .ann2-page .ann2-side { grid-column: span 12; }
  body.new-ui .ann2-page .ann2-side { order: -1; flex-direction: row; flex-wrap: wrap; }
  body.new-ui .ann2-page .ann2-side > .ui-card, body.new-ui .ann2-page .ann2-side > .ui-card:last-child { flex: 1 1 300px; }
}
@media (max-width: 900px) {
  body.new-ui .ann2-page .ui-kpi { padding: 14px 16px; }
  body.new-ui .ann2-page .ui-kpi .big { font-size: 30px; }
  body.new-ui .ann2-page .ann2-item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 12px 16px; }
  body.new-ui .ann2-page .ann2-month { padding: 14px 16px 6px; }
  body.new-ui .ann2-page .ann2-form :is(input, select) { height: 44px; }
  body.new-ui .ann2-page .ann2-pager { flex-direction: column; align-items: stretch; }
  body.new-ui .ann2-page .ann2-pager > span:last-child > .ui-btn { flex: 1; }
  /* Timeline first; the form opens from the header button. */
  body.new-ui .ann2-page .ann2-side { order: 0; }
  body.new-ui .ann2-page:not(.ann2-form-open) .ann2-form { display: none; }
}
body.new-ui .ann2-page .ann2-pin-m { display: none; }
@media (max-width: 900px) {
  body.new-ui .ann2-page:not(.ann2-form-open) .ann2-pin-m { display: flex; }
}

/* The date field's own message: a bad date is said under the form, not in a toast. */
body.new-ui .ann2-page .ann2-err { margin: -4px 0 0; font-size: 12.5px; color: var(--ui-neg); }