/* ==========================================================================
   From Claude - review of what Claude proposed through the MCP API
   ==========================================================================

   Built only from the tokens in design.css, so it follows the winter palette
   and the dark theme without any colour of its own.

   The proposals use the same pattern as every other list in the CRM: one
   card per group, one row per proposal, hairlines between rows. A row shows
   what the proposal is in two lines and ends in accept / reject; everything
   else (before and after, Claude's note, editing) is in the sheet a click on
   the row opens, like a contact's or a project's. The row's icon says what
   kind of record it is (a note or document shows its contact's or
   project's), its colour what kind of decision - green for a new record,
   blue for a note or document added to one, amber for a change, red for a
   removal; in the history, green or red for how it ended.
   ========================================================================== */


/* ---- The screen ---------------------------------------------------------- */

.review-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.review-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--c-ink);
    font: 600 var(--t-md)/1.3 var(--font);
    letter-spacing: -0.01em;
}

.review-group-count {
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--c-tint-2);
    color: var(--c-ink-2);
    font-size: var(--t-xs);
    font-weight: 600;
}

/* One card per group, rows separated by hairlines - like Contacts and To-dos. */
/* Within a kind of record: new, changes, deletions - a quieter heading, so
   the record types stay the main structure. */
.review-subgroup + .review-subgroup {
    margin-top: 14px;
}

/* Second level: a quiet grey label, no count - well below the record type
   above it. */
.review-subgroup-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px 2px;
    color: var(--c-ink-3);
    font: 500 var(--t-xs)/1.3 var(--font);
    letter-spacing: 0;
    text-transform: none;
}

.review-list-card {
    background: var(--c-surface);
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    box-shadow: var(--e-1);
    overflow: hidden;
}


/* ---- A proposal ---------------------------------------------------------- */

.review-row {
    transition: opacity var(--dur-2) var(--ease), background-color var(--dur-1) var(--ease);
}

.review-row + .review-row {
    border-top: 1px solid var(--c-line-2);
}

.review-row.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

/* ---- Leaving: how a decided row goes ------------------------------------
   One quiet motion. The row takes on a faint tint of the outcome, its
   content lifts a few pixels while blurring and fading, then the gap closes
   (review.js removeItem pins the height and adds .is-collapsing). ~480ms. */

.review-row {
    position: relative;
}

.review-row.is-leaving {
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.review-row.is-leaving--accept,
.review-row.is-leaving--reject {
    opacity: 1;
    transition: background-color 200ms var(--ease);
}

.review-row.is-leaving--accept { background: var(--c-success-soft); }
.review-row.is-leaving--reject { background: var(--c-danger-soft); }

.review-row.is-leaving--accept > *,
.review-row.is-leaving--reject > * {
    animation: reviewVanish 240ms var(--ease) both;
}

/* Then the gap closes. The row's height is pinned in px by review.js first. */
.review-row.is-collapsing {
    height: 0 !important;
    border-top-color: transparent !important;
    opacity: 0;
    transition: height 240ms var(--ease), opacity 160ms var(--ease), border-color 160ms var(--ease);
}

@keyframes reviewVanish {
    to { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
}

/* While "Accept all" / "Reject all" runs, nothing else in the list is clickable. */
.review-list.is-bulk-running .review-row-actions,
.review-list.is-bulk-running .review-row-open {
    pointer-events: none;
}


/* ---- Several proposals about one record ---------------------------------
   The record gets a row of its own, built like every other row, with accept
   all / reject all. Its proposals follow, indented to the text column, and
   show only what each one does - the record's row already names it. */

.review-row + .review-cluster,
.review-cluster + .review-row,
.review-cluster + .review-cluster {
    border-top: 1px solid var(--c-line-2);
}

.review-cluster-head:hover {
    background: transparent;
}

.review-cluster-head .review-row-open {
    cursor: default;
}

.review-cluster.is-busy .review-cluster-head .review-row-actions {
    opacity: 0.55;
    pointer-events: none;
}

/* 66px: the head's 16px padding, 36px icon and 14px gap. */
.review-cluster > .review-row {
    margin-left: 66px;
}

.review-cluster > .review-row .review-row-open {
    min-height: 44px;
    padding-left: 0;
}

.review-cluster > .review-row .review-type-icon,
.review-cluster > .review-row .review-row-title {
    display: none;
}

/* ---- Accept all / Reject all --------------------------------------------- */

/* In the page head, between the title and Waiting / History. */
.review-bulk {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 0 0 auto;
}

.review-bulk[hidden] {
    display: none;
}

.review-bulk-actions {
    display: flex;
    gap: 8px;
}

.review-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.review-bulk-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.review-bulk-status {
    margin-right: auto;
    color: var(--c-ink-2);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}

/* A hairline under the bar that fills as the decisions land, in the colour
   of the decision. */
.review-bulk-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 3px;
    border-radius: var(--r-full);
    background: var(--c-tint-2);
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease);
}

