.tm-date-time-calculator{container-type:inline-size}.tm-date-time-calculator__controls{display:flex;flex-direction:column;gap:var(--spacing-5)}.tm-date-time-calculator__field-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.tm-date-time-calculator__label{display:block;margin-bottom:var(--spacing-2);font-size:12px;font-weight:600;color:var(--color-text-2);text-transform:uppercase;letter-spacing:.05em}.tm-date-time-calculator__input{width:100%;padding:9px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--fs-body);font-family:var(--font-mono);transition:border-color .15s}.tm-date-time-calculator__input:focus-visible{border-color:var(--cat-time-fg, var(--color-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--cat-time-fg, var(--color-accent)) 18%,transparent)}.tm-date-time-calculator__input--qty{max-width:90px}.tm-date-time-calculator__input--time{max-width:110px}.tm-date-time-calculator__help{font-size:var(--fs-body-sm);color:var(--color-text-3);margin:0}.tm-date-time-calculator__field-error{font-size:var(--fs-body-sm);color:var(--color-error, #dc2626);margin:0}.tm-date-time-calculator__seg-row{display:flex;flex-wrap:wrap;gap:6px}.tm-date-time-calculator__seg{padding:7px 14px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text-2);font-size:var(--fs-body-sm);font-weight:500;cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.tm-date-time-calculator__seg:hover{background:var(--color-bg-2)}.tm-date-time-calculator__seg--active{background:color-mix(in srgb,var(--cat-time-fg, var(--color-accent)) 12%,var(--color-bg));border-color:var(--cat-time-fg, var(--color-accent));color:var(--cat-time-fg, var(--color-accent))}.tm-date-time-calculator__seg:focus-visible{outline:2px solid var(--cat-time-fg, var(--color-accent));outline-offset:2px}.tm-date-time-calculator__ampm{display:flex;gap:0;flex-shrink:0}.tm-date-time-calculator__ampm-btn{padding:7px 12px;border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-2);font-size:var(--fs-body-sm);font-weight:500;cursor:pointer;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s}.tm-date-time-calculator__ampm-btn:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}.tm-date-time-calculator__ampm-btn:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0;border-left:none}.tm-date-time-calculator__ampm-btn--active{background:color-mix(in srgb,var(--cat-time-fg, var(--color-accent)) 12%,var(--color-bg));border-color:var(--cat-time-fg, var(--color-accent));color:var(--cat-time-fg, var(--color-accent))}.tm-date-time-calculator__ampm-btn:focus-visible{outline:2px solid var(--cat-time-fg, var(--color-accent));outline-offset:2px;z-index:1}.tm-date-time-calculator__datetime-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tm-date-time-calculator__calendar{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);padding:var(--spacing-3);display:flex;flex-direction:column;gap:var(--spacing-2)}.tm-date-time-calculator__cal-nav{display:flex;align-items:center;gap:4px}.tm-date-time-calculator__cal-nav-btn{padding:5px 9px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text-2);font-size:14px;cursor:pointer;flex-shrink:0;min-height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center;transition:background .12s}.tm-date-time-calculator__cal-nav-btn:hover{background:var(--color-bg-2)}.tm-date-time-calculator__cal-nav-btn:focus-visible{outline:2px solid var(--cat-time-fg, var(--color-accent));outline-offset:2px}.tm-date-time-calculator__cal-title{flex:1;text-align:center;font-size:var(--fs-body-sm);font-weight:600;color:var(--color-text)}.tm-date-time-calculator__cal-grid{display:flex;flex-direction:column;gap:2px}.tm-date-time-calculator__cal-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.tm-date-time-calculator__cal-dow{font-size:11px;font-weight:600;text-align:center;color:var(--color-text-3);padding:4px 2px;text-transform:uppercase;letter-spacing:.04em}.tm-date-time-calculator__cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-size:13px;cursor:pointer;transition:background .1s,color .1s;min-height:28px;width:100%}.tm-date-time-calculator__cal-day:hover:not(:disabled){background:var(--color-bg-2)}.tm-date-time-calculator__cal-day.selected{background:var(--cat-time-fg, var(--color-accent));color:var(--cat-time-bg, var(--color-bg));font-weight:600;border-radius:var(--radius-full)}.tm-date-time-calculator__cal-day--today:not(.selected){font-weight:700;color:var(--cat-time-fg, var(--color-accent))}.tm-date-time-calculator__cal-day--muted{visibility:hidden;pointer-events:none}.tm-date-time-calculator__cal-day:focus-visible{outline:2px solid var(--cat-time-fg, var(--color-accent));outline-offset:2px}.tm-date-time-calculator__cal-footer{display:flex;justify-content:center;padding-top:var(--spacing-1)}.tm-date-time-calculator__dur-actions{display:flex;gap:10px;flex-wrap:wrap}.tm-date-time-calculator .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);font:inherit;font-size:var(--fs-body-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}.tm-date-time-calculator .btn-primary{background:var(--cat-time-fg, var(--color-accent));color:#fff;border-color:var(--cat-time-fg, var(--color-accent))}.tm-date-time-calculator .btn-primary:hover:not(:disabled){opacity:.9}.tm-date-time-calculator .btn-primary:disabled{opacity:.5;cursor:not-allowed}.tm-date-time-calculator .btn-secondary{background:var(--color-bg-2);color:var(--color-text-2);border-color:var(--color-border)}.tm-date-time-calculator .btn-secondary:hover:not(:disabled){background:var(--color-bg-3)}.tm-date-time-calculator .btn:focus-visible{outline:2px solid var(--cat-time-fg, var(--color-accent));outline-offset:2px}.tm-date-time-calculator__primary{display:flex;flex-direction:column;gap:var(--spacing-4)}.tm-date-time-calculator__equation{font-size:var(--fs-body-sm);color:var(--color-text-3);font-family:var(--font-mono);background:var(--color-code-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:6px 12px;margin:0}.tm-date-time-calculator__result{display:flex;flex-direction:column;gap:var(--spacing-3);padding:var(--spacing-6) var(--spacing-5);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:linear-gradient(150deg,color-mix(in srgb,var(--cat-time-fg, var(--color-accent)) 7%,transparent),transparent 60%),var(--color-code-bg)}.tm-date-time-calculator__dow{font-size:var(--fs-body-sm);font-weight:700;color:var(--cat-time-fg, var(--color-accent));text-transform:uppercase;letter-spacing:.08em}.tm-date-time-calculator__fulldate{font-size:clamp(22px,4cqw,36px);font-weight:700;color:var(--color-text);line-height:1.1}.tm-date-time-calculator__iso-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tm-date-time-calculator__iso-tag{font-size:11px;font-weight:600;background:color-mix(in srgb,var(--cat-time-fg, var(--color-accent)) 12%,var(--color-bg));color:var(--cat-time-fg, var(--color-accent));border-radius:var(--radius-full);padding:2px 8px;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}.tm-date-time-calculator__iso-row code{font-family:var(--font-mono);font-size:var(--fs-body-sm);color:var(--color-text-2)}.tm-date-time-calculator__result-empty{padding:var(--spacing-6) var(--spacing-5);border:1px dashed var(--color-border);border-radius:var(--radius-xl);background:var(--color-bg);display:flex;align-items:center;justify-content:center;min-height:120px}.tm-date-time-calculator__empty-msg{font-size:var(--fs-body-sm);color:var(--color-text-3);text-align:center;margin:0;max-width:280px}.tm-date-time-calculator__summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-top:1px solid var(--color-border);padding-top:var(--spacing-3)}.tm-date-time-calculator__summary-cell{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.tm-date-time-calculator__summary-val{font-size:clamp(14px,2cqw,20px);font-weight:700;color:var(--color-text);font-family:var(--font-mono)}.tm-date-time-calculator__summary-lbl{font-size:10px;color:var(--color-text-3);text-align:center}.tm-date-time-calculator__dur-eyebrow{font-size:11px;font-weight:600;color:var(--color-text-3);text-transform:uppercase;letter-spacing:.08em}.tm-date-time-calculator__actions{display:flex;gap:10px;flex-wrap:wrap}.tm-date-time-calculator__note{font-size:var(--fs-body-sm);color:var(--color-text-3);margin:auto 0 0}.tm-date-time-calculator__kbd-hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-3);margin-right:56px}.tm-date-time-calculator__kbd-hint kbd{display:inline-flex;align-items:center;justify-content:center;padding:1px 6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-2);font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--color-text-2);min-width:20px}@media(max-width:680px){.tm-date-time-calculator__kbd-hint{display:none}}@container (min-width: 480px){.tm-date-time-calculator__controls:has(.tm-date-time-calculator__calendar){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--spacing-4) var(--spacing-5);align-items:start}.tm-date-time-calculator__controls:has(.tm-date-time-calculator__calendar)>.tm-date-time-calculator__field-group:first-child{grid-column:1;grid-row:1}.tm-date-time-calculator__controls:has(.tm-date-time-calculator__calendar)>.tm-date-time-calculator__calendar{grid-column:2;grid-row:1 / -1}.tm-date-time-calculator__controls:has(.tm-date-time-calculator__calendar)>.tm-date-time-calculator__field-group:not(:first-child){grid-column:1}}@container (min-width: 520px){.tm-date-time-calculator__summary{grid-template-columns:repeat(4,1fr)}.tm-date-time-calculator__fulldate{font-size:clamp(28px,5cqw,44px)}.tm-date-time-calculator__result-empty{min-height:160px}}@container (max-width: 480px){.tm-date-time-calculator__summary{grid-template-columns:repeat(2,1fr)}}