/* Theme and layout tokens */
body.unix-time-page {
  color-scheme: light;
  --unix-page: #f4f6f8;
  --unix-surface: #ffffff;
  --unix-surface-soft: #f6f8fa;
  --unix-border: #d0d7de;
  --unix-text: #1f2328;
  --unix-muted: #57606a;
  --unix-accent: #0969da;
  --unix-accent-hover: #0757b5;
  --unix-success: #1a7f37;
  --unix-warning: #9a6700;
  --unix-danger: #cf222e;
  --unix-notice-text: #0550ae;
  --unix-notice-bg: #ddf4ff;
  --unix-notice-border: #b6e3ff;
  --unix-focus: rgba(9, 105, 218, 0.24);
  --unix-shadow: 0 14px 36px rgba(31, 35, 40, 0.07);
  --unix-radius: 12px;
  --unix-control-radius: 8px;
  --unix-control-height: 40px;
  --unix-copy-height: 30px;
  --unix-border-rule: 1px solid var(--unix-border);
  --unix-code-font: "Cascadia Code", Consolas, monospace;
  --unix-page-max-width: 1380px;
  --unix-page-inline-gap: 32px;
  --unix-page-inline-gap-mobile: 24px;
  --unix-page-padding-block: 38px;
  --unix-page-padding-block-mobile: 24px;
  --unix-panel-gap: 16px;
  --unix-panel-padding: 18px;
  --unix-panel-padding-mobile: 14px;
  --unix-heading-gap: 14px;
  --unix-grid-gap: 12px;
  --unix-action-gap: 8px;
  --unix-field-gap: 6px;
  --unix-message-gap: 10px;
  --unix-section-gap: 18px;
  --unix-about-column-gap: 24px;
  --unix-notice-padding: 12px 14px;
  --unix-card-padding: 11px 12px;
  --unix-control-padding: 7px 10px;
  --unix-button-padding: 7px 13px;
  --unix-copy-padding: 3px 9px;
  --unix-privacy-padding: 11px 13px;
  --unix-font-label: 0.82rem;
  --unix-font-small: 0.9rem;
  --unix-font-code: 0.86rem;
  --unix-font-copy: 0.78rem;
  --unix-page-title-size: clamp(1.7rem, 3vw, 2.2rem);
  --unix-panel-title-size: 1.1rem;
  --unix-result-title-size: 1rem;
  --unix-form-column-min: 180px;
  --unix-timestamp-column-min: 280px;
  --unix-unit-column-min: 160px;
  --unix-zone-column-min: 220px;
  --unix-message-min-height: 22px;
  --unix-focus-width: 3px;
  --unix-focus-offset: 2px;
  min-block-size: 100vh;
  margin: 0;
  color: var(--unix-text);
  background: var(--unix-page);
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
}

/* Page foundation */
.unix-time-page,
.unix-time-page * {
  box-sizing: border-box;
}

.unix-time-page [hidden] {
  display: none !important;
}

.unix-time-main {
  inline-size: min(var(--unix-page-max-width), calc(100% - var(--unix-page-inline-gap)));
  margin-inline: auto;
  padding-block: var(--unix-page-padding-block);
}

.unix-time-page-header {
  margin-block-end: var(--unix-section-gap);
}

.unix-time-page-header h1 {
  margin: 0;
  font-size: var(--unix-page-title-size);
}

.unix-time-page-header > p,
.unix-time-panel-heading p {
  margin-block: 7px 0;
  color: var(--unix-muted);
  line-height: 1.65;
}

.unix-time-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--unix-action-gap);
  margin-block-end: var(--unix-grid-gap);
  color: var(--unix-muted);
  font-size: var(--unix-font-small);
}

.unix-time-main a {
  color: var(--unix-accent);
  font-weight: 700;
  text-decoration: none;
}

.unix-time-main a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

/* Panels and notices */
.unix-time-notice,
.unix-time-panel {
  margin-block-end: var(--unix-panel-gap);
  border: var(--unix-border-rule);
  border-radius: var(--unix-radius);
  background: var(--unix-surface);
  box-shadow: var(--unix-shadow);
}

.unix-time-notice {
  padding: var(--unix-notice-padding);
  border-color: var(--unix-notice-border);
  color: var(--unix-notice-text);
  background: var(--unix-notice-bg);
  line-height: 1.65;
}

.unix-time-panel {
  padding: var(--unix-panel-padding);
}

.unix-time-panel-heading {
  margin-block-end: var(--unix-heading-gap);
}

.unix-time-panel-heading--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--unix-panel-gap);
}

.unix-time-panel :is(h2, h3) {
  margin-block-start: 0;
}

.unix-time-panel h2 {
  margin-block-end: 0;
  font-size: var(--unix-panel-title-size);
}

/* Data grids */
.unix-time-live-grid,
.unix-time-result-grid,
.unix-time-about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--unix-grid-gap);
}

.unix-time-live-grid,
.unix-time-result-grid {
  margin: 0;
}

:where(.unix-time-live-grid, .unix-time-result-grid) > div.unix-time-data-card {
  min-inline-size: 0;
  padding: var(--unix-card-padding);
  border: var(--unix-border-rule);
  border-radius: var(--unix-control-radius);
  background: var(--unix-surface-soft);
}

:where(.unix-time-live-grid, .unix-time-result-grid) dt.unix-time-data-label {
  color: var(--unix-muted);
  font-size: var(--unix-font-label);
  font-weight: 700;
}