.review-bulk.is-running .review-bulk-progress {
    opacity: 1;
}

.review-bulk-bar {
    display: block;
    height: 100%;
    background: var(--c-success);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms var(--ease);
}

.review-bulk[data-action="reject"] .review-bulk-bar {
    background: var(--c-danger);
}


/* ---- Everything decided at once: a check that draws itself ---------------- */

.review-empty--cleared .review-done-mark {
    width: 56px;
    height: 56px;
    opacity: 1;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-empty--accept .review-done-mark { color: var(--c-success-ink); }
.review-empty--reject .review-done-mark { color: var(--c-ink-3); }

.review-done-ring,
.review-done-check {
    stroke: currentColor;
}

.review-done-ring {
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    animation: reviewDraw 520ms var(--ease) forwards;
}

.review-done-check {
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    animation: reviewDraw 320ms 420ms var(--ease) forwards;
}

.review-empty--cleared .review-done-mark {
    animation: reviewSettle 360ms 700ms var(--ease) both;
}

.review-empty--cleared h3,
.review-empty--cleared p {
    animation: reviewRise 360ms 520ms var(--ease) both;
}

@keyframes reviewDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes reviewSettle {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes reviewRise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .review-done-ring,
    .review-done-check {
        animation: none;
        stroke-dashoffset: 0;
    }

    .review-empty--cleared .review-done-mark,
    .review-empty--cleared h3,
    .review-empty--cleared p {
        animation: none;
    }

    .review-bulk-bar,
    .review-row.is-collapsing {
        transition: none;
    }
}

/* ---- Tone: what kind of decision, or how it ended ------------------------
   Green for a new record, blue for a note or document added to one, amber
   for a change, red for a removal; in the history, green or red for how it
   ended. Used by the row's icon, the kind
   label and the sheet's header. These stay the app's own colours: Claude's
   colour marks where something came from, not what kind of change it is. */

.review-tone--created  { --review-tone: var(--c-success-ink);   --review-tone-soft: var(--c-success-soft); }
.review-tone--new      { --review-tone: var(--c-accent);    --review-tone-soft: var(--c-accent-soft); }
.review-tone--change   { --review-tone: var(--c-warning-ink);   --review-tone-soft: var(--c-warning-soft); }
.review-tone--remove,
.review-tone--rejected { --review-tone: var(--c-danger-ink);    --review-tone-soft: var(--c-danger-soft); }
.review-tone--accepted { --review-tone: var(--c-success-ink);   --review-tone-soft: var(--c-success-soft); }
.review-tone--neutral  { --review-tone: var(--c-ink-3);     --review-tone-soft: var(--c-tint-2); }

/* The record type, on the tone's tint - the row's counterpart to an avatar. */
.review-type-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--review-tone-soft, var(--c-tint-2));
    color: var(--review-tone, var(--c-ink-2));
}

.review-type-icon svg {
    width: 18px;
    height: 18px;
}

/* "New contact", "Change", "Delete": short, in the tone's colour. */
.review-kind {
    flex-shrink: 0;
    color: var(--review-tone, var(--c-ink-3));
    font-size: var(--t-xs);
    font-weight: 600;
    white-space: nowrap;
}


