.tp-page .tp-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;
align-items:start;margin-top:16px}
@media(max-width:1000px){.tp-page .tp-grid{grid-template-columns:minmax(0,1fr)}}

/* THE THREE TABS, ONE CONTROL */
.tp-page .tips-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0;padding:4px;
border:1px solid var(--ms-line);border-radius:12px;background:var(--canvas,#fff)}
.tp-page .tips-tab{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:0;border-radius:9px;font-size:14px;font-weight:600;
color:var(--ms-gray);text-decoration:none;transition:background-color .15s var(--ms-ease),
color .15s var(--ms-ease)}
.tp-page .tips-tab:hover{color:var(--ms-green-deep);background:var(--ms-cream)}
.tp-page .tips-tab.on{background:var(--ms-green-deep);color:#fff}

/* A TIP IS A CARD, READ AT A READING WIDTH */
.tp-page .tips{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tp-page .tip{background:var(--canvas,#fff);border:1px solid var(--ms-line);border-radius:16px;
padding:22px 24px 18px;transition:border-color .15s var(--ms-ease),box-shadow .15s var(--ms-ease)}
.tp-page .tip:hover{border-color:rgba(14,75,44,.28);box-shadow:0 6px 18px rgba(9,56,34,.07)}
.tp-page .tip-title{font-family:var(--body);font-weight:700;font-size:17px;line-height:1.35;
color:var(--ms-green-deep);margin:0 0 8px;max-width:66ch}
.tp-page .tip-body{margin:0 0 18px;font-size:15px;line-height:1.65;color:var(--ms-ink);
max-width:66ch}
.tp-page .tip-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
padding-top:14px;border-top:1px solid var(--ms-line)}
/* THE ANSWERS, ON THE CHARTER (Mathieu, 6 October: "ils datent"). The
   account's secondary button (.do.is-quiet): the canvas, a hairline, the
   one radius, ink text. The two answers keep the same weight (the page must
   not say which one to press); the colour is the glyph's, a green tick and
   a muted cross, and on a hover the answer's own wash. The pills with a
   green and a red outline were the old charter's. */
.tp-page .tip-actions .tip-quiet{font:inherit;font-size:13.5px;font-weight:600;letter-spacing:0;height:38px;
display:inline-flex;align-items:center;gap:7px;padding:0 15px;border:0;border-radius:var(--r,10px);
background:var(--canvas,#fff);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong,rgba(0,0,0,.18));
cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease}
.tp-page .tip-actions .tip-quiet svg{width:14px;height:14px;margin:0}
.tp-page .tip-actions .tip-quiet:hover{background:var(--warm);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-faint)}
.tp-page .tip-actions .tip-quiet:active{scale:.98}
.tp-page .tip-actions .tip-quiet:focus-visible{outline:2px solid var(--focus,currentColor);outline-offset:2px}
.tp-page .tip-actions .tip-quiet.tip-yes svg{color:var(--yes)}
.tp-page .tip-actions .tip-quiet.tip-no svg{color:var(--ink-faint)}
.tp-page .tip-actions .tip-quiet.tip-yes:hover{background:var(--tint-yes);box-shadow:inset 0 0 0 1px var(--yes);color:var(--ink)}
.tp-page .tip-actions .tip-quiet.tip-no:hover{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--ink-faint);color:var(--ink)}
.tp-page .tip-actions .tip-quiet.tip-move{background:transparent;box-shadow:none;color:var(--ink-muted)}
.tp-page .tip-actions .tip-quiet.tip-move:hover{background:var(--warm);color:var(--ink)}
.tp-page .tip-actions .tip-quiet[disabled],.tp-page .tip-actions .tip-quiet[disabled]:hover{opacity:.45;cursor:not-allowed;
background:var(--canvas,#fff);box-shadow:inset 0 0 0 1px var(--line-strong,rgba(0,0,0,.18));color:var(--ink-muted)}
.tp-page .tips .empty{list-style:none;padding:22px 24px;border:1.5px dashed rgba(14,75,44,.18);
border-radius:16px;background:var(--ms-cream);color:var(--ms-gray);font-size:14.5px}

/* THE SIDE COLUMN: TWO CARDS, EACH A LABEL, A LINE AND ONE PRESS */
.tp-page .tp-side{display:grid;gap:14px}
.tp-page .tips-sub{display:grid;gap:10px;margin:0;padding:18px 20px;background:var(--canvas,#fff);
border:1px solid var(--ms-line);border-radius:16px}
.tp-page .tips-sub-label{font-size:10.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--ms-gray)}
.tp-page .tips-sub-note{font-size:13.5px;line-height:1.5;color:var(--ms-ink);margin-top:6px}
.tp-page .tips-switch{justify-self:start;font-size:13px;letter-spacing:0;text-transform:none;
height:36px;display:inline-flex;align-items:center;padding:0 16px;border-radius:10px}
.tp-page .all-clear{margin:0 0 16px}
/* A member's tip the house made a Daily tip says where it came from. */
.tp-page .tip-from{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--ink-muted)}
.tp-page .tip-from a{color:var(--accent-ink);text-decoration:none}
.tp-page .tip-from a:hover{text-decoration:underline}