:where(.unix-time-live-grid, .unix-time-result-grid) dd.unix-time-data-value {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

:where(.unix-time-live-grid) dd.unix-time-data-value {
  font: 700 var(--unix-font-small)/1.55 var(--unix-code-font);
}

/* Forms and actions */
.unix-time-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--unix-form-column-min), 1fr));
  gap: var(--unix-grid-gap);
}

.unix-time-form-grid--timestamp {
  grid-template-columns:
    minmax(var(--unix-timestamp-column-min), 2fr)
    minmax(var(--unix-unit-column-min), 0.8fr)
    minmax(var(--unix-zone-column-min), 1fr);
}

.unix-time-field {
  display: grid;
  align-content: start;
  gap: var(--unix-field-gap);
  color: var(--unix-muted);
  font-weight: 700;
}

.unix-time-control,
.unix-time-button,
.unix-time-copy {
  border: var(--unix-border-rule);
  border-radius: var(--unix-control-radius);
  color: var(--unix-text);
  background: var(--unix-surface);
  font: inherit;
}

.unix-time-control {
  inline-size: 100%;
  min-block-size: var(--unix-control-height);
  padding: var(--unix-control-padding);
}

.unix-time-code-input,
.unix-time-result-grid code {
  font-family: var(--unix-code-font);
}

.unix-time-button {
  min-block-size: var(--unix-control-height);
  padding: var(--unix-button-padding);
  background: var(--unix-surface-soft);
}

.unix-time-button,
.unix-time-copy {
  font-weight: 700;
  cursor: pointer;
}

.unix-time-button:hover:not(:disabled),
.unix-time-copy:hover:not(:disabled) {
  border-color: var(--unix-accent);
  color: var(--unix-accent);
}

.unix-time-button--primary {
  border-color: var(--unix-accent);
  color: #ffffff;
  background: var(--unix-accent);
}

.unix-time-button--primary:hover:not(:disabled) {
  border-color: var(--unix-accent-hover);
  color: #ffffff;
  background: var(--unix-accent-hover);
}

.unix-time-page :is(button, input, select):focus-visible {
  outline: var(--unix-focus-width) solid var(--unix-focus);
  outline-offset: var(--unix-focus-offset);
}

.unix-time-page :is(button, input, select):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.unix-time-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--unix-action-gap);
  margin-block-start: var(--unix-heading-gap);
}

.unix-time-message {
  min-block-size: var(--unix-message-min-height);
  margin-block: var(--unix-message-gap) 0;
  color: var(--unix-muted);
  font-size: var(--unix-font-small);
}

.unix-time-message[data-type="success"] {
  color: var(--unix-success);
}

.unix-time-message[data-type="warning"] {
  color: var(--unix-warning);
}

.unix-time-message[data-type="error"] {
  color: var(--unix-danger);
}

/* Conversion results */
.unix-time-result {
  margin-block-start: var(--unix-section-gap);
  padding-block-start: var(--unix-section-gap);
  border-block-start: var(--unix-border-rule);
}

.unix-time-result h3 {
  margin-block-end: var(--unix-grid-gap);
  font-size: var(--unix-result-title-size);
}

:where(.unix-time-result-grid) dd.unix-time-data-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--unix-action-gap);
}

code.unix-time-result-code {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-size: var(--unix-font-code);
  line-height: 1.6;
}

.unix-time-copy {
  min-block-size: var(--unix-copy-height);
  padding: var(--unix-copy-padding);
  font-size: var(--unix-font-copy);
}

/* Tool description */
.unix-time-about > p,
.unix-time-about li {
  line-height: 1.7;
}

.unix-time-about-grid {
  gap: var(--unix-about-column-gap);
  margin-block-start: var(--unix-section-gap);
}

.unix-time-privacy {
  margin-block: var(--unix-section-gap) 0;
  padding: var(--unix-privacy-padding);
  border: var(--unix-border-rule);
  border-color: var(--unix-notice-border);
  border-radius: var(--unix-control-radius);
  color: var(--unix-notice-text);
  background: var(--unix-notice-bg);
}

/* Color scheme */
@media (prefers-color-scheme: dark) {
  body.unix-time-page {
    color-scheme: dark;
    --unix-page: #0f141b;
    --unix-surface: #151b23;
    --unix-surface-soft: #1d2530;
    --unix-border: #3a4656;
    --unix-text: #e6edf3;
    --unix-muted: #9ba8b7;
    --unix-notice-text: #9cdcff;
    --unix-notice-bg: #10293a;
    --unix-notice-border: #285875;
    --unix-success: #85d4aa;
    --unix-warning: #f3c777;
    --unix-danger: #ffaaa3;
    --unix-shadow: none;
  }
}

/* Responsive layout */
@media (max-width: 900px) {
  .unix-time-form-grid,
  .unix-time-form-grid--timestamp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .unix-time-main {
    inline-size: min(
      calc(100% - var(--unix-page-inline-gap-mobile)),
      var(--unix-page-max-width)
    );
    padding-block: var(--unix-page-padding-block-mobile);
  }

  .unix-time-panel {
    padding: var(--unix-panel-padding-mobile);
  }

  .unix-time-panel-heading--row {
    align-items: stretch;
    flex-direction: column;
  }

  .unix-time-live-grid,
  .unix-time-result-grid,
  .unix-time-about-grid,
  .unix-time-form-grid,
  .unix-time-form-grid--timestamp {
    grid-template-columns: 1fr;
  }

  .unix-time-actions .unix-time-button {
    flex: 1 1 calc(50% - var(--unix-action-gap));
  }
}