/* ---- A row ---------------------------------------------------------------- */

.review-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    transition: background-color var(--dur-1) var(--ease);
}

.review-row-head:hover {
    background: var(--c-tint-3);
}

/* The row whose sheet is open. */
.review-row.is-current .review-row-head {
    background: var(--c-accent-soft);
}

.review-row-open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 8px 12px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.review-row-open:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: -2px;
    border-radius: var(--r-md);
}

.review-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.review-row-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-ink);
    font: 600 var(--t-base)/1.35 var(--font);
}

.review-row-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--c-ink-3);
    font-size: var(--t-sm);
    line-height: 1.4;
}

.review-row-summary-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A change: what was there, struck through and muted, then what Claude
   proposes. With several fields, each is named first. */
.review-pair {
    white-space: nowrap;
}

.review-was {
    color: var(--c-ink-4);
}

.review-pair-arrow {
    margin: 0 5px;
    color: var(--c-ink-4);
}

.review-now {
    color: var(--c-ink);
    font-weight: 500;
}

.review-pair-field {
    color: var(--c-ink-3);
}

.review-pair-sep {
    margin: 0 7px;
    color: var(--c-ink-4);
}

/* Someone changed the record since Claude proposed: say so where it is
   listed, not only in the sheet. "Accept all" leaves these out. */
.review-outdated {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    height: 18px;
    padding: 0 7px 0 5px;
    border-radius: var(--r-full);
    background: var(--c-warning-soft);
    color: var(--c-warning-ink);
    font-size: var(--t-xs);
    font-weight: 600;
    white-space: nowrap;
}

.review-outdated svg {
    width: 11px;
    height: 11px;
}

.review-row-when {
    flex-shrink: 0;
    color: var(--c-ink-4);
    font-size: var(--t-xs);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Accept and reject: the only two things most proposals need. Quiet until
   pointed at, so a long list does not read as a wall of buttons. */
.review-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.review-act {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c-ink) 6%, transparent);
    color: var(--c-ink-2);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.review-act svg {
    width: 16px;
    height: 16px;
}

/* ---- Accept and reject, everywhere Claude's proposals are decided ----
   The round buttons in rows: reject a pale grey circle, accept a step
   stronger in green - the action expected more often reads first. On hover
   both fill solid, green or red with a white mark, so the decision about to
   be made is unmistakable. Worded buttons (sheet, "Accept all") are the
   ordinary primary and secondary buttons; reject still turns red on hover. */
:is(.review-act, .review-inline-btn, .btn.review-decide) {
    border-color: transparent;
    background: color-mix(in srgb, var(--c-ink) 7%, transparent);
    color: var(--c-ink-2);
}



:is(.review-act--accept, .review-inline-btn--accept, .btn.review-decide--accept):hover:not(:disabled) {
    border-color: transparent;
    background: var(--c-success);
    color: #FFFFFF;
}

:is(.review-act--reject, .review-inline-btn--reject, .btn.review-decide--reject):hover:not(:disabled) {
    border-color: transparent;
    background: var(--c-danger);
    color: #FFFFFF;
}

/* A heavier mark, so it holds up in white on the fill. */
:is(.review-act, .review-inline-btn, .btn.review-decide) svg {
    stroke-width: 2.6;
}



.review-act:disabled {
    opacity: 0.5;
    cursor: default;
}

/* History: how it ended, instead of the buttons. */
.review-row-status {
    flex-shrink: 0;
}

.review-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--r-full);
    background: var(--c-tint-2);
    color: var(--c-ink-2);
    font-size: var(--t-xs);
    font-weight: 600;
    white-space: nowrap;
}

.review-pill--accepted { background: var(--c-success-soft); color: var(--c-success-ink); }
.review-pill--rejected { background: var(--c-danger-soft); color: var(--c-danger-ink); }

.review-row > .review-error {
    margin: 0 16px 12px 66px;
}


