.mc { max-width: 860px; margin: 96px auto 48px; padding: 0 var(--wg-space-5); color: var(--wg-text); }
.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }
.mc [hidden] { display: none !important; }
.mc h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); margin: var(--wg-space-3) 0 var(--wg-space-2); overflow-wrap: anywhere; }
.mc h2, .mc h3 { margin: 0; color: var(--wg-text); line-height: 1.4; overflow-wrap: anywhere; }
.mc h2 { font: var(--fw-bold) 1.05rem/1.4 var(--font-family); }
.mc h3 { font: var(--fw-semibold) .9rem/1.4 var(--font-family); }
.mc p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.mc-intro { margin-bottom: var(--wg-space-4); }
.mc-intro a { color: var(--wg-accent); font-weight: var(--fw-semibold); }
.mc-intro p, .mc-options p, .mc-promotion p { color: var(--wg-muted); }
.mc button, .mc select, .mc input { font-family: inherit; }
.mc button { touch-action: manipulation; }
body:has(.mc) .gpt-floating-button { display: none; }

.mc-workspace { display: grid; gap: var(--wg-space-3); align-items: start; }
.mc-workspace > *, .mc-promotion { min-width: 0; padding: var(--wg-space-3) var(--wg-space-4); }
.mc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wg-space-2); }
.mc-segment {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--wg-border);
}
.mc-segment button { min-width: var(--wg-button-height); min-height: var(--wg-button-height); border: 0; border-radius: inherit; padding: 0 var(--wg-space-1); background: transparent; color: var(--wg-text); font-weight: var(--fw-semibold); cursor: pointer; }
.mc-segment button:hover, .mc-segment button[aria-pressed="true"], .mc [data-preset][aria-pressed="true"] { background: var(--wg-gold-surface); color: var(--wg-accent); }
.mc-segment button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--wg-border); }
.mc-segment button:focus:not(:focus-visible) { outline: none; }
.mc-segment button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }

