/* Workout Log Suite v0.6.1 */
:root {
  --wl-suite-bg: #070a09;
  --wl-suite-panel: #111713;
  --wl-suite-panel-2: #151d18;
  --wl-suite-line: rgba(206, 255, 63, .28);
  --wl-suite-accent: #cfff3f;
  --wl-suite-text: #f5f7f0;
  --wl-suite-muted: #9ca69d;
  --wl-suite-danger: #ff7474;
}
.wl-suite-dialog,
.wl-suite-subdialog {
  border: 1px solid var(--wl-suite-line);
  background: var(--wl-suite-bg);
  color: var(--wl-suite-text);
  padding: 0;
  margin: 0;
  width: min(100vw, 760px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  inset: 0 0 0 auto;
}
.wl-suite-dialog::backdrop,
.wl-suite-subdialog::backdrop {
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(9px);
}
.wl-suite-subdialog {
  width: min(100vw, 620px);
}
.wl-suite-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
}
.wl-suite-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 18px) 20px 16px;
  background: rgba(7, 10, 9, .96);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.wl-suite-header small,
.wl-suite-section header small {
  color: var(--wl-suite-accent);
  display: block;
  margin-bottom: 4px;
}
.wl-suite-header h1,
.wl-suite-section h2,
.wl-suite-form h2,
.wl-suite-form h3 {
  margin: 0;
  font-family: inherit;
  letter-spacing: .02em;
}
.wl-suite-header h1 { font-size: 25px; }
.wl-suite-header > button,
.wl-suite-form header > button {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: var(--wl-suite-panel);
  color: var(--wl-suite-text);
  font-size: 28px;
}
.wl-suite-nav {
  position: sticky;
  top: calc(env(safe-area-inset-top) + 83px);
  z-index: 7;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: rgba(7, 10, 9, .96);
  border-bottom: 1px solid rgba(255,255,255,.08);
  scrollbar-width: none;
}
.wl-suite-nav::-webkit-scrollbar { display: none; }
.wl-suite-nav button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: var(--wl-suite-muted);
  background: var(--wl-suite-panel);
  font-weight: 700;
}
.wl-suite-nav button.is-active {
  color: #111;
  background: var(--wl-suite-accent);
  border-color: var(--wl-suite-accent);
}
.wl-suite-main {
  overflow-y: auto;
  padding: 18px 16px calc(40px + env(safe-area-inset-bottom));
}
.wl-suite-section {
  display: grid;
  gap: 16px;
}
.wl-suite-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.wl-suite-section > header button,
.wl-suite-back {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--wl-suite-line);
  border-radius: 13px;
  background: var(--wl-suite-panel);
  color: var(--wl-suite-accent);
}
.wl-suite-help,
.wl-suite-editor-note {
  margin: 0;
  color: var(--wl-suite-muted);
  line-height: 1.7;
}
.wl-suite-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wl-suite-stat-grid article {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 17px;
  background: var(--wl-suite-panel);
}
.wl-suite-stat-grid small { display: block; color: var(--wl-suite-muted); }
.wl-suite-stat-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 21px;
  overflow-wrap: anywhere;
}
.wl-suite-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.wl-suite-action-grid button,
.wl-suite-entry {
  min-height: 68px;
  padding: 14px;
  border: 1px solid var(--wl-suite-line);
  border-radius: 17px;
  background: var(--wl-suite-panel);
  color: var(--wl-suite-text);
  font-weight: 800;
}
.wl-suite-entry {
  display: grid;
  width: 100%;
  text-align: left;
}
.wl-suite-entry small { color: var(--wl-suite-muted); font-weight: 500; margin-top: 4px; }
.wl-suite-info,
.wl-suite-warning,
.wl-suite-success {
  display: grid;
  gap: 7px;
  padding: 15px;
  border-left: 4px solid var(--wl-suite-accent);
  border-radius: 4px 16px 16px 4px;
  background: rgba(207,255,63,.08);
  line-height: 1.65;
}
.wl-suite-warning { border-color: #f2b84b; background: rgba(242,184,75,.09); }
.wl-suite-success { color: #dfffa4; }
.wl-suite-list {
  display: grid;
  gap: 10px;
}
.wl-suite-card,
.wl-suite-set {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow: hidden;
  background: var(--wl-suite-panel);
}
.wl-suite-card-main {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 16px;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--wl-suite-text);
}
.wl-suite-card-main small,
.wl-suite-card-main span,
.wl-suite-set-summary small,
.wl-suite-set-summary em {
  color: var(--wl-suite-muted);
  font-style: normal;
}
.wl-suite-card-main strong,
.wl-suite-set-summary strong {
  font-size: 18px;
}
.wl-suite-row-actions,
.wl-suite-set-actions {
  display: flex;
  gap: 7px;
  padding: 10px;
  overflow-x: auto;
  border-top: 1px solid rgba(255,255,255,.08);
}
.wl-suite-row-actions button,
.wl-suite-set-actions button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: var(--wl-suite-panel-2);
  color: var(--wl-suite-text);
}
.wl-suite-set.is-excluded { opacity: .62; border-style: dashed; }
.wl-suite-set-summary {
  display: grid;
  gap: 5px;
  padding: 15px;
}
.wl-suite-form {
  display: grid;
  gap: 14px;
  padding: 18px;
  color: var(--wl-suite-text);
}
.wl-suite-subdialog > .wl-suite-form { min-height: 100%; }
.wl-suite-form header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.wl-suite-form label,
.wl-suite-toolbar label {
  display: grid;
  gap: 7px;
  color: var(--wl-suite-muted);
  font-weight: 700;
}
.wl-suite-form input,
.wl-suite-form select,
.wl-suite-form textarea,
.wl-suite-toolbar select,
.wl-suite-search {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  background: var(--wl-suite-panel);
  color: var(--wl-suite-text);
  padding: 10px 12px;
  font: inherit;
  box-sizing: border-box;
}
.wl-suite-form textarea { resize: vertical; }
.wl-suite-form button,
.wl-suite-toolbar button {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: var(--wl-suite-panel);
  color: var(--wl-suite-text);
  padding: 0 14px;
  font-weight: 800;
}
.wl-suite-form button.is-primary,
.wl-suite-form footer button.is-primary {
  background: var(--wl-suite-accent);
  color: #10130e;
  border-color: var(--wl-suite-accent);
}
.wl-suite-form footer {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  margin-top: 5px;
}
.wl-suite-form fieldset {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  padding: 13px;
}
.wl-suite-form legend { color: var(--wl-suite-text); padding: 0 6px; }
.wl-suite-check {
  display: flex !important;
  grid-template-columns: 24px 1fr;
  align-items: center;
}
.wl-suite-check input { width: 22px; min-height: 22px; }
.wl-suite-check-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 6px;
}
.wl-suite-check-grid label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 3px;
  border-radius: 10px;
  background: var(--wl-suite-panel);
}
.wl-suite-check-grid input { width: 16px; min-height: 16px; }
.wl-suite-grid-2,
.wl-suite-grid-3,
.wl-suite-grid-4 {
  display: grid;
  gap: 10px;
}
.wl-suite-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wl-suite-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.wl-suite-grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.wl-suite-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  align-items: end;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: var(--wl-suite-panel);
}
.wl-suite-routine-exercises {
  display: grid;
  gap: 12px;
}
.wl-suite-routine-exercises article {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: var(--wl-suite-panel);
}
.wl-suite-routine-exercises article header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wl-suite-routine-exercises article header button {
  min-height: 36px;
  color: var(--wl-suite-danger);
}
.wl-routine-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 18px;
  padding: 13px;
  border: 1px solid var(--wl-suite-line);
  border-radius: 16px;
  background: rgba(207,255,63,.08);
}
.wl-routine-banner div { display: grid; gap: 3px; min-width: 0; }
.wl-routine-banner small { color: var(--wl-suite-accent); }
.wl-routine-banner span { color: var(--wl-suite-muted); font-size: 12px; overflow-wrap: anywhere; }
.wl-routine-banner button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--wl-suite-accent);
  background: var(--wl-suite-accent);
  color: #10130e;
  font-weight: 800;
}
.wl-rest-complete strong { color: var(--wl-suite-accent) !important; }
.wl-suite-result {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--wl-suite-line);
  border-radius: 18px;
  background: rgba(207,255,63,.08);
}
.wl-suite-result strong { font-size: 23px; line-height: 1.5; }
.wl-suite-mini-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: var(--wl-suite-panel);
}
.wl-suite-mini-row button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: var(--wl-suite-panel-2);
  color: var(--wl-suite-text);
}
.wl-suite-tabs-mini,
.wl-suite-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.wl-suite-tabs-mini button,
.wl-suite-chip-row span {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: var(--wl-suite-panel);
  color: var(--wl-suite-text);
}
.wl-suite-table {
  display: grid;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  overflow: hidden;
}
.wl-suite-table > div {
  display: grid;
  grid-template-columns: minmax(120px,1fr) auto auto auto;
  gap: 9px;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  align-items: center;
}
.wl-suite-table > div:last-child { border-bottom: 0; }
.wl-suite-table span { color: var(--wl-suite-muted); font-size: 12px; text-align: right; }
.wl-suite-bars { display: grid; gap: 10px; }
.wl-suite-bars > div { display: grid; grid-template-columns: 90px 1fr 40px; gap: 10px; align-items: center; }
.wl-suite-bars i {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--wl-suite-accent) var(--value),rgba(255,255,255,.1) var(--value));
}
.wl-suite-details {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: var(--wl-suite-panel);
}
.wl-suite-details summary { font-weight: 800; cursor: pointer; }
.wl-suite-details li { margin: 6px 0; color: var(--wl-suite-muted); }
.wl-suite-empty { color: var(--wl-suite-muted); text-align: center; padding: 24px; }
.wl-suite-toast {
  position: fixed;
  z-index: 2147483000;
  left: 50%;
  bottom: calc(122px + env(safe-area-inset-bottom));
  transform: translate(-50%, 18px);
  opacity: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: calc(100vw - 28px);
  padding: 11px 13px;
  border: 1px solid var(--wl-suite-line);
  border-radius: 999px;
  background: rgba(10,15,12,.97);
  color: var(--wl-suite-text);
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  transition: .2s ease;
}
.wl-suite-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.wl-suite-toast button {
  flex: 0 0 auto;
  border: 0;
  background: var(--wl-suite-accent);
  color: #10130e;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  font-weight: 800;
}
.wl-suite-left-handed .record-page .large-step-button:first-child { order: 3; }
.wl-suite-left-handed .record-page .number-display-line { order: 2; }
.wl-suite-reduce-motion *,
.wl-suite-reduce-motion *::before,
.wl-suite-reduce-motion *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
@media (max-width: 560px) {
  .wl-suite-action-grid { grid-template-columns: 1fr; }
  .wl-suite-grid-3,
  .wl-suite-grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wl-suite-table > div { grid-template-columns: 1fr auto; }
  .wl-suite-table > div span:nth-of-type(n+2) { display: none; }
  .wl-suite-toolbar { grid-template-columns: 1fr; }
  .wl-suite-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wl-routine-banner { margin: 8px 12px; }
}
@media (max-width: 380px) {
  .wl-suite-grid-2,
  .wl-suite-grid-3,
  .wl-suite-grid-4 { grid-template-columns: 1fr; }
}