/* ---- The sheet: one proposal ---------------------------------------------
   The same sheet as a contact, project or to-do: header, sections with a
   label-over-value grid, actions in the footer. Layout, editing outline and
   field sizes are shared with those sheets in design.css. */

.review-sheet-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-lg);
}

.review-sheet-icon svg {
    width: 22px;
    height: 22px;
}

/* Two to a row by default - an email address needs the room; three for the
   short facts of a project or to-do (review.js facts). */
#reviewDetailModal .overview-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#reviewDetailModal .overview-details.review-facts-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#reviewSheetContext {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 6px;
}

#reviewSheetContext .review-kind {
    font-size: var(--t-sm);
}

.review-sheet-context-sep {
    color: var(--c-ink-4);
}

#reviewDetailModal.is-busy .modal-content {
    cursor: progress;
}

#reviewDetailModal .ov-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#reviewDetailModal .ov-footer .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

#reviewDetailModal .overview-body > .review-error,
#reviewDetailModal .overview-body > .review-callout,
#reviewDetailModal .overview-body > .review-outcome {
    margin-bottom: 18px;
}

/* Long values - a description, an address - keep their line breaks. */
.review-sheet-long,
.review-sheet-text {
    white-space: pre-wrap;
    line-height: 1.55;
}

/* A note: the text itself, in the card the facts use. */
.review-sheet-text {
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    color: var(--c-ink);
    font-size: var(--t-base);
    overflow-wrap: anywhere;
    background: var(--c-tint-3);
}

.review-sheet-hint {
    margin: 10px 0 0;
    color: var(--c-ink-3);
    font-size: var(--t-sm);
}

/* Why Claude proposed it. */
.review-sheet-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-lg);
    background: var(--c-claude-softer);
    color: var(--c-ink-2);
    font-size: var(--t-sm);
    line-height: 1.55;
}

.review-sheet-note svg {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--c-claude);
}

.review-sheet-note p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Before and after: one field per line, in the card the facts use. */
.review-changes {
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-tint-3);
}

.review-change {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
}

.review-change + .review-change {
    border-top: 1px solid var(--c-line-2);
}

.review-change-values {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: var(--t-base);
    line-height: 1.5;
}

.review-change-old {
    color: var(--c-ink-3);
    text-decoration: line-through;
    text-decoration-color: var(--c-line-strong);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.review-change-arrow {
    display: inline-flex;
    align-self: center;
    color: var(--c-ink-4);
}

.review-change-arrow svg {
    width: 14px;
    height: 14px;
}

.review-change-new {
    color: var(--c-ink);
    font-weight: 500;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.review-stale {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--c-warning-ink);
    font-size: var(--t-xs);
    font-weight: 500;
}

.review-stale svg {
    width: 12px;
    height: 12px;
}

/* A word of warning above everything else. */
.review-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--r-lg);
    font-size: var(--t-sm);
    line-height: 1.5;
}

.review-callout svg {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

.review-callout p {
    margin: 0;
}

.review-callout--warning { background: var(--c-warning-soft); color: var(--c-warning-ink); }
.review-callout--danger  { background: var(--c-danger-soft);  color: var(--c-danger-ink); }

/* History: how it ended. */
.review-outcome {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--c-ink-3);
    font-size: var(--t-sm);
}

.review-link {
    color: var(--c-accent);
    font-weight: 500;
    text-decoration: none;
}

.review-link:hover {
    text-decoration: underline;
}

.review-error {
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: var(--c-danger-soft);
    color: var(--c-danger-ink);
    font-size: var(--t-sm);
}

/* Editing: the facts grid turns into fields, as on the to-do sheet. */
.review-sheet-form {
    margin: 0;
}

.review-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    color: var(--c-ink);
    font-size: var(--t-sm);
}


/* ---- Nothing to decide --------------------------------------------------- */

.review-empty {
    max-width: 460px;
    margin: 48px auto;
    text-align: center;
    color: var(--c-ink-3);
}

.review-empty svg {
    width: 34px;
    height: 34px;
    color: var(--c-claude);
    opacity: 0.9;
}

