/* Admin and vendor tools: same tokens, denser layout (design.md section 9). */
.tool { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.tool-nav { border-right: 1px solid var(--line); padding: 32px 0; display: flex; flex-direction: column; }
.tool-brand { padding: 0 24px 32px; }
.tool-brand .wordmark { font: 400 22px/1.2 var(--font-display); display: block; }
.tool-nav ul { list-style: none; margin: 0; padding: 0; }
.tool-nav li a { display: block; padding: 8px 24px; text-decoration: none; font-size: 15px;
                 border-left: 2px solid transparent; }
.tool-nav li a[aria-current="page"] { border-left-color: var(--ink); }
.tool-nav li a:hover { color: var(--ink-soft); }
.tool-user { margin-top: auto; padding: 24px 24px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.tool-user form { margin-top: 4px; }
.tool-main { padding: 48px; max-width: 1200px; }
.tool-main h1 { font-size: 32px; line-height: 1.15; margin-bottom: 8px; }
.tool-main .intro { color: var(--ink-soft); max-width: 64ch; margin: 0 0 48px; }
.empty { border-top: 1px solid var(--line); padding-top: 24px; color: var(--ink-soft); max-width: 64ch; }

@media (max-width: 899px) {
  .tool { grid-template-columns: 1fr; }
  .tool-nav { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 0; flex-direction: row;
              align-items: center; flex-wrap: wrap; }
  .tool-brand { padding: 0 20px; }
  .tool-nav ul { display: flex; }
  .tool-nav li a { padding: 8px 12px; border-left: 0; border-bottom: 2px solid transparent; }
  .tool-nav li a[aria-current="page"] { border-bottom-color: var(--ink); }
  .tool-user { margin: 0 0 0 auto; padding: 0 20px; border-top: 0; }
  .tool-main { padding: 32px 20px; }
  .tool-main h1 { font-size: 26px; }
}

/* Sign in */
.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.signin-box { width: 100%; max-width: 360px; }
.signin-box .wordmark { font: 400 28px/1.2 var(--font-display); display: block; margin-bottom: 4px; }
.signin-box .label { display: block; margin-bottom: 48px; }
.signin-box h1 { font-size: 26px; line-height: 1.15; margin-bottom: 32px; }

/* Page structure */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
.page-head h1 { margin-bottom: 8px; }
.crumb { font-size: 14px; line-height: 1.5; margin: 0 0 8px; color: var(--ink-soft); }
.tabs { display: flex; gap: 24px; margin: 0; font-size: 15px; }
.tabs a { text-decoration: none; color: var(--ink-soft); padding-bottom: 4px; border-bottom: 1px solid transparent; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.block { margin-top: 64px; }
.block h2 { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
.block > .intro { margin-bottom: 24px; }
.block.danger { border-top: 1px solid var(--line); padding-top: 24px; }
.form-narrow { max-width: 560px; }
.inline-form { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.inline-form .field { margin-bottom: 0; min-width: 200px; }
.input-short { max-width: 120px; }

/* Messages */
.flash { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--line); font-size: 14px; line-height: 1.5; max-width: 720px; }
.flash-error { color: var(--alert); border-color: var(--alert); }

/* Tables: 44px rows, hairlines between rows only, numbers right aligned in mono */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font: 500 12px/1.4 var(--font-text); letter-spacing: .08em; text-transform: uppercase;
            color: var(--ink-soft); padding: 0 16px 12px 0; border-bottom: 1px solid var(--line); }
.table td { height: 44px; padding: 4px 16px 4px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table .num { text-align: right; }
.table td a { text-decoration: none; }
.table td a:hover { text-decoration: underline; }
.col-thumb { width: 52px; }
.col-thumb img, .thumb-empty { display: block; width: 36px; height: 36px; object-fit: cover; background: var(--stone); }
.status-on { color: var(--leaf); }
.table-form input:not([type="checkbox"]) { height: 36px; padding: 0 8px; border: 1px solid var(--line); font: inherit; width: 100%; min-width: 120px; }
.table-form input:focus { outline: none; border-color: var(--leaf); }
.table-form .input-price { text-align: right; max-width: 140px; margin-left: auto; display: block; }
.table-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form { display: inline; margin-left: 16px; }

/* Photos */
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; }
.photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--stone); }
.photo-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; min-height: 24px; }
.photo-actions form { display: inline; }

/* Overview metrics: plain numbers, no cards */
.metrics { display: flex; gap: 64px; flex-wrap: wrap; margin-bottom: 48px; }
.metric { display: flex; flex-direction: column; }
.metric-value { font: 400 32px/1.15 var(--font-display); }