/* Tally Draft surface treatments. Decorative effects are confined to screen chrome and firm pages. */
@media screen {
  :root {
    --polish-grain: color-mix(in srgb, var(--text) 4%, transparent);
    --polish-tint: color-mix(in srgb, var(--brand-orange) 6%, transparent);
    --polish-border: color-mix(in srgb, var(--border) 72%, var(--text-muted));
    --polish-row: color-mix(in srgb, var(--brand-orange) 7%, var(--surface));
    --polish-shadow: 0 5px 18px rgba(16, 24, 40, .045), 0 1px 2px rgba(16, 24, 40, .035);
  }

  .app-global .global-main {
    background-image:
      radial-gradient(ellipse at 100% 0, var(--polish-tint), transparent 58%),
      radial-gradient(circle, var(--polish-grain) .55px, transparent .8px);
    background-size: auto, 10px 10px;
  }

  .sidebar {
    background-image:
      linear-gradient(150deg, rgba(255,255,255,.035), transparent 48%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.013) 0 1px, transparent 1px 4px);
    box-shadow: inset -1px 0 0 var(--nav-border), 3px 0 14px rgba(0,0,0,.035);
  }
  .nav-brand { border-bottom: 1px solid var(--nav-border); margin-bottom: 16px; }
  .rail-item { border: 1px solid transparent; }
  .rail-item.current {
    border-color: rgba(255,255,255,.09);
    background-image: linear-gradient(90deg, rgba(232,120,56,.10), transparent 72%);
    box-shadow: inset 3px 0 0 var(--brand-orange), 0 2px 7px rgba(0,0,0,.10);
  }
  .rail-item:focus-visible { outline: 2px solid var(--nav-focus); outline-offset: 1px; }

  .app-global .topbar {
    border-bottom-color: var(--polish-border);
    box-shadow: 0 2px 9px rgba(16,24,40,.025);
  }
  .app-global .page:not(.page-wide) > .page-header > .ph-top {
    padding: 20px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-orange);
    border-radius: 12px;
    background-color: var(--surface);
    background-image: linear-gradient(110deg, var(--polish-tint), transparent 66%);
    box-shadow: var(--polish-shadow);
  }
  .app-global .page:not(.page-wide) > .page-header .ph-crumb {
    color: var(--accent);
    letter-spacing: .09em;
  }
  .app-global .page:not(.page-wide) > .page-header .ph-desc { max-width: 78ch; line-height: 1.55; }
  .app-global .page:not(.page-wide) > .page-header .ph-actions { align-self: center; }

  .app-global .card, .app-global .facts {
    border-color: var(--polish-border);
    border-radius: 12px;
    box-shadow: var(--polish-shadow);
  }
  .app-global .card:focus-within { border-color: var(--border-strong); }
  .app-global .table-wrap {
    border-color: var(--polish-border);
    border-radius: 10px;
    box-shadow: var(--polish-shadow);
  }
  .app-global .table thead th {
    color: var(--text-2);
    background-image: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  }
  .app-global .table thead th:is([aria-sort="ascending"], [aria-sort="descending"]) { color: var(--accent); }
  .app-global .table tbody tr.row-go:not(.row-marked):is(:hover, :focus-within) td { background: var(--polish-row); }
  .app-global .table tbody tr.row-go:is(:hover, :focus-within) td:first-child,
  .app-global .table tbody tr.row-marked td:first-child { box-shadow: inset 3px 0 0 var(--brand-orange); }
  .app-global .table .row-go .cell-main,
  .app-global .table .row-go > td:first-child > .sub-link { font-weight: var(--fw-semibold); }
  .app-global .tab.on { font-weight: var(--fw-semibold); }
  .app-global .tab.on::after { height: 3px; border-radius: 3px 3px 0 0; }
  .app-global .tab.on .tab-count { color: var(--accent); background: var(--accent-soft); }

  .app-global .btn-primary:not(:disabled):not([aria-disabled="true"]),
  .login-page .btn-primary:not(:disabled):not([aria-disabled="true"]) {
    background-image: linear-gradient(180deg, rgba(255,255,255,.12), transparent);
    box-shadow: 0 2px 5px rgba(144,62,21,.16), inset 0 1px 0 rgba(255,255,255,.17);
  }
  .app-global .btn-primary:not(:disabled):not([aria-disabled="true"]):hover,
  .login-page .btn-primary:not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow: 0 3px 9px rgba(144,62,21,.22), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .app-global .btn-primary:not(:disabled):active,
  .login-page .btn-primary:not(:disabled):active { box-shadow: inset 0 1px 3px rgba(32,38,49,.15); }
  .app-global .app-column :is(.btn, .icon-btn):focus-visible,
  .login-page .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

  .app-global .empty-panel {
    background-color: var(--surface);
    background-image: linear-gradient(150deg, var(--polish-tint), transparent 60%);
    border-color: var(--polish-border);
    border-style: solid;
    border-radius: 12px;
    box-shadow: var(--polish-shadow);
    padding: 36px 20px;
  }
  .app-global .empty-panel > .icon {
    box-sizing: content-box;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 14px;
    color: var(--accent);
    background: var(--accent-soft);
  }

  .login-page {
    background-image:
      radial-gradient(ellipse at 20% 15%, var(--polish-tint), transparent 52%),
      url('/web/assets/workspace-illustration.svg'),
      radial-gradient(circle, var(--polish-grain) .55px, transparent .8px);
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: center, right bottom, center;
    background-size: auto, min(55vw, 720px) auto, 10px 10px;
  }
  .login-card {
    border-color: var(--polish-border);
    border-radius: 16px;
    box-shadow: 0 18px 52px rgba(16,24,40,.08), 0 2px 7px rgba(16,24,40,.045);
  }
  .login-brand { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }

  @media (max-width: 767px) {
    .app-global .page:not(.page-wide) > .page-header > .ph-top { padding: 16px; }
    .app-global .page:not(.page-wide) > .page-header .ph-actions { align-self: stretch; }
    .login-page {
      background-image: radial-gradient(ellipse at 20% 15%, var(--polish-tint), transparent 65%);
      background-size: auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .app-global .btn, .login-page .btn, .app-global .rail-item { transition: none; }
  }
}