.review-empty h3 {
    margin: 10px 0 6px;
    color: var(--c-ink);
    font: 600 var(--t-lg)/1.3 var(--font);
}

.review-empty p {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.55;
}


/* ---- Claude's mark on a record, wherever it is listed ----------------------
   One mark for everything Claude proposed: its asterisk in Claude's orange.
   On a record that is itself new - its row tinted below - the mark stands
   alone; on an accepted record with changes waiting, it says what, in the
   same orange and without a pill around it. */

.review-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    color: var(--c-claude);
    white-space: nowrap;
    vertical-align: middle;
}

.review-mark svg {
    width: 14px;
    height: 14px;
}

.review-mark.has-text {
    color: var(--c-claude-2);
    font: 600 var(--t-xs)/1 var(--font);
}

.review-mark.has-text svg {
    width: 12px;
    height: 12px;
    color: var(--c-claude);
}

/* The mark followed by reject / accept, as one piece. */
.review-decide-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* A proposed record: a tint in Claude's colour - no frame - so it stands
   apart from accepted records at a glance; the orange badge says why.
   The id-scoped selectors match design.css, which restyles these elements
   (hover included) by id and would otherwise win. */
.is-proposed,
.is-proposed:hover,
#listView .contact-card.is-proposed,
#listView .contact-card.is-proposed:hover,
#todoView .todo-item.is-proposed,
#todoView .todo-item.is-proposed:hover {
    background: color-mix(in srgb, var(--c-claude) 10%, var(--c-surface));
    box-shadow: none;
}

/* Cards keep their lift. */
#projectsView .project-card.is-proposed,
#projectsView .project-card.is-proposed:hover {
    background: color-mix(in srgb, var(--c-claude) 10%, var(--c-surface));
    border-color: transparent;
    box-shadow: var(--e-1);
}

/* Home page rows: the same tint, scoped by id to beat design.css. */
#workloadView .home-todo.is-proposed,
#workloadView .home-todo.is-proposed:hover,
#workloadView .home-project.is-proposed,
#workloadView .home-project.is-proposed:hover,
#workloadView .workload-row.is-proposed,
#workloadView .workload-row.is-proposed:hover {
    background: color-mix(in srgb, var(--c-claude) 10%, var(--c-surface));
    box-shadow: none;
}

/* The frame has to follow the shape of whatever it marks, or its corners and
   the card's corners disagree.

   Rows that sit flush in a list card are square along the card's straight
   sides, and take the card's own curve (less its 1px border) at the corners
   they share with it - otherwise the card's clip cuts the frame off there. */
#listView .contact-card.is-proposed,
#todoView .todo-item.is-proposed,
#projectOverviewModal .ptodo.is-proposed,
#workloadView .home-todo.is-proposed,
#workloadView .home-project.is-proposed,
#workloadView .workload-row.is-proposed {
    border-radius: 0;
}

#projectOverviewModal .ptodo-card > .ptodo.is-proposed:first-child {
    border-top-left-radius: calc(var(--r-lg) - 1px);
    border-top-right-radius: calc(var(--r-lg) - 1px);
}

#listView .company-group > .contact-card.is-proposed:last-child,
#listView .pinned-section > .contact-card.is-proposed:last-child,
#listView .tag-group > .contact-card.is-proposed:last-child,
#todoView .todo-group-items > .todo-item.is-proposed:last-child,
#projectOverviewModal .ptodo-card > .ptodo.is-proposed:last-child {
    border-bottom-left-radius: calc(var(--r-lg) - 1px);
    border-bottom-right-radius: calc(var(--r-lg) - 1px);
}

/* Items with a border of their own lose it: the tint is the mark. */
#overviewModal .todo-item.is-proposed,
#overviewModal .todo-item.is-proposed:hover {
    border-color: transparent;
    box-shadow: none;
}

/* Mark and accept / reject follow the title, as the link pill does. */
#workloadView .is-proposed .review-decide-inline,
#workloadView .is-proposed :not(.review-decide-inline) > .review-mark,
#workloadView .review-mark.has-text {
    margin-left: 6px;
}