.mc-counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wg-space-3) var(--wg-space-2); max-width: 440px; margin: var(--wg-space-2) auto; }
.mc-counters[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 250px; }
.mc-counters[data-count="3"] .mc-counter:last-child { grid-column: 1 / -1; width: calc((100% - var(--wg-space-2)) / 2); justify-self: center; }
.mc-counter { display: grid; align-content: start; justify-items: center; gap: var(--wg-space-1); min-width: 0; container: mc-counter / inline-size; }
.mc-counter__head { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; width: 100%; }
.mc-counter__name { grid-column: 2; padding-inline: var(--wg-space-1); text-align: center; font-weight: var(--fw-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.mc-counter__head button { grid-column: 3; justify-self: end; }
.mc-counter__head button:focus-visible { outline-offset: -7px; }
.mc-disc { position: relative; width: min(100%, 144px); container-type: inline-size; }
.mc-counters[data-count="1"] .mc-disc { width: min(100%, 164px); }
.mc-increment {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: var(--wg-space-1);
  border: 0;
  border-radius: 50%;
  background: var(--counter-color);
  color: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mc-increment:active { filter: brightness(.92); }
.mc-increment:focus:not(:focus-visible) { outline: none; }
.mc:has(#mc-shortcuts:checked) .mc-counter[data-selected="true"] .mc-increment:not(:focus-visible) { outline: 2px solid var(--wg-accent); outline-offset: 2px; }
.mc-increment:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.mc-value { font-size: clamp(16px, 21cqi, 3rem); font-weight: 750; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc [data-decrement] { position: absolute; inset-inline-end: 0; inset-block-end: 0; }
.mc [data-decrement][aria-disabled="true"] { cursor: default; color: var(--wg-muted); background: var(--color-bg); }
.mc-counter progress { display: block; width: 100%; height: 8px; accent-color: var(--wg-accent); margin-top: var(--wg-space-1); }
.mc-goal-text { font-size: .85rem; text-align: center; overflow-wrap: anywhere; }
.mc-icon-library { position: absolute; }
.mc-icon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mc .mc-status { color: var(--wg-accent); font-weight: var(--fw-semibold); }
.mc .mc-status:not(:empty) { padding-block: var(--wg-space-1); }
.mc-more { border-top: 1px solid var(--wg-border); margin-top: var(--wg-space-3); }
.mc summary { min-height: var(--wg-button-height); padding-block: var(--wg-space-3); color: var(--wg-muted); font-weight: var(--fw-semibold); cursor: pointer; }
.mc-more summary { width: fit-content; margin-inline-start: auto; }
.mc-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--wg-space-2); font-size: .9rem; color: var(--wg-muted); margin-bottom: var(--wg-space-2); }
.mc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wg-space-2); }

.mc-clock { display: flex; flex-wrap: wrap; gap: var(--wg-space-1); justify-content: space-between; align-items: center; min-height: 60px; padding-block: var(--wg-space-2); border-bottom: 1px solid var(--wg-border); }
.mc-clock:has(+ #mc-time-settings[hidden]) { border-bottom: 0; }
.mc-clock > div { min-width: 0; }
.mc-clock h3 { color: var(--wg-muted); }
.mc-clock output { display: block; font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mc-clock-actions { display: flex; flex-wrap: wrap; gap: var(--wg-space-1); margin-inline-start: auto; }
.mc [data-clock-toggle]:not([data-running]) .mc-pause-icon, .mc [data-clock-toggle][data-running] .mc-play-icon { display: none; }
#mc-time-settings { padding-block: var(--wg-space-2); }
#mc-duration-form { display: grid; gap: var(--wg-space-2); margin-bottom: var(--wg-space-3); justify-items: start; }

.mc-options { margin: var(--wg-space-3) 0; padding-inline: var(--wg-space-4); }
.mc-options[open] { padding-bottom: var(--wg-space-3); }
.mc-check { display: flex; gap: var(--wg-space-3); align-items: center; min-height: var(--wg-button-height); margin: var(--wg-space-1) 0; line-height: 1.4; overflow-wrap: anywhere; }
.mc-check input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--wg-accent); }
.mc-promotion p { margin: var(--wg-space-2) 0 var(--wg-space-3); }
.mc-promotion .mc-actions { gap: var(--wg-space-3); }
.mc .mc-notice { margin-bottom: var(--wg-space-3); padding: var(--wg-space-3); border: 1px solid var(--wg-accent); border-radius: var(--wg-card-radius); }

.mc dialog { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: var(--wg-space-4); border: 1px solid var(--wg-border); border-radius: var(--wg-card-radius); color: var(--wg-text); background: var(--color-bg); overflow: auto; }
.mc dialog::backdrop { background: #0008; }
#mc-editor-form { display: grid; gap: var(--wg-space-2); }
.mc dialog label:not(.mc-check, .mc-swatch) { display: block; margin-bottom: var(--wg-space-1); overflow-wrap: anywhere; }
.mc input:not([type="checkbox"], [type="radio"]) { width: 100%; min-width: 0; min-height: var(--wg-button-height); border: 1px solid var(--wg-border); border-radius: 8px; padding: var(--wg-space-2); font-size: max(16px, 1rem); background: var(--wg-surface); color: var(--wg-text); }
.mc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wg-space-2); }
.mc fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mc legend { padding: 0; font-size: 1rem; }
.mc-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--wg-space-1); }
.mc-swatch { position: relative; display: grid; place-items: center; min-height: 44px; cursor: pointer; }
.mc-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mc-swatch span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--wg-text) 40%, transparent); border-radius: 50%; background: var(--swatch); color: var(--swatch-ink); font: var(--fw-bold) 16px/1 var(--font-family); pointer-events: none; }
.mc-swatch input:checked + span { outline: 2px solid var(--wg-text); outline-offset: 2px; }
.mc-swatch input:checked + span::after { content: "✓"; }
.mc-swatch input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.mc-editor-actions { justify-content: end; }
#mc-save, #mc-cancel { min-inline-size: var(--wg-button-width); }

@container mc-counter (max-width: 6rem) {
  .mc-counter__head { grid-template-columns: minmax(0, 1fr); }
  .mc-counter__name, .mc-counter__head button { grid-column: 1; }
}
@media (min-width: 680px) {
  .mc-workspace { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .mc-counters[data-count="1"] .mc-disc { width: min(100%, 204px); }
}
@media (max-width: 420px) {
  .mc, .mc-workspace > *, .mc-options, .mc-promotion { padding-inline: var(--wg-space-3); }
}
@media (max-width: 360px) {
  .mc-fields { grid-template-columns: minmax(0, 1fr); }
}