.tc-tw-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: .9rem 0 1.25rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border, var(--grey-200));
  border-radius: var(--radius-lg, 14px);
  background: var(--white);
  box-shadow: var(--shadow, 0 8px 22px rgba(15, 43, 79, .06));
}

.tc-tw-bar__main,
.tc-tw-bar__links {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.tc-tw-bar__title {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--navy);
  font-size: .9rem;
  font-weight: 700;
}

.tc-tw-bar__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .55rem;
  border: 1px solid var(--border, var(--grey-200));
  border-radius: 999px;
  background: var(--white);
  color: var(--teal);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}

.tc-tw-bar__link:hover,
.tc-tw-bar__link:focus-visible {
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  text-decoration: none;
}

/* The workspace hub is where the other five links lead back to, so it reads as
   the primary destination rather than one of six equals. */
.tc-tw-bar__link--hub {
  background: color-mix(in srgb, var(--teal) 7%, var(--white));
  border-color: color-mix(in srgb, var(--teal) 22%, transparent);
}

.tc-tw-bar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-tw-bar__link[aria-disabled="true"] {
  color: var(--grey-500);
  cursor: not-allowed;
}

.tc-tw-bar__link[aria-disabled="true"] svg { opacity: .6; }

.tc-tw-bar__note {
  margin-left: auto;
  color: var(--grey-500);
  font-size: .75rem;
}

.tc-tw-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 7%, transparent);
  color: var(--teal);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}

.page-hero.tc-tw-hero-compact {
  padding: 1.4rem 0;
}

.page-hero.tc-tw-hero-compact h1 {
  margin-bottom: .35rem;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.page-hero.tc-tw-hero-compact p {
  max-width: 760px;
  margin-bottom: 0;
  font-size: .98rem;
}

.tc-tw-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.tc-tw-actions .btn,
.tc-tw-actions .wa-share {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.tc-tw-empty {
  padding: 1.25rem;
  text-align: center;
  color: var(--grey-500);
  background: var(--grey-50);
  border-radius: var(--radius, 10px);
}

.tc-tw-empty__icon {
  color: var(--grey-400, var(--grey-500));
  margin-bottom: .35rem;
}

/* ── Phone layout ───────────────────────────────────────────────────────────
   One full-width pill per link stacked six deep pushed the tool itself a full
   screen down the page. On a phone the bar becomes a single hairline-divided
   panel instead: the workspace hub spans the top, the four middle links pair
   two-up, and the last link closes the block — six links in four rows, with no
   blank cell in the grid. The outer card chrome is dropped so the panel itself
   is the card rather than a box inside a box.

   The 1px "borders" are the container's background showing through the grid
   gap, so cells never double up a divider. */
@media (max-width: 640px) {
  .tc-tw-bar {
    display: block;
    margin: .75rem 0 1rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .tc-tw-bar__main {
    width: 100%;
  }

  .tc-tw-bar__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    background: var(--border, var(--grey-200));
    border: 1px solid var(--border, var(--grey-200));
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    box-shadow: var(--shadow, 0 8px 22px rgba(15, 43, 79, .06));
  }

  .tc-tw-bar__link {
    justify-content: flex-start;
    gap: .4rem;
    min-height: 44px; /* stays a comfortable tap target at the smaller size */
    padding: .55rem .7rem;
    border: 0;
    border-radius: 0;
    font-size: .78rem;
  }

  /* Hub opens the panel, last link closes it — both across the full width. */
  .tc-tw-bar__links > :first-child,
  .tc-tw-bar__links > :last-child {
    grid-column: 1 / -1;
  }

  /* Focus ring must sit inside the cell — an offset ring is clipped by the
     panel's overflow:hidden and disappears on the edge links. */
  .tc-tw-bar__link:hover,
  .tc-tw-bar__link:focus-visible {
    outline-offset: -2px;
  }

  .tc-tw-bar__note {
    display: block;
    margin: .5rem 0 0;
  }
}

/* ── Share link panel (dashboard/calculations.php) ──────────────────────────
   Renders in a row directly under the calculation it belongs to. The URL is a
   read-only field with its own Copy button rather than raw text, because the
   token is ~100 chars and wrapped prose is neither readable nor reliably
   selectable on a phone. */
.tc-share {
  background: var(--grey-50, #f8fafc);
  border-top: 1px solid var(--grey-200, #e2e8f0);
  padding: .9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.tc-share__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.tc-share__title {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
}

.tc-share__expiry {
  font-size: .75rem;
  color: var(--gold, #b45309);
  font-weight: 600;
}

.tc-share__row {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* Truncate rather than wrap — a clipped multi-line token reads as broken. */
.tc-share__url {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  text-overflow: ellipsis;
  background: #fff;
}

.tc-share__copy { flex: 0 0 auto; white-space: nowrap; }
.tc-share__copy.is-copied { background: var(--teal-light, #1d9e75); border-color: var(--teal-light, #1d9e75); }

.tc-share__note {
  margin: 0;
  font-size: .76rem;
  color: var(--grey-600, #475569);
  line-height: 1.5;
}

.tc-share__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

.tc-share__revoke { color: var(--red, #dc2626); margin-left: auto; }

@media (max-width: 640px) {
  .tc-share__row { flex-direction: column; align-items: stretch; }
  .tc-share__copy { width: 100%; justify-content: center; }
  .tc-share__revoke { margin-left: 0; }
  .tc-share__actions > * { flex: 1; justify-content: center; }
}

/* ── Tool Projects (dashboard/tool-projects.php) ───────────────────────────
   A project card has a read state and an edit state. Previously every card
   rendered a pre-filled text input permanently, with Delete sitting beside
   Rename — so the name never looked settled and the destructive action was one
   mis-tap away from a text field. */
.tc-proj-create {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.tc-proj-create .btn { margin-top: 1.55rem; }

.tc-proj {
  padding: .9rem;
  border-left: 3px solid var(--grey-200, #e2e8f0);
}
.tc-proj.is-selected { border-left-color: var(--teal); }

.tc-proj__view {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.tc-proj__main { min-width: 0; }

.tc-proj__name {
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.tc-proj__name:hover { text-decoration: underline; }

.tc-proj__meta {
  font-size: .78rem;
  color: var(--grey-500);
  margin-top: .15rem;
}

.tc-proj__tools { display: flex; gap: .4rem; flex-wrap: wrap; flex: 0 0 auto; }

.tc-proj__edit { display: flex; flex-direction: column; gap: .75rem; }

.tc-proj__edit-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Destructive action is pushed away from Save and coloured, so it is never the
   button you hit while aiming for the other one. */
.tc-proj__delete { color: var(--red, #dc2626); margin-left: auto; }

@media (max-width: 640px) {
  .tc-proj-create { flex-direction: column; align-items: stretch; }
  .tc-proj-create .btn { margin-top: 0; width: 100%; justify-content: center; }
  .tc-proj__tools { width: 100%; }
  .tc-proj__tools > * { flex: 1; justify-content: center; }
  .tc-proj__edit-actions > * { flex: 1 1 100%; justify-content: center; }
  /* On a phone give the delete real separation from Save. */
  .tc-proj__delete { margin-left: 0; margin-top: .35rem; }
}