/* A hovered proposed row stays orange, a shade deeper - not grey. */
.ptodo.is-proposed .ptodo-row:hover {
    background: color-mix(in srgb, var(--c-claude) 7%, transparent);
}

.review-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.review-inline.is-busy {
    opacity: 0.5;
    pointer-events: none;
}

.review-inline-btn {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c-ink) 6%, transparent);
    color: var(--c-ink-2);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.review-inline-btn svg {
    width: 14px;
    height: 14px;
}

/* Accept a step stronger than reject, at rest (after both base rules). */
.review-act.review-act--accept,
.review-inline-btn.review-inline-btn--accept {
    background: color-mix(in srgb, var(--c-success) 22%, var(--c-surface));
    color: var(--c-success-ink);
}

.review-act.review-act--accept:hover:not(:disabled),
.review-inline-btn.review-inline-btn--accept:hover:not(:disabled) {
    background: var(--c-success);
    color: #FFFFFF;
}



/* Decided with the inline buttons, waiting the few seconds Undo has: the
   buttons make way, and a rejected record fades as it is about to go. */
.review-held .review-inline {
    display: none;
}

/* The contents rather than the record: some lists animate the record in with
   a fill mode that would hold its own opacity at 1. */
.review-held--reject > * {
    opacity: 0.45;
    transition: opacity var(--dur-2) var(--ease);
}


/* ---- The box in a contact's or project's detail view ---------------------- */

.review-record-slot {
    margin: 0 0 18px;
}

.review-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-ink);
    font-size: var(--t-sm);
    font-weight: 500;
}

.review-panel-head svg {
    width: 15px;
    height: 15px;
    color: var(--c-claude);
    flex-shrink: 0;
}

/* In a sheet: a faint Claude tint marks the proposals - no frame. */
.review-panel .review-list-card {
    border-color: transparent;
    background: var(--c-claude-softer);
    box-shadow: none;
}

.review-panel .review-row-when {
    display: none;
}


/* ---- Confirmation -------------------------------------------------------- */

.review-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 3000;
    padding: 11px 18px;
    border-radius: var(--r-md);
    background: var(--c-primary);
    color: var(--c-on-primary);
    box-shadow: var(--e-2);
    font: 500 var(--t-sm)/1.4 var(--font);
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.review-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* While a decision waits, the toast offers to take it back. */
.review-toast.has-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 10px;
}

.review-toast.has-action.is-visible {
    pointer-events: auto;
}

.review-toast-undo {
    padding: 4px 8px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: inherit;
    font: 600 var(--t-sm)/1.4 var(--font);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.review-toast-undo:hover,
.review-toast-undo:focus-visible {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

/* ---- Asking first -------------------------------------------------------- */

.review-confirm-message p {
    margin: 0;
    color: var(--c-ink-2);
    line-height: 1.5;
}

.review-confirm-message p + p {
    margin-top: 10px;
}

.review-confirm-message strong {
    color: var(--c-ink);
}


/* ---- Phones --------------------------------------------------------------- */

@media (max-width: 768px) {
    .review-row-when {
        display: none;
    }

    .review-row-open {
        gap: 12px;
        padding-left: 14px;
    }

    .review-row-head {
        padding-right: 12px;
    }

    .review-row > .review-error {
        margin: 0 14px 12px;
    }

    #reviewDetailModal .overview-details.review-facts-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Four actions do not fit one row on a phone: the decision gets a row of
       its own under the others. */
    #reviewDetailModal .ov-footer {
        flex-wrap: wrap;
    }

    #reviewDetailModal .ov-footer .btn {
        flex: 1 1 0;
        justify-content: center;
        margin-right: 0;
    }

    #reviewDetailModal .ov-footer .btn-primary {
        flex-basis: 100%;
        order: 1;
    }

    .review-toast {
        bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-row,
    .review-row-head,
    .review-toast {
        transition: none;
